jQuery筛选总结
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>筛选</title>
<script src="../jquery-1.8.3.min.js"></script>
<script>
$(function() {
// 筛选
// 过滤
//获取第N个元素
$("#list li").eq(1).css('border', '1px solid #f00');
// 获取第一个元素
$("#list li").first().css('border', '1px solid #ff0');
// 获取最后个元素
$("#list li").last().css('border', '1px solid #f0f');
//检查当前的元素是否含有某个特定的类，如果有，则返回true。
console.log($("#list li").hasClass('item'));
//筛选出与指定表达式匹配的元素集合。
$("#list li").filter('.item').css('border', '1px solid #00f');
// 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
console.log($("#list li").is('li'));
// 将一组元素转换成其他数组（不论是否是元素数组）
console.log($('#list li').map(function() {
return $(this).text();
}));
//保留包含特定后代的元素，去掉那些不含有指定后代的元素。
$('li').has('ul').css('background-color', 'skyblue');
//删除与指定表达式匹配的元素
$('li').not('.item').css('background-color', 'grey');
//选取一个匹配的子集,第一个元素是0.如果是负数，则可以从集合的尾部开始选起。
$("#list li").slice(-1).wrapInner("<b></b>"); // 查找
//取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
$("#list li").children().css('background-color', '#cea');
//从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素
$("#list li").closest("ul").css('border', '2px solid #0ff');
//搜索匹配元素的所有后代元素
$("#lists").find("li").css('border', '2px solid #caf');
//取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
$("#lists li").next(".item").css('background-color', '#cee');
//查找当前元素之后所有的同辈元素
$("#lists li").nextAll("li").css('background-color', '#ce0');
//查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
$("#lists").nextUntil("p").css('background-color', '#ca0');
// 返回第一个匹配元素用于定位的父节点。
$("button").click(function() {
$("p").offsetParent().css("background-color", "red");
});
// 取得一个包含着所有匹配元素的唯一父元素的元素集合。
$("#list3 span").parent("li").css("border", "10px solid red");
//取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。
$("span").parents().css("border", "15px solid green")
// 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
$('li.item-a').parentsUntil('.level-1').css('background-color', 'red');
//取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
$("p").prev().css('border', '5px solid #cae');
//查找当前元素之前所有的同辈元素
$("div").prevAll().addClass("before");
//查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
$('#term-2').prevUntil('dt').css('background-color', 'red');
//取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合,排除自身
$("div").siblings().css('background-color', 'green'); // 串联
//添加一个新元素到一组匹配的元素中，并且这个新元素能匹配给定的表达式。
$(document).add('p,h2').css('border','25px solid #f00');
//加入先前所选的加入当前元素中
$("#list").find("p").andSelf().addClass("border");
//查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容
$("em").contents().wrap("<b/>");
//回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。
$("#list").children('li').end().css('border','15px solid #f90'); })
</script>
</head> <body>
<h2>asd</h2>
<em><p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p></em>
<dl>
<dt>term 1</dt>
<dd>definition 1-a</dd>
<dd>definition 1-b</dd>
<dd>definition 1-c</dd>
<dd>definition 1-d</dd>
<dt id="term-2">term 2</dt>
<dd>definition 2-a</dd>
<dd>definition 2-b</dd>
<dd>definition 2-c</dd>
<dt>term 3</dt>
<dd>definition 3-a</dd>
<dd>definition 3-b</dd>
</dl>
<p id="dd123">Hello</p>
<div><span>Hello Again</span></div>
<p>And Again</p>
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
<div style="width:70%;position:absolute;left:100px;top:100px">
<div style="margin:50px;background-color:yellow">
<p>点击下面的按钮可以设置本段落的最近的父（祖先）元素的背景色。</p>
</div>
</div>
<button>点击这里</button>
<ul id="list">
<li>小芸芸 和我 去钓鱼执法</li>
<li></li>
<li>
小洋洋 和我 去看电影
<ul>
<li>小芸芸 和我 去钓鱼执法</li>
<li>小静静 和我 去约跑</li>
<li>小洋洋 和我 去看电影</li>
<p class="item">小洋洋偷偷的和老母鸡去看了个电影</p>
<li class="item">小洋洋1 和我 去看电影1</li>
<li>小洋洋2 和我 去看电影2</li>
<li>小洋洋3 和我 去看电影3</li>
</ul>
</li>
<li>小洋洋1 和我 去看电影1</li>
<li class="item">小洋洋2 和我 去看电影2</li>
<li>小洋洋3 和我 去看电影3</li>
</ul>
<hr>
<ul id="lists">
<li>小芸芸 和我 去钓鱼执法</li>
<li>小静静 和我 去约跑</li>
<li>
小洋洋 和我 去看电影
<ul>
<li>小芸芸 和我 去钓鱼执法</li>
<li class="item">小静静 和我 去约跑</li>
<li>小洋洋 和我 去看电影</li>
<p class="item">小洋洋偷偷的和老母鸡去看了个电影</p>
<p>小洋洋偷偷的和老母鸡去看了个电影</p>
<li>小洋洋1 和我 去看电影1</li>
<li class="item">小洋洋2 和我 去看电影2</li>
<li>小洋洋3 和我 去看电影3</li>
</ul>
</li>
<li>小洋洋1 和我 去看电影1</li>
<p class="item">小洋洋偷偷的和老母鸡去看了个电影</p>
<li>小洋洋2 和我 去看电影2</li>
<li>
小洋洋3 和我 去看电影3
<ul>
<li>小芸芸 和我 去钓鱼执法</li>
<li>小静静 和我 去约跑</li>
<li>小洋洋 和我 去看电影</li>
<p>小洋洋偷偷的和老母鸡去看了个电影</p>
<li>小洋洋1 和我 去看电影1</li>
<li>小洋洋2 和我 去看电影2</li>
<li>小洋洋3 和我 去看电影3</li>
</ul>
</li>
</ul>
<hr>
<ul id="list3" class="xl">
<li>小芸芸 和我 去钓鱼执法</li>
<li>小静静 和我 去约跑</li>
<li>小洋洋 和我 去看电影</li>
<p>小洋洋偷偷的和老母鸡去看了个电影</p>
<li>小洋洋1 和我 去看电影1</li>
<li class="item">小洋洋2 和我 去看电影2</li>
<li><span class="item"></span></li>
<li>小洋洋3 和我 去看电影3</li>
</ul>
</body> </html>
jQuery筛选总结的更多相关文章
- jQuery 筛选器1
jQuery 筛选器1 筛选器1: 在选择器选择的基础上在选择一次 // 当前点击的标签$(this) $(this) // .next() 获取当标签的下一个标签 $(this).next(); / ...
- jQuery 筛选器2
jQuery 筛选器2 // 由于$()只能输入字符串$('#li:eq(1)'),可通过.eq()来传入. // 获取this标签中的指定属性 $(this).eq(1) // 获取第一个元素 $( ...
- jQuery筛选结果等于true的筛选
一般来说,使用jQuery筛选器的筛选结果都是数组,可以用length>0来判断是否筛选到:但是有一些筛选结果是布尔值,需要注意: 1.hasClass 2.is
- jQuery筛选器及对DOM修改（学习笔记）
1.jQuery筛选器 注意:请先在管理Nuget程序包中查找jQuery包,并安装.也可以在jQuery官网下载. 实现: <!DOCTYPE html> <html xmlns= ...
- jquery筛选元素函数
jquery筛选元素函数 1.过滤匹配第二个p元素: $("button").click(function(){ $("p").eq(1).css(" ...
- jquery-5 jQuery筛选选择器
jquery-5 jQuery筛选选择器 一.总结 一句话总结:选择器加动态添加方法可以不用想方法名,这个简单方便. 1.筛选选择器有哪三种? 过滤 查找 串联 1.过滤 eq();first(); ...
- jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...
- JQuery筛选器全系列介绍
jQuery提供了强大的选择器让我们获取对象.在这边,我人为地将jQuery选择器分为两大部分:选择对象和筛选条件.选择对象表示要获取什么对象,筛选条件是对获取的对象进行筛选,最终留下符合某些特征的对 ...
- 【jQuery】jQuery筛选器规则
转载自:http://blog.csdn.net/lijinwei112/article/details/6938134 筛选器中加入变量 var ac = "select_" + ...
- 使用jQuery筛选排除元素以修改指定标签的属性
简单案例: $(function(){ $("td[id][id!='']").click(function(){ //你的逻辑 }); }); 上述代码,有id且id不为空的td ...
随机推荐
- Linux下对inode和块的理解
基本概念 首先讲下inode和块的基本概念.在Linux系统中,文件由元数据和数据块组成.数据块就是多个连续性的扇区(sector),扇区是文件存储的最小单位(每个512字节).块(block)的大小 ...
- virtualbox - 2台虚拟机之间通过ssh互访
virtualbox 5.2.12 一台虚拟机是Debian 9,另一台是Ubuntu 18.04. 注意: 2台虚拟机系统里要安装ssh ! sudo apt install ssh 然后在virt ...
- Luogu3191 HNOI2007 紧急疏散 二分答案、最大流
传送门 题意:自己去看 考虑二分答案.$BFS$预处理出每一个人到每一扇门的最短时间,设二分的值为$mid$,那么把门拆成$mid$个点,每一个点代表第$1,2,...,mid$秒时的状态.$i-1$ ...
- [Spark][python]从 web log 中提取出 UserID 作为key 值，形成新的 RDD
针对RDD, 使用 keyBy 来构筑 key-line 对: [training@localhost ~]$ cat webs.log 56.31.230.188 - 90700 "GET ...
- linux 与 windows 挖门罗币总结
比特币之前一直很火,初次了解的时候才2000RMB一枚..看不懂哇,错失良机...当然了,看得懂也不买不起..当时还是穷学生. 最近又一直看到黑客利用linux漏洞挖门罗币获利的新闻,决定好生研究一下 ...
- 【微服务】使用spring cloud搭建微服务框架，整理学习资料
写在前面 使用spring cloud搭建微服务框架,是我最近最主要的工作之一,一开始我使用bubbo加zookeeper制作了一个基于dubbo的微服务框架,然后被架构师否了,架构师曰:此物过时.随 ...
- 宇宙最强IDE，查看设计器报错，看不了设计界面
在使用自定义控件或者用户控件的时候,查看设计器打不开界面的原因: Loaded事件中加以下判断条件:if (!DesignerProperties.GetIsInDesignMode(this))
- “北航学堂”M2阶段postmortem
“北航学堂”M2阶段postmortem 设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 这个问题我们在M1阶段的时候就已经探讨的比较明确了,就是 ...
- 关于在VB.NET中调用使用VC++编写的类库dll的一点笔记
前言 结对作业要求一出来,我就立刻想到了把“计算核心”封装成dll,然后使用vb.net编写UI调用dll的思路.然而在实现过程中却遇到了很多的问题. 我在这个过程中是负责使用vb.net编写UI并调 ...
- VIM编辑器常用命令（转）
转自:https://www.cnblogs.com/Nice-Boy/p/6124177.html