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. 算法（Algorithms）第4版 练习 1.5.6

    对于weighted quick-union,对每个输入数据对,其最大的循环次数为lgN(sites) 故对于109 sites和106 input pairs,其总的指令次数为:sum = lg10 ...

  2. ajax经典案例--省市联动

    ajax的省市联动案例 如果我们的代码比较复杂,可以通过file_put_contents来输出信息到某个日志. 在一个元素中添加另一个元素使用的方法是:appendChild(). 函数append ...

  3. Spring MVC工作原理（好用版）

    Spring MVC工作原理 参考: SpringMVC工作原理 - 平凡希 - 博客园https://www.cnblogs.com/xiaoxi/p/6164383.html SpringMVC的 ...

  4. 序列化工具类（{对实体Bean进行序列化操作.}，{将字节数组反序列化为实体Bean.}）

    package com.dsj.gdbd.utils.serialize; import java.io.ByteArrayInputStream; import java.io.ByteArrayO ...

  5. BEC listen and translation exercise 44

    But over the past 70 years or so, there's been a massive increase in one type of crime which was wha ...

  6. codeforces 631C C. Report

    C. Report time limit per test 2 seconds memory limit per test 256 megabytes input standard input out ...

  7. STL defalloc.h

    defalloc.h . // Filename: defalloc.h . . // Comment By: 凝霜 . // E-mail: mdl2009@vip.qq.com . // Blog ...

  8. Gym - 100801D：Distribution in Metagonia （数学）

    题意:给定一个N,让你把它拆成若干个只含素因子2和3的数之和,且两两之间没有倍数关系,比如10=4+6. 思路:即是2因子的幂递增,3因子的幂递减:或者反之. 对于当前N,我们拆分出的数为num=2^ ...

  9. ACM学习历程—51NOD1028 大数乘法V2（FFT）

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1028 题目大意就是求两个大数的乘法. 但是用普通的大数乘法,这 ...

  10. Muduo 多线程模型：一个 Sudoku 服务器演变

    陈硕 (giantchen AT gmail) blog.csdn.net/Solstice Muduo 全系列文章列表: http://blog.csdn.net/Solstice/category ...