JQuery学习心得 2

上一篇讲到了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版本号。

太晚了先写到这里