关于jquery框架的初探-context属性

怼烎@ 2022-07-29 08:48 132阅读 0赞

首先是几个概念的说明.

1.jQuery对象栈： jQuery内部护卫着一个jQuery对象栈，每一个遍历路径都会找到一组新元素（一个jQuery对象），jQuery会把这组元素推入到栈中；

2.jquery对象的属性： 每一个jQuery对象都有三个属性：context、selector和prevObject；

@1 context

context,返回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。  
如果没有指定，那么context指向当前的文档  
例如:$("div span",context);  
表示从context对象中选择"div span"对象，这是jQuery的一种用法，就是选定范围查找对象。  
而$(dom)\[0\].attributes则直接是找 第一个dom下的attributes ，它和context不同是指定查找对象

@2 selector

@3 prevOject； 指向这个对象栈中的前一个对象，而经由过程这个属性可能回溯到一开始的DOM元素集中。如何理解，show the code,

下面有一个父元素ul,嵌套了一个li节点：  
<ul id="parent">  
 <li>child</li>  
</ul>  
我们现给li绑定一个变乱，这个很容易，找到ul下面的li，绑定便可：  
 var parent = $("parent");  
 parent.find('li').click(function()\{  
alert(1); //1  
 \})  
此时我又想给父元素绑定一个事务，我们是不是又要在parent上绑定一次事件呢？  
是的，下面代码经由过程find操作后，此时是指向每一个li了,所以必需要从新引用parent元素（li的父元素），日后再绑定click事情：  
parent.click(function()\{  
 alert(2); //1  
\})  
这样会不会很费事，于是jQuery引入一个容易的内部寻址的机制，可以回溯到之前的Dom元素集合，通过end()办法可以完成：  
parent.find('li').click(function() \{  
alert(1);  
\}).end().click(function() \{  
alert(2);  
\})  
jQuery为我们操作这个外部对象栈供应了两个尤为有用的法子：  
.end()  
.andBack()  
调用第一个方式只是容易地弹出一个对象（终究便是回到前一个jQuery对象）。  
第二个方式更成心思，调用它可在栈中回溯一个位子，往后把两个位子上的元素集组合起来，  
并把这个新的、组合以后的元素集推入栈的上方。  
利用这个DOM元素栈能够反复的查问和遍历的操纵，而减少反复引用也正是优化jQuery代码的关键所在。

待续

参考网站[jquery学习网站][jquery]

另外，有文章[关于jQuery对象的两个属性selector和context的测试][jQuery_selector_context] 参考

脚本之家的一片文章[脚本之家][Link 1]

[jquery]: http://www.365mini.com/page/jquery-context.htm
[jQuery_selector_context]: http://www.skygq.com/demo/jquery-selector-context/
[Link 1]: http://www.jb51.net/article/59062.htm