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 CSS菜单功能 改进版
Dec 20 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
Node.js模块封装及使用方法
Mar 06 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 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
discuz Passport 通行证 整合笔记
2008/06/30 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
PHP实现添加购物车功能
2017/03/06 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
PHP函数积累总结
2019/03/19 PHP
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
2010/06/07 Javascript
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python  unittest单元测试框架的使用
2018/09/08 Python
Python实现DDos攻击实例详解
2019/02/02 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
Tensorflow 多线程设置方式
2020/02/06 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
泰国第一在线超市:Tops
2021/02/13 全球购物
爱心活动计划书
2014/04/26 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
学期个人工作总结
2015/02/13 职场文书
员工升职自荐信
2015/03/27 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
MySQL中日期型单行函数代码详解
2021/06/21 MySQL