zoukankan      html  css  js  c++  java
  • 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好用啊。小伙伴们你们是不是现在也深有体会了???

  • 相关阅读:
    js动态绑定class(当前父级div下的子元素有没有这个class,有的话移除,没有的话添加)
    css 最简单的淡出淡出
    vue中注册全局组件并使用
    vue 安装完less之后报 Module build failed: TypeError: loaderContext.getResolve is not a function
    vue moment时间戳转日期的使用
    vue +element实现点击左侧栏目切换路由
    vue使用模板快速创建vue文件
    vue项目中全局使用vuex并注册全局属性
    npm ERR! A complete log of this run can be found in: npm ERR! D: ode ode_cache\_logs2020-06-13T08_12_35_648Z-debug.log
    cnpm的安装(超级详细版)
  • 原文地址:https://www.cnblogs.com/slamljp/p/6844173.html
Copyright © 2011-2022 走看看