• (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')
  • 相关阅读:
    一球从100米高度自由落下, 每次落地后反跳回原高度的一半; 再落下,求它在第10次落地时, 共经过多少米?第10次反弹多高?
    输入某年某月某日,判断这一天是这一年的第几天?
    一、spring——helloWorld
    遍历Map的四种方法
    六、IO流——文件
    五、集合
    在java项目中使用log4j的实例
    Nginx配置文件nginx.conf中文详解(总结)
    Windows7下安装搭建Ngnix教程
    第七课 文件存储
  • 原文地址:https://www.cnblogs.com/luohaoran/p/6051002.html
Copyright © 2020-2023  润新知