jquery筛选元素函数

1.过滤
匹配第二个p元素：
$("button").click(function(){
$("p").eq(1).css("color","red");
});
匹配第一个li元素：
$("button").click(function(){
$("li").first().css("color","red");
});
匹配最后一个元素：
$("button").click(function(){
$("li").last().css("color","red");
});
检查匹配的元素是否含有指定的类：
$("button").click(function(){
if ($("p").hasClass("hello"))
{alert("存在")}
})
筛选出与指定表达式匹配的元素集合。用于缩小匹配的范围：
$(document).ready(function(){
$("button").click(function(){
$("p").filter(".hello").css("color","red");
});
});
根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合
$(document).ready(function(){
$("button").click(function(){
if($("p").last().is(".hello"))
{alert("yes") }
});
});
筛选出包含指定子元素的元素
$(document).ready(function(){
$("button").click(function(){
if($("div").has("p"))
{alert("yes") }
});
});
排除能够被参数中匹配的元素
排除掉有p元素的div：
$(document).ready(function(){
$("button").click(function(){
$("div").not("p").css("color","red");
});
});
slice()从指定索引开始，截取指定个数的元素 （截取区间）
$(document).ready(function(){
$("button").click(function(){
$("p").slice(1,5).css("color","red");
});
});

<body>
<p>p</p>
<p class="hello">pp</p>
<div>div
<p>dp</p>
<p>dp1</p>
<p>dp2</p>
</div>
<div class="dd">dd</div>
<b>Hello</b>
<button>fuzhi</button>
<ul>
<li>1</li>
<li>2</li>
</ul>
</body>

2.查找

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
$(document).ready(function(){
$("button").click(function(){
//$("div").children().css("color","red"); 全部子元素
$("div").children(".p1").css("color","red"); //指定的子元素
});
});
closest()从当前元素开始，返回最先匹配到的符合条件的父元素
$(document).ready(function(){
$("button").click(function(){
$("span").closest("p").css("color","red");
});
});
find()从指定元素中查找子元素
$(document).ready(function(){
$("button").click(function(){
$("p").find("span").css("color","red");
});
});
next()获取指定元素的下一个兄弟元素
$(document).ready(function(){
$("button").click(function(){
$(".p1").next().css("color","red");
});
});
nextAll() 获取其后的所有兄弟元素（不包括自身）
$(document).ready(function(){
$("button").click(function(){
$(".p1").nextAll().css("color","red");
});
});
nextUntil()获取其后的同辈元素，直到参数能匹配上的为止,不包括结束条件那个
$(document).ready(function(){
$("button").click(function(){
$(".one").nextUntil(".p2").css("color","red");
});
});
offsetPosition()返回第一个用于定位的祖先元素，即查找祖先元素中position为relative或absolute的元素。
$(document).ready(function(){
$("button").click(function(){
$("span").offsetPosition().css("background-color","red");
});
});
parent()获取指定元素的直接父元素
$(document).ready(function(){
$("button").click(function(){
$("span").parent().css("color","red");
});
});
parents()获取指定元素的所有祖先元素，一直到<body></body>
parentsUntil()查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$(document).ready(function(){
$("button").click(function(){
$("span").parentsUntil("div").css("color","red");
});
});
prev()获取指定元素的前一个兄弟元素
$(document).ready(function(){
$("button").click(function(){
$(".p2").prev().css("color","red");
});
});
prevAll()获取指定元素前面的所有兄弟元素
prevUntil()获取指定元素前面的所有兄弟元素，直到参数里的条件能够匹配到的。 注意参数条件本身不会被匹配
siblings()获取指定元素的兄弟元素，不分前后
$(document).ready(function(){
$("button").click(function(){
$(".p2").siblings().css("color","red");
});
});

<body>
<p>p</p>
<p class="one">p</p>
<p class="hello">pp</p>
<p class="p2">dp</p>
<div style="width:70%;position:absolute;left:250px;top:150px">定位div
<p class="p1">dp</p>
<p>dp1 <span>sp</span></p>
<p>dp2</p>
</div>
<div class="dd">dd </div>
<b>Hello</b>
<button >fuzhi</button>
<ul>
<li>1</li>
<li>2</li>
</ul>
</body>

3.串联

add()将选中的元素添加到jQuery对象集合中
$(document).ready(function(){
$("button").click(function(){
$(".one").add("span").css("color","red");
});
});
andSelf()将自身加到选中的jQuery集合中,以方便一次性操作
获取one类之后所有的兄弟元素，包括自身：
$(document).ready(function(){
$("button").click(function(){
$(".one").nextAll().andSelf().css("color","red");
});
});
end() 将改变当前选择器选中的操作回退为上一个状态。
pp段落的下一个加上end()回退了，所以匹配的是自己本身：
$(document).ready(function(){
$("button").click(function(){
$(".hello").next().end().css("color","red");
});
});

