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 相关文章推荐
javascript XML数据显示为HTML一例
Dec 23 Javascript
javascript parseInt 大改造
Sep 27 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
JavaScript中的Array对象使用说明
Jan 17 Javascript
jQuery学习笔记之jQuery中的$
Jan 19 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
Vue实现购物车功能
Apr 27 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 Javascript
浅谈JS中几种轻松处理'this'指向方式
Sep 16 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防注
2007/01/15 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
Jquery cookie操作代码
2010/03/14 Javascript
JavaScript 大数据相加的问题
2011/08/03 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
vue实现前端列表多条件筛选
2020/10/26 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
Python中的Matplotlib模块入门教程
2015/04/15 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
python两个list[]相加的实现方法
2020/09/23 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
亚马逊印度站:Amazon.in
2017/10/15 全球购物
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
幼儿园亲子活动方案
2014/01/29 职场文书
高中运动会入场词
2014/02/14 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python