zoukankan      html  css  js  c++  java
  • (1)jQuery篇 —— jQuery入门

    今天来学习jQuery吧,虽然说现在这个东西已经OUT了,但是学习一下这种“write less,do more”的思想是很有好处的!

    我的第一个jQuery代码:

    <script>
          // 该方法与window.onload作用一致
          $(document).ready(function () {
              // 向页面中添加一个div
              $('<div>',{
                  style: 'font-size: 20px',
                  text: '单击这里改变颜色',
                  click: function () {
                      $(this).css('background','#9f3')
                             .css('color','#fff');
                }
              }).appendTo('body');
    
          });
    
      </script>

    可以很快捷的就能看出来,这个代码如果是用JavaScript来写是多么冗长,如果不封装一个链式语法,那么写起来真的是很恶心的。而jQuery直接将一个div添加到页面的做法是写一个对象!真的可以看出为什么它当年是这么的火了。

    1. jQuery核心写法

    jQuery的核心写法就是$(),也就是jQuery()的简写。想着前两天看的Underscore的源码,直恶心,但是这种_.的方式也是很简略,说明在库的开发上,大家的统一思想就是写的一定要简单,而且能各自形成一派,React的写法也就是React.开头。啧啧,说不定哪天我也能学成,自己写一个我名字开头的库呢?

    jQuery的代码风格简单来说就是链式写法,在源码中就是在函数中将写进去的对象再return出来供下一次的调用。就像下面这样:

    $(this).css('background','#9f3')
           .css('color','#fff');

    jQuery的注释和JavaScript的注释写法一样,我就不多说了,但是React的跨行注释却要{/*...*/}这样书写,有空了再看看React的源码来分析一下吧。

    关于延迟加载:

    在JavaScript中是window.onload = function(){};

    在jQuery中是$(document).ready(function(){});还有简写形式哦! $(function(){}) 是不是很简单呢?

    这俩有啥区别呢?现在来谈谈,首先我们都知道js的写法在页面中只能用一次,后面再使用,则会将前面的覆盖掉,这在多人协作的开发中,是很不现实的。而jQuery的写法却可以在页面中使用多次,不会造成各自的冲突。

    2. jQuery对象与DOM对象间的转换

    对于jQuery库来说,必须要获取jQuery对象之后,才可以进行操作,这和JavaScript是一致的,比如:

        // jQuery写法  
        $('#div').html();
        // JavaScript写法
        document.getElementById('div').innerHTML;  

    我们可以发现,jQuery和JavaScript的方法上是不互通的,也就是说两者都无法调用对方的方法。

    其实jQuery对象是一个特殊的数组对象,即使只有一个元素,jQuery对象仍然是一个数组。之所以说特殊,是因为实际上jQuery对象是包含一个数组对象和各种方法的类。

    而jQuery对象的数组里也就是包含的DOM对象,所以可以通过索引来讲jQuery对象转换成DOM对象。

    在jQuery中,我们定义变量的有个约定俗成的方式,就是在前面添加$来区分是jQuery对象还是DOM对象。

    var $div = $('#div')
  • 相关阅读:
    [模板]KMP
    [BZOJ] 1833: [ZJOI2010]count 数字计数
    [BZOJ] 1563: [NOI2009]诗人小G
    [BZOJ] 2442: [Usaco2011 Open]修剪草坪
    [LOJ] #2360. 「NOIP2016」换教室
    9.18模拟赛
    [BZOJ] 2006: [NOI2010]超级钢琴
    [BZOJ] 1143: [CTSC2008]祭祀river
    [51Nod] 1218 最长递增子序列 V2
    [BZOJ] 3307: 雨天的尾巴
  • 原文地址:https://www.cnblogs.com/luohaoran/p/6051002.html
Copyright © 2011-2022 走看看