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. 【转载】Dom4j的使用(全而好的文章)

    Dom4j的使用(全而好的文章) Dom4j 使用简介 作者:冰云 icecloud(AT)sina.com 时间:2003.12.15   版权声明: 本文由冰云完成,首发于CSDN,未经许可,不得 ...

  2. codeforces 710B B. Optimal Point on a Line(数学)

    题目链接: B. Optimal Point on a Line 题意: 给出n个点,问找出一个点使得这个点到所有的点的距离和最小; 思路: 所有点排序后的中位数;这是一个结论; AC代码: #inc ...

  3. codeforces 707B B. Bakery(水题)

    题目链接: B. Bakery 题意: 是否存在一条连接特殊和不特殊的边,存在最小值是多少; 思路: 扫一遍所有边: AC代码: #include <iostream> #include ...

  4. Struts2 - 值栈(ValueStack)

    1. 关于值栈: 1). helloWorld 时, ${productName} 读取 productName 值, 实际上该属性并不在 request 等域对象中, 而是从值栈中获取的. 2). ...

  5. Gym - 100801G: Graph (贪心+set+拓扑)(好题)

    题意:给定一个N点M边的有向图,叫你加最多K条边,使得最小拓扑序最大. 思路:不是那么简单的题.  参照了别人的代码, 最后想通了. 贪心原则: 用两个单调队列维护, 第一个序列S1单增, 表示当前入 ...

  6. L1-039 古风排版（20 分）

    中国的古人写文字,是从右向左竖向排版的.本题就请你编写程序,把一段文字按古风排版. 输入格式: 输入在第一行给出一个正整数N(<100),是每一列的字符数.第二行给出一个长度不超过1000的非空 ...

  7. 开启现有android项目

    开启工程 在屏幕上方的选单列上,选择「File->New->Project」, 会弹出「New Project」对话视窗.Eclipse 是通用的编辑环境,可根据你所安装的不同扩充套件而支 ...

  8. tomcat启动加载web项目内存溢出

    通过tomcat命令启动tomcat的web项目时,根据项目大小,有可能会报以下两个错误. 在启动时没有错误,但是在访问时会报错: 1. java.lang.OutOfMemoryError: Jav ...

  9. HDOJ1171(多重背包)

    #include<iostream> #include<cstdio> using namespace std; #define MAX(a,b) (a>b)?a:b + ...

  10. JVM体系结构之二：类加载器之2：JVM 自定义的类加载器的实现和使用

    一.回顾一下jdk自带的类加载器: 1.java虚拟机自带的加载器     根类加载器(Bootstrap,c++实现)     扩展类加载器(Extension,java实现)     应用类加载器 ...