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 相关文章推荐
再论Javascript下字符串连接的性能
Mar 05 Javascript
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
浅谈webpack+react多页面开发终极架构
Nov 11 Javascript
js实现日历
Nov 07 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
javascript如何创建对象
2016/08/29 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
python端口扫描系统实现方法
2014/11/19 Python
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
Python制作数据导入导出工具
2015/07/31 Python
基于Python实现用户管理系统
2019/02/26 Python
Django多个app urls配置代码实例
2020/11/26 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
如何安装ruby on rails
2014/02/09 面试题
入党申请书自我鉴定
2013/10/12 职场文书
商务英语应届生自我鉴定
2013/12/08 职场文书
千元咖啡店的创业计划书范文
2013/12/29 职场文书
小学生检讨书大全
2014/02/06 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
js实现上传图片到服务器
2021/04/11 Javascript