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. SpringCloud-断路器(Hystrix)

    在微服务架构中,根据业务来拆分成一个个的服务,服务与服务之间可以相互调用(RPC),在Spring Cloud可以用Rest Template + Ribbon和Feign来调用.为了保证其高可用,单 ...

  2. 机器学习——支持向量机（SVM）

    机器学习--支持向量机(SVM) 支持向量机(Support Vector Machine)广泛地应用于分类问题,回归问题和异常检测问题.支持向量机一个很好的性质是其与凸优化问题相对应,局部最优解就是 ...

  3. BZOJ 2527 [Poi2011]Meteors：整体二分

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2527 题意: 有n个国家和m个空间站,每个空间站都属于一个国家,一个国家可以有多个空间站, ...

  4. jQuery查找子元素与后代元素

    1. 子元素: $().children('选择器')  如选择type为file的子元素  $(this).children("input[type=file]") 或者 $(& ...

  5. 尴尬，qt出现错误，然后莫名又好了..

    Starting D:\code\qt\myChess\day01\build-HelloQT-Desktop_Qt_5_5_0_MinGW_32bit-Debug\debug\HelloQT.exe ...

  6. ajax（异步页面动态刷新）

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和 ...

  7. 2017-2018-1 20179203 《Linux内核原理与分析》第七周作业及第三周测试总结

    攥写人:李鹏举 学号:20179203 ( 原创作品转载请注明出处) ( 学习课程:<Linux内核分析>MOOC课程http://mooc.study.163.com/course/US ...

  8. ACM学习历程—HDU 5451 Best Solver(Fibonacci数列 && 快速幂)（2015沈阳网赛1002题）

    Problem Description The so-called best problem solver can easily solve this problem, with his/her ch ...

  9. 如何调整chm文字字体大小

    chm文档是使用用层叠样式表来控制字符大小的,通过IE的改变“文字大小”是没效果的,那我们是不是就没有办法改变它的大小了呢?显然不是的. 工具/原料   chm文件 方法/步骤     首先打开chm ...

  10. netty支持的协议

    流经网络的数据总是具有相同的类型:字节.这些字节是如何流动的主要取决于我们所说的 网络传输--一个帮助我们抽象底层数据传输机制的概念.用户并不关心这些细节:他们只想确保他们的字节被可靠地发送和接收. ...