jQuery中的筛选(六)
1. eq(index|-index)
获取当前链式操作中第N个jQuery对象,返回jQuery对象,当参数大于等于0时为正向选取,比如0代表第一个,1代表第二个。当参数为负数时为反向选取,比如-1为倒数第一个。
$("p").eq(1)
2. first(), 获取第一个元素
$('li').first()
3. last(), 获取最后一个元素
$('li').last()
4. hasClass(class), 检查当前的元素是否含有某个特定的类,如果有,则返回true
$(this).hasClass("protected")
5. filter(expr|obj|ele|fn), 筛选出与指定表达式匹配的元素集合
这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
参数说明:
- expr:Stirng, 字符串值,包含供匹配当前元素集合的选择器表达式
- obj:现有的jQuery对象,以匹配当前的元素
- ele:一个用于匹配元素的DOM元素
- function(index):Function,个函数用来作为测试元素的集合。它接受一个参数index,这是元素在jQuery集合的索引。在函数, this指的是当前的DOM元素。
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
$("p").filter(".selected")
//结果:
<p class="selected">And Again</p>
//$("p").filter(".selected, :first")
6. is(expr|obj|ele|fn), 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true
参数说明:
- expr:Stirng, 字符串值,包含供匹配当前元素集合的选择器表达式
- obj:现有的jQuery对象,以匹配当前的元素
- ele:一个用于匹配元素的DOM元素
- function(index):Function,个函数用来作为测试元素的集合。它接受一个参数index,这是元素在jQuery集合的索引。在函数, this指的是当前的DOM元素。
<form><input type="checkbox" /></form>
$("input[type='checkbox']").parent().is("form")
//结果true
7. map(callback), 将一组元素转换成其他数组(不论是否是元素数组)
你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立。
<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> $("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") ); 结果:<p>John, password, http://ejohn.org/</p>
8. has(expr|ele), 保留包含特定后代的元素,去掉那些不含有指定后代的元素
.has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。提供的选择器会一一测试原先那些对象的后代,含有匹配后代的对象将得以保留。
参数说明:
- expr:String,一个选择器字符串
- element:一个DOM元素
//给含有ul的li加上背景色
$('li').has('ul').css('background-color', 'red');
9. not(expr|ele|fn), 从匹配元素的集合中删除与指定表达式匹配的元素
参数说明:
- expr:String,一个选择器字符串
- element:一个DOM元素
- function(index):Function, 一个用来检查集合中每个元素的函数。this是当前的元素
//从p元素中删除带有 select 的ID的元素
$("p").not( $("#selected")[0] )
10. slice(start, [end]), 选取一个匹配的子集
参数说明:
- start:Integer,开始选取子集的位置。第一个元素是0.如果是负数,则可以从集合的尾部开始选起
- end:Integer,结束选取自己的位置,如果不指定,则就是本身的结尾。
//选择第一个p元素
$("p").slice(0, 1).wrapInner("<b></b>");
11. children([expr]), 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
通过可选的表达式来过滤所匹配的子元素。注意:parents()将查找所有祖辈元素,而children()只考虑子元素而不考虑所有后代元素。
$("div").children()
$("div").children(".selected")
12. find(expr|obj|ele), 搜索所有与指定表达式匹配的元素
参数说明:
- expr:用于查找的表达式
- obj:一个用于匹配元素的jQuery对象
- ele:一个DOM元素
$("p").find("span")
13. next([expr]), 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
//找到每个段落的后面紧邻的同辈元素
<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div> $("p").next() //结果
<p>Hello Again</p>, <div><span>And Again</span></div>
14. parent([expr]), 取得一个包含着所有匹配元素的唯一父元素的元素集合
<div><p>Hello</p><p>Hello</p></div>
$("p").parent();
//结果
<div><p>Hello</p><p>Hello</p></div>
//$("p").parent(".selected");
15. prev([expr]), 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
//找到每个段落紧邻的前一个同辈元素。
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p> $("p").prev() //结果
<div><span>Hello Again</span></div>
16. siblings([expr]), 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
//找到每个div的所有同辈元素
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p> $("div").siblings(); //结果
<p>Hello</p>, <p>And Again</p>
17. contents(), 查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容
//查找所有文本节点并加粗
<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p> $("p").contents().not("[nodeType=1]").wrap("<b/>"); //结果
<p><b>Hello</b> <a href="http://ejohn.org/">John</a>, <b>how are you doing?</b></p>
jQuery中的筛选(六)的更多相关文章
- jQuery中的筛选(六):first()、last()、has()、is()、find()、siblings()等
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- 从零开始学习jQuery (六) jquery中的AJAX使用
本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式. 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即 ...
- es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- 从零开始学 Web 之 Ajax(六)jQuery中的Ajax
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- jQuery中ajax请求的六种方法(三、六):load()方法
6.load()方法 load的html页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...
- jQuery基础学习(三)—jQuery中的DOM操作
一.查找节点 查找属性节点: 通过jQuery的选择器来完成. 操作属性节点: 调用jQuery对象的attr()来获取它的属性值. 操作文本节点: 通过text()方法 ...
- jQuery入门(1)jQuery中万能的选择器
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门(4)jQuery中的Ajax应用
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】
一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...
随机推荐
- limit的优化
SELECT * FROM t_fly WHERE fly_id IN (8888,1,24,6666); 查询速度很快,对于一些过万数据的查询,mysql也能轻松的查询出来
- 扩展KMP笔记
KMP能计算一个字符串的每个位置前最长公共前缀后缀 扩展KMP可以用来计算两个字符串间的最长公共前缀后缀的…… 不过为了计算这个需要绕些弯路 已知字符串$S$和$P$,$S$的长度为$n$,$P$的长 ...
- Where does Oracle SQL Developer store connections? oracle SQL Developer 连接信息保存的位置,什么地方
oracle SQL Developer 连接信息保存的位置,在什么地方? 在切换登录用户后,oracle SQL Developer 连接信息不见了.只要以前的用户信息还存在,可以在路径 C:\Us ...
- Docker&K8S&持续集成与容器管理--系列教程
前言 网络虚拟化 一 Docker简介 Docker介绍 → B站视频链接 Docker架构 → B站视频链接 二 Docker安装 Ubuntu Docker 安装 CentOS Docker ...
- Python连载48-正则表达式(中)
一.正则的写法: . (点好) :表示任意一个字符,除了\n,比如查找所有的一个字符\. [] :匹配中括号中列举的任意字符,比如[L,Y,0], LLY, Y0, LIU \d :任意一个数字 \D ...
- 【学习笔记】动态规划—各种 DP 优化
[学习笔记]动态规划-各种 DP 优化 [大前言] 个人认为贪心,\(dp\) 是最难的,每次遇到题完全不知道该怎么办,看了题解后又瞬间恍然大悟(TAT).这篇文章也是花了我差不多一个月时间才全部完成 ...
- EF框架访问access数据库入门(后附官方推荐“驱动”版本)
vs2017调试通过. 1.添加需要的provider,有点添加驱动的意思.右击项目,NUGET “浏览”,“JetEntityFrameworkProvider”,安装,如图 完成后配置文件(控制台 ...
- 设计模式-单例模式(winfrom带参)
一.单例模式 就是在整个代码全局中,只有一个实例.比如Log4.NET或者窗体程序. 二.实战演练 通过字段cSOCode获取窗体,窗体只有一个且cSOCode值不同获取的窗体也不同. private ...
- 终于我还是没忍住,用Python爬了一波女神
你学爬虫,最终不还是为了爬妹子 啥也不说,开始福利赠送~ 女神大会 不是知道有多少人知道“懂球帝”这个 APP(网站),又有多少人关注过它的一个栏目“女神大会”,在这里,没有足球,只有女神哦. 画风是 ...
- LeetCode题解001:两数之和
两数之和 题目 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个 ...