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 Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
ajax异步刷新实现更新数据库
Dec 03 Javascript
js Calender控件使用详解
Jan 05 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
angular+webpack2实战例子
May 23 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
vue路由分文件拆分管理详解
Aug 13 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学习之PHP表达式
2006/10/09 PHP
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
jQuery事件详解
2017/02/23 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
pandas对指定列进行填充的方法
2018/04/11 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
python实现随机加减法生成器
2020/02/24 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
特色蛋糕店创业计划书
2014/01/28 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
教师对学生的寄语
2014/04/03 职场文书
运动会拉拉队口号
2014/06/09 职场文书
车辆工程专业求职信
2014/06/14 职场文书
党性心得体会
2014/09/03 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
政审证明范文
2015/06/19 职场文书