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')
  • 相关阅读:
    【CodeVS 3290】【NOIP 2013】华容道
    【UOJ #20】【NOIP 2014】解方程
    【UOJ #17】【NOIP 2014】飞扬的小鸟
    【UOJ #147】【NOIP 2015】斗地主
    【UOJ #150】【NOIP 2015】运输计划
    【POJ 3241】Object Clustering 曼哈顿距离最小生成树
    【COGS 254】【POI 2001】交通网络图
    【CodeVS 2083】Cryptcowgraphy 解密牛语
    1654 方程的解
    2124: 等差子序列
  • 原文地址:https://www.cnblogs.com/luohaoran/p/6051002.html
Copyright © 2011-2022 走看看