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之WEB开发调试利器:Firebug 下载
Jan 13 Javascript
javascript下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 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
2006/11/25 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
php实现微信支付之现金红包
2018/05/30 PHP
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
AngularJs 终极购物车(实例讲解)
2017/11/08 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
django url到views参数传递的实例
2019/07/19 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
简短大学毕业感言
2014/01/18 职场文书
数控专业毕业生自荐信范文
2014/03/04 职场文书
环保倡议书格式范文
2014/05/14 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
战马观后感
2015/06/08 职场文书
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python