我的Jquery参考词典

由于工作主要用到Asp.net Mvc+Jquery，最近也看了一些Jquery的书籍，在此总结以备回顾。

已读书籍：《Jquery In Action》 主要讲了些Jquery语法以及API用法，感觉不错。

              《Javascript the Missing Manual》 前半部分讲了下JS语法，感觉不错，后半部分讲了Jquery插件，没劲。

感觉读有些书还是不要太细了，浪费了很多时间，结果所获寥寥。我感觉自己比较适合泛读书然后实践加深理解。

Jquery

Javascript是一种脚本语言，不同于需编译的语言，运行时才被解释器解读。Jquery是基于JS的一个库。

Jquery filters即Jquery选择器，匹配语法类似CSS选择器，但也有一些进行了扩展（例如：:not）。

Jquery选择器

快速回忆

 $("p:even")  匹配所有偶数的<p>
 $("tr:nth-child(1)")  匹配每个<table>里第一行
 $("body > div")  匹配<body>的下一级所有<div>
 $("a[href$='pdf']")  匹配所有PDF文件<a>
 $("body > div:has(a)")  匹配<body>下一级所有包含<a>的<div>

选择语法里的符号

 >  直系子元素
 ^  匹配元素对应属性开头字符串 例：a[href^='http://']匹配http://开头的<a>
 $  匹配元素对应属性尾部字符串
 *  匹配包含该字符串 例：a[href*='jquery.com']匹配包含jquery.com的<a>
 +  匹配紧跟在后面的一个同级元素 例：div+ul匹配每一个紧跟在<div>后并与它同级的<ul>
 ~  匹配跟在后面的所有同级元素 例：div~ul匹配跟在<div>后面的所有同级<ul>

选择器样板

 *  ~所有元素
 E  ~所有<E>    
 E F  ~<E>的所有子节点<F>
 E>F  ~<E>的所有直系子<F>
 E+F  ~紧跟在<E>后的一个同级节点<F>
 E~F  ~跟在<E>后的所有同级节点<F>
 E.C  ~所有class为C的<E>
 E#I  ~Id为I的<E>
 E[A]  ~含有A属性的<E>
 E[A=V]  ~含有A属性值为V的<E>
 E[A^=V]  ~A属性值以V开头的<E>
 E[A$=V]  ~A属性值以V结尾的<E>
 E[A!=V]  ~不包含A属性或者A属性值不为V的<E>
 E[A*=V]  ~A属性值包含V的<E>

注：W3C Selectors Level 3

位置选择

 :first  ~符合条件的集合中第一个元素  例：li a:first匹配<li>里的第一个<a>（只有一个）
 :last  ~符合条件的集合中最后一个元素
 :first-child  ~符合条件的第一个子元素 例： li a:first-child匹配每一个<li>里的第一个<a>（集合）
 :last-child  ~符合条件的最后一个子元素
 :only-child  ~没有同级节点的元素
 :nth-child(n)  ~符合条件的第n个子元素 注： first-child==nth-child(1)
 :nth-child(even|odd)  ~符合条件的偶数（奇数）位子元素
 :nth-child(xn+y)  ~符合条件的xn+y位子元素
 :even  ~偶数位元素
 :odd  ~奇数位元素
 :eq(n)  ~第n位元素  注： first==eq(0)
 :gt(n)  ~第n位及以后元素 
 :lt(n)  ~第n位及以前元素 注： first==lt(1)

Note: 1.:first与:first-child有区别，前面的匹配一个元素，后面的匹配一个集合。详情

         2.:eq是从0开始的，:nth-child是从1开始的

状态选择

 :animated  ~正处于动画效果的元素
 :button  ~button元素 包含input[type=submit]，input[type=reset]，input[type=button]，button
 :checkbox  ~input[type=checkbox]
 :checked  ~处于选中状态的单选多选元素
 :contains(food)  ~包含food文本的元素
 :disabled  ~disabled的元素
 :enabled  ~enabled的元素
 :file  ~input[type=file]
 :has(selector)  ~包含selector元素的元素
 :header  ~<h1>-<h6>所有标题元素
 :hidden  ~hidden的元素（display:none）
 :image  ~input[type=image]
 :input  ~input，select，textarea，button
 :not(selector)  ~非selector的其它元素
 :parent  ~有子元素（或者text）的元素
 :password  ~input[type=password]
 :radio  ~input[type=radio]
 :reset  ~input[type=reset]，button[type=reset]
 :selected  ~处于选中状态的<option>
 :submit  ~input[type=submit]，button[type=submit]
 :text  ~input[type=text]
 :visible  ~visible的元素

Note:1.$("input[type='checkbox'][checked]")只能匹配初始状态为checked的元素。

           $("input[type='checkbox']:checked")却可以匹配实时状态为checked的元素。

        2.$(":not(img[src*='dog'])") 不仅匹配src属性包含dog的<img>而且匹配所有其它的标签

           $("img:not([src*='dog'])") 只匹配src属性不包含dog的<img>

Jquery事件

    on()方法将bind()，delegate()，live()方法已经合在了一块，用于事件绑定。详情

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},
live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},
delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
}

 on()，live()，delegate()方法可以将事件绑定在动态生成的元素上，而bind()，单纯的click()等事件方法不具备此功能。

 on()方法可以通过将事件绑定在目标元素的父元素上对该目标元素进行监听（事件冒泡机制），达到事件在动态元素上依然会触发的目的，

 也可以直接绑定在目标元素上，但就不具备触发动态生成的元素的能力了。bind?live?delegate?还是on？–jquery事件绑定方法研究

Jquery扩展

