JQUERY中find方法
【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方法的更多相关文章
- jQuery中eq()方法用法实例
本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...
- 深度理解Jquery 中 offset() 方法
参考原文:深度理解Jquery 中 offset() 方法
- jQuery中attr()方法用法实例
本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元 ...
- 使用jquery中height()方法获取各种高度大全
alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(docum ...
- 锋利的jQuery读书笔记---jQuery中Ajax--load方法
第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- 关于Jquery中ajax方法data参数用法的总结
data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...
- jquery中Live方法不可用,Jquery中Live方法失效
jquery中Live方法不可用,Jquery中Live方法失效 >>>>>>>>>>>>>>>>> ...
- jQuery中on()方法用法实例详解
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...
- jQuery中的方法
jQuery中的方法来操作HTML标签中的属性 attr(name) 获取当前对象的指定的属性的值 attr(key,value) 给当前对象设置属性值 attr(properties) 一 ...
- 解析jQuery中extend方法--源码解析以及递归的过程《二》
源码解析 在解析代码之前,首先要了解extend函数要解决什么问题,以及传入不同的参数,会达到怎样的效果.extend函数内部处理传入的不同参数,返回处理后的对象. extend函数用来扩展对象,增加 ...
随机推荐
- Go的方法集
方法集定义了接口的接受规则. package main import "fmt" type notifier interface { notify() } type user st ...
- linux less命令详情
less 工具也是对文件或其它输出进行分页显示的工具,应该说是linux正统查看文件内容的工具,功能极其强大.less 的用法比起 more .tail更加的有弹性.在 more 的时候,我们并没有办 ...
- k8s集群添加node节点(使用kubeadm搭建的集群)
1.安装docker.kubelet.kubectl.kubeadm.socat # cat kubernets.repo[kubernetes]name=Kubernetesbaseurl=http ...
- 给RadioButtonList绑定Selected的值
有一个案例,是读取Excel的资料显示于ASP.NET的GridView控件.在GridView控件中,有一列是用RadioButtonList来显示性别信息(男或女). 另外来看看Excel的数据: ...
- SQL Server T—SQL 基本编程
一 定义变量 declare @变量名 数据类型 例:declare @a int -- 变量名前必须有 @ 二 赋值 set @变量名 = 值 sele ...
- SqlServer 使用sys.dm_tran_locks处理死锁问题
1.模拟资源锁定 --开始事务BEGIN TRANSACTION--更新数据update Table_1 set FuncName=FuncName--等待1分钟WAITFOR DELAY '01:0 ...
- Spring Boot项目使用maven-assembly-plugin根据不同环境打包成tar.gz或者zip
spring-boot-assembly 在spring boot项目中使用maven profiles和maven assembly插件根据不同环境打包成tar.gz或者zip 将spring bo ...
- CentOS总结归纳之基本操作(linux系管与运维一)
原创作品,转载请在文章明显位置注明出处:https://www.cnblogs.com/sunshine5683/p/10170009.html 使用命令关闭和重启系统: 一.条件:只有root用户才 ...
- Vue, element-ui Module build failed: Error: No PostCSS Config found
使用vue框架写pc页面时,我们经常会用到element-ui这个框架. 当我们吧把需要的东西都装在好运行项目的时候,有时会出现这样的错误, Module build failed: Error: N ...
- js-语言精粹-函数记忆
函数可以将先前操作的结果记录在某个对象里,从而避免无谓的重复运算.这种优化方式被称为记忆(memoization).JavaScript的对象和数组要实现这种优化是非常方便的. 比如说,我们想要一个递 ...