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 相关文章推荐
让FireFox支持innerText的实现代码
Dec 01 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
学习面向对象之面向对象的术语
Nov 30 Javascript
Javascript调用C#代码
Jan 17 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
JS出现失效的情况总结
Jan 20 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
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网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
PHP解决中文乱码
2017/04/28 PHP
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python微信库:itchat的用法详解
2017/08/14 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
工程概预算专业毕业生求职信
2013/10/04 职场文书
食品安全承诺书范文
2014/08/29 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
关于教师节的广播稿
2015/08/19 职场文书
成人成长感言如何写?
2019/08/16 职场文书
python中的random模块和相关函数详解
2022/04/22 Python