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");
});
});

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

jquery 筛选元素(1)
.eq() 减少匹配元素的集合为指定的索引的那一个元素. .eq(index) index一个整数,指示元素的位置,以0为基数. $("li").eq(2).css('backgr ...
jquery 筛选元素 (3)
.addBack() 添加堆栈中元素集合到当前集合中,一个选择性的过滤选择器. .addBack([selector]) selector 一个字符串,其中包括一个选择器表达式,匹配当前元素集合,不包 ...
jquery 筛选元素 (2)
.add() 创建一个新的对象,元素添加到匹配的元素集合中. .add(selector) selector 一个字符串表示的选择器表达式.找到更多的元素添加到匹配的元素集合. $("p&q ...
jquery 替换元素函数
1.replaceWith()使用括号内的内容替换所选择的内容.$("#div").replaceWith("<div id="div2"> ...
js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选
转载:https://www.cnblogs.com/ooo0/p/6278102.html js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) ...
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.数组插入.删除 ...
jquery 获取元素(父节点,子节点,兄弟节点),元素筛选
一, js 获取元素(父节点,子节点,兄弟节点) var test = document.getElementById("test"); var parent = test.p ...
js/jquery获取元素，元素筛选器
1.js获取元素 var test = document.getElementById("test"); var parent = test.parentNode; // 父节点 ...
五、jquery使用工具函数
工具函数对应的网址在 http://api.jquery.com/categouy/utilities/ 工具函数处理对象的不同,可以将其分为几大类别:浏览器的检测.数组和对象的操作.字符串的操作 ...

随机推荐

中美贸易战再次开启，世界两极化进程正在加快形成！..... Copyright: 1688澳洲新闻网 Read more at: https://www.1688.com.au/world/international/2018/06/17/369368/
中美贸易战再次开启,世界两极化进程正在加快形成! https://www.1688.com.au/world/international/2018/06/17/369368/
cocos2dx 中 string 转json
string jsonData = warriors.toStyledString().c_str(); Json::Value parseData; Json::Reader reader; rea ...
html5制作坦克大战
全部html5都采用绘图技术完成.坦克是画出来的.(坦克,子弹,墙,水,草坪) 首先我们画出坦克. 坦克是两边两个矩形,中间一个大矩形,矩形了有一个圆,还有一根线. 画出坦克的思路是以坦克的左上角为参 ...
HTML5学习笔记——1
1.视频 <vedio src controls height width autoplay loop preload > </vedio> <source src ...
SQL2005 2008配置错误，无法识别的配置节 system.serviceModel machine.config配置文件有问题
当装上2008的时候,你以前的程序突然报出你的machine.config配置文件有问题,比如 “/” 应用程序中的服务器错误. 配置错误说明 : 在处理向该请求提供服务所需的配置文件时出错.请检查 ...
Python — pandas
Pandas有两种数据结构:Series和DataFrame. 1.Series Series类似于一维数组,和numpy的array接近,由一组数据和数据标签组成.数据标签有索引的作用.数据标签是p ...
Statement
题目大意给定一棵基环外向树,和若干组询问,对于每次独立的询问都指定一些起点和一些终点,你删去一些边,使得从任意起点出发都无法到达终点,并让删去的边的编号的最小值最大,求这个最大的最小值. 题解不难 ...
C#中怎么解析JSON数据，并获取到其中的值？
[1]首先我们根据创建一个json字符转 string json = @"[{'phantom':true,'id':'20130717001','data':{'MID':1019,'Na ...
bzoj 4103: 异或运算可持久化Trie
题目大意: 给定长度为n的数列X={x1,x2,...,xn}和长度为m的数列Y={y1,y2,...,ym},令矩阵A中第i行第j列的值\(A_{ij} = x_i \text{ xor } y_j ...
java"=="与equals()方法的对照
总结:String s=new String(); s是在堆内存里的 String s2=new String(); s2是在堆内存又重新生成的一个. package com.da; //逆向思维:i ...

jquery筛选元素函数

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

随机推荐

热门专题