jQuery

jQuery 知识量:7 - 32 - 105

2.2 $( )函数><

jQuery对象与$( )函数- 2.2.1 -

jQuery对象由一系列属性(包括length属性)和大量的jQuery方法组成。当使用jQuery时,需要首先创建jQuery对象,jQuery对象由构造函数jQuery()创建,而$()正是jQuery()的缩写。

$()函数由一个美元符号和一对括号组成。$()要完成的主要工作就是进行元素的选择,并建立一个jQuery对象。具体方法是把CSS选择符(CSS选择器表达式)作为参数传递给$()函数,$()函数创建jQuery对象,根据CSS选择符查找DOM元素,然后将找到的元素放入这个jQuery对象中,这样就可以使用jQuery的一系列方法操作对象中的元素了。

$()的具体用法- 2.2.2 -

以上是$()的最主要用法,而根据传递给$()函数的参数的不同,创建jQuery对象的逻辑也会不同,目前有7种用法。

用法参数返回结果
    1CSS选择符表达式和可选的选择符上下文包含匹配的DOM元素的jQuery对象
    2HTML代码包含由HTML代码转换的DOM元素的jQuery对象
    3DOM元素或DOM元素数组包含传递的DOM元素的jQuery对象
    4普通JavaScript对象将普通对象转换为jQuery对象
    5函数在document上绑定ready事件监听函数,当DOM就绪后立即执行。
    6jQuery对象jQuery对象的拷贝副本
    7空白空的jQuery对象,属性length为0。
  1. CSS选择符表达式和可选的选择符上下文:这是最常用的创建jQuery对象的方法,借助传递的CSS选择符表达式创建jQuery对象。

  2. HTML代码:传入HTML代码,jQuery就会依据这段代码创建新的DOM元素,然后用这些元素创建jQuery对象。

  3. DOM元素或DOM元素数组:常用于事件监听函数内部,比如把关键字this引用的DOM元素封装为jQuery对象。如下所示:

    $('div.people').click(function(){
        $(this).hide();
    });
  4. 普通JavaScript对象:将一个JavaScript对象传递给$()函数后,jQuery会将其封装为一个jQuery对象,以便可以使其像其他jQuery对象那样调用jQuery的方法或执行其他操作。

  5. 函数:如果传递的是函数,jQuery会在DOM根元素即document上绑定一个包含传递函数的ready事件监听函数,当DOM结构加载完成以后,立刻执行这个函数。

  6. jQuery对象:如果传入jQuery对象,则会创建一个一模一样的对象副本,两个jQuery对象指向完全相同的DOM元素。

  7. 空白:不传递任何参数就会创建一个空的jQuery对象,它的长度属性length为0,表示为空对象。

jQuery与其他JavaScript库的协同工作- 2.2.3 -

$()在JavaScript的诸多库中是很常见的,如果在同一个页面需要同时引用jQuery和其他使用$()的库(比如 Prototype)时该怎么办呢?为了解决这个冲突,可以让jQuery放弃$()的使用权,转而使用jQuery()本身。

$.noConflict(); 
jQuery(document).ready(function(){
    jQuery("button").click(function(){
        jQuery("p").text("jQuery仍然可以正常运行!");
    });
});

除此之外,还可以使用自定义变量名代替“jQuery”。

var love = $.noConflict(); 
love(document).ready(function(){
    love("button").click(function(){
        love("p").text("jQuery仍然可以正常运行!");
    });
});

如果在冲突发生时仍然想使用$符号,可以将$作为参数传递给函数,在函数内部可以不受影响的继续使用。

$.noConflict(); 
jQuery(document).ready(function($){
    $("button").click(function(){
        $("p").text("jQuery仍然可以正常运行!");
    });
});

使用$.noConflict()放弃$()的使用权时要注意:应当首先引入其他库,再引入jQuery,然后调用$.noConflict(),这样就可以把$()的使用权交给其他库了。