<!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. Saltstack管理对象属性之grains和pillar组件

    Grains组件 Grains是saltstack记录minion的一些静态信息组件,可以简单的理解为grains里面记录着每台minion的一些常用的属性,比如cpu.内存.磁盘.网络信息等,可以通 ...

  2. cc攻击和ddos攻击的区别和攻防 + 调SYN连接参数

    1.一个是WEB网络层拒绝服务攻击(DDoS),一个是WEB应用层拒绝服务攻击(CC),网络层就是利用肉鸡的流量去攻击目标网站的服务器,针对比较本源的东西去攻击,服务器瘫痪了,那么运行在服务器上的网站 ...

  3. SQL Server中比较末尾带有空格的字符串遇到的坑 （转载）

    最近发现SQLServer中比较字符串的时候 如果字符串末尾是空格 那么SQLServer会无视那些空格直接进行比较 这和程序中平时的字符串判断逻辑不统一 );set @a=N'happycat198 ...

  4. asp.net web api集成微信服务（使用Senparc微信SDK）- z

    /// <summary> /// 微信请求转发控制器 /// </summary> [RoutePrefix("weixin")] public clas ...

  5. LiveCharts文档-3开始-2基础

    原文:LiveCharts文档-3开始-2基础 LiveCharts文档-3开始-2基础 基本使用 LiveCharts设计的很容易使用,所有的东西都可以自动的实现更新和动画,库会在它觉得有必要更新的 ...

  6. JVM规范系列第1章：引言

    如果你还没下载<Java虚拟机规范>这本书,那么先点击这里下载再一块儿看吧. 前言 Java 虚拟机是一个抽象化的机器,整个规范中提及的 Java 虚拟机都是抽象化的概念,而不是特指 Or ...

  7. C# 读取Json配置文件

    今天需要用到读取Json配置文件的helper   结果竟然没找到合适的    微软自己有一个 不过不支持.Net fw 4.0 于是自己在NewTonSoft.Json的基础上  加了点小小的封装  ...

  8. Mvc_后端通用验证

    namespace Web.Mvc.Extensions { #region 验证基类 /// <summary> /// 通用验证基类 /// </summary> publ ...

  9. Ionic 入门与实战之第三章：Ionic 项目结构以及路由配置

    原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第三章,主要对 Ionic 的项目结构作了介绍,并讲解了Ionic 中的路由概念以及相关配置. 原文发表于我的技术博客 1. Ioni ...

  10. 10 分钟理解 BFC 原理

    一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照其在 HTML 中的先后位置至 ...