<!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. kubernete 数据库 etcd

    etcdctl --cert-file /etc/ssl/etcd/ssl/member-pserver78.pem --key-file /etc/ssl/etcd/ssl/member-pserv ...

  2. linux笔记-多服务器同时执行相同命令

    1.服务器的ip地址写到文件中,命名为nodelist.txt 192.168.1.160 192.168.1.166 2.编写运行脚本 for i in `cat nodelist.txt`do s ...

  3. RocketMQ阅读注意

    1 队列个数设置 producer发送消息时候设置,特别注意:同一个topic仅当第一次创建的时候设置有效,以后修改无效,除非修改broker服务器上的consume.json文件,

  4. 一次永久解决cmd窗口汉字显示乱码

    对于编译出的程序,在 cmd 和 power shell 运行时都不能正确显示汉字. 网上查,可以再命令窗口修改: 1.打开CMD.exe命令行窗口 2.通过 chcp命令改变代码页,UTF-8的代码 ...

  5. 开源数据同步神器——canal

    前言 如今大型的IT系统中,都会使用分布式的方式,同时会有非常多的中间件,如redis.消息队列.大数据存储等,但是实际核心的数据存储依然是存储在数据库,作为使用最广泛的数据库,如何将mysql的数据 ...

  6. 【javascript】详解javaScript的深拷贝

        前言: 最开始意识到深拷贝的重要性是在我使用redux的时候(react + redux), redux的机制要求在reducer中必须返回一个新的对象,而不能对原来的对象做改动,事实上,当时 ...

  7. 基于HTML5 Canvas WebGL制作分离摩托车

    工业方面制作图表,制作模型方面运用到 3d 模型是非常多的,在一个大的环境中,构建无数个相同的或者不同的模型,构建起来对于程序员来说也是一件相当头疼的事情,我们利用 HT 帮大家解决了很大的难题,无数 ...

  8. C/C++中int128的那点事

    最近群友对int128这个东西讨论的热火朝天的.讲道理的话,编译器的gcc是不支持__int128这种数据类型的,比如在codeblocks 16.01/Dev C++是无法编译的,但是提交到大部分O ...

  9. C#编写WINNT服务，随便解决安卓开发遇到的5037被众多程序无节操占用的问题

    需求分析: 最近重新开始学习安卓开发,好久不用的ADT集成开发环境频繁遇到不能在仿真机和真机上调试的问题,也就是本人另一篇博文描述的ADB(Android Debug Bridge)监控的5037被金 ...

  10. Linux下开源邮件系统Postfix+Extmail+Extman环境部署记录

    一.基础知识梳理MUA (Mail User Agent) MUA 既是"邮件使用者代理人",因为除非你可以直接利用类似 telnet 之类的软件登入邮件主机来主动发出信件,否则您 ...