<!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. 解决linux下无线网卡被物理禁用问题

    困扰了我好几天终于解决了这个问题,这里写出来,给再遇到这样问题的朋友做个借鉴! 笔记本:lenovo 问题描述:wifi无线网卡开关是打开的,但是安装linux(fedora \ ubuntu )后, ...

  2. 开发手记：Linux下更改Oracle表空间大小

    问题:同事反馈我们的测试环境数据库执行SQL和编译PKG非常慢,猜测可能是我们的测试环境数据库的表空间满了,但是我不知道数据库DBA的用户和密码. 步骤1:查看表空间占用情况 SELECT UPPER ...

  3. Python爬虫利器二之Beautiful Soup的用法

    上一节我们介绍了正则表达式,它的内容其实还是蛮多的,如果一个正则匹配稍有差池,那可能程序就处在永久的循环之中,而且有的小伙伴们也对写正则表达式的写法用得不熟练,没关系,我们还有一个更强大的工具,叫Be ...

  4. postgresql总结

    这篇博客主要对PostgreSQL进行总结,内容偏基础. 这里先附上一个PostgreSQL的中文资源:PostgreSQL 8.1 中文文档.英文不好的同学可以看看这个. 安装PostgreSQL ...

  5. Nagios图像绘制插件PNP4Nagios部署和测试

    注:本篇博客Nagios版本Nagios-3.5.1 1. 概述2. 关于PNP4Nagios3. 部署PNP4Nagios3.1 下载PNP4Nagios3.2 编译安装3.3 目录文件说明4. 配 ...

  6. Linux下IP SAN共享存储操作记录

    一.简单介绍SAN,即存储区域网络(storage area network and SAN protocols),它是一种高速网络实现计算机与存储系统之间的数据传输.常见的分类是FC-SAN和IP- ...

  7. 分布式监控系统Zabbix-3.0.3-完整安装记录（0）

    一.Linux下开源监控系统简单介绍1)cacti:存储数据能力强,报警性能差2)nagios:报警性能差,存储数据仅有简单的一段可以判断是否在合理范围内的数据长度,储存在内存中.比如,连续采样数据存 ...

  8. OC与JS的交互（iOS与H5混编）

    大神总结WKWebView的坑:https://mp.weixin.qq.com/s/rhYKLIbXOsUJC_n6dt9UfA 在开发过程中,经常会出现需要iOS移动端与H5混编的使用场景. iO ...

  9. BugPhobia开发终结篇章：Beta阶段第XI次Scrum Meeting

    0x01 :Scrum Meeting基本摘要 Beta阶段第十一次Scrum Meeting 敏捷开发起始时间 2015/01/06 00:00 A.M. 敏捷开发终止时间 2016/01/10 0 ...

  10. 《Linux内核设计与实现》 第三章学习笔记

    一.进程 1.进程就是处于执行期的程序(目标码存放在某种存储介质上).但进程并不仅仅局限于一段可执行程序代码,通常进程还要包含其他资源.执行线程,简称线程(thread),是在进程中活动的对象. 2. ...