上一篇讲到了JQUery是什么,现在在详细介绍JQuery:
JQuery类库定义了一个全局函数 JQuery。下面看看JQuery类库的代码
1 // Expose jQuery to the global object 2 window.jQuery = window.$ = jQuery;
jQuery提供了一个函数jQuery.noConflict() 运行这个函数将变量$的控制权让渡给第一个实现它的那个库。其实我们可以任意替代jQuery函数,比如window.j=window.$;。
注意jQuery是一个工厂函数而不是构造函数。
jQuery()的用法:
第一种也是最常用的一种方式就是传递CSS选择器(字符串)给$()方法,当通过这种方式调用时,$()方法会返回当前文档中匹配该选择器的元素集(一个类数组).后面会详细介绍。
第二种调用方式是传递一个Element,Document,或Window对象给$()方法,在这种情况下$()方法只需将该Element,Document或window对象封装成jQuery对象并返回。这样就使得能用jQuery对象类操作这些元素而不是使用原生的DOM方法。在jQuery程序中经常可以看见$(document)或$(this),jQuery对象可以表示文档中的多个元素,也可以传递一个元素族给$()方法。这种情况下,返回的jQuery对象表示该数组中的元素集。
第三种方法调用方式是传递HTML文本字符串给$()方法。在这种调用方式下,jQuery会根据传入的文本创建好HTML元素并封装成jQuery对象返回,jQuery不会讲刚创建的元素自动插入到文档中,可以使用jQuery中提供的方法轻松将元素插入想要的地方。注意:在这种调用方式下,不可传入纯文本,因为jQuery会把纯文本当成CSS选择器来解析,当使用这种风格时,传递给$()方法的字符串必须至少包含一个带有尖括号的HTML标签。
第三种方式调用时,$()接受可选的第二参数。可以传递Document对象来指定与所创建元素相关联的文档(比如,当创建元素需要插入iframe里时,需要显示指定该iframe的document对象)，第二个参数还可以是object对象。此时，将设该对象的属性表示HTML属性的键/值对,这些属性讲设置所创建的对象上。当第二个对象的属性名是"css","html","text","width","height","offset","val"或data,或者属性名是jQuery时间出来程序注册方法时,jQuery讲调用新创建元素上的同名方法,并传入属性值。
例如:
1 var img=$("<img/>",//新建一个<img>元素 2 { 3 src:url,//具有HTML属性 4 css:{borderWidth:s},//css样式 5 click:handleClick//事件处理程序 6 });
最后，第4种调用方式是传入一个函数给$()方法。此时,当文档加载完毕并且DOM可操作时,传入的函数将被调用。
$()返回的是一个jQuery对象,jQuery对象是类数组：他们拥有length属性和介于0~length-1之间的数值属性。这意味着可以使用标准数组标示方括号来访问jQuery对象的内容
HTML代码
1 <body> 2 <div id="d1"> 3 d1 4 </div> 5 <div>d2</div> 6 <div>d3</div> 7 </body>
在IE控制台中输入$("div")输出:
1 >> $("div") 2 { 3 0 : [object HTMLDivElement], 4 1 : [object HTMLDivElement], 5 2 : [object HTMLDivElement], 6 length : 3, 7 prevObject : [object Object], 8 context : [object Document], 9 selector : "div", 10 constructor : function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context, rootjQuery ); }, 11 init : function( selector, context, rootjQuery ) { var match, elem, ret, doc; // Handle $(""), $(null), or $(undefined) if ( !selector ) { return this; } // Handle $(DOMElement) if ( selector.nodeType ) { this.context = this[0] = selector; , 12 jquery : "1.7.1" 13 ... 14 } 15 添加以监视
$("div").length=3;
$("body")[0];//等价于document.body
如果不想把数组标识用在jQuery对象上,可以使用size()方法来替代length属性,用get()方法来替代方括号索引。可以使用toArray()方法将jQuery对象转换为真实数组。其实jQuery对象就是把那些匹配选择字符串的DOM节点封+一些用于操作这些DOM节点的属性和方法就构成了jQuery对象。jQuery对象除了length属性,jQuery还有三个挺有趣的属性。selector属性是创建jQuery对象时的选择器字符串(如果有的话)。context属性是上下文对象,是传递给$()方法的第二个参数，如果没有传递的话,默认是Document对象，最后所有jQuery对象都有一个名为jquery的属性,检测该属性是否存在可以简单讲jQuery对象与其他类数组对象区分开来,jQuery属性值是字符串形式的jQuery版本号。
太晚了先写到这里