jQuery之筛选方法

1. 父parent、子children、find

 1 <div class="yeye">
 2         <div class="father">
 3             <div class="son">儿子</div>
 4         </div>
 5     </div>
 6
 7     <div class="nav">
 8         <p>我是屁</p>
 9         <div>
10             <p>我是p</p>
11         </div>
12     </div>
13     <script>
14         // 注意一下都是方法 带括号
15         $(function() {
16             // 1. 父  parent()  返回的是 最近一级的父级元素 亲爸爸
17             console.log($(".son").parent());
18             // 2. 子
19             // (1) 亲儿子 children()  类似子代选择器  ul>li
20             // $(".nav").children("p").css("color", "red");
21             // (2) 可以选里面所有的孩子 包括儿子和孙子  find() 类似于后代选择器
22             $(".nav").find("p").css("color", "red");
23             // 3. 兄
24         });
25     </script>

二、兄弟siblings、判断是否有类名

 1        <ol>
 2         <li>我是ol 的li</li>
 3         <li>我是ol 的li</li>
 4         <li class="item">我是ol 的li</li>
 5         <li>我是ol 的li</li>
 6         <li>我是ol 的li</li>
 7         <li>我是ol 的li</li>
 8     </ol>
 9     <ul>
10         <li>我是ol 的li</li>
11         <li>我是ol 的li</li>
12         <li>我是ol 的li</li>
13         <li>我是ol 的li</li>
14         <li>我是ol 的li</li>
15         <li>我是ol 的li</li>
16     </ul>
17     <div class="current">俺有current</div>
18     <div>俺木有current</div>
19     <script>
20         // 注意一下都是方法 带括号
21         $(function() {
22             // 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟
23             $("ol .item").siblings("li").css("color", "red");
24             // 2. 第n个元素
25             var index = 2;
26             // (1) 我们可以利用选择器的方式选择
27             // $("ul li:eq(2)").css("color", "blue");
28             // $("ul li:eq("+index+")").css("color", "blue");
29             // (2) 我们可以利用选择方法的方式选择 更推荐这种写法
30             // $("ul li").eq(2).css("color", "blue");
31             // $("ul li").eq(index).css("color", "blue");
32             // 3. 判断是否有某个类名
33             console.log($("div:first").hasClass("current"));
34             console.log($("div:last").hasClass("current"));
35
36
37         });
38     </script>

原文地址:https://www.cnblogs.com/jianguo221/p/11956057.html

时间: 2024-08-30 10:38:34

jQuery之筛选方法的相关文章

jQuery三——筛选方法、事件

目录 一.jquery常用筛选方法 以下为jquery的常用筛选方法: 代码示例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>筛选方法</title> <style type="text/css"> li.active { font-size: 50px; } &

JQuery的筛选方法

前面咱们学习到了jquery的选择器的筛选用法,那么咱们接下来学习一下jquery的常用筛选方法,一张图搞定一切. 原文地址:https://www.cnblogs.com/fmgao-technology/p/9252270.html

前端开发之jQuery位置属性和筛选方法

主要内容: 1.jQuery的位置属性及实例 (1)位置属性 (2)实例 --- 仿淘宝导航栏 2.jQuery的筛选方法及实例 (1)筛选方法 (2)实例一:嵌套选项卡 (3)实例二:小米官网滑动 (4)实例三:焦点轮播图 (5)实例四:动态实现轮播图 一.jQuery的位置属性及实例 1.位置属性 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解

一.Jquery遍历筛选数组 1.jquery grep()筛选遍历数组 $().ready( function(){ var array = [1,2,3,4,5,6,7,8,9]; var filterarray = $.grep(array,function(value){ return value > 5;//筛选出大于5的 }); for(var i=0;i<filterarray.length;i++){ alert(filterarray[i]); } for (key in f

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法 一丶什么是JQuery JQuery: ???????JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率 ??????js库是包含了把复杂的功能封装到简单的方法中 JQuery的两大特性: ???????链式编程:可以.的形式实现多个功能 ?

锋利的jQuery读书笔记---jQuery中Ajax--load方法

第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="Ajax提交" onclick="Ajax();&qu

jquery 事件 开发方法 总结

转:http://hi.baidu.com/shuanglinwanyu/blog/item/4936af3e40c7993770cf6c9e.html attribute:属性$("p").addclass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:"test.jpg",title:"test image"}); 给某个元素添加属性/值,参数是map$("input&quo

js与jquery常用数组方法总结

转载:http://www.cnblogs.com/codetker/p/4676899.html 昨天被问数组方法的时候,问到sort()方法是否会改变原来的数组.本来我猜是不会,也是这么说,马上我又觉得,知识这种东西,不确定的时候直接说不确定或不知道就好,只是凭借着不确定的猜测或者是记忆,害人害己,于是我又回答不知道.结果果然...我记错了0.0 还是自己总结测试一下比较靠谱,印象也比较深刻.欢迎大家提出相关意见或建议,提前谢谢哈~ 一.原生js方法 1.遍历数组 in(同时也是对象遍历属性

jquery中siblings方法配合什么方法一起使用

siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的.接下来通过本文给大家介绍jQuery siblings()用法实例详解,需要的朋友参考下吧 siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的. jQuery 的遍历方法siblings() $("给定元素").siblings(".selected") 其作用是筛选给定的同胞同类元素(不包括给定元素本身) 例子:网页选项栏 当点击任意一个选项卡是,其他2个选