第一章 认识jQuery

锋利的jQuery

1.1 jQuery的优势

1. 轻量级
2. 强大的选择器
3. 出色的DOM操作封装
4. 可靠的事件处理机制
5. 完善的Ajax
6. 不污染顶级变量
7. 出色的浏览器兼容性
8. 链式操作
9. 隐式迭代
10. 行为层和结构层分离
11. 丰富的插件支持
12. 完善的文档
13. 开源

1.2 window.onload和$(document).ready()对比

1.3 代码风格

链式调用的代码风格
1.按照类换行, 比如添加移除类一行, 动画一行
2.子元素的换行并缩进

$(document).ready(function(){
	$(".has_children").click(function(){
		$(this).addClass("highlight")
            .children("a").show().end()
        .siblings().removeClass("highlight")
            .children("a").hide();
    });
});

1.4 DOM对象和jQuery对象

相关概念

DOM对象: Document Object MOdel,文档对象模型,DOM树形结构,操作DOM节点的方法是原生的JavaScript方法
jQuery对象:通过jQuery包装DOM对象后产生的对象.

DOM对象转jQuery对象

// 对于一个DOM对象, $()包裹就转换为jQuery对象
var cr = document.getElementById("cr");  // DOM对象
var $cr = $(cr);    // jQuery对象

jQuery对象转DOM对象

// 通过[index]或get(index)方法转换成DOM对象
var $cr = $("#cr");     // jQuery对象
var cr = $cr[0];    // 方法一 --> DOM对象
var cr = $cr.get(0);    // 方法二 --> DOM对象

1.5 解决jQuery库冲突的方法

jQuery.noConflict()方法

// 方法一: 
jQuery.noConflict();    // 释放$的控制权
    // 以下用jQuery来使用

// 方法二: 自定义快捷方式
var $j = jQuery.noConflict();
    // 以下用$j来使用方法

// 方法三: 匿名函数内传参使用$
jQuery.noConflict();
(function ($) {
    // 加载函数
    $(function(){
        // 正常使用
    });
})(jQuery);