【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之后,结构立马变得简洁优雅起来。

关于each()的源代码,可以参照这个:

http://www.cnblogs.com/Fooo/archive/2011/01/11/1932900.html

代码

/*!

* jQuery源码分析-each函数

* jQuery版本:1.4.2

*

* ----------------------------------------------------------

* 函数介绍

*

* each函数通过jQuery.extend函数附加到jQuery对象中:

* jQuery.extend({

*     each: function() {}

* });

* 如果对jQuery.extend函数源码还不了解,可以参考《jQuery源码分析-extend函数》一文

*

* jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理

* jQuery.each方法可以为处理函数增加附带的参数(带参数与不带参数的回调使用方法不完全一致)

*

* ----------------------------------------------------------

* 使用说明

* each函数根据参数的类型实现的效果不完全一致:

* 1、遍历对象(有附加参数)

* $.each(Object, function(p1, p2) {

*     this;      //这里的this指向每次遍历中Object的当前属性值

*     p1; p2;    //访问附加参数

* }, ['参数1', '参数2']);

*

* 2、遍历数组(有附件参数)

* $.each(Array, function(p1, p2){

*     this;      //这里的this指向每次遍历中Array的当前元素

*     p1; p2;    //访问附加参数

* }, ['参数1', '参数2']);

*

* 3、遍历对象(没有附加参数)

* $.each(Object, function(name, value) {

*     this;     //this指向当前属性的值

*     name;     //name表示Object当前属性的名称

*     value;    //value表示Object当前属性的值

* });

*

* 4、遍历数组(没有附加参数)

* $.each(Array, function(i, value) {

*     this;     //this指向当前元素

*     i;        //i表示Array当前下标

*     value;    //value表示Array当前元素

* });

* ----------------------------------------------------------

*

*/

//jQuery.each(), $.each()

//@param {Object}|{Array} object 需要遍历处理的对象或数组

//@param {Function} callback 遍历处理回调函数

//@param {Array} args callback回调函数的附加参数

each: function(object, callback, args){

//当需要遍历的是一个对象时,name变量用于记录对象的属性名

var name,

//当需要遍历的是一个数组时,i变量用于记录循环的数组下标

i = 0,

//遍历数组长度,当需要遍历的对象是一个数组时存储数组长度

//如果需要遍历的是一个对象,则length === undefined

length = object.length,

//检查第1个参数object是否是一个对象

//根据object.length排除数组类型,根据isFunction排除函数类型(因为函数也是对象)

isObj = length === undefined || jQuery.isFunction(object);

//回调函数具有附加参数时,执行第一个分支

//if(!!args) {

if (args) {

//需要遍历的是一个对象

if (isObj) {

//遍历对象属性,name是对象的属性名,再函数顶部已声明

//许多人不太习惯for(var name in object)方式,如果不进行声明,则name就会被定义为全局变量

for (name in object) {

//调用callback回调函数,且回调函数的作用域表示为当前属性的值

//如:callback() {  this; //函数中的this指向当前属性值

//将each的第3个参数args作为回调函数的附加参数

if (callback.apply(object[name], args) === false) {

//如果在callback回调函数中使用return false;则不执行下一次循环

break;

}

}

}

//需要遍历的是一个数组

else {

//循环长度,循环变量i在函数顶部已定义

//循环变量的自增在循环内部执行

for (; i < length;) {

//调用callback函数,与上面注释的callback调用一致

//此处callback函数中的this指向当前数组元素

if (callback.apply(object[i++], args) === false) {

break;

}

}

}

}

//回调函数没有附加参数时,执行第二个分支

else {

//需要遍历的是一个对象

if (isObj) {

//循环对象的属性名,name在函数顶部已定义

for (name in object) {

//调用callback回调函数

//在不带参数的对象遍历中,作用域表示为当前属性的值

//且回调函数包含两个参数,第一个数当前属性名,第二个是当前属性值

//我觉得这句代码修改一下会更好用:if(callback.call(object, name, object[name]) === false) {

if (callback.call(object[name], name, object[name]) === false) {

//如果在callback回调函数中使用return false;则不执行下一次循环

break;

}

}

}

//需要遍历的是一个数组

else {

//这里的for写法有点BT,解释为:

//var value = object[0];

//for(; i < length;) {

//    if(false === callback.call(value, i, value)) {

//        break;

//    }

//    value = object[++i];

//}

//同样,我觉得这里的代码稍加修改会更好用:

//for (; i < length && false !== callback.call(object, i, object[i++]);) {

//}

for (var value = object[0]; i < length && callback.call(value, i, value) !== false; value = object[++i]) {

}

}

}

//这里返回遍历的对象或数组,但object没有被更改,因此一般不给$.each()赋值

//但是如果按照我在注释中所修改的写法来使用,且在callback回调函数中对this(即对object的引用)进行了修改

//则这里返回的object是被修改后的对象或数组

return object;

}

