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 相关文章推荐
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
Vuex实现简单购物车
Jan 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程序员基本要求和必备技能
2014/05/09 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
33种Javascript 表格排序控件收集
2009/12/03 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
原生JS实现微信通讯录
2020/06/18 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
大学生应聘自荐信
2013/10/11 职场文书
综合办公室个人的自我评价
2013/12/22 职场文书
青年教师培训方案
2014/02/06 职场文书
采购经理岗位职责
2014/02/16 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
2014年档案室工作总结
2014/12/01 职场文书
详细聊聊vue中组件的props属性
2021/11/02 Vue.js