jQuery中常用的遍历函数用法实例总结


Posted in Javascript onSeptember 01, 2015

本文实例总结了jQuery中常用的遍历函数用法。分享给大家供大家参考。具体如下:

1. children()函数

children()函数用于选取每个匹配元素的子元素,并以jQuery对象的形式返回。
你还可以使用选择器进一步缩小筛选范围,筛选出符合指定选择器的元素。

用法示例如下:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如:tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + this.id : "");
  }).get();
}
// 匹配id为n1的元素
var $n1 = $("#n1");
// 匹配n1的所有子元素
var $menu_li = $n1.children();
document.writeln( getTagsInfo( $menu_li ) ); // LI#n2,LI#n7,LI#n13
// 匹配n1所有含有类名active的子元素
var $active_menu_li = $n1.children(".active");
document.writeln( getTagsInfo( $active_menu_li ) ); // LI#n2
// 匹配$menu_li每个元素的所有span子元素
var $span = $menu_li.children("span");
document.writeln( getTagsInfo( $span ) ); // SPAN#n3,SPAN#n8,SPAN#n14

2. filter()函数

filter()函数用于筛选出符合指定表达式的元素,并以jQuery对象的形式返回。
这里的表达式包括:选择器(字符串)、DOM元素(Element)、jQuery对象、函数。

用法示例如下:

/* $("li") 匹配n4、n5、n6这3个元素 */
//筛选出所有索引为偶数(序号为奇数)的元素,即n4、n6
document.writeln( $("li").filter( ":even" ).length ); // 2
//筛选出包含类名foo的元素,即n5
document.writeln( $("li").filter( $(".foo") ).length ); // 1
//筛选出所有带有class属性的元素,即n5、n6
document.writeln( $("li").filter( "[class]" ).length ); // 2
/* $("input") 匹配n8、n9这两个元素 */
//筛选出选中的元素,即n9
document.writeln( $("input").filter( ":checked" ).length ); // 1
var input = document.getElementsByName("codeplayer");
//筛选出所有的input元素,即n8、n9
document.writeln( $("input").filter( input ).length ); // 2
//$("div") 匹配n1、n2、n7这3个元素
//筛选出id和class属性相等的元素,即n2、n7
var $result = $("div").filter( function(index, element){
  // 函数内的this === element
  return this.id == this.className; 
} );
document.writeln( $result.length ); // 2

3. not()函数

not()函数用于从匹配元素中删除符合指定表达式的元素,并以jQuery对象的形式返回保留的元素。
这里的表达式包括:选择器(字符串)、DOM元素(Element)、jQuery对象、函数。
与该函数相对的是add()函数,用于向当前匹配元素中添加符合指定表达式的元素。

用法示例如下:

/* $("li") 匹配n4、n5、n6这3个元素 */
//排除掉n6,剩下2个元素n4、n5
document.writeln( $("li").not( "#n6" ).length ); // 2
//排除掉带类名foo的元素,剩下n4、n6
document.writeln( $("li").not( $(".foo") ).length ); // 2
//排除掉所有带有class属性的元素,剩下n4
document.writeln( $("li").not( "[class]" ).length ); // 1
/* $("input") 匹配n8、n9这两个元素 */
//排除掉被选中的元素,剩下n8
document.writeln( $("input").not( ":checked" ).length ); // 1
var input = document.getElementsByTagName("input");
//排除掉所有input元素,返回空的jQuery对象
document.writeln( $("input").not( input ).length ); // 0
/* $("div") 匹配n1、n2、n7这3个元素 */
//排除掉id和class属性相等的元素,剩下n1
var $result = $("div").not( function(index, element){
  // 函数内的this === element
  return this.id == this.className; 
} );
document.writeln( $result.length ); // 1

4. add()函数

add()函数用于向当前匹配元素中添加符合指定表达式的元素,并以jQuery对象的形式返回。
这里的表达式包括:选择器(字符串)、HTML内容(字符串)、DOM元素(Element)、jQuery对象。
与该函数相对的是not()函数,用于从当前匹配元素中移除符合指定表达式的元素。

用法示例如下:

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如:#id
function getTagsInfo($doms){
  return $doms.map(function(){
    return "#" + this.id;
  }).get();
}
//匹配所有的p元素,再加上所有的label元素
var $elements1 = $("p").add("label");
document.writeln( getTagsInfo( $elements1 ) ); // #n1,#n4,#n9,#n11
var $matches = $("span.active").add( document.getElementsByTagName("label") );
document.writeln( getTagsInfo( $matches ) ); // #n4,#n8,#n11,#n12
var $elements2 = $("label").add( $("strong") );
document.writeln( getTagsInfo( $elements2 ) ); // #n4,#n7,#n11
var $elements3 = $("span.active").add( "label", $("#n9") );
document.writeln( getTagsInfo( $elements3 ) ); // #n8,#n11,#n12
var $elements4 = $("p").add(".active").add("span:only-child");
document.writeln( getTagsInfo( $elements4 ) ); // #n1,#n3,#n6,#n7,#n8,#n9,#n12

