Jquery中find与each方法用法实例


Posted in Javascript onFebruary 04, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
JavaScript 面向对象之命名空间
May 04 Javascript
JQuery select标签操作代码段
May 16 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 #Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 #Javascript
15款jQuery分布引导插件分享
Feb 04 #Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 #Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 #Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 #Javascript
Javascript中实现trim()函数的两种方法
Feb 04 #Javascript
You might like
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
动态刷新 dorado树的js代码
2009/06/12 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
[01:31]完美与DOTA2历程
2014/07/31 DOTA
Python中的zipfile模块使用详解
2015/06/25 Python
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
Python selenium 三种等待方式解读
2016/09/15 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
python实现AES加密和解密
2019/03/27 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
生物制药专业自我鉴定
2014/02/19 职场文书
中学生评语大全
2014/04/18 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
电子商务实训报告总结
2014/11/05 职场文书
自我推荐信格式模板
2015/03/24 职场文书