【转】jQuery筛选函数总结

jQuery筛选函数总结

1)  串联函数

1.     addSelf()

将之前匹配元素集合增加到当前匹配元素集合中,返回匹配元素集合

Test case: <div><p>test</p></div>

Example: $(‘div’).find(‘p’).andSelf().addClass(‘class1’);

Result: <div><p class=”class1”>test</p></div>

 

2.     end()

回到最近的一个"破坏性"操作之前。如果之前没有破坏性操作,则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。(相当于undo()函数)

 

2)  查找函数

1.     add(exp)

把与表达式匹配的元素添加到jQuery对象中。可以用于连接分别与两个表达式匹配的元素结果集。

Test case: <p>test1</p><a>test2</a>

Example: $(‘p’).add(‘a’)

Result: [<p>test1</p>,<a>test2</a>]

 

2.     children([expr])

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可以通过可选的表达式来过滤所匹配的子元素。注意:parents()将查找所有祖辈元素,而children()之考虑子元素而不考虑所有后代元素。

Test case: <div></span>Hello Again</span></div>

Example: $(‘div’).children()

Result: <span>Hello Again</span>

 

3.     find(expr)

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

Test case: <p><span>Hello</span>, How are you? </p>

Example: $(‘p’).find(‘span’)

Result:  <span>Hello</span>

 

4.     next([expr])

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素(可以使用nextAll)。可以用一个可选的表达式进行筛选。

Test case: <p><span>Hello</span><a>h1</a></p>

Example: $(‘span’).next()

Result: <a>h1</a>

 

5.     nextAll([expr])

查找当前元素之后所有的同辈元素。

Test case: <div>h1</div><div>h2</div><div>h3</div>

Example: $(‘div:first’).nextAll()

Result: <div>h2</div><div>h3</div>

 

6.     offsetParent()

返回第一个匹配元素用于定位的父节点。这返回父元素中第一个其position设为relative或者absolute的元素。(仅对可见元素有效)

 

7.     parent([expr])

取得一个包含着所有匹配元素的唯一父元素的元素集合。

Test case: <div><p>Hello</p><p>Hello</p></div>

Example: $(‘p’).parent();

Result: <div><p>Hello</p><p>Hello</p></div>

 

8.     parents([expr])

取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。

Test case: <body><div><p><span>Hello</span></p><span>Hello Again</span></div> </body>

Example: $(“span”).parents(“p”);

Result: <p><span><Hello></span></p>

 

9.     prev([expr])

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素。

Test case: <div><span>Hello Again</span></div><p>And Again</p>

Example: $(“p”).prev()

Result: <div><span>Hello Again</span></div>

 

10.   prevAll([expr])

查找当前元素之前所有的同辈元素

Test case: <div></div><div></div><div></div><div></div>

Example: $(“div:last”).prevAll()

Result: <div></div><div></div><div></div>

 

11.   siblings([expr])

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。

Test case: <p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

Example: $("div").siblings()

Result: [ <p>Hello</p>, <p>And Again</p> ]

 

3)  过滤函数

1.     eq(insex)

获取第N个元素.这个元素的位置是从0算起。

Test case: <p> This is just a test.</p> <p> So is this</p>

Example: $(“p”).eq(1)

Result: <p> So is this</p>

 

2.     filter(expr) / filter(fn)

筛选出与指定表达式匹配的元素集合。用于缩小匹配的范围,用逗号分隔多个表达式

Test case: <p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

Example: $("p").filter(".selected");

Result: <p class="selected">And Again</p>

 

Test case: <p><ol><li>Hello</li></ol></p><p>How are you?</p>

Example:

$("p").filter(function(index) {
  return $("ol", this).length == 0;
});

Result: <p>How are you?</p>

 

3.     hasClass(class)

检查当前的元素是否含有某个特定的类,如果有,则返回true。这其实就是 is("." + class)

Test case: <div class="protected"></div><div></div>

Example: $(“div”).hasClass("protected")

Result: true

 

4.     is(expr)

用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true

Test case: <form><input type="checkbox" /></form>

Example: $("input[type='checkbox']").parent().is("form")

Result: true

 

5.     map(callback)

将一组元素转换成其他数组(不论是否是元素数组)

Test case:

<p><b>Values: </b></p>
<form>
  <input type="text" name="name" value="John"/>
  <input type="text" name="password" value="password"/>
  <input type="text" name="url" value="http://ejohn.org/"/>
</form>

Example:

$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );

Result:

<p>John, password, http://ejohn.org/</p>

 

6.     not(expr)

删除与指定表达式匹配的元素

Test case: <p>Hello</p><p id="selected">Hello Again</p>

Example: $("p").not( $("#selected")[0] )

Result: <p>Hello</p>

 

7.     slice(start, [end])

选取一个匹配的子集

Test case: <p>Hello</p><p>cruel</p><p>World</p>

Example: $("p").slice(0, 1).wrapInner("<b></b>")

Result: <p><b>Hello</b></p>

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
毕业设计,基于SpringBoot+Vue+MySQL开发的体育馆管理系统,源码+数据库+毕业论文+视频演示 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本体育馆管理系统就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数据信息,使用这种软件工具可以帮助管理人员提高事务处理效率,达到事半功倍的效果。此体育馆管理系统利用当下成熟完善的SpringBoot框架,使用跨平台的可开发大型商业网站的Java语言,以及最受欢迎的RDBMS应用软件之一的Mysql数据库进行程序开发。实现了用户在线选择试题并完成答题,在线查看考核分数。管理员管理收货地址管理、购物车管理、场地管理、场地订单管理、字典管理、赛事管理、赛事收藏管理、赛事评价管理、赛事订单管理、商品管理、商品收藏管理、商品评价管理、商品订单管理、用户管理、管理员管理等功能。体育馆管理系统的开发根据操作人员需要设计的界面简洁美观,在功能模块布局上跟同类型网站保持一致,程序在实现基本要求功能时,也为数据信息面临的安全问题提供了一些实用的解决方案。可以说该程序在帮助管理者高效率地处理工作事务的同时,也实现了数据信息的整体化,规范化与自动化。 关键词:体育馆管理系统;SpringBoot框架;Mysql;自动化
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值