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 相关文章推荐
js有序数组的连接问题
Oct 01 Javascript
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
Mar 04 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 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
第十节--抽象方法和抽象类
2006/11/16 PHP
php whois查询API制作方法
2011/06/23 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
一个用js实现的页内搜索代码
2007/05/23 Javascript
Javascript 篱式条件判断
2008/08/22 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
浅谈python内置变量-reversed(seq)
2017/06/21 Python
python中的随机函数小结
2018/01/27 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
详解Python 函数如何重载?
2019/04/23 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
教育学习自我评价
2014/02/03 职场文书
广告宣传策划方案
2014/05/21 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
新教师教学工作总结
2015/08/14 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python