jQ选择器
1.首先说一下jQ基础选择器及使用方法
<div class="box"> <ul> <li class="one">目录</li> <li>风花雪月</li> <li>云淡风轻</li> <li>轻声细语</li> <li id="li">醉生梦死</li> <li>白雪皑皑</li> <li>登高望远</li> </ul> <div class="boxa"> <p class="two">目录</p> <p class="gl">格林童话</p> <p>希腊童话</p> <p class="ats">安徒生童话</p> </div> </div> <script> /* 基础选择器和css里面的选择其一摸一样 id选择器 $("#id名") 标签选择器 $(".类名") 交集选择器 $("div.two") 要选择元素是div而且类名要是two 并集选择器 $(".one,.two") 这个是只要有雷名为one或者two的 都可以 */ $(function(){ $("#li").css("font-size","50px"); $(".boxa").css("backgroundColor","#0f0"); $("li").css("color","pink"); $(".gl, .ats").css("backgroundColor","blue"); $(".one, .two").css("border","1px solid orange"); }) </script>
2.子代和迭代
<body> <div class="father"> <div> <span>span1</span> <span>span2</span> <span>span3</span> </div> <div> <div>div1</div> <div>div2</div> <span>span标签</span> <p>p标签</p> </div> <div></div> <p>p1</p> <p>p2</p> <p>p3</p> <span>span</span> </div> <script src="./jquery-3.5.1.js"></script> <script> // 子代选择器 /* $("父元素>子元素") 后迭代选择器 $("父元素 后代元素") */ $(function(){ // 需求:找到类名为father的盒子下的所有子代div标签 console.log($(".father>div")); // 需求:找到类名为father的合资下的所有子代div标签和p标签 // console.log($(".father>div, p")); //获取到.father下的所有子代div标签和页面上所有的p标签 // console.log($(".father>(div,p)")); //报错 jQuery里面压根没这种写法 console.log($(".father>div, .father>p")); // 需求:找到father下的所有后代div console.log($(".father div")); }) </script> </body>
3.过滤选择器
<!-- 过滤选择器前面都会加一个冒号
:odd 找到索引号为奇数行的元素
:even 找到索引号为偶数行的元素
:eq(index) 找到传入的索引号对应的元素
-->
4.筛选选择器
<!--
筛选选择器主要是方法
children(选择器) 子类选择器 $("父元素>子元素") 用法 $("父元素").children("子元素选择器")
find(选择器) 后代选择器 $(“父元素 子元素) 用法 $("父元素").find("子元素选择器")
siblings(选择器) 兄弟选择器 $(我的是兄弟节点 不包括自己) 用法 $("兄弟元素").siblings("兄弟元素")
parent() 父元素选择器 用法 $("选择器").parent()
next() 下一个兄弟元素 用法 $("选择器").next()
prev() 上一个兄弟元素 用法 $("选择器").prev()
eq(index) 找对应索引的元素 $("li:eq(0)") 用法 $("li").eq(0)
-->
相关推荐
82473264 2017-02-23
dangzhangjing 2016-04-12
myloveqiqi 2016-04-12
Ydgent 2016-04-12
覆雪蓝枫 2016-04-11
Simagle 2016-04-11
yongyonglsy 2017-02-23
liboqiao 2019-06-27
恋雨烟梦 2013-06-25
zhangyang0 2011-09-19
FloatDreamed 2011-04-29
wolaizheli 2011-03-31
dreamlivemeng 2017-07-17
87407607 2013-02-05
草莓酱 2012-12-27
yaasshole 2011-08-23
旁观者郑昀 2018-01-10
前端外刊评论 2018-01-03