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);
});

JQuery遍历,find()和each()方法的更多相关文章

  1. jquery遍历json与数组方法总结

    来自:http://www.php100.com/html/program/jquery/2013/0905/5927.html 先我们来参考each() 方法,each()规定为每个匹配元素规定运行 ...

  2. jQuery 遍历each()的使用方法

    .each()是一个for循环的包装迭代器.each()通过回调的方式处理,并且会有2个固定的实参,索引与元素(从0开始计数).each()回调方法中的this指向当前迭代的dom元素 遍历方法: & ...

  3. Jquery 遍历数组之$().each方法与$.each()方法介绍

    $().each() 对于这个方法,在dom处理上用的比较多,如果一个html页面上面有多个checkbox,这时用$().each来处理checkbox是比较不错的; $("input[t ...

  4. jQuery 遍历 - eq() 和siblings() 方法

    eq() 方法将匹配元素集缩减值指定 index 上的一个. 通过为 index 为 2 的 div 加入适当的类.将其变为蓝色: <!DOCTYPE html> <html> ...

  5. Jquery遍历数组之$.inArray()方法介绍

    $.inArray()函数用于在数组中搜索指定的值,并返回其索引值.如果数组中不存在该值,则返回-1; $.inArray(value,array)    --value是要查找的值,array是被查 ...

  6. Jquery 遍历数组之grep()方法介绍

    grep()方法用于数组元素过滤筛选. grep(array,callback,boolean);方法参数介绍. array   ---待处理数组 callback  ---这个回调函数用来处理数组中 ...

  7. jQuery遍历 filter()方法

    实例 改变所有 div 的颜色,然后向类名为 "middle" 的类添加边框: $("div").css("background", &qu ...

  8. jQuery 遍历用法

    jQuery 遍历 DOM 树 parent() 方法返回被选元素的直接父元素(找爸爸). parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (找长辈). parents ...

  9. 常用的jquery遍历函数

    1.Jquery遍历祖先 1).parent()  方法返回被选元素的直接父元素. 2).parents()  方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>) ...

  10. 【转】 jquery遍历json数组方法

    $(function () { var tbody = ""; //------------遍历对象 .each的使用------------- //对象语法JSON数据格式(当服 ...

随机推荐

  1. selenium_unittest框架,TestCase引用

    新手,纯属个人理解,有问题可以给出建议奥~谢谢. 如以下代码,每一个test的类都是一个测试方法而测试方法必须由test_xxx开头命名,非test开头可能会执行不到,执行顺序如test1,test2 ...

  2. vue全局后置钩子afterEach

    beforeEach是路由跳转前执行的,afterEach是路由跳转后执行的. afterEach只有两个参数  afterEach((to,from)=>{}) 例子: router.afte ...

  3. 7. The British Thached Roof 英国的茅草屋顶

    7. The British Thached Roof 英国的茅草屋顶 (1) The view over a valley of a tiny village with thatchd roof c ...

  4. boost--时间处理

    date_time库的时间功能位于名字空间boost::posix_time,它提供了微妙级别(最高可达纳秒)的时间系统,使用需要包含头文件"boost\date_time\posix_ti ...

  5. js事件触发器 dispatchEvent()

    [其实就是自动触发事件,而非手动(交互)触发事件] dispatchEvent是作为高级浏览器(如chrome.Firfox等)的事件触发器来使用的,那么什么是事件触发器?就是触发事件的东西.可能有人 ...

  6. codeforces 508B

    B. New Year Permutation time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  7. Html5与Css3知识点拾遗(七)

    布局 实例:规范的命名和编排 <body> <div class="page"><!--page开始--> <header class=& ...

  8. IIC通讯协议(非原创,转载他人,用于学习)

    I2C协议:1.空闲状态 2.开始信号 3.停止信号 4.应答信号 5.数据的有效性 6.数据传输 IIC详解 1.I2C总线具有两根双向信号线,一根是数据线SDA,另一根是时钟线SCL 2.IIC总 ...

  9. spring redis @Cacheable注解使用部分错误及无效原因

    spring redis @Cacheable注解使用部分错误及无效原因 说明:     spring项目用到redis注解无效,解决问题中遇到一堆BUG,各种搜索,看了许多错误解决方案一一测试,对于 ...

  10. Zhu-Takaoka Two-dimensional Pattern Matching

    Two dimensional pattern matching. Details may be added later.... Corresponding more work can be foun ...