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 getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
Webpack path与publicPath的区别详解
May 03 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 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/10/09 PHP
用PHP实现将GB编码转换为UTF8
2006/11/25 PHP
php 传值赋值与引用赋值的区别
2010/12/29 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
python日志记录模块实例及改进
2017/02/12 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
golang/python实现归并排序实例代码
2020/08/30 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
家长学校工作方案
2014/05/07 职场文书
体育课外活动总结
2014/07/08 职场文书
工作所在部门证明
2014/09/21 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
蜗居观后感
2015/06/11 职场文书
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS