Jquery中find与each方法用法实例

本文实例讲述了Jquery中find与each方法用法。分享给大家供大家参考。具体如下：

一、find()方法

jquery选择器非常强大，利用css的命名规约，可以更快更方便的找出想要的元素。

比如：

$("#id")
$("#"+"id")
$(this)
$(element)

等等，只要灵活运用，就能爆发出强大的可造型。

但是在实际使用中，仍然觉得有些不足。

如果想要在某个元素下寻找特定的元素，仅仅依靠上面这个方法，就必须对 $("#id")获取的元素进行遍历，获取其子元素。如此一来就显得格外的繁琐，代码量也非常庞大。

于是这就需要用到find()方法。

$("#id").find("#child");
$("#id").find(".child");
$("#id").find("input[type='image']");

非常方便好用。

除了上面的find()方法之外，还有一种查找子元素的方法。

$(".child",parent);

这种方法与find()方法的结果是一样的，也更加简洁。

我们举个例子：

function(table){
   $("tr",table).css("background-color","red");
}

这种方法，方便代码的重用，更符合闭包的写法。

二、each()方法

有的时候经常会用到数组。在不知道each()方法前，如果碰到数组遍历，我一般都是这么写的:

var arr = new Array();
arr.push(1);
arr.push(2);
arr.push(3);
for(var i =0;i<arr.length;i++)
{
   (function(m){
      console.log(this);
   })(i);
}

多么繁琐啊！！现在又了each()，生活从此变轻松。　　

上面的这段代码，只要一句话。

var arr = new Array();
arr.push(1);
arr.push(2);
arr.push(3);

arr.each(function(){
  console.log(this);
});

使用each之后，结构立马变得简洁优雅起来。

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery中find()方法用法实例

    本文实例讲述了jQuery中find()方法用法.分享给大家供大家参考.具体分析如下: 此方法获得匹配元素集合中所有元素的子元素,并通过选择器.jQuery 对象或元素删选. find()方法是获取匹配元素后代元素的好方法. 注意:children()只获取一级子元素,而find()将查找所所有子元素. 语法结构一: 复制代码 代码如下: $(selector).find(expr) 参数列表: 参数 描述 expr 字符串值,定义筛选表达式. 实例代码: 复制代码 代码如下: <!DOCTYP

  • jQuery初学:find()方法及children方法的区别分析

    jQuery初学:find()方法及children方法的区别分析

    首先看看英文解释吧: children方法:find方法:通过以上的解释,可以总结如下: 1:children及find方法都用是用来获得element的子elements的,两者都不会返回 text node,就像大多数的jQuery方法一样. 2:children方法获得的仅仅是元素一下级的子元素,即:immediate children. 3:find方法获得所有下级元素,即:descendants of these elements in the DOM tree 4:children方

  • Jquery find与filter函数区别 说明

    find()会在div元素内 寻找 class为classname的元素. filter()则是筛选div的class为classname的元素. 基本是find子元素找,filter是平级找 ·find 函数是在当前对象集合的子元素中进行查询; ·filter 函数是对当前对象集合进行过滤, 利用过滤条件缩小范围; ·find 函数的参数是 jQuery 选择器表达式; ·filter 的参数也是选择器表达式, 但可以有多个条件, 用逗号分隔(逻辑或关系); ·filter 的参数也可以是个函

  • Jquery中的层次选择器与find()的区别示例介绍

    复制代码 代码如下: $("#anaylseBody tr").find("td:eq(" + $("#analyse th:contains(" + $(this).val() + ")").index() + ")").hide(); ("#anaylseBody tr") find作为根基 复制代码 代码如下: $("#anaylseBody tr td") 以

  • JQuery 选择器、过滤器介绍

    JQuery 选择器、过滤器介绍

    今日的学习再结合昨天的JavaScriptDOM的内容,让我对此十分清晰.JQuery原则:"write less, do more.",这句话已充分说明它对简化使用JavaScriptDOM编程的功力! 每位老师都有自己的教学方式,可能根据教授的内容的不同教学方式也有轻微的变化.老佟是一位非常有经验的软件教师,之前他在大连的软件公司做培训.经过多年的总结,他已经有自己一套成熟的教学方式.这个方式让我十分喜欢!至于是什么方式,你自己来体验吧!哈哈~~ 从学习JavaWEB.Struts

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

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

    .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选. .find(selector)方法是返回匹配元素集合中每个元素的后代.参数是必选的,可以为选择器.jquery对象可元素来对元素进行筛选. .find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级.这里的children,我理解为儿子,只在儿子这一级遍历.看下例子: 复制代码 代码如下: .chi

  • jQuery find和children方法使用

    需要查找一个对象内包含的某个子对象. 为了避免和美工冲突,对特定操作对象加上id标识,美工不大改也没什么问题. 1.children("condition") 获取的是一级子元素. 2.find("condition")获取包含的所有子元素.

  • jQuery中Find选择器用法示例

    本文实例讲述了jQuery中Find选择器用法.分享给大家供大家参考,具体如下: find 可以查找指定节点下的节点,它是会递归查找的,即可以查找子节点的子节点 示例如下: function CalculatePrice() { var totalMoney = 0; $(".trBookCartItem").each(function (index, item) { var price = $(item).find(".spanPrice").text(); va

  • Jquery选择器中使用变量实现动态选择例子

    例子一: <table> <tr> <th>用户名</th> <th>状态</th> <tr> <tr> <td>张三</td> <td data-uid="10000">正常</td> <tr> <tr> <td>李四</td> <td data-uid="10001"

  • 使用jquery选择器如何获取父级元素、同级元素、子元素

    一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 复制代码 代码如下: <div id="par_div"><a id="href_fir" href="#">href_fir</a> <a id="href_sec" href="#">href_sec</a> <a id="href_thr&qu

  • jquery选择器排除某个DOM元素的方法（实例演示）

    jquery选择器众多,使用选取某个DOM的方法有很多种,如何在选取的某个元素集上面做一些排除呢?下面通过几个实例说明: 1.选择所有的img元素,排除class=phpernote的元素的个数: 复制代码 代码如下: $('img:not(.phpernote)').length();//或者$('img').not('.phpernote').length(); 2.获取id=phpernote下面所有没有class=com的li元素的个数 复制代码 代码如下: $('#phpernote

  • Jquery颜色选择器ColorPicker实现代码

    Jquery颜色选择器ColorPicker实现代码

    在CMS中通常都有给标题添加颜色的功能,但一般都比较简单,颜色支持也少,这里我要分享一个自己修改的颜色选择器.界面简洁,功能强大.在我们的日常项目中可以快速的部署. 复制代码 代码如下: $(".colorpicker").colorpicker({ target:'#title', success:function(o,color){ $("#color").val(color) }, reset:function(o){ $("#color"

随机推荐