<body>
<div>
<p class="one">p</p>
<p class="hello">pp</p>
<p class="p2">dp</p>
</div>
<div >div
<p class="p1">dp</p>
<p>dp1 <span>sp</span></p>
<p>dp2</p>
</div>
</body>

jquery筛选元素函数的更多相关文章

  1. jquery 筛选元素(1)

    .eq() 减少匹配元素的集合为指定的索引的那一个元素. .eq(index) index一个整数,指示元素的位置,以0为基数. $("li").eq(2).css('backgr ...

  2. jquery 筛选元素 (3)

    .addBack() 添加堆栈中元素集合到当前集合中,一个选择性的过滤选择器. .addBack([selector]) selector 一个字符串,其中包括一个选择器表达式,匹配当前元素集合,不包 ...

  3. jquery 筛选元素 (2)

    .add() 创建一个新的对象,元素添加到匹配的元素集合中. .add(selector) selector 一个字符串表示的选择器表达式.找到更多的元素添加到匹配的元素集合. $("p&q ...

  4. jquery 替换元素函数

    1.replaceWith()使用括号内的内容替换所选择的内容.$("#div").replaceWith("<div id="div2"> ...

  5. js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

    转载:https://www.cnblogs.com/ooo0/p/6278102.html js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) ...

  6. javascript 常见数组操作（ 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQuery根据元素值删除数组元素的方）

    主要内容: 1.数组整体元素修改 2. 数组筛选 3.jquery 元素转数组 4.获取两个数组中相同部分或者不同部分 5.数组去重并倒序排序 6.数组排序 7.数组截取slice 8.数组插入.删除 ...

  7. jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

    一, js 获取元素(父节点,子节点,兄弟节点)   var test = document.getElementById("test"); var parent = test.p ...

  8. js/jquery获取元素，元素筛选器

    1.js获取元素 var test = document.getElementById("test"); var parent = test.parentNode; // 父节点 ...

  9. 五、jquery使用工具函数

    工具函数对应的网址在 http://api.jquery.com/categouy/utilities/   工具函数处理对象的不同,可以将其分为几大类别:浏览器的检测.数组和对象的操作.字符串的操作 ...

随机推荐

  1. 随意谈谈tcp

    tcp作为四层中可靠到传输协议,为上层协议提供了字节流的可靠到传输,之所以能做到可靠主要因为以下几点: 1.流与分段:流即字节流,计算机处理程序时一般以字节为单位,如果上层协议接收到到是字节流并且跟发 ...

  2. 大话设计模式--建造者模式 Builder -- C++实现实例

    1. 建造者模式,将一个复杂对象的构建与它的表示分离, 使得同样的构建过程可以创建不同的表示. 用户只需要指定需要建造的类型就可以得到他们,而具体建造的过程和细节就不需要知道了. 关键类Directo ...

  3. request bs4

    requests Python标准库中提供了:urllib.urllib2.httplib等模块以供Http请求,但是,它的 API 太渣了.它是为另一个时代.另一个互联网所创建的.它需要巨量的工作, ...

  4. 代码题（1）—lower_bound和upper_bound算法

    1.lower_bound:查找序列中的第一个出现的值大于等于val的位置 这个序列中可能会有很多重复的元素,也可能所有的元素都相同,为了充分考虑这种边界条件,STL中的lower_bound算法总体 ...

  5. 两个stack实现一个queue

    package com.hzins.suanfa; import java.util.Stack; /** * 两个stack实现一个queue * @author Administrator * * ...

  6. C语言小程序（四）、杨辉三角

    输入要显示的杨辉三角的行数,会打印出金字塔型的杨辉三角,不过行数太多的话,效果不太好,可以再调整一下格式控制. #include <stdio.h> #include <stdlib ...

  7. Agc016_D XOR Replace

    传送门 题目大意 给定两个长为$n$的序列$A,B$你可以进行若干组操作,每次操作选定一各位置$x$,令$A_x$等于$A$的异或和. 问能否通过一定操作使得$A$成为$B$,如果能,求最小操作书数. ...

  8. Link-cut-tree 学习记录 & hdu4010

    网上的lct一抓一大把,所以我也不再写什么讲解了,只写一写自己的看法. Link-cut-tree 是用于维护动态树的一种数据结构 所谓动态树就是一片存在边的添加与删除的森林中的一棵树 所以我们要快速 ...

  9. python 3中对list进行sort时，返回值为None

    进行在用python的list结构时, 发现一个问题: methods = [&apos;blogger.deletePost&apos;, &apos;blogger.get ...

  10. IPC的使用

    IPC,Inter-Processor Communication是SYS/BIOS处理核间通信的组件: IPC的几种应用方式: 1.最小使用(Minimal use) 这种情况是通过核间的通知机制( ...