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模板技术
Apr 27 Javascript
javascript new一个对象的实质
Jan 07 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
vue实现从外部修改组件内部的变量的值
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的无限分类实现想法~
2007/01/02 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
php数组添加元素方法小结
2014/12/20 PHP
PHP速成大法
2015/01/30 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
测试你的JS的掌握程度的代码
2009/12/09 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
Python类定义和类继承详解
2015/05/08 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
pyqt5实现登录界面的模板
2020/05/30 Python
python实现UDP协议下的文件传输
2020/03/20 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
python中操作文件的模块的方法总结
2021/02/04 Python
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
大学生自我鉴定范文模板
2014/01/21 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
商铺租房协议书范本
2014/12/04 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
JAVA API 实用类 String详解
2021/10/05 Java/Android