jQuery选择器的优点

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

posted on 2017-05-12 10:04  web小爬虫  阅读(1092)  评论(5)  编辑  收藏  举报

导航