<!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筛选总结的更多相关文章

  1. jQuery 筛选器1

    jQuery 筛选器1 筛选器1: 在选择器选择的基础上在选择一次 // 当前点击的标签$(this) $(this) // .next() 获取当标签的下一个标签 $(this).next(); / ...

  2. jQuery 筛选器2

    jQuery 筛选器2 // 由于$()只能输入字符串$('#li:eq(1)'),可通过.eq()来传入. // 获取this标签中的指定属性 $(this).eq(1) // 获取第一个元素 $( ...

  3. jQuery筛选结果等于true的筛选

    一般来说,使用jQuery筛选器的筛选结果都是数组,可以用length>0来判断是否筛选到:但是有一些筛选结果是布尔值,需要注意: 1.hasClass 2.is

  4. jQuery筛选器及对DOM修改（学习笔记）

    1.jQuery筛选器 注意:请先在管理Nuget程序包中查找jQuery包,并安装.也可以在jQuery官网下载. 实现: <!DOCTYPE html> <html xmlns= ...

  5. jquery筛选元素函数

    jquery筛选元素函数 1.过滤匹配第二个p元素: $("button").click(function(){ $("p").eq(1).css(" ...

  6. jquery-5 jQuery筛选选择器

    jquery-5  jQuery筛选选择器 一.总结 一句话总结:选择器加动态添加方法可以不用想方法名,这个简单方便. 1.筛选选择器有哪三种? 过滤 查找 串联 1.过滤 eq();first(); ...

  7. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  8. JQuery筛选器全系列介绍

    jQuery提供了强大的选择器让我们获取对象.在这边,我人为地将jQuery选择器分为两大部分:选择对象和筛选条件.选择对象表示要获取什么对象,筛选条件是对获取的对象进行筛选,最终留下符合某些特征的对 ...

  9. 【jQuery】jQuery筛选器规则

    转载自:http://blog.csdn.net/lijinwei112/article/details/6938134 筛选器中加入变量 var ac = "select_" + ...

  10. 使用jQuery筛选排除元素以修改指定标签的属性

    简单案例: $(function(){ $("td[id][id!='']").click(function(){ //你的逻辑 }); }); 上述代码,有id且id不为空的td ...

随机推荐

  1. day90

    Vue项目简介 最终效果:Vue通过axios发请求给Django后台,Django返回数据给Vue 创建项目: 创建vue项目: -安装node.js -vue脚手架 -vue create 项目名 ...

  2. BZOJ 5475: [WC 2019] 数树

    WC2019 数树 解决了一个心头大患 考试的时候本人太智障了QwQ 本文的参考链接,膜了一发rqy的题解 题目链接 Subtask 0 好像可以直接做... 推一推就能发现,是$y^k$,其中$k$ ...

  3. CF932F Escape Through Leaf 斜率优化、启发式合并

    传送门 \(DP\) 设\(f_i\)表示第\(i\)个节点的答案,\(S_i\)表示\(i\)的子节点集合,那么转移方程为\(f_i = \min\limits_{j \in S_i} \{a_i ...

  4. CF1153F Serval and Bonus Problem FFT

    CF1153F Serval and Bonus Problem 官方的解法是\(O(n ^ 2)\)的,这里给出一个\(O(n \log n)\)的做法. 首先对于长度为\(l\)的线段,显然它的答 ...

  5. 《DISTRIBUTED SYSTEMS Concepts and Design》读书笔记 一

    第二章 系统模型 描述分布式系统的三种模型 Physical models : 用机器,网络,硬件等语言去描述整个系统. Architectural models : 用计算.计算任务.计算单元等语言 ...

  6. Gerrit日常维护记录

    Gerrit代码审核工具是个好东西,尤其是在和Gitlab和Jenkins对接后,在代码控制方面有着无与伦比的优势. 在公司线上部署了一套Gerrit系统,在日常运维中,使用了很多gerrit命令,在 ...

  7. 分布式监控系统Zabbix-3.0.3-完整安装记录 - 添加shell脚本监控

    对公司的jira访问状态进行监控,当访问状态返回值是200的时候,脚本执行结果为1:其他访问状态返回值,脚本执行结果是0.然后将该脚本放在zabbix进行监控,当非200状态时发出报警.jira访问状 ...

  8. 【ML】Two-Stream Convolutional Networks for Action Recognition in Videos

    Two-Stream Convolutional Networks for Action Recognition in Videos & Towards Good Practices for ...

  9. linux及安全第四周总结

    学习内容:使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用 一.用户态.内核态 权限分级——为了系统本身更稳定,使系统不宜崩溃.(并不是所有程序员缩写的代码都很健壮!!) x86 CP ...

  10. Linux期中总结

    在MOOC八周内容高度概括总结如下 (一)计算机是如何工作的 冯诺依曼体系结构——核心:存储程序计算机; X86汇编基础 (二)操作系统是如何工作的 三个法宝——存储程序计算机.函数调用堆栈.中断机制 ...