注意Validate的导入要在jQuery库之后。代码如下：
先导入jQuery库，然后导入Validate插件，如果是中文提示还需要导入messages_zh.js。
<script src="jQuery.1.8.3.js" type="text/javascript"></script> <script src="jquery.validate.js" type="text/javascript"></script> <script src="messages_cn.js" type="text/javascript"></script>
该插件自带包含必填数字url在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,
调用的方法
$(form).validate({options})
from参数表示表单元素名称,options表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在对象内进行设置
<body>
<form id="frmV" method="get" action="#">
<div id="divtest">
<div class="title">
<span class="fl">表单验证插件</span>
<span class="fr">
<input id="btnSubmit" type="submit" value="提交" />
</span>
</div>
<div class="content">
<span class="fl">邮箱：</span><br />
<input id="email" name="email" type="text" /><br />
<span class="tip"></span>
</div>
</div>
</form>
<script type="text/javascript">
$(function () {
$("#frmV").validate(
{
/*自定义验证规则*/
rules: {
email:{required:true,
email:true
}
},
/*错误提示位置*/
errorPlacement: function (error, element) {
error.appendTo(".tip");
}
}
);
});
</script>
</body>
当点击表单中的提交按钮时,调用validate插件验证用户输入是否符合规则,并将异常信息显示在页面
图片放大插件
2图片放大镜插件
$(linkimage).jqzoom({options})
在调用jqzoom图片放大插件时,需要准备一大一小两张一样的图片,在页面中显示小图片,当鼠标在小图片中移动是,调用该插件jqzoom()方法,显示与小图片相同的大图片区域,从而实现放大的效果
<body>
<div id="divtest">
<div class="title">
<span class="fl">图片放大镜</span>
</div>
<div class="content">
<a href="image/tupian.jpg" id="jqzoom" title="小兔子乖乖">
<img src="image/tupian1.jpg" alt=""/>
</a>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#jqzoom").jqzoom({
zoomWidth: 123, //小图片所选区域的宽
zoomHeight: 123, //小图片所选区域的高
zoomType: 'reverse' //设置放大镜的类型
});
});
</script>
</body>
图片灯箱插件
该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片
$(linkimage).lightBox({options})
例如:以列表的方式在页面中展示全部的图片,当用户点击某张图片时,t通过引入大的图片插件,采用""灯箱的方式显示所选你的图
$(function () {
$('.divPics a').lightBox({
overlayBgColor: "#666", //图片浏览时的背景色
overlayOpacity: 0.5, //背景色的透明度
containerResizeSpeed: 600 //图片切换时的速度
})
});
相关推荐
jquery插件库大全（200个）： jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...
"jquery插件库-jquery仿京东商品详情页图片放大效果.zip"这个压缩包文件包含了一个jQuery插件，旨在模仿京东商品详情页中的图片放大效果，为用户提供更直观的商品查看体验。 首先，我们来详细了解一下jQuery插件的...
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
你可以通过查看源代码来学习其工作原理，这对于初学者或者希望深入了解jQuery插件开发的人来说是一个很好的学习机会。 标签“清除html格式”是这个插件的核心特性，它可能包括移除HTML标签、属性、样式以及其他非...
《jQuery插件开发详解》 在Web开发领域，jQuery是一个广泛应用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作等任务。jQuery插件是jQuery生态系统的重要组成部分，它们扩展了jQuery的核心...
JQuery插件是JavaScript库JQuery生态中的一个重要组成部分，它扩展了JQuery的基本功能，为开发者提供了更加丰富和便捷的API来实现各种复杂的交互效果和动画。在网页开发中，JQuery插件广泛应用于增强用户体验、创建...
2. **多媒体播放**：jQuery插件如`jQuery.media`和`jPlayer`提供了优雅的方式来处理视频和音频播放，支持多种格式，提供自定义的播放器皮肤和控制选项，使开发者能够创建互动性强的多媒体体验。 3. **DOM操作和事件...
1. **jQuery插件的原理**：jQuery插件是基于jQuery核心功能扩展的功能模块，通过$.fn.extend()方法，将新方法添加到jQuery对象的prototype上，使得所有jQuery选择器都能调用这些新方法。 2. **DOM操作**：jQuery...
本主题聚焦于"java源代码，主要是jquery插件的利用"，这意味着我们将探讨如何在Java后端项目中集成与使用jQuery插件，以及相关的编程实践。 首先，我们需要理解jQuery是一个JavaScript库，它通过提供简洁的API来...
"50个jQuery插件介绍"这篇文档很可能包含了对各种功能强大、用途广泛的jQuery插件的详细解读，帮助开发者提升网站的用户体验和功能实现。 首先，jQuery插件是jQuery库的扩展，由社区开发者创建，用于解决特定问题或...
在Sublime Text 2中安装jQuery插件，可以极大地提升前端开发者的工作效率，使得jQuery代码的编写更加得心应手。 jQuery是一种强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务，极大地...
**jQuery插件大全：打造网页交互新体验** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。这个"jQuery插件大全（内含Demo）"压缩包文件提供了丰富的...
jQuery作为JavaScript领域中广泛使用的库之一，提供了快速、简洁的DOM操作和事件处理方式，而jQuery插件则是扩展jQuery功能的重要手段。本知识点将详细介绍如何开发jQuery插件，并总结五种常见的形态。 ### 一、...
标题“eclipse上支持jquery插件”所指的就是这种能够为Eclipse添加jQuery智能提示和代码辅助功能的扩展。这样的插件使得开发者在编写jQuery代码时，可以享受到如同使用Java或其他语言一样的代码补全、错误检查和调试...
本文将深入探讨“很好用的Jquery插件”，并介绍几个常用插件及其简单使用方法，这对于在项目中提升用户体验具有显著帮助。 首先，jQuery库的核心优势在于它的API设计，它提供了丰富的选择器、DOM操作、事件处理和...
**jQuery插件详解** jQuery，一个轻量级、高性能的JavaScript库，因其简洁的API和强大的功能，成为了前端开发中的必备工具。jQuery插件是jQuery生态的重要组成部分，它们扩展了jQuery的基本功能，使得开发者能够更...
Eclipse 中 jQuery 插件配置详解 在 Eclipse 中配置 jQuery 插件可以实现智能提示功能，提高编码效率。下面详细介绍了 jQuery 插件配置的步骤和注意事项。 Eclipse 中 jQuery 插件配置步骤 1. 下载 jQueryWTP ...
而jQuery插件则是开发者为了扩展jQuery功能，实现特定效果或工具所编写的代码模块。这些插件极大地丰富了jQuery的功能，使得网页开发更加高效便捷。 ### 1. jQuery插件的结构 一个基本的jQuery插件通常包含以下...
jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件