脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-ѧϰJQuery - 2，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

第2章：元素的选择

    The jquery library harnesses the power of CashCADing Style Sheets(CSS) selectors      to let us quickly and easily access elements or groups of elements in Document Object Model(DOM).

jQuery之所以强大，是因为他很容易的利用CSS和DOM！

形象的比喻：左手是DOM，右手是CSS。

1. CSS选择器

Selector tyPE	CSS	jQuery	说明
Tag name	p {}	$('p')	对整个网页中标签有效
ID	#some-id {}	$('#some-id')	对网页中指定id有效
Class	.some-class {}	$('.some-class')	对网页中相同类名有效

请看下面的菜单：

chapter02.htML

                 <script type="text/javascript" src="jquery-1.10.2.js"></script>     <script type="text/javascript" src="chapter02.js"></script>       
Selected Shakespeare plays
  
      
Comedies          
              
As You Like IT
                 
All's Well That Ends Well
                 
A Midsummer Night's Dream
                 
Twelfth Night
             
         
         
Tragedies          
              
Hamlet
                 
Macbeth
                 
romeo and Juliet
             
         
         
Histories          
              
Henry IV (email)
                  
                      
Part I
                         
Part II
                     
                 
Henry V
                 
Richard II
             
         
     
   

效果如下：

Selected Shakespeare Plays

Comedies As You Like ItAll's Well That Ends WellA Midsummer Night's DreamTwelfth Night Tragedies HamletMacbethromeo and Juliet Histories Henry IV (email) Part IPart II Henry VRichard II 首先，把他变成横向形式

增加如下CSS代码：

.horizontal {  float: left;  list-style: none;  margin: 10px; }


然后，在js中添加CSS支持

$('#selected-plays > li').addClass('horizontal');


现在的效果如下：

Selected Shakespeare Plays

• Comedies As You Like ItAll's Well That Ends WellA Midsummer Night's DreamTwelfth Night
• Tragedies HamletMacbethRomeo and Juliet
• Histories Henry IV (email) Part IPart II Henry VRichard II
  
  
  
  

  
  

  
  

  
  

  在上面的jQuery代码中，我们发现一个新的符号“>”!

  这个符号表示：子元素。

  $('#selected-plays > li')

  指定id="selected-plays"的子元素li(tag name)，即Comedies、Tragedies、Histories行。

  那么，怎么才能选择所有的li元素（子元素，孙元素，重孙元素... ^_^）呢？

  $('#selected-plays li')

  对，你没有看错！就是用空格替代“>”即完成。

  
  

  我们想除了三个子元素以外的所有li元素的背景设置为灰色。

  CSS：

  .sub-level {  background: #ccc; }

  
  JS：

   $('#selected-plays li:not(.horizontal)').addClass('sub-level');

  
  实现效果如下：

  Selected Shakespeare Plays

  • Comedies
  • As You Like It
  • All's Well That Ends Well
  • A Midsummer Night's Dream
  • Twelfth Night
  • Tragedies
  • Hamlet
  • Macbeth
  • Romeo and Juliet
  • Histories
  • Henry IV (email)
  • Part I
  • Part II
  • Henry V
  • Richard II
    

    
    

    
    

    
    

    
    

    
    

    
    

    附：

    chapter02.css

    @charset "utf-8"; /* CSS Document */  .horizontal {  float: left;  list-style: none;  margin: 10px; } .sub-level {  background: #ccc; }

    
    chapter02.js

    $(document).ready(function() {     $('#selected-plays > li').addClass('horizontal');  // add  $('#selected-plays li:not(.horizontal)').addClass('sub-level'); });

    
    

    觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

    脚本宝典总结

    以上是脚本宝典为你收集整理的javascript代码实例教程-ѧϰJQuery - 2全部内容，希望文章能够帮你解决javascript代码实例教程-ѧϰJQuery - 2所遇到的问题。

    如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

    本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
    如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。