Blogger Information
Blog 19
fans 2
comment 0
visits 11939
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jquery选择器2018年4月4日作业
汐汐古栖栖的博客
Original
868 people have browsed it

选择器使用实例

实例

<!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")

Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post