概述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>筛选选择器</title>
<script src="jquery-3.6.js"></script>
</head>
<body>
<ol>
<li>borther元素1</li>
<li>borther元素2</li>
<li >borther元素3</li>
<li>borther元素4</li>
<li>borther元素5</li>
<li>borther元素6</li>
<li>borther元素11</li>
<li>borther元素21</li>
<li >borther元素31</li>
<li>borther元素41</li>
<li>borther元素51</li>
<li>borther元素61</li>
<a href="#">borther元素7</a>
</ol>
<ul>
<li>borther元素8</li>
<li>borther元素9</li>
<li>borther元素10</li>
<li>borther元素11</li>
<li>borther元素12</li>
<li class="items">borther元素13</li>
<li>borther元素18</li>
<li>borther元素19</li>
<li>borther元素110</li>
<li>borther元素111</li>
<li>borther元素112</li>
<li>borther元素113</li>
<a href="#">borther元素14</a>
</ul>
<div class="current">current</div>
<div> not current</div>
<script>
$(function () {
/*$('*').css("font-size","45px");
$('ul li ').css("color","red");
$('ul li ').css("font-size","50px");
$('ul li ').css("background-color","yellow");
$('ol li.item').css("color","red");
$('div.current:first').css("color","green");
$('div:last').hasClass('current').css("color","blue");
$('ul.li').nextAll().css("color","green");
*/
var idx =2;
$('ol li ').eq(idx).css("background-color","red");
$('ul li:eq('+idx+')').css("background-color","pink");
$('ul li.items').siblings().css("color","red");
/* console.log($('div:first')).hasClass('current');*/
/* console.log($('div:last')).hasClass('current');*/
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.6.js"></script>
<title>筛选选择器</title>
</head>
<body>
<div class="father">
<div class="son">我是father的儿子div1</div>
<div class="son">我是father的女儿div3</div>
</div>
<div class="father">
<div class="son">我是father的儿子div2</div>
</div>
<div class="nav">
<p>这是nav的儿子</p>
<div class="b">
<p class="c">这是nav的孙子1</p>
<p class="e">这是nav的孙子2</p>
<p >这是nav的孙子3</p>
<p class="f">这是nav的孙子4</p>
<p >这是nav的孙子34</p>
<p >这是nav的孙子44</p>
<p class="a">这是nav的孙女</p>
</div>
<a href="">儿子</a>
</div>
<script>
$(function () {
/*$('*').css("font-size","30px");*/
//父paarent
$('.son').parent().css("color","red");
$('.son').parent().css("font-size","23px");
console.log($('p').parent());
console.log($('p').parents());
//查找p的父级
//2子
$('.a').parent().css("color","red");
$('.a').parent().css("background-color","yellow");
$('div.b>p').css("color","red");
$('div.b>p').css("font-size","32px");
$('div.b>p.c').css("color","pink");
$('div.b>p.e').css("color","green");
$("div.b>p.c:first").css("background", "red");
$("div.b>p.c:first").css("font-size", "100px");
$("div.b>p.f.first").css("font-size", "100px");
$("div:eq(3)").css("background", "brown");
/* $('.nav').find('div:eq(0)').css("background-color", "pink");*/
console.log($('div'));
console.log($('.nav>div'));
console.log($('.nav>div').children());
/* console.log($('.nav>div').children('div'));
console.log($('.nav>div').children('div').children());*/
$('.nav').children("a").css("font-size","60px");
$('nav>div').children('p').css("color","red");
});
//fond
</script>
</body>
</html>
最后
以上就是怕孤单老师为你收集整理的JQUERY选择器--筛选选择器的全部内容，希望文章能够帮你解决JQUERY选择器--筛选选择器所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复