jquery.fn=jquery.prototype

 1 jQuery.fn = jQuery.prototype = {
 2     // The current version of jQuery being used
 3     jquery: version,
 4 
 5     constructor: jQuery,
 6 
 7     // Start with an empty selector
 8     selector: "",
 9 
10     // The default length of a jQuery object is 0
11     length: 0,
12 
13     toArray: function() {
14         return slice.call( this );
15     },
16 
17     // Get the Nth element in the matched element set OR
18     // Get the whole matched element set as a clean array
19     get: function( num ) {
20         return num != null ?
21 
22             // Return a 'clean' array
23             ( num < 0 ? this[ num + this.length ] : this[ num ] ) :
24 
25             // Return just the object
26             slice.call( this );
27     },
28 
29     // Take an array of elements and push it onto the stack
30     // (returning the new matched element set)
31     pushStack: function( elems ) {
32 
33         // Build a new jQuery matched element set
34         var ret = jQuery.merge( this.constructor(), elems );
35 
36         // Add the old object onto the stack (as a reference)
37         ret.prevObject = this;
38         ret.context = this.context;
39 
40         // Return the newly-formed element set
41         return ret;
42     },
43 
44     // Execute a callback for every element in the matched set.
45     // (You can seed the arguments with an array of args, but this is
46     // only used internally.)
47     each: function( callback, args ) {
48         return jQuery.each( this, callback, args );
49     },
50 
51     map: function( callback ) {
52         return this.pushStack( jQuery.map(this, function( elem, i ) {
53             return callback.call( elem, i, elem );
54         }));
55     },
56 
57     slice: function() {
58         return this.pushStack( slice.apply( this, arguments ) );
59     },
60 
61     first: function() {
62         return this.eq( 0 );
63     },
64 
65     last: function() {
66         return this.eq( -1 );
67     },
68 
69     eq: function( i ) {
70         var len = this.length,
71             j = +i + ( i < 0 ? len : 0 );
72         return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );
73     },
74 
75     end: function() {
76         return this.prevObject || this.constructor(null);
77     },
78 
79     // For internal use only.
80     // Behaves like an Array's method, not like a jQuery method.
81     push: push,
82     sort: arr.sort,
83     splice: arr.splice
84 };
View Code

How does Javascript.prototype work?

JS中的prototype

jquery.extend=jquery.fn.extend

 1 jQuery.extend = jQuery.fn.extend = function() {
 2     var options, name, src, copy, copyIsArray, clone,
 3         target = arguments[0] || {},
 4         i = 1,
 5         length = arguments.length,
 6         deep = false;
 7 
 8     // Handle a deep copy situation
 9     if ( typeof target === "boolean" ) {
10         deep = target;
11 
12         // skip the boolean and the target
13         target = arguments[ i ] || {};
14         i++;
15     }
16 
17     // Handle case when target is a string or something (possible in deep copy)
18     if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
19         target = {};
20     }
21 
22     // extend jQuery itself if only one argument is passed
23     if ( i === length ) {
24         target = this;
25         i--;
26     }
27 
28     for ( ; i < length; i++ ) {
29         // Only deal with non-null/undefined values
30         if ( (options = arguments[ i ]) != null ) {
31             // Extend the base object
32             for ( name in options ) {
33                 src = target[ name ];
34                 copy = options[ name ];
35 
36                 // Prevent never-ending loop
37                 if ( target === copy ) {
38                     continue;
39                 }
40 
41                 // Recurse if we're merging plain objects or arrays
42                 if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
43                     if ( copyIsArray ) {
44                         copyIsArray = false;
45                         clone = src && jQuery.isArray(src) ? src : [];
46 
47                     } else {
48                         clone = src && jQuery.isPlainObject(src) ? src : {};
49                     }
50 
51                     // Never move original objects, clone them
52                     target[ name ] = jQuery.extend( deep, clone, copy );
53 
54                 // Don't bring in undefined values
55                 } else if ( copy !== undefined ) {
56                     target[ name ] = copy;
57                 }
58             }
59         }
60     }
61 
62     // Return the modified object
63     return target;
64 };
View Code

jquery.extend(object)为jquery类添加静态方法 例如$.trim()

jquery.fn.extend(object)为jquery对象添加方法  例如$("#aa").show()

js中的this与C#中的this有很大的区别：You must remember 'this'!

jquery源代码告诉我们:jquery.extend和jquery.fn.extend是同一个方法，只是会有this的区别。

简单的模拟：

 1 var test = function(){};
 2 test.extend = test.prototype.extend= function(){
 3    var option = arguments[0];
 4    var target = this;
 5    for(name in option)
 6    {
 7      target[name]=option[name];
 8    }
 9    return target;
10 }
11 test.prototype.extend({
12   test1:function(){alert("test1 prototype!") }
13 });
14 
15 test.extend({test2:function(){ alert("test2 static!") } });
16 
17 test.test2();   // alert test2 static!
18 
19 var cc = new test();
20 cc.test1();   // alert test1 prototype!

 jquery插件

 1 //step01 定义JQuery的作用域
 2 (function ($) {
 3     //step03-a 插件的默认值属性
 4     var defaults = {
 5         prevId: 'prevBtn',
 6         prevText: 'Previous',
 7         nextId: 'nextBtn',
 8         nextText: 'Next'
 9         //……
10     };
11     //step02 插件的扩展方法名称
12     $.fn.easySlider = function (options) {
13         //step03-b 合并用户自定义属性，默认属性
14         var options = $.extend(defaults, options);
15     }
16 })(jQuery);

不定义JQuery插件，不要说会JQuery

总结

JQuery是一个非常棒的JS库，可以学习的东西很多。打算抽空看看JQuery源码

常用链接：
posted @ 2013-11-26 00:47  胖鸟低飞  阅读(491)  评论(0)  编辑  收藏  举报