筛选
...
8.not()
<p class="p1">1</p>
<p class="p2">2</p>
<p class="p3">3</p>

console.log($("p").not($('.p1')));
从获取的p元素集合中除去拥有 class='p1'

9.slice()
<p class="p1">1</p>
<p class="p2">2</p>
<p class="p3">3</p>

console.log($("p").slice(0,1));
console.log($("p").slice(0,-2));

10.children()
<div>
<p class="p1">1</p>
</div>
<div>
<p class="p2">2</p>
</div>
<p class="p3">3</p>

console.log($("div").children('.p1'));
console.log($("div").children());

11.closest()
<div class="father">
<div class="children"> 我是div
<p >我是孙子p</p>
</div>
<p>我是儿子p</p>
</div>
<p>我是兄弟p</p>

console.log($(".father p").closest("div"));
由自身开始,向上级检索,最终获得div.father and div.children 的集合

12.find()
<div class="father">
<div class="children"> 我是div
<p >我是孙子p</p>
</div>
<p>我是儿子p</p>
</div>
<p>我是兄弟p</p>

console.log($("div").find("p"));
此行代码的功能与$("div p")相同

13.next()
<p class="p1">1</p>
<p class="p2">2</p>
<p class="p3">3</p>

console.log($(".p1").next());
选择 p.p1 后面的一个同级元素
14.nextAll()
<p class="p1">1</p>
<p class="p2">2</p>
<p class="p3">3</p>

console.log($(".p1").nextAll());
选择 p.p1 后面的所有的同级元素

15.nextUntil()
<p class="p1">1</p>
<p class="p2">2</p>
<p class="p3">3</p>
<p class="p4">4</p>
<p class="p5">5</p>
<p class="p6">6</p>

console.log($(".p1").nextUntil('.p4'));
选择p.p1到p.p4中间的p.2、p.3
从自身起(不包含自身)向下同级检索,直到满足条件停下(不包含条件元素),最终将检索过得元素合成一个集合

16.parent()
<div class="father">
<div class="children"> 我是div
<p >我是孙子p</p>
</div>
<p>我是儿子p</p>
</div>
<p>我是兄弟p</p>

console.log($("p").parent('.father'));
查找拥有类.father并包含p的元素

17.parents()
<div class="father">
<div class="children"> 我是div
<p >我是孙子p</p>
</div>
<p>我是儿子p</p>
</div>
<p>我是兄弟p</p>

console.log($("p").parents());
p元素的所有上级元素,包括body、html

18.parentsUntil()
<div class="father">
<div class="children"> 我是div
<p >我是孙子p</p>
</div>
<p>我是儿子p</p>
</div>

console.log($("p").parentsUntil('.father'));
功能与nextUntil()相似,向上查找所有上级元素,直到满足条件停下。

19.prev()
<div class="father">
<div class="children"> 我是div
<p >我是孙子p</p>
</div>
<p>我是儿子p</p>
</div>
<p>我是兄弟p</p>

console.log($("p").prev());
选择p元素前面的一个同级元素

20.prevAll()
<ul>
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>

console.log($(".li2").prevAll());
选择p元素前面的所有的同级元素

21.prevUntil()
<ul>
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>

console.log($(".li2").prevUntil());
与nextUntil()相似,向上查找所有同级元素,直到满足条件停下。

22.siblings()
<ul>
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>

console.log($(".li2").siblings());
选择li.li2所有同级元素,但自己排外

23.add()
<ul class="ul1">
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>
<ul class="ul2">
<li class="li4">4</li>
<li class="li5">5</li>
<li class="li6">6</li>
</ul>

console.log($(".ul1").add('ul2'));
连接两个集合

24.addBack()
<ul class="ul1">
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>

console.log($(".li1").next().addBack());
选择li.li1后一个同级元素并用addBack()将其与原本的li.li1合在一个形成一个集合

25.contents()
<ul class="ul1">
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>

console.log($(".ul1").contents());
获取ul.ul1中的所有节点(包括文本节点)

26.end()
<ul class="ul1">
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>

$(".ul1").find(".li2").css('color','red').end().css('backgroundColor','blue');
通过ul.ul1找到li.li2改变其字体颜色,然后通过end()返回原先的集合改变其背景色

