第1章 认识jQuery

1.1 JavaScript和JavaScript库

1.1.1 JavaScript简介

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

1.2 加入jQuery

1.2.2 jQuery的优势

jQuery强调的理念是写得少，做得多(write less， do more ) 。

• jQuery有以下优势：
  轻量级；
  强大的选择器；
  出色的DOM操作的封装；
  可靠的事件处理机制；
  完善的Ajax；
  不污染顶级变量；
  出色的浏览器兼容性；
  链式操作方式；
  隐式迭代；
  行为层与结构层分离；
  插件支持；
  开源；

1.3 jQuery代码的编写

1.3.2 编写简单的jQuery代码

$(document).ready()

这段代码的作用类似于传统JavaScript的window.onload方法·小过与window.onload还是有些区别。表格1-2对它们进行了简单对比。

1.3.3 jQuery代码风格

4种代码风格总结
（1）对同一个对象不超过3个操作的，可以直接写成一行代码如下:
$("li").show().unbind("click");
（2）对一于同·个对象的较多操作，建议每行写一个操作。代码如下:

（3）对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，叮以考虑适当地缩进。例如上面提到的代码:

（4）对于多个对象的较多操作，建议结合第（2）条、第（3）条来做。

1.4 jQuery对象和DOM对象

• DOM对象
  DOM（文档对象模型），每一份DOM都可以表示成一棵树。
  获取DOM对象：
  var domObj= document.getElementById("id");

• jQuery对象
  jQuery对象就是通过jQuery包装DOM对象后产生的对象。
  jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么就可以使用jQuery里的方法。例如:
  
  这段代码等同于：
  

在jQuery对象中无法使用DOM对象的任何方法；同样，DOM对象也不能使用jQuery里的方法。

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.5 解决jQuery和其他库的冲突

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

或者，可以自定义一个快捷方式：

如果不想给jQuery自定义这些备用名称，还想使用$而不管其他库的$()方法，同时又不想与其他库相冲突，那么可以使用以下两种解决方法。
其一：

其二：

这应该是最理想的方式，因为可以通过改变最少的代码来实现全面的兼容性；

• 2.jQuery库在其它库之前导入
  如果jQuery库在其他库之前就导入了，那么可以直接使用“jQuery”来做一些jQuery的工作。同时，可以使用$()方法作为其他库的快捷方式。这里无需调用jQuery.noConflict()函数。示例如下: