jQuery常用插件（如何调用jQuery插件学习第一天）

插件是以jQuery的核心代码为基础，编写出符合一定规范的应用程序，并将程序进行打包，调用时，仅需要包含该打包后的JS文件即可。如需要使用表单插件，按下列步骤就可实现插件的调用：

（1）在页面中导入包含表单插件的JS文件，并确定它定位与主jQuery库后，其代码如下：

<head><script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script><script type="text/javascript" src="Jscript/jquery.form.js"></script>
</head>

（2）在JS文件或页面JS代码中，编写如下代码完成插件的调用：

$(function(){$("form").ajaxSubmit();
})

代码中.ajaxSubmit()就是调用插件中的方法，其作用就是获取表单中的字段值，向服务器发送请求。【最新插件可以从jQuery官方网站（http://plugins.jquery.com）获取】

jQuery常用插件

与浏览器插件不同，jQuery插件凭借其极易加载，体积小，功能独立的特点深受广大web开发人员的喜爱。

（1）验证插件validate

validate是一个十分优秀的表单验证插件之一，它广泛地使用在全球各个的项目中，并得到广大程序开发人员的认可，该插件有以下功能：

1.自带验证规则：其中包含必填，数字，URL等众多验证规则。

2.验证信息提示：可以使用默认的提示信息，也可以自定义提示信息，覆盖默认内容。

3.多种事件触发：不仅在表单提交时触发验证，在“keyup”或“blur”事件也能触发。

4.允许自定义验证规则：除使用自带的验证规则外，开发者还可以很方便地自定义验证规则。

validate的插件使用

（1）插件文件：

Js-8-1/jquery.validate.js

Js-8-1/jquery.validate.message_cn.js

（2）下载地址：

http://plugins.jquery.com/project/validate

（3）功能描述：

在页面中创建一个表单标记，ID号为“frmV”。在表单中设置两个文本框，一个用于输入“姓名”，另外一个用于输入“邮箱”。单击“提交”按钮提交表单数据时，通过validate插件，根据设置的验证规则检测表单中的各个字段元素。

（4）实现代码：

<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Jscript/jquery.validate.js"></script><style type="text/css">....省略部分代码</style><script type="text/javacript">$(function(){$("#frmV").validate({/*自定义验证规则*/rules:{username:{required:true,minlength:6},email:{required:true,email:true}},/错误提示位置/errorPlacement:function(error,element){error.appendTo(element.siblings("span"));}});})
</script>

主体body的代码：

<form id="frmV" method="get" action="#"><div class="divFrame"><div class="divTitle">请输入下列资料</div><div class="divContent"><div>用户名：<br /><input in="username" name="username" type="text" class="txt" /><font color="red">*</font><br /><span></span></div><div>邮箱：<br /><input id="email" name="email" type="text" class="txt" /><font color="red">*</font><br /><span></span></div><div class="divBtn"><input id="sbtUser" type="submit" value="提交" class="btn" /></div></div></div>
</form>

（5）代码分析

由于validate验证插件默认的提示信息是英文版的，为了汉化验证提示信息，页面部分需要引用一个中文验证信息库，其代码如下：

<script type="text/javascript"src="Js-8-1/jquery.validate.messages_cn.js">
</script>

导入该中文验证信息后，就可以将显示的验证信息汉化。

验证插件validate导入完成后，如果要使表单在提交数据时触发验证，只需要加入如下代码：

$(function(){$("#frmV").validate({...//表单验证执行时的代码});
})

在这个例子中，由于进行的时简单的“用户名”与“邮箱”格式的验证，因此，只要在validate()方法中增加一个规则（rules）属性，用表单字段的“name”属性与规则进行关联，声明默认的验证规则，其实现的代码如下：

/*自定义验证规则*/
rules:{username:{required:true,minlength:6},email:{required:true,email:true}
}

为了使验证后的提示信息显示在页面指定的位置中，在validate()方法中新增加一个提示信息位置属性。该属性执行一个回调函数，传递错误提示信息与执行验证字段两个参数，把提示信息的内容通过appendTo()方法增加到触发验证字段的“兄弟”元素<span>中，其实现的代码如下：

/*错误提示位置*/
errorPlacment:function(error,element){error.appendTo(element.siblings("span"));
}

jQuery常用插件（如何调用jQuery插件学习第一天）相关推荐

dojo调用php,dojo学习第一天 Tab选项卡实现_dojo
其实不然,用<精通Dojo>里的话来说就是"Dojo不只是一个程序库,而是一个工具包",它比其他所有的JS库的插件更全面更广阔.它包含大约40个用户界面控件.1个图形框 ...
html什么是插件,什么是jquery插件？
什么是jquery插件? jQuery插件,就是开发爱好者自己利用Jquery制作的特效,然后经过封包或包装处理成js文件,发布到网上供大家使用的脚本集合. 通常这类插件除了调用jQuery库文件,还 ...
23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API
1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...
php 便利jq,jquery怎样遍历数组？jquery遍历数组常用的两种方式
在jquery中,我们常用$().each和$.each()这两个方法来进行数组的遍历,$().each和$.each()这两种方法表面看起来好像差不多,但是,实际上这两个方法是有区别的,两个方法在针 ...
JQuery常用的代码片段
2019独角兽企业重金招聘Python工程师标准>>> JQuery常用的代码片段 JQuery在当前众多网站开发中都有用到.他简易的操作以及对各个浏览器的兼容性,被广大的开发者一致 ...
【08】jQuery：01-jQuery介绍、jQuery基本使用、jQuery选择器、jQuery样式操作、jQuery效果、jQuery入口函数、jQuery对象
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...
插件框架之任务列表插件
简单的任务列表也有存在的意义,意义就是多台电脑之间的同步,同步有多种方式,可以建立一个服务器,也可以将数据按照一定规则存储到某共有的存储器上.但我还希望这个插件具有向朋友发任务的一个功能,并且在任务完 ...
jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
转:jQuery常用插件
原文来自于:http://download.csdn.net/album/detail/369 jquery.cycle.all.js 上传者:itmyhome 上传时间:2014-06-1 ...

jQuery常用插件（如何调用jQuery插件学习第一天）

jQuery常用插件

validate的插件使用

jQuery常用插件（如何调用jQuery插件学习第一天）相关推荐

最新文章

热门文章