5. slice()函数

slice()函数用于选取匹配元素中一段连续的元素,并以jQuery对象的形式返回。
该函数属于jQuery对象(实例)。

用法示例如下:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如:tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + this.id : "");
  }).get();
}
/* $("li") 匹配n4、n5、n6、n7、n8这5个元素 */
var $li = $("li");
// 选取第2个元素
var $sub1 = $("li").slice( 1, 2);
document.writeln( getTagsInfo( $sub1 ) ); // LI#n5
// 选取第4、5个元素
var $sub2 = $("li").slice( 3 );
document.writeln( getTagsInfo( $sub2 ) ); // LI#n7,LI#n8
// 选取第1~4个元素
// startIndex = length + (-5) = 0,endIndex = length + (-1) = 4
var $sub3 = $("li").slice( -5, -1);
document.writeln( getTagsInfo( $sub3 ) ); // LI#n4,LI#n5,LI#n6,LI#n7

6. parent()函数

parent()函数用于选取每个匹配元素的父元素,并以jQuery对象的形式返回。
你还可以使用选择器来进一步缩小选取范围,筛选出符合指定选择器的元素。
该函数属于jQuery对象(实例)。

用法示例如下:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如:tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + this.id : "");
  }).get();
}
var $n2 = $("#n2");
// 获取n2的父元素
var $parents1 = $n2.parent();
document.writeln( getTagsInfo( $parents1 ) ); // DIV#n1
var $p = $("p");
// 获取所有p元素的父元素
var $parents2 = $p.parent();
document.writeln( getTagsInfo( $parents2 ) ); // DIV#n1,DIV#n5
// 获取所有p元素的包含类名"bar"的父元素
var $parents3 = $p.parent(".bar");
document.writeln( getTagsInfo( $parents3 ) ); // DIV#n5
var $foo = $(".foo");
//获取所有包含类名"foo"的元素的父元素
var $parents4 = $foo.parent();
document.writeln( getTagsInfo( $parents4 ) ); // P#n3,DIV#n5

7. parents()函数

parents()函数用于选取每个匹配元素的祖先元素,并以jQuery对象的形式返回。
你还可以使用选择器来进一步缩小选取范围,只选取其中符合指定选择器的元素。
该函数属于jQuery对象(实例)。

用法示例如下:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如:tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + this.id : "");
  }).get();
}
var $n4 = $("#n4");
//获取n4的祖先元素
var $parents1 = $n4.parents();
document.writeln( getTagsInfo( $parents1 ) ); // P#n3,DIV#n1,BODY,HTML
var $p = $("p");
//获取所有p元素的祖先元素
var $parents2 = $p.parents();
document.writeln( getTagsInfo( $parents2 ) ); // DIV#n5,DIV#n1,BODY,HTML
//获取所有p元素的包含类名"bar"的祖先元素
var $parents3 = $p.parents(".bar");
document.writeln( getTagsInfo( $parents3 ) ); // DIV#n5
var $foo = $(".foo");
//获取所有包含类名"foo"的元素的祖先元素中的div元素
var $parents4 = $foo.parents("div");
document.writeln( getTagsInfo( $parents4 ) ); // DIV#n5,DIV#n1

8. siblings()函数

siblings()函数用于选取每个匹配元素的所有同辈元素(不包括自己),并以jQuery对象的形式返回。
你还可以使用选择器来进一步缩小选取范围,筛选出符合指定选择器的元素。
该函数属于jQuery对象(实例)。

用法示例如下:

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如:#id
function getTagsInfo($doms){
  return $doms.map(function(){
    return "#" + this.id;
  }).get();
}
var $n4 = $("#n4");
//匹配n4的所有同辈元素(同辈元素不会包括n4自己,下同)
var $elements = $n4.siblings( );
document.writeln( getTagsInfo( $elements ) ); // #n2,#n5,#n7,#n8
//匹配n4所有的同辈span元素
var $matches = $n4.siblings("span");
document.writeln( getTagsInfo( $matches ) ); // #n2,#n5,#n8
var $label = $("label");
//匹配所有label元素的含有类名"active"的同辈元素
var $actives = $label.siblings(".active");
document.writeln( getTagsInfo( $actives ) ); // #n7,#n8,#n12

9. prev()与prevAll()函数

prev()函数用于筛选每个匹配元素之前紧邻的同辈元素,并以jQuery对象的形式返回。
你还可以使用指定的选择器进一步缩小筛选范围,筛选出符合指定选择器的元素。
与该函数相对的是next()函数,用于筛选每个匹配元素之后紧邻的同辈元素。

