收藏
批改状态：未批改
老师批语：
选择器使用实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery选择器综合案例</title>
</head>
<body>
<p>精简：</p>
<div class="SubCategoryBox">
<ul>
<li ><a href="#">降龙十八掌</a><i>(30440) </i></li>
<li ><a href="#">黯然销魂掌</a><i>(27220) </i></li>
<li ><a href="#">九阳神功</a><i>(20808) </i></li>
<li ><a href="#">一阳指</a><i>(17821) </i></li>
<li ><a href="#">拈花指</a><i>(12289) </i></li>
<li ><a href="#">无相神功</a><i>(8242) </i></li>
<li ><a href="#">小无相功</a><i>(14894) </i></li>
<li ><a href="#">六脉神剑</a><i>(9520) </i></li>
<li ><a href="#">凌波微步</a><i>(2195) </i></li>
<li ><a href="#">左右互搏术</a><i>(4114) </i></li>
<li ><a href="#">玉女心经</a><i>(12205) </i></li>
<li ><a href="#">九阴白骨爪</a><i>(1466) </i></li>
<li ><a href="#">九阴真经</a><i>(3091) </i></li>
<li ><a href="#">乾坤大挪移</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="#"><span>显示全部品牌</span></a>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//将所有li去掉左边的列表样式
$('li').css('list-style','none')
//去掉所有a标签的下滑线
$('a').css('text-decoration','none')
//siblings():返回所选元素的所有同级元素,除它自己
$('li').eq(3).siblings().css('color','lightgreen')
//省略第二个参数,从第6个开始直到结尾
$('a').slice(6).css('background-color','lightgreen')
//先去掉所有元素上面的自定义样式,将元素恢复无样式
$('*').removeAttr('style')
//去掉满足条件的元素
$('li').not(':eq(5)').css('background-color','lightgreen')
//是p标签的文本和第三个li的文本颜色设为红色
$('li').eq(2).add('p').css('color','red')
</script>点击 "运行实例" 按钮查看在线实例
总结
$("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$("div") 选择所有的div标签元素，返回div元素数组
$(".myClass") 选择使用myClass类的css的所有元素
$("*") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass")
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
