jQuery選擇器的優點

相信小伙伴們對選擇器並不陌生，從css1到css3的選擇器有很多，但是JQuery都能完美的支持，而且API操作起來也特別方便好用，在很大程度上精簡了代碼，節約了很多性能。那么今天我們就來簡單地用幾個小案例說一下JQuery選擇器的優點，方便大家日后參閱。（注：本文以JQuery1.8.3為例）

第一個小案例：當點擊p的時候讓它彈出“hello world”。咱們先用jQuery寫

HTML代碼

   <p>1</p>
   <p>2</p>
   <p>3</p>
   <p>4</p>

css代碼

    p{background: red;}

js代碼

     $("p").click(function(){//給p添加點擊事件，因為p是一個集合，JQuery自帶for循環遍歷每個p，這樣就不用我們再去遍歷了，特別方便。
         alert("hello world");
     })

是不是感覺代碼特別少特別清爽啊！！！那么我們再用原生的寫一下大家對比一下。HTML和CSS代碼都一樣，我只寫js的代碼了。

js代碼

  var p=document.getElementsByTagName("p");//找到p
     for(i=0;i< p.length;i++){//循環遍歷每個p
         p[i].onclick=function(){//為它添加點擊事件
             alert("hello world");
         }
     }

這樣對比一下大家是不就一目了然了，用jQuery和用原生的差別就是這么大！！！

第二個小案例：讓索引為偶數的li隔行變色，先來jQuery版本的

HTML

  <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
  </ul>

CSS代碼沒有

js代碼

 $("li:even").css("background","red");

沒錯就是這么簡單，再來原生的

js代碼

  var lis=document.getElementsByTagName("li");
     for(i=0;i<lis.length;i++){
         if(i%2==0){
             lis[i].style.background="red";
         }
     }

是不是感覺很麻煩呀，用jQuery一行代碼就能搞定而用原生的得4行，孰優孰劣一看便知。

第三個小案例：點擊提交按鈕彈出所選擇的愛好的個數，先來jQuery版本的

HTML

  <input type="checkbox">英語
  <input type="checkbox">數學
  <input type="checkbox">語文
  <input type="checkbox">音樂
  <input type="checkbox">美術
  <input type="button" value="提交" id="btn">

CSS沒有

js代碼

    $("#btn").click(function(){
       alert("您選擇了"+$("input:checked").size()+"個愛好!")
   })

就是這么簡單，接下來原生的

js代碼

     var checks=document.getElementsByTagName("input");
     var btn=document.getElementById("btn");
     btn.onclick=function(){
         var geshu=0;
         for(i=0;i<checks.length;i++){
             if(checks[i].checked){
                 geshu++;
             }
         }
          alert(geshu);
     }

我去，居然這么麻煩，哎，看來還是JQuery好用啊。小伙伴們你們是不是現在也深有體會了？？？