prevAll()函数用于选取每个匹配元素之前的所有同辈元素,并以jQuery对象的形式返回。
你还可以使用选择器来进一步缩小选取范围,筛选出符合指定选择器的元素。
与该函数相对的是nextAll()函数,用于选取每个匹配元素之后的所有同辈元素。

prev()用法示例如下:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如:tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + this.id : "");
  }).get();
}
//匹配所有span元素:e2、e3、e4、e5、e7、e9
var $span = $("span");
//匹配所有span元素之前紧邻的同辈元素:e3、e2、e8
//e2 => 无【没有上一个紧邻的同辈元素,因为它是同辈元素中的第一个,下同】
//e3 => 无
//e4 => e3
//e5 => e2
//e7 => 无
//e9 => e8
var $span_prev = $span.prev( );
document.writeln( getTagsInfo( $span_prev ) ); // SPAN#e3,SPAN#e2,A#e8
//匹配所有span元素之前紧邻的同辈span元素
var $span_prev_span = $span.prev( "span" );
document.writeln( getTagsInfo( $span_prev_span ) ); // SPAN#e3,SPAN#e2

prevAll()用法示例如下:

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如:#id
function getTagsInfo($doms){
  return $doms.map(function(){
    return "#" + this.id;
  }).get();
}
var $n6 = $("#n6");
//匹配n6之前所有的同辈元素
var $n6_prevAll = $n6.prevAll();
document.writeln( getTagsInfo( $n6_prevAll ) ); // #n5,#n4,#n2
//匹配n6之前的所有同辈strong元素
var $n6_prevAll_strong = $n6.prevAll("strong");
document.writeln( getTagsInfo( $n6_prevAll_strong ) ); // #n4
var $label = $("label");
//匹配所有label元素之前的包含类名"active"的同辈元素
var $label_prevAll_active = $label.prevAll(".active");
document.writeln( getTagsInfo( $label_prevAll_active ) ); // #n10,#n5,#n4

10. next()函数与nextAll()函数

next()函数用于筛选每个匹配元素之后紧邻的同辈元素,并以jQuery对象的形式返回。
你还可以使用指定的选择器进一步缩小筛选范围,筛选出符合指定选择器的元素。
与该函数相对的是prev()函数,用于筛选每个匹配元素之前紧邻的同辈元素。

nextAll()函数用于选取每个匹配元素之后的所有同辈元素,并以jQuery对象的形式返回。
你还可以使用选择器来进一步缩小选取范围,筛选出符合指定选择器的元素。
与该函数相对的是prevAll()函数,用于选取每个匹配元素之前的所有同辈元素。

next()用法示例如下:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如:tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + this.id : "");
  }).get();
}
// 匹配所有span元素:e2、e3、e4、e5、e7、e9
var $span = $("span");
// 匹配所有span元素之后紧邻的同辈元素:e5、e4、e8
// e2的下一个紧邻的同辈元素是e5
// e3的是e4
// e4没有(因为它是同辈元素中的最后一个,下同)
// e5没有
// e7的是e8
// e9没有
var $span_next = $span.next( );
document.writeln( getTagsInfo( $span_next ) ); // SPAN#e5,SPAN#e4,A#e8
// 匹配所有span元素之后紧邻的同辈span元素
var $span_next_span = $span.next( "span" );
document.writeln( getTagsInfo( $span_next_span ) ); // SPAN#e5,SPAN#e4

nextAll()用法示例如下:

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如:#id
function getTagsInfo($doms){
  return $doms.map(function(){
    return "#" + this.id;
  }).get();
}
var $n4 = $("#n4");
//匹配n4之后所有的同辈元素
var $n4_nextAll = $n4.nextAll();
document.writeln( getTagsInfo( $n4_nextAll ) ); // #n5,#n7,#n8
//匹配n4之后的所有同辈strong元素
var $n4_nextAll_strong = $n4.nextAll("strong");
document.writeln( getTagsInfo( $n4_nextAll_strong ) ); // #n7
var $label = $("label");
var $label_nextAll_active = $label.nextAll(".active");
document.writeln( getTagsInfo( $label_nextAll_active ) ); // #n7,#n8,#n12

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
csdn 论坛技术区平均给分功能
Nov 07 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 Javascript
jquery常用函数与方法汇总
Sep 01 #Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 #Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 #Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 #Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 #Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 #Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 #Javascript
You might like
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
js实现随机点名
2021/01/19 Javascript
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
python基础教程之五种数据类型详解
2017/01/12 Python
基于python实现简单日历
2018/07/28 Python
Python面向对象程序设计示例小结
2019/01/30 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
Python解析json代码实例解析
2019/11/25 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
编码实现字符串转整型的函数
2012/06/02 面试题
医院护士求职自荐信格式
2013/09/21 职场文书
生产车间班组长岗位职责
2014/01/06 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
事业单位个人总结
2015/02/12 职场文书
任命书标准格式
2015/03/02 职场文书
创建文明城市倡议书
2015/04/28 职场文书
罗马假日观后感
2015/06/08 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS