<!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. Android 去掉ScrollView、GridView、ListView向上 滑动时顶部的投影/阴影

    在ScrollView.GridView.ListView向上滑动的过程中,这些控件的顶部会出现一个系统默认的白色阴影,有些时候这个白色的阴影看上去好看,那么就需要除去. 去掉方法:在ScrollVi ...

  2. 创建http.Server实例,端口占用就换个端口

    /** * Created by Sorrow.X on 2017/10/25. */ const http = require('http'); const url = require('url') ...

  3. Java多线程编程模式实战指南（二）：Immutable Object模式

    多线程共享变量的情况下,为了保证数据一致性,往往需要对这些变量的访问进行加锁.而锁本身又会带来一些问题和开销.Immutable Object模式使得我们可以在不使用锁的情况下,既保证共享变量访问的线 ...

  4. 解析LED发光效率

    解析LED发光效率 来源:--作者:--浏览:532时间:2016-08-10 14:18 关键词: 发光效率为评测光源效率的指标,用光源发出的光通量 (lm)与向光源输入的电力(W)之比表示.单位为 ...

  5. tcp为什么是三次握手

    刷知乎看到的,很可爱啊哈哈哈就顺手黏贴过来了 作者:大闲人柴毛毛链接:https://www.zhihu.com/question/24853633/answer/254224088来源:知乎著作权归 ...

  6. python里面 循环明细对比 相同人员明细，生成同一订单里面

    #2018-04-16 def action_create_purc(self,cr,uid,ids,context=None): mrp_origin_obj=self.browse(cr,uid, ...

  7. Adobe PhotoshopCC2017 安装与破解（Mac）

    简单说明下Adobe Photoshop CC 2017的破解方法: 1.打开dmg镜像,双击“Install”进行安装,登陆Adobe ID(没有注册一个)完成安装: 2.解压缩“Adobe Zii ...

  8. sql字符串累加

    函数 stuff(param1, startIndex, length, param2) 函数说明将param1中自startIndex(SQL中都是从1开始,而非0)起,删除length个字符,然后 ...

  9. Duplicate entry * for key *

    一.问题 插入数据时报错 Duplicate entry * for key * 二.分析 建表语句 CREATE TABLE `t_product_result_config` ( `id` var ...

  10. 【已解决】在 Visual Studio 中设置 JavaScript/TypeScript 的断点 脚本出现自动中断错误

    运行ASP.NET Core 程序出现错误如下: 已启用 Visual Studio 中的 Chrome 脚本调试 在 Visual Studio 中设置 JavaScript/TypeScript ...