1.1.1 JavaScript简介

JavaScript自身存在3个弊端,即复杂的文档对象模型DOM,不致的浏览器实现和不够便捷的支付、调试工具。

1.3.3 jQuery代码风格

jQuery 1
4种代码风格总计
(1)对同一个目标不超过3个操作的,可以直接写成一行代码如下:
$("li").show().unbind("click");
(2)对一于同·个目的的较多操作,提议每行写一个操作。代码如下:
jQuery 2
(3)对于五个目的的为数不多操作,可以每个对象写一行,假设波及子元素,叮以考虑相当地缩进。例如地点提到的代码:
jQuery 3
(4)对于三个目的的较多操作,提议组成第(2)条、第(3)条来做。

1.2 加入jQuery

1.2.2 jQuery的优势

jQuery强调的见识是写得少,做得多(write less, do more ) 。

  • jQuery有以下优势:
    轻量级;
    强劲的采纳器;
    精良的DOM操作的包裹;
    保险的事件处理机制;
    完善的Ajax;
    不传染一级变量;
    赏心悦目的浏览器兼容性;
    链式操作方法;
    隐式迭代;
    行为层与结构层分离;
    插件帮忙;
    开源;

1.1 JavaScript和JavaScript库

1.3.2 编写简单的jQuery代码

$(document).ready()
jQuery 4
这段代码的法力类似于传统JavaScript的window.onload方法·小过与window.onload依然有些区别。表格1-2对它们举行了简易比较。
jQuery 5

1.3 jQuery代码的编撰

1.5 解决jQuery和其余库的争论

  • 1.jQuery库在任何库之后导入
    在其余库和jQuery库都被加载完毕后,可以在其余时候调用jQuery.noConflict()函数来将变量$的控制权移交给此外JavaScript库。示例如下:
    jQuery 6

或者,可以自定义一个飞快格局:
jQuery 7

如果不想给jQuery自定义这多少个备用名称,还想使用$而不管其他库的$()方法,同时又不想与其它库相顶牛,那么可以利用以下二种缓解形式。
其一:
jQuery 8
jQuery 9

其二:
jQuery 10
这应当是最漂亮的办法,因为能够透过改动最少的代码来贯彻宏观的兼容性;

  • 2.jQuery库在任何库此前导入
    一经jQuery库在另外库以前就导入了,那么可以直接使用“jQuery”来做一些jQuery的做事。同时,可以接纳$()方法作为任何库的连忙模式。这里无需调用jQuery.noConflict()函数。示例如下:
    jQuery 11

1.4.2 jQuery对象和DOM对象的互动转换

在座谈jQuery对象和DOM对象的互相转换此前,先约定好定义变量的作风。假若拿到的目的是JQuery对象,那么在变量前边加$,例如:

  1. var $variable = jQuery对象;
  2. var variable = DOM对象;

  1. jQuery对象转换成DOM对象
    jQuery提供了二种方法将一个jQuery对象转换成DOM对象,即[index]和get(index).
    (1)jQuery对象是一个数组对象,可以因而[index]的章程取得相应的DOM对象。
    jQuery代码如下:

  1. var $cr = $("#cr");// jQuery对象
  2. var cr = $cr.get(0);//DOM对象
  3. alert(cr.checked);//检测这个checkbox是否被选中了

(2)DOM对象转换成jQuery对象
对此一个DOM对象,只需要用$()把DOM对象包装起来,就足以拿走一个jQuery对象了。
jQuery代码如下:

  1. var cr = document.getElementById("cr");//DOM对象
  2. var $cr = $(cr);//jQuery对象

Note:
平时利用的jQuery对象都是由此$()函数创设出来的,$()函数就是一个jQuery对象的创制工厂。

1.4 jQuery对象和DOM对象

  • DOM对象
    DOM(文档对象模型),每一份DOM都得以象征成一棵树。
    获取DOM对象:
    var domObj= document.getElementById("id");

  • jQuery对象
    jQuery对象就是透过jQuery包装DOM对象后暴发的目的。
    jQuery对象是jQuery独有的。假诺一个目的是jQuery对象,那么就可以动用jQuery里的措施。例如:
    jQuery 12
    这段代码等同于:
    jQuery 13

在jQuery对象中不能选择DOM对象的别样方法;同样,DOM对象也无法选用jQuery里的法子。

相关文章

网站地图xml地图