《jquery第七章》由会员分享，可在线阅读，更多相关《jquery第七章（22页珍藏版）》请在金锄头文库上搜索。
1、第七章.jQuery插件的使用和写法,主要学习内容,1、简单介绍并了解jQuery插件2、编写jQuery插件,什么是插件,插件也称为扩展，是一种遵循一定规范的应用程序接口编写出来的程序 jQuery插件下载地址：http:/ 类内置验证规则b、自定义验证规则：可以很方便地自定义验证规则c、简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆 盖默认提示信息的功能d、实时验证：可以通过keyup或blur事件触发验证，而不仅仅在表单 提交的时候验证jquery.validate.js,jquery.validate.js应用示例1：,jQuery代码： $(function() $(#c
2、ommentForm).validate(meta: validate););,jquery.validate.js应用示例2：,jQuery代码： $(function() $(#commentForm).validate( rules: username: required: true, minlength: 2,email: required: true,email: true,url:url,comment: required ););,总结：该示例改写通过name属性来关联字段和验证规则的验证写法，可以实现行为和结构的分离。具体编码步骤：1）在 $(#commentForm).val
3、idate()方法中增加rules属性2）通过每个字段的name属性值来匹配验证规则3）定义验证规则：例如required:true， email:true， minlength:2等,英文-中文,自定义验证信息,2、编写jQuery插件,编写插件的目的是给已经有的一系列方法或函数做一个封装，以便在其他地方维护和提高开发效率jQuery中的插件主要分为3个类型：1）封装对象方法的插件2）封装全局函数的插件3）选择器插件,插件的基本要点：1、jQuery插件的文件名推荐命名为jquery.插件名.js，以免和其他JavaScript库插件混淆2、所有对象方法都应当附加到jQuery.fn对象上，
4、而所有的全局函数都应当附加到jQuery对象本身上3、在插件内部，this指向的是当前通过选择器获取的jQuery对象4、可以通过this.each来遍历所有元素5、所有的方法或者函数插件，都应当以分号结尾，否则压缩的时候可能会出现问题，为了更稳妥，可以在插件头部先加上一个分号6、插件应该返回一个jQuery对象，以保证插件的可链式操作7、避免在插件内部使用$作为jQuery对象的别名，而应使用完整的jQuery来表示，这样可避免冲突。也可以使用闭包技巧来回避这个问题，使插件内部继续使用$作为jQuery的别名。,常见的jQuery插件都是以下这种形式：(function() /这里添加代码)
5、();注释：首先定义一个匿名函数function()/添加代码，然后用括号括起来，变成(function()/添加代码)这种形式，最后通过()这个运算符来执行。可以传递参数进去，以供内部函数使用。如：;(function($) /将$作为匿名函数的形参 /这里添加代码，可以使用$作为jQuery的缩写别名)(jQuery);/将jQuery作为实参传递给匿名函数,jQuery插件的机制：jQuery提供了两个用于扩展jQuery功能的方法，即jQuery.fn.extend()和jQuery.extend()方法jQuery.fn.extend()用于扩展三种类型插件中的第1种jQuery.e
6、xtend()用于扩展后两种插件，jQuery.extend()除了可以用于扩展jQuery对象外，还可用于扩展已有的Object对象,jQuery.extend()方法经常用来设置插件方法的一系列默认参数如： function foo(options) options=jQuery.extend( name:jar, length:5, dataType:xml ,options);,3、编写插件实例,1）封装jQuery对象方法的插件a、编写设置和获取颜色的插件b、表单隔行变色插件2）封装全局函数的插件3）自定义选择器,a、编写设置和获取颜色的插件步骤：1、将该插件按规范命名为jquery
7、.color.js2、搭好框架;(function($)/编写插件代码)(jQuery);3、选择方法：jQuery.fn.extend() ;(function($) $.fn.extend( color:function(value) /编写插件代码，若调用方法时传递了value这个参数，则这个值是用来设置字体颜色的，否则就是获取匹配元素的字体颜色的值 ); )(jQuery);,1）封装jQuery对象方法的插件,b、表单隔行变色插件.even background:green; /* 偶数行样式*/.odd background:red;$(tbodytr:odd).addClass(
8、odd);$(tbodytr:even).addClass(even);,options=$.extend(odd:odd,/* 偶数行样式*/even:even, /* 奇数行样式*/,options);$(tbodytr:odd,this).addClass(options.odd);$(tbodytr:even,this).addClass(options.even);,这类插件是在jQuery命名空间内部添加一个函数，比较简单，只是普通的函数，没有特别需要注意的地方。,2）封装全局函数的插件,jQuery.extend(object):为扩展jQuery类本身，为类添加新的方法，可以理解为添加静态方法。所有对象都可以直接引用，不需要创建对象再使用该方法jQuery.fn.extend(object):给jQuery对象添加方法，为jQuery类添加“成员函数”,总结：,
