jQuery 知识量:7 - 32 - 105
jQuery对象由一系列属性(包括length属性)和大量的jQuery方法组成。当使用jQuery时,需要首先创建jQuery对象,jQuery对象由构造函数jQuery()创建,而$()正是jQuery()的缩写。
$()函数由一个美元符号和一对括号组成。$()要完成的主要工作就是进行元素的选择,并建立一个jQuery对象。具体方法是把CSS选择符(CSS选择器表达式)作为参数传递给$()函数,$()函数创建jQuery对象,根据CSS选择符查找DOM元素,然后将找到的元素放入这个jQuery对象中,这样就可以使用jQuery的一系列方法操作对象中的元素了。
以上是$()的最主要用法,而根据传递给$()函数的参数的不同,创建jQuery对象的逻辑也会不同,目前有7种用法。
用法 | 参数 | 返回结果 |
---|---|---|
1 | CSS选择符表达式和可选的选择符上下文 | 包含匹配的DOM元素的jQuery对象 |
2 | HTML代码 | 包含由HTML代码转换的DOM元素的jQuery对象 |
3 | DOM元素或DOM元素数组 | 包含传递的DOM元素的jQuery对象 |
4 | 普通JavaScript对象 | 将普通对象转换为jQuery对象 |
5 | 函数 | 在document上绑定ready事件监听函数,当DOM就绪后立即执行。 |
6 | jQuery对象 | jQuery对象的拷贝副本 |
7 | 空白 | 空的jQuery对象,属性length为0。 |
CSS选择符表达式和可选的选择符上下文:这是最常用的创建jQuery对象的方法,借助传递的CSS选择符表达式创建jQuery对象。
HTML代码:传入HTML代码,jQuery就会依据这段代码创建新的DOM元素,然后用这些元素创建jQuery对象。
DOM元素或DOM元素数组:常用于事件监听函数内部,比如把关键字this引用的DOM元素封装为jQuery对象。如下所示:
$('div.people').click(function(){ $(this).hide(); });
普通JavaScript对象:将一个JavaScript对象传递给$()函数后,jQuery会将其封装为一个jQuery对象,以便可以使其像其他jQuery对象那样调用jQuery的方法或执行其他操作。
函数:如果传递的是函数,jQuery会在DOM根元素即document上绑定一个包含传递函数的ready事件监听函数,当DOM结构加载完成以后,立刻执行这个函数。
jQuery对象:如果传入jQuery对象,则会创建一个一模一样的对象副本,两个jQuery对象指向完全相同的DOM元素。
空白:不传递任何参数就会创建一个空的jQuery对象,它的长度属性length为0,表示为空对象。
$()在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(),这样就可以把$()的使用权交给其他库了。
Copyright © 2017-Now pnotes.cn. All Rights Reserved.
编程学习笔记 保留所有权利
MARK:3.0.0.20240214.P35
From 2017.2.6