基于jquery中children()与find()的区别介绍_jquery

.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素仅儿子辈)。参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选。

.find(selector)方法是返回匹配元素集合中每个元素的后代。参数是必选的,可以为选择器、jquery对象可元素来对元素进行筛选。

.find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级。这里的children,我理解为儿子,只在儿子这一级遍历。看下例子:

复制代码 代码如下:

.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈)。参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选。

.find(selector)方法是返回匹配元素集合中每个元素的后代。参数是必选的,可以为选择器、jquery对象可元素来对元素进行筛选。

.find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级。这里的children,我理解为儿子,只在儿子这一级遍历。看下例子:   

复制代码 代码如下:

$('ul.level-2').children().css('background-color', 'red');

这行代码的结果是,项目 A, B, C 得到红色背景。由于我们没有应用选择器表达式,返回的 jQuery 对象包含了所有子元素。如果应用一个选择器的话,那么只会包括匹配的项目。

在看个例子:

复制代码 代码如下:

    <script> 
    $(document).ready(function(){ 
        $("#abc").children(".selected").css("color", "blue"); 
    }); 
    </script> 
    <div id="abc"> 
        <span>Hello</span> 
        <p class="selected">Hello Again</p> 
        <div><--换成<p> 
            <div class="selected">And Again</div> 
            <span class="selected">aaAnd Again</span> 
        </div><--换成</p> 
        <p>And One Last Time</p> 
    </div> 

得到的结果如下:

这个是预期的结果,但是如果将上面的<div>换成<p>,见上面代码注释,得到的结果却是:

.find()方法要注意的知识点:

1、find是遍历当前元素集合中每个元素的后代。只要符合,不管是儿子辈,孙子辈都可以。

2、与其他的树遍历方法不同,选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回,可以传递通配选择器 '*'。

3、find只在后代中遍历,不包括自己。

4、选择器 context 是由 .find() 方法实现的;因此,$('li.item-ii').find('li') 等价于 $('li', 'li.item-ii')。

选择器的语法是:jQuery(selector, [context])

一般情况对jquery的选择器的用法,都是做为第一个参数的用法。其实jquery()函数的这种用法还可以传递第二个参数。传递这个参数的目的是将前面选择器限定在context这个环境中。在默认情况下,即不传第二个参数,选择器从文档根部对 DOM 进行搜索($()将在当前的HTML document中查找DOM元素);如果指定了第二个参数,如一个DOM元素集或jquery对象,那就会在这个context中查找。

下面看个例子

复制代码 代码如下:

$("div.foo").click(function() { 
    $("span", this).addClass("bar"); 
});

由于我们已经将 span 选择器限定到 this 这个环境中,只有被点击元素中的 span 会得到附加的class。
在内部,选择器 context是通过 .find() 方法实现的,因此 $("span", this) 等价于 $(this).find("span"),$('li.item-ii').find('li') 等价于 $('li', 'li.item-ii')

find()更多内容请访问:http://www.w3school.com.cn/jquery/traversing_find.asp

children()更多内容请访问:http://www.w3school.com.cn/jquery/traversing_children.asp

时间: 2024-09-18 00:29:43

基于jquery中children()与find()的区别介绍_jquery的相关文章

jQuery中parents()和parent()的区别分析_jquery

本文实例分析了jQuery中parents()和parent()的区别,分享给大家供大家参考.具体分析如下: 其实在jQuery中,函数或者选择器的概念都是很容易理解的,只要对API手册有足够的熟练就能够很容易分辨,标题中的函数其实也是如此,不过咱们这里还是做一些简单的介绍,毕竟这样可能更为方便一些. 一.parents()函数: 此函数能够获取匹配元素的所有父元素,代码示例: 复制代码 代码如下: $(".mayi").parents().css("color",

Jquery中offset()和position()的区别分析_jquery

本文实例分析了Jquery中offset()和position()的区别.分享给大家供大家参考.具体分析如下: 一.Jquery中offset() 获取匹配元素在当前视口的相对偏移. 总是计算相对于文档的位置,无论元素的父元素或祖先元素的position属性是什么. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效.   例如: <!DOCTYPE html> <html> <head> <style> p { margin-left

jQuery中closest和parents的区别分析_jquery

jQuery中closest和parents从表现上来看都是说查找上线元素的一些内容了,但如果说仔细可能各位不懂,下面我们一起来看看closest和parents区别. 1.父级 parent()--唯一父级元素,可能是0个或1个元素. 2.祖先 parents(selected)--所有selected祖先(不包含根元素),可能是0个.1个或多个元素. closest(selected)--唯一selected祖先,可能是0个或1个元素. closest和parents的主要区别是: 前者从当

jQuery中$this和$(this)的区别介绍(一看就懂)_jquery

// this其实是一个Html 元素. // $this 只是个变量名,加$是为说明其是个jquery对象. // 而$(this)是个转换,将this表示的dom对象转为jquery对象,这样就可以使用jquery提供的方法操作. (function($){ $.fn.hilight = function(options){ debug(this); var defaults = { foreground: 'red', background: 'yellow' }; var opts =

基于jQuery中对数组进行操作的方法_jquery

jQuery中提供了两个函数 :     1.$.map(array,callback(element,index));        对于array中的每个元素,调用callback()函数,最终返回一个新的数组,原数组不变        例如:           $(function () {            var arrInt = [1, 3, 5, 79];            var b = $.map(arrInt, function (value, key, a) {/

jquery对象和DOM对象的区别介绍_jquery

第一步,http://www.k99k.com/jQuery_getting_started.html 第二步,新手先仔细得全部看一遍jQuery的选择器,很重要!!! (http://shawphy.com/jqueryapi/ 这里是最新文档,有离线版下载) 第三步,深刻了解jQuery对象和普通DOM对象的区别.互相转化见Q1 Q1,js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的$("#save&quo

jquery中children()与find()用法区别详解

children()是一个筛选器,顾名思义就是筛选孩子,筛选那些符合条件的孩子. 完整的格式如下: .children(expr) 其中children是筛选器的名称,expr是表达式,所有选择器中的表达式都可以用在这,比如按标签名"div",按类名".class",按序号":first"等等,如果表达式为空,那么返回的是所有的孩子,返回的结果仍为jQuery对象. jquery取索引使用eq函数. eq() 选择器选取带有指定 index 值的

jquery中:input和input的区别分析_jquery

复制代码 代码如下: <script type="text/javascript"> $(function(){ $(":input").focus(function(){ $(this).addClass("focus"); }).blur(function(){ $(this).removeClass("focus"); }); })//这个效果第三个textarea也会添加样式 </script>

jWiard 基于JQuery的强大的向导控件介绍_jquery

我就不贴我现在做项目的代码,我直接把作者的示例搬过来,因为改动不大,只要做点修改,就能很好的满足我们自己的需求. 原文地址 猛点这里下载       作者官网   不过是英文的,英语好的话 可以看原文,生怕我表达错误. 不知道童鞋们在平时的开发用到用向导式开发这种方式没有?有人问 什么是向导式开发呢?其实,很简单,就是让用户完成一个步骤,然后点击下一步,完成一个步骤就点击下一步,这样 按照我师父的来说,可以很好的提升用户体验. OK,废话不说了,先来一个最简单的例子:例子1: 1.1当然咯,既然