JQUERY中find方法的更多相关文章

  1. jQuery中eq()方法用法实例

    本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...

  2. 深度理解Jquery 中 offset() 方法

    参考原文:深度理解Jquery 中 offset() 方法

  3. jQuery中attr()方法用法实例

    本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元 ...

  4. 使用jquery中height()方法获取各种高度大全

    alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(docum ...

  5. 锋利的jQuery读书笔记---jQuery中Ajax--load方法

    第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  6. 关于Jquery中ajax方法data参数用法的总结

    data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...

  7. jquery中Live方法不可用,Jquery中Live方法失效

    jquery中Live方法不可用,Jquery中Live方法失效 >>>>>>>>>>>>>>>>> ...

  8. jQuery中on()方法用法实例详解

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...

  9. jQuery中的方法

    jQuery中的方法来操作HTML标签中的属性 attr(name)    获取当前对象的指定的属性的值 attr(key,value)  给当前对象设置属性值 attr(properties)  一 ...

  10. 解析jQuery中extend方法--源码解析以及递归的过程《二》

    源码解析 在解析代码之前,首先要了解extend函数要解决什么问题,以及传入不同的参数,会达到怎样的效果.extend函数内部处理传入的不同参数,返回处理后的对象. extend函数用来扩展对象,增加 ...

随机推荐

  1. Spring mvc 4系列教程(一)

    一.Spring框架概览 Spring框架是一种轻量级.一站式解决企业级应用的解决方案.不仅如此,Spring的模块化的特点,可以使你只引用所需要的部分,而无需引用全部.你可以使用控制反转容器(IoC ...

  2. xtrabackup 详解

    xtrabackup是Percona公司CTO Vadim参与开发的一款基于InnoDB的在线热备工具,具有开源,免费,支持在线热备,备份恢复速度快,占用磁盘空间小等特点,并且支持不同情况下的多种备份 ...

  3. mac 比较两个文件

    比较两个文件,输出两个文件都有的行,可以 1.使用comm命令 如下例: ------------------->$ cat 1s1.txt line line line line line l ...

  4. vim中使用系统粘贴板

    在vim中如果想使用系统粘贴板,也就是说,如果你在其他程序中复制内容,那么使用shift+insert组合键就可以粘贴进来. 需要说明的是,vim中的粘贴板有很多,你可以输入 :reg来进行查看.而我 ...

  5. C# 连接 sql server

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  6. Java转义emoji等特殊符号

    写在前面 网上找了很多转emoji等方法,大多有两种方法 更改数据库编码格式为utf8mb4 过滤字符串中的emoji 都不是很优雅 更改数据库编码,势必影响其他数据库 过滤emoj效率比较低 处理E ...

  7. 如何判断JavaScript数据具体类型

    昨晚做了阿里的题目,让我写一个函数,可以判断数据的具体类型.其实题目很简单的...但是真的是自己不太注意吧,写的很糟糕啊. 然后今天就自己写了一个,然后又到晚上搜了下,看看别人的写法,结果发现自己有点 ...

  8. UVa 442 Matrix Chain Multiplication(栈的应用)

    题目链接: https://cn.vjudge.net/problem/UVA-442 /* 问题 输入有括号表示优先级的矩阵链乘式子,计算该式进行的乘法次数之和 解题思路 栈的应用,直接忽视左括号, ...

  9. Error creating bean with name 'tomcatEmbeddedServletContainerFactory'

    org.springframework.boot.autoconfigure.web.EmbeddedServletContainerAutoConfiguration$EmbeddedTomcato ...

  10. [转]WordPress 主题教程 #2:模板文件和模板

    本文转自:http://blog.wpjam.com/m/wp-theme-lesson-2-template-files-and-templates/ 模板文件(template files)和模板 ...