jQuery， CSS选择符属性选择符自定义选择符1

最新推荐文章于 2020-03-08 18:08:00 发布

-Hello_狂奔的蜗牛

最新推荐文章于 2020-03-08 18:08:00 发布

阅读量741

点赞数

文章标签： jquery css

本文链接：https://blog.csdn.net/qq_34649947/article/details/72667690

版权

CSS选择符

  <script>
   /**
    用jQuery，动态地修改css样式,
    修改div(selected-plays)下的所有li的css样式
    addClass使用了隐式迭代机制，调用一次函数就可以完成对所有选择的文档部分的修改
    > 表示 二级标签被选中,而 表示全部的标签被选中 参看:http://blog.csdn.net/wyj880220/article/details/17243539
    : 表示 
   */
    $(document).ready(function(e) {
      $("#selected-plays > li").addClass("horizontal");
      $("#selected-plays li:not(.horizontal)").addClass("sub-level");
    });
  </script>

源码body中:

<body>
   <p class="pstyle">Selected Shakespeare Plays</p>
   <ul id="selected-plays">
     <li>Comdies
       <ul>
         <li><a href="/asyoulikeit/">As You Like it</a></li>
         <li>All's Well That Ends  Well</li>
         <li>A Midsummer Night's Dream</li>
         <li>Twelfh Night</li>
       </ul>
     </li>
     <li>Tragedies
       <ul>
         <li><a href="hamlet.pdf">Hamlet</a></li>
         <li>Macbeth</li>
         <li>Romeo and Juliet</li>
       </ul>
     </li>
     <li>Histories
       <ul>
         <li>Henry IV(<a href="mailto:henryiv@king.co.uk">email</a>)
           <ul>
             <li>Part I </li>
             <li>Part II </li>
           </ul>
         </li>
         <li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li>
         <li>Richard II</li>
       </ul>
     </li>
   </ul>
 </body>

所以对于jQuery的作用，我们首先预先在css样式中写好相应的类然后在js里调用。将相应的类应用到所要应用的H5标签

属性选择符

属性选择符使用
^表示值在字符串的开始
以$表示值在字符串的结尾
用星号表示要匹配的值可以出现在字符串中的任意位置*
！表示对值取反

/*首先有css style*/
/*属性选择符*/
    a {
        color: #00c;
    }
    a.mailto {
        background: url(images/email.png) no-repeat right top;
        padding-right: 18px;
    }
    a.pdflink {
        background: url(images/pdf.jpg) no-repeat right top;
        padding-left: 18px;
    }
    a.henrylink {
        background-color: #fff;
        padding: 2px;
        border: 1px solid #000;
    }

/*然后我要应用上面的css，用jQuery动态实现，*/
    $(document).ready(function(e) {
        $('a[href^="mailto:"]').addClass('mailto');/*以mailto:开头的*/
        $('a[href$=".pdf"]').addClass('pdflink');/*以.pdf结尾的*/
    });

考虑以下

    $(document).ready(function(e) {
        $('a[href^="http:"][href*="henry"]').addClass('henrylink');/*给以http:开头，任意位置有包含hery的的所有的链接，，添加一个henrylink css样式类*/
    });