Ajax第1章 认识jQuery

1.4 jQuery对象和DOM对象

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

  • jQuery对象
    jQuery对象就是由此jQuery包装DOM对象后爆发的目的。
    jQuery对象是jQuery独有的。假如一个对象是jQuery对象,那么就足以采纳jQuery里的法子。例如:
    Ajax 1
    这段代码等同于:
    Ajax 2

在jQuery对象中不能使用DOM对象的此外措施;同样,DOM对象也无法利用jQuery里的措施。

1.3 jQuery代码的编纂

1.1.1 JavaScript简介

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

1.2 加入jQuery

1.1 JavaScript和JavaScript库

1.5 解决jQuery和其余库的抵触

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

仍然,可以自定义一个连忙模式:
Ajax 4

假定不想给jQuery自定义这些备用名称,还想行使$而不管其他库的$()方法,同时又不想与此外库相争执,那么可以应用以下二种缓解办法。
其一:
Ajax 5
Ajax 6

其二:
Ajax 7
这应当是最地道的法子,因为可以通过变更最少的代码来落实全面的兼容性;

  • 2.jQuery库在其他库此前导入
    设若jQuery库在另外库以前就导入了,那么可以一向运用“jQuery”来做一些jQuery的劳作。同时,可以行使$()方法作为任何库的迅速模式。这里无需调用jQuery.noConflict()函数。示例如下:
    Ajax 8

1.3.2 编写简单的jQuery代码

$(document).ready()
Ajax 9
那段代码的效用类似于传统JavaScript的window.onload方法·小过与window.onload依然有些区别。表格1-2对它们举行了简便比较。
Ajax 10

1.3.3 jQuery代码风格

Ajax 11
4种代码风格统计
(1)对同一个对象不超越3个操作的,可以向来写成一行代码如下:
$("li").show().unbind("click");
(2)对一于同·个对象的较多操作,提出每行写一个操作。代码如下:
Ajax 12
(3)对于六个对象的少量操作,可以每个对象写一行,假若涉及子元素,叮以考虑适当地缩进。例如地点提到的代码:
Ajax 13
(4)对于六个对象的较多操作,提议结合第(2)条、第(3)条来做。

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.2.2 jQuery的优势

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

  • jQuery有以下优势:
    轻量级;
    强硬的拔取器;
    不错的DOM操作的包裹;
    保险的事件处理机制;
    完善的Ajax;
    不污染一级变量;
    优良的浏览器兼容性;
    链式操作形式;
    隐式迭代;
    行为层与结构层分离;
    插件援助;
    开源;

相关文章