本文内容：
- $符号的意义
- $(document).ready()函数
- 分清jQuery对象和DOM对象
- 链式操作风格
- 解决jQuery和其他库的冲突
首次接触jquery的同学，第一感觉肯定是被 $ 符号刷屏...
所以首先明确一点，在jQuery库中，$就是jQuery的一个简写形式，例如：
$("#foo") 等价于 jQuery("#foo")
$.ajax 等价于 jQuery.ajax再一个需要优先知道的是$(document).ready函数，该函数所有代码都将在DOM加载完毕后，页面全部内容（包括图片等）完全加载完毕前被执行。事件的绑定等就放在这里。
它还可以在一个js文件中被反复调用。
$(document).ready(function) {
// 将jQuery代码放在这里
});
$(document).ready(function) {
// 将jQuery代码放在这里
});
可以使用如下的简写形式
$(function() {
// 将jQuery代码放在这里
});
- 另一个是需要分清jQuery对象和DOM对象
DOM对象：各种html标签都是DOM元素节点，可以通过javascript的getElementsByTagName或者getElementById来获取。
jQuery对象：通过jQuery包装DOM对象后产生的对象
约定风格
var $variable = jQuery对象;
var variable = DOM对象;
jQuery对象转成DOM对象
var $cr = $("#cr");
var cr = $cr[0]; // jQuery对象是一个类似数组的对象
或
var cr = $cr.get(0);
DOM对象转成jQuery对象
var cr = document.getElementById("cr");
var $cr = $(cr); // $()函数就是一个jQuery对象的制造工厂
- 链式操作风格
此种操作帮程序猿节省了大量代码。不过写法应该注意可读性，看如下示例
（1）对于同一个对象不超过3个操作的，可以直接写成一行
$("li").show().unbind("click");
（2）对于同一个对象的较多操作，建议每行写一个操作
$(this).removeClass("mouseout")
.addClass("mouseover")
.stop()
.fadeTo("fast", 0.6)
.fadeTo("fast", 1)
.unbind("click")
.click(function() {
// do something.
});
（3）对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当地缩进
$(this).addClass("hightlight")
.children("li").show().end()
.siblings().removeClass("hightlight")
.children("li").hide();
- 解决jQuery和其他库的冲突
-
jQuery库在其他库之后导入
方法一（直接使用jQuery）jQuery.noConflict(); // 将变量$的控制权交出去
jQuery(function() { // 使用jQuery
jQuery("p").click(function() {
alert( jQuery(this).text() );
});
});
方法二（自定义备用名称）
var $j = jQuery.noConflict(); // 自定义一个快捷方式
$j(function() { //使用快捷方式
$j("p").click(function() {
alert( $j(this).text() );
});
});
方法三（仍使用$）
jQuery.noConflict();
jQuery(function($) { // 先用jQuery设定页面加载时执行的函数
$("p").click(function() { // 在函数内部继续使用$()方法
alert( $(this).text() );
});
});
或
jQuery.noConflict();
(function($) { // 定义匿名函数并设置形参为$
$(function() { // 匿名函数内部的$均为jQuery
$("p").click(function() {
alert( $(this).text() );
});
});
});
2.jQuery库在其他库之前导入
jQuery(function() { // 直接使用jQuery，无需调用“jQuery.noConflict()”函数
jQuery("p").click(function() {
alert( jQuery(this).text() );
});
});