CSS上下文选择器与使用DOM节点的方法

本篇内容主要讲解“CSS上下文选择器与使用DOM节点的方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS上下文选择器与使用DOM节点的方法”吧!

　　Selector Context(上下文选择器)

　　默认情况下,选择器是从文档根节点开始执行搜索。然而,可以给$()函数传递一个用于上下文检索的第二个可选参数(注：第二个上下文参数用于来指定选择器查找的范围)。 举个例子，如果在一个回调函数中我们希望为一个元素做一个检索， 我们可以限制搜索的范围:

　　$( "div.foo" ).click(function() {

　　$(  "span", this ).addClass( "bar" );

　　});

　　由于我们限制这个span选择器的上下文为 this, 只有在点击元素里的span将会被附加样式。

　　在jQuery内部，选择器上下文是使用.find()方法的，所以  $('span', this) 等价于$(this).find('span')。

　　Using DOM elements(使用DOM节点)

　　这个函数的第二个和第三个的方式使用一个或多个DOM元素或者我们用其他一些方式已找到的元素,创建一个jQuery对象.

　　注意：这些方式意思仅消耗DOM元素;输送混合数据给 elementArray（元素数组） 的形式是特别鼓励。

　　这个设备普遍使用jQuery方法通过一个回调函数传递this关键字 ：

　　$( "div.foo" ).click(function() {

　　$(this).slideUp();

　　});

　　这个例子，当点击使得这些元素隐藏的时候使用了滑动动画。因为事件处理通过 this 关键字，接收到了被点击的元素，但是该元素是原生的 DOM 元素，所以需要通过 $() 函数，将它转换成 jQuery 对象，然后就可以在该 jQuery 对象上调用 jQuery 方法了。

　　当一个Ajax请求返回XML数据时，我们可以使用 $() 方法去把他包含在jQuery对象中，我们可以很容易的工作。一旦这样做了之后，我们可以使用.find()和其他DOM遍历方法在XML结构中检索特定元素。

　　$.post( "url.xml", function(data) {

　　var $child = $(data).find("child");

　　})

　　Cloning jQuery Objects(克隆jQuery对象)

　　当一个jQuery对象作为一个参数传递给$()方法时，这个对象的一个克隆对象将被创建。这个新的jQuery对象引用同一DOM元素。

　　Returning an Empty Set(返回一个空集合)

　　在jQuery 1.4中，如果你传递给jQuery()方法一个空参数，一个空的jQuery设置将被返回（.length属性为0）。 在以前的jQuery版本中，一个包含整个文档节点的集合将被返回。

到此，相信大家对“CSS上下文选择器与使用DOM节点的方法”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！