jQuery元素过滤
索引过滤
索引选择器是jQuery过滤选择器的一部分。与此同时,也存在功能相似的索引相关的方法,包括eq()、first()、last()
eq()
eq()方法匹配元素的集合为指定的索引的哪一个元素。eq()方法可以接受一个整数作为参数,以0为基数。若整数为负数,则从集合中的最后一个元素开始计数
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><button id="btn1">按钮一</button><button id="btn2">按钮二</button><button id="btn3">按钮三</button><script>$('#btn1').click(function(){$('li').eq(0).css('border','1px solid red'); }) $('#btn2').click(function(){$('li').eq(-1).css('border','1px solid blue'); }) $('#btn3').click(function(){$('li').eq(2).css('border','1px solid green'); })</script>
first()
first()方法获取匹配元素集合中第一个元素,该方法不接受参数
last()
last()方法获取匹配元素集合中最后一个元素,该方法不接受参数
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><button id="btn1">按钮一</button><button id="btn2">按钮二</button><script>$('#btn1').click(function(){$('li').first().css('border','1px solid red'); }) $('#btn2').click(function(){$('li').last().css('border','1px solid blue'); })</script>
内容过滤
jQuery选择器中包括内容过滤选择器,而jQuery中也存在功能类似的内容过滤的方法,包括has()、filter()、is()、not()、map()、slice()和add()
has()
has()方法用于筛选匹配元素集合中有相匹配的选择器或DOM元素的后代元素的父元素
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul><li>list item 1</li><li>list item 2 <ul><li>list item 2-a</li><li>list item 2-b</li></ul></li><li>list item 3</li></ul><button id="btn">按钮</button><script>$('#btn').click(function(){$('li').has('ul').css('border', '1px solid lightblue'); })</script>
map()
map()方法通过一个函数匹配当前集合中的每个元素
作为参数的函数有两个参数,第一个参照是匹配集合中的元素索引,第二个参数是当前索引的DOM元素对象
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><input value="text"><input value="text"><input value="text"><button id="btn">按钮</button><script>$('#btn').click(function(){$('input').map(function(index,dom){dom.value += index;}); })</script>
filter()
filter()方法从匹配的元素集合中筛选出指定的元素,参数可以是一个选择器字符串、一个或多个DOM元素、jQuery对象或一个函数
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><button id="btn">按钮</button><script>$('#btn').click(function(){$('li').filter(':even').css('border','1px solid lightgreen') })</script>
filter()方法中作为参数的函数有两个参数,第一个参照是匹配集合中的元素索引,第二个参数是当前索引的DOM元素对象。如果函数返回值为true,则该元素保留;否则,该元素在匹配集合中被去除
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><button id="btn">按钮</button><script>$('#btn').click(function(){$('li').filter(function(index,dom){ if(!(index % 3)){$(dom).css('border','1px solid lightgreen') return true;}}) })</script>
not()
not()方法与filter()方法正好相反,它从匹配的元素集合中移除指定的元素,参数可以是一个选择器字符串、一个或多个DOM元素、jQuery对象或一个函数
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><button id="btn">按钮</button><script>$('#btn').click(function(){$('li').not(':even').css('border','1px solid lightgreen') })</script>
not()方法中作为参数的函数有两个参数,第一个参照是匹配集合中的元素索引,第二个参数是当前索引的DOM元素对象。如果函数返回值为true,则该元素被去除;否则,该元素在匹配集合中保留
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><button id="btn">按钮</button><script>$('#btn').click(function(){$('li').not(function(index,dom){ if(!(index % 3)){$(dom).css('border','1px solid lightgreen') return true;}}) })</script>
is()
is()方法用于判断当前元素是否与参数相匹配,如果匹配,则返回true;否则,返回false。参数可以是一个选择器,DOM元素,jQuery对象或函数
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><script>$('li').click(function(){ if($(this).is(':contains("2")')){$(this).css('border','1px solid black')} })</script>
is()方法中作为参数的函数有两个参数,第一个参照是匹配集合中的元素索引,第二个参数是当前索引的DOM元素对象。如果函数返回true,is()方法也返回true,如果函数返回false,is()方法也返回false
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><div id="result"></div><script>var i = 0; $('li').click(function(){ ++i; if($(this).is(function(index,dom){$('#result').html(dom.innerHTML); if(i%2){ return true; }})){$(this).css('border','1px solid black')} })</script>
slice()
slice()方法根据指定的下标范围,过滤匹配的元素集合,并生成一个新的jQuery对象
slice(start[,end])方法接受两个参数:start和end
start是一个整数,从0开始计数的下标。代表将要被选择的元素的起始下标。如果指定的下标是一个负数,那么代表从末尾开始计数
end是一个整数,从0开始计数的下标。代表将要被选择的元素的结束下标。如果指定的下标是一个负数,那么代表从末尾开始计数。如果忽略此参数,则选择的范围是从start开始,一直到最后
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul><button id="btn">按钮</button><script>$('#btn').click(function(){$('li').slice(2,4).css('background', 'red'); })</script>
add()
add()方法添加元素到匹配的元素集合。add()方法的参数可以几乎接受任何的$(),包括一个jQuery选择器表达式,DOM元素,或HTML片段引用
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li></ul><div>div</div><button id="btn">按钮</button><script>$('#btn').click(function(){$('li').add('div').css('background', 'lightgreen'); })</script>
标签: jQuery
转载于:https://blog.51cto.com/33997k7k/1923984
jQuery元素过滤相关推荐
- jquery子元素过滤选择器
jquery子元素过滤选择器 子元素过滤选择器需要我们时刻理元素的父元素和子元素,只要这样我们才能运用的得心应手. 1.:nth-child选择器 匹配每一个父元素下面的的第index个子元素或者奇偶 ...
- jquery子元素过滤选择器:nth-child、:first-child、:last-child、:only-child
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery子元素过滤选择器 jquery子元素过滤选择器,包括:nth-child.:first-child.:last-ch ...
- jq查找字段忽略html标签,jquery内容过滤选择器有哪些?
jQuery内容过滤选择器的过滤规则主要运用在DOM元素所包含的子元素或其文本内容上,主要包括四种过滤方法: :contains(text).:empty .:has(seletor) .:paren ...
- 过滤选择器——子元素过滤选择器
在页面开发过程中,常常遇到突出指定某行的需求.虽然使用基本过滤选择器:eq(index)可以实现单个表格的显示,但不能满足大量数据和多个表格的选择需求.为了实现这样的功能,jQuery中可以通过子元素 ...
- jQuery基本过滤选择器
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8" ...
- jquery可见性过滤选择器
jquery可见性过滤选择器 可见性过滤选择器是根据元素的可见性状态来选择相应的元素. 在锋利的jquery一书中的介绍如下:
- jquery基本过滤选择器:first :last :not(.myclass) :even :odd :eq(1) :gt(5) :lt(1) :header :animated :focus
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery基本过滤选择器 jquery基本过滤选择器,包括:first.:last.:not(.myclass).:even, ...
- JavaWeb开发 前端语言:jQuery(一) jQuery核心函数、jQuery对象、jQuery选择器、以及jQuery元素筛选
JavaWeb开发 前端语言:jQuery 1.jQuery介绍 1.1 jQuery的初使用 1.2 使用jQuery的常用问题解析 2. jQuery核心函数介绍 3.区分jQuery对象与dom ...
- jQuery 遍历 - 过滤
第一部分:介绍方法 (1) first():获得匹配元素集合中每个元素紧邻的前一个同辈元素. (2) last():获得匹配元素集合中每个元素之前的所有同辈元素. (3) eq ...
最新文章
- 【Linux】时间戳与正常日期
- matlab短均线滞后项,均线理论的滞后性问题
- http 请求头 header Referer 含义和作用
- 为了进大厂,我所经历的奇葩面试
- SQL SERVER 大小写敏感设置及排序规则详解
- pytorch入门_PyTorch入门
- redirect_uri 域名与后配置不一致是什么意思_网站域名怎么购买?多少钱?
- 汇添富基金总经理张晖:以高质量发展打造中国最受认可的资产管理品牌
- 重磅!2022年JCR正式发布(附最新影响因子详单)
- DMX512协议及对接口电路的分析
- NS3:FlowMonitor设计讲解
- 利用Wifidog实现微信wifi连接
- 汉诺塔问题的Java实现(递归与非递归)
- python 信号.同步 day07
- 实际业务中的数据分析流程和痛点
- 知乎上这个话题引起了我的兴趣:在实体经济一片下滑的大环境中,哪些行业还可以?
- 高德地图 绘制 柱状图形
- 《Python语言程序设计》王恺 王志 李涛 机械工业出版社 第4章 面向对象 课后习题答案【强烈推荐】
- java实现8位以为的自幂数(水仙花数)
- 阿里开源抓包神器LightProxy 和 其他代理 工具一起使用
热门文章
- java cpu监控,java系统监控CPU 磁盘
- python ip动态代理_Scrapy 配置动态代理IP的实现
- 有道翻译 excel webservice 失效_VBA实践+excel英文逐句自动有道翻译为中文
- 怎么看b树是几阶_B站广告部混入A站内鬼?网友:请问怎么在B站看租借女友?...
- tensorflow环境下的识别食物_研究室秒变后厨,TensorFlow被馋哭!日本团队用深度学习识别炸鸡,救急便当工厂...
- AJAX框架衣柜内部结构,揭秘最实用的衣柜内部结构这样布局,速速get!
- shsh验证服务器,SHSH(Signature HaSH blobs)是由Apple验证服务器根据iOS设备ECID和固件版本产生的一个签名证书...
- js解析二维码_最新最全阿里巴巴,今日头条,腾讯Flutter面试真题全解析(狂虐不止)...
- 本地两台虚拟机构建NFS服务器和客户端
- 信息系统项目管理师长篇备考经验