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 相关文章推荐
jQuery 源码分析笔记(3) Deferred机制
Jun 19 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 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缓存集成库phpFastCache用法
2014/12/15 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
python进阶教程之异常处理
2014/08/30 Python
python自动翻译实现方法
2016/05/28 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
python游戏开发的五个案例分享
2020/03/09 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
绿色学校实施方案
2014/03/31 职场文书
拓展策划方案
2014/06/03 职场文书
商场消防安全责任书
2014/07/29 职场文书
公司承诺书格式范文
2015/04/28 职场文书
严以用权学习心得体会
2016/01/12 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android