jQuery学习第一章,认识jQuery,write less , do more

2020-03-02 13:19 阅读 177 次 评论 0 条

jQuery是什么

jQuery是一个函数库(library function)。

函数库(library function)

在计算机科学中,库(英语:library)是用于开发软件的子程序集合。库和可执行文件的区别是,库不是独立的计算机程序,他们是向其他程序提供服务的代码。——引自wiki

 

jQuery与原生js对比

选择元素

  • 一般选择器
    $(document) //选择整个文档作为对象
    $('Dome') //选择id名为Dome的元素
    $('div.banner') //选择class名为banner的div元素
  • 智能选择器
    $('section:first') //选择页面中第一个section元素
    $('tr:odd') //选择表格中的奇数行
    $('div:visible') //选择可见的div元素

tips:这个一般选择器和智能选择器是我自己的定义。

 

原生选择器对比一般选择器

  • javascript原生选择器
    <div id="menu" class="div-top"></div>
    <script type="text/javascript">
      document.getElementsByTagName('div');  //获取div标签
      document.getElementById('menu');  //获取id名为menu的元素
      //要获取class还要自己写方法什么数组判断正则的
    </script>
  • jquery一般选择器
    <div id="menu" class="div-top"></div>
    <script type="text/javascript">
      $('div'); //获取div标签
      $('#menu'); //获取id名为menu的元素
      $('.div-top'); //获取class名为div-top的元素
    </script>

总结:简单易维护。当然也要在head里把jquery的库添加上,才能用jquery的方法。

 

原生选择器对比智能选择器

  • javascript原生选择器
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <script type="text/javascript">
      var li_first = document.querySelector("li");  //获取第一个li,定义为li_first
      li_first.style.cssText="background:blue;";  //把li_first的样式的背景颜色的值改为蓝色
    </script>
  • jquery智能选择器
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <script type="text/javascript">
      $('li:first').css('backgroud'."blue"); //获取第一个li,并把样式的背景颜色的值改为蓝色
    </script>

总结:理解的话当然是原生的易懂,比如此例中每一个.都相当于汉字的,主要是固定语法是非常语义化。使用的话jquery方便,jquery胜在高效智能,具体怎么用还要看需求。

 

兼容性

  1. 所有浏览器都兼容jquery,ie>v6
  2. jquery可以与原生js并存,但方法不能混用
    <!--正确的js jq共存写法1-->
    <div id="nav">135246</div>
    <script>
      var Nav1 = document.getElementById('nav'); //js获取id,变量名为Nav1
      Nav1.onclick=function () {  //js点击事件
      alert( this.innerHTML ); //打警告框出来,警告内容是自身
      //alert( $(this).html() ); //使this方法函数化的jquery写法
    }
    </script>
    <!--正确的js jq共存写法2-->
    <script>
    $(function(){
      $('#div1').click(function(){
        alert( $(this).html() ); 
        //alert( this.innerHTML );  //js写法
      });
    });
    </script>
    
    <!--错误的js jq混用方法1--> 
    <div id="nav">135246</div>
    <script>
    var Nav1 = document.getElementById('nav'); //js获取id,变量名为Nav1 
     Nav1.onclick=function () { //js点击事件 
     //alert( $(this).innerHTML ); //这样是错的
     //alert( this.html() );  //这样也是错的
    </script>
    <!--错误的js jq混用方法2--> 
    <script>
    $(function() {
      $('#div1').click(function() {
        alert($(this).html());
         //alert( $(this).innerHTML ); //这样是错的
         //alert( this.html() );  //这样也是错的
      });
    });
    </script>

总结:高度兼容,但需要注意方法所用的语法。

 

ajax、动画等较为复杂的实现

这里要提到jquery的理念,write less , do more。为什么到现在才提这个理念,因为需要do的越more,实际write的越less。这里不写例子了。

 

下一章:《jQuery学习第二章,遍历、过滤器》

jquery学习第二章,遍历、过滤器

 

参考文献

嘤嘤嘤嘤嘤呜呜呜呜呜叭叭叭叭叭嘿嘿嘿嘿嘿哟哟哟哟哟 (3 次评分, 平均分: 5.00 out of 5)
Loading...
版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
转载请注明:jQuery学习第一章,认识jQuery,write less , do more | 温柔的夜
分类:javascript语言 标签:,

发表评论


表情