jquery 选择符应用1

最新推荐文章于 2024-09-06 20:36:07 发布

原创最新推荐文章于 2024-09-06 20:36:07 发布 · 127 阅读

CC 4.0 BY-SA版权

本文通过一个具体的HTML页面示例，展示了如何使用jQuery进行DOM元素的选择与操作，包括添加类名、移除类名等常见操作。通过对这些操作的学习，读者可以更好地掌握jQuery的基本用法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.horizontal{
float:left; list-style:none; margin:10px;
}
a{color:#00c;}
a.mailto{
background:url('../img/6.PNG') no-repeat right top;
padding-right:18px;
}
a.pdflink{
background:url('../img/7.jpg') no-repeat right top;
padding-right:18px;
}
a.henrylink{
background-color:#fff;
padding:2px;
border:1px solid #000;
}
.horizontal_1{
color:#f00;
}
.horizontal_2{
color:#ff0;
}
.sub_level{background:#CCCCCC;}
</style>
<script src="../jquery.js"/></script>
<script language="javascript">
jQuery(function(){
var $btn = $("div.btn button");
    $btn.click(function(){
    if(this.id == "example1"){
      $("#selected-plays>li").addClass("horizontal");
      $("#selected-plays li:not(.horizontal)").addClass("sub_level");
   //以mailto开头
      $('a[href^=mailto:]').addClass('mailto');
   //以.pdf结尾
      $('a[href$=.pdf]').addClass("pdflink");
   //以http开头且包含henry
      $('a[href^=http][href*=henry]').addClass("henrylink");
   //包含horizontal类的第二项 eq索引从0开始
      $('.horizontal:eq(1)').addClass("horizontal_1");
   // 包含horizontal类的第一项css索引从1开始
      $('.horizontal:nth-child(1)').addClass("horizontal_2");

    }else{
    $("#selected-plays>li").removeClass();
    }
    })
})

</script>
</head>

<body>
<div class="btn">
<button id="default">default</button><br/><br/>
<button id="example1">example1</button>
</div>
<ul id="selected-plays">
<li>comedies
   <ul>
     <li><a href='#'>As you like it</a></li>
     <li>As you like it</li>
     <li>As you like it</li>
   </ul>
</li>
<li>tragedies
   <ul>
     <li><a href='hamlet.pdf'>hamlet</a></li>
     <li>As you like it</li>
     <li>As you like it</li>
   </ul>
</li>
<li>histories
   <ul>
     <li>Henry Iv(<a href="mailto:henryiv@king.co.uk">email</a>)
       <ul>
         <li>part 1</li>
         <li>part 2</li>
       </ul>
     </li>
     <li><a href="http://www..co.uk/henryv.html">Henry</a></li>
     <li>As you like it</li>
   </ul>
</li>
</ul>
</body>
</html>