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好用啊。小伙伴们你们是不是现在也深有体会了？？？