jQuery代码节选(筛选)的更多相关文章

  1. jQuery代码节选(事件)

    事件 1.ready()$(document).ready(function() { //代码});简写:$(function( { //代码});该事件是会在页面加载完后执行,相当于onloca() ...

  2. jQuery代码节选(css)

    CSS 1.css<p class="p1">1</p> $("p").css("color");获取css属性值$ ...

  3. 一段jquery代码,保存

    @CHARSET "UTF-8"; #table_id tbody tr.odd td:hover{ background-color:#93CFE5; } #table_id t ...

  4. jquery 选择器、筛选器、事件绑定与事件委派

    一.jQuery简介 1.可用的jQuery服务器网站:https://www.bootcdn.cn/ jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocume ...

  5. jquery选择器,筛选器,属性,事件 基础

    左边栏实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  6. 一句jQuery代码返回顶部

    一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...

  7. 解决VS2012编写JQuery代码不能智能提示的问题(其他js库的代码提示设置估计类似)

    VS默认设置下编写jQuery代码是这样的: 解决办法: 1.在项目的"管理NuGet程序包"中安装JQuery: 2.打开:工具 -> 选项 -> 文本编辑器 -&g ...

  8. 如何书写高质量的jQuery代码

    想必大家对于jQuery这个最流行的javascript类库都不陌生,而且只要是前端开发人员肯定或多或少的使用或者接触过,在今天的这篇文章中,参考了一些资料及实际使用效率,将介绍一些书写高质量jQue ...

  9. 如何编写高效的jQuery代码

    jQuery的编写原则: 一.不要过度使用jQuery 1. jQuery速度再快,也无法与原生的javascript方法相比,而且建立的jQuery对象包含的信息量很庞大.所以有原生方法可以使用的场 ...

随机推荐

  1. VMWare虚拟机实例拷贝到另一台服务器后出现Error in the RPC receive loop: RpcIn: Unable to send.错误的解决

    把一个VMWare虚拟机实例拷贝到另一台服务器后,在事件查看器中的应用程序日志中不断出现Error in the RPC receive loop: RpcIn: Unable to send.错误, ...

  2. Position属性四个值:static、fixed、absolute和relative的区别和用法

    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...

  3. PHP中的一些常用正则表达式

    匹配表单验证 验证账号,字母开头,允许 5-16 字节,允许字母数字下划线:^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 验证账号,不能为空,不能有空格,只能是英文字母:^\S+[a-z ...

  4. JavaScript通过id获取不到元素是什么原因阿?

    s代码 JavaScript code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function show_more_mess() {     $(&qu ...

  5. Delphi控件之---通过编码学习TStringGrid(也会涉及到Panel控件,还有对Object Inspector的控件Events的介绍

    我是参考了万一的博客里面的关于TStringGrid学习的教程,但是我也结合自己的实际操作和理解,加入了一些个人的补充,至少对我有用! 学用TStringGrid之——ColCount.RowCoun ...

  6. Jquery的$(selector).each()和$.each()原理和区别

    我们都用过Jqurey中的each函数,都知道each()有两种方式去调用,一种是通过$.each()调用,另一种是$(selector).each()去调用,那么它们之间有什么区别? 翻看一下Jqu ...

  7. F#之旅0 - 开端

    F#之旅0 - 开端 UWP的学习告一段落,CozyRSS的UWP版本并没有做.UWP跟wpf开发几乎一模一样,然后又引入了很多针对移动设备的东西,这部分有点像android.没啥太大的意思,不难,估 ...

  8. C#改善程序的50种方法

    作者: suyan010203  来源: 博客园  发布时间: 2011-07-09 14:47  阅读: 11976 次  推荐: 8   原文链接   [收藏] 从去年找工作以来,都没什么时间写博 ...

  9. VBA实例收集

    1.工作表事件:固定制定区域激活,使之不能选择其他区域. Private Sub Worksheet_SelectionChange(ByVal Target As Range) If Target. ...

  10. vps_centos_7_系统环境常规配置备忘

    1.设置时区(东八区) 1> 选择亚洲东八区北京时间:tzselect (按照提示选择指定的序号直到北京时间) 2>替换时区文件 :cp /usr/share/zoneinfo/Asia/ ...