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 相关文章推荐
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
事件模型在各浏览器中存在差异
Oct 20 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
jquery实现下载图片功能
Jul 18 jQuery
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 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中sprintf与printf函数的用法及区别
2016/01/08 PHP
PHP的全局错误处理详解
2016/04/25 PHP
php并发加锁示例
2016/10/17 PHP
PHP反射学习入门示例
2019/06/14 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
window.onload使用指南
2015/09/13 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
Python实现快速排序的方法详解
2019/10/25 Python
python 异步async库的使用说明
2020/05/04 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
师范生免费教育协议书范本
2014/10/09 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
初中生物教学随笔
2015/08/15 职场文书
Golang 对es的操作实例
2022/04/20 Golang