锋利的jQuery Day1

jQuery JavaScript

一、 认识jQuery

1. JavaScript简介

JavaScript是一门脚本语言。JavaScript的出现使得网页和用户之间实现了一种实时的、动态的和交互的关系。但JavaScript自身存在3个弊端，即复杂的文档对象模型（DOM），不一致的浏览器实现和缺乏便捷的开发、调试工具。

2. JavaScript库作用及对比

JavaScript库封装了很多预定义的对象和实用函数，能帮助使用者轻松建立高难度交互的Web2.0特性的富客户端页面，并且兼容各大浏览器。
Prototype,最早成型的JavaScript库之一，对内置对象做了大量的拓展。但由于Prototype成型年代早，从整体上对于面向对象的编程思想把握不是很到位，导致了结构的松散。
Dojo,强大之处在于提供了很多其他JavaScript库所没有提供的功能。例如，离线存储的API、生成图标的组件等等。Dojo是一款非常适合企业级应用的JavaScript库，并得到了IBM、SUN等大公司的支持。但其学习曲线陡，文档不齐全，最严重的是API不稳定。
YUI，由Yahoo公司开发的一套完备的、拓展性良好的富交互网页程序工具集。YUI封装了比较多的功能，如DOM操作和Ajax应用等，也包括几个核心的CSS文件。该库文档及其完备，代码编写非常规范。
Ext JS，简称Ext，原为对于YUI的一个拓展，主要用于创建前端用户界面，现发展到可以利用包括jQuery在内的多种JavaScript框架作为基础库，而Ext作为页面的拓展库来使用。该库侧重界面，本身较为臃肿，且并不完全免费。
MooTools，是一套轻量、简洁、模块化和面向对象的JavaScript框架。语法基本与Prototype一样，但提供了更为强大的功能。完全彻底的面向对象的编程思想，语法简洁直观，文档完善，是一个非常不错的JavaScript库。
jQuery，同为轻量级库，拥有强大的选择器，出色的DOM操作，可靠的事情处理、完善的兼容性和链式操作等。

jQuery 凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。
jQuery强调的理念是写得少、做得多（write less, do more）。其优势有如下：
1. 轻量级：非常轻巧，约莫几十KB。
2. 强大的选择器：允许开发者使用从CSS1到CSS3几乎所有的选择器，及jQuery独创的高级选择器。
3. 出色的DOM操作的封装：封装了大量常用的DOM操作。
4. 可靠的事件处理机制
5. 完善的Ajax：将所有的Ajax操作封装到了一个函数$.ajax()里。
6. 不污染顶级变量：只建立一个名为jQuery的对象，所有的函数方法都是在这个对象下。
7. 出色的浏览器兼容性
8. 链式操作方式：对发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。
9. 隐式迭代
10. 行为层与结构层的分离：可以使用jQuery选择器选中元素，然后直接给元素添加事件。
11. 丰富的插件支持
12. 完善的文档
13. 开源

3. jQuery代码的编写

一般有两种版本，无压缩版，主要用于测试、学习和开发；压缩版主要应用于产品和项目。
jQuery无需安装，只需把下载的js文件放到一个公共位置，当某个页面需要使用jQuery时，在HTML文档中引入该库即可。

在编写jQuery程序之前，首先要明确一点，在jQuery库中，$就是jQuery的一个简写形式，例如$("#foo")和jQuery("#foo")是等价的，$.ajax和jQuery.ajax是等价的。

<script type="text/javascript" src="scripts/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    alert("Helll World!");
});
</script>

其中的

$(document).ready(function(){
//
});

代码的作用类似传统JavaScript中的window.onload()方法，但两者还是有部分区别的。

统一jQuery代码编码风格，对日后代码的维护是非常有利的。

$(document).ready(function(){
	$(".level1 > a").click(function(){
		$(this).addClass("current")//为当前元素添加“current”样式
        .next().show()//下一个元素显示
        .parent().siblings().children("a").removeClass("current")//父元素的同辈元素的子元素<a>移除“current”样式
        .next().hide();//下一个元素隐藏
        return false;
    });
});

jQurey代码格式调整，3种注意事项：
(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("highlight")
    .children("li").show().end()
.siblings().removeClass("highlight")
    .children("li").hide();

4. jQuery对象和DOM对象

DOM（Document Object Model，文档对象模型），每份DOM可以表示成一棵树。可以通过JavaScript中的getElementsByTagName或者getELementById方法来获取元素节点。
jQuery对象就是通过jQuery包装DOM对象后产生的对象。如果一个对象是jQuery对象，那么就可以使用jQuery里的方法，例如：

$("#foo").html();//获取id为foo的元素内的html代码。.html()是jQuery里的方法。

这段代码等同于：

document.getElementById("foo").innerHTML;

在jQuery对象里无法使用DOM对象的任何方法,同样在DOM对象中也无法使用jQuery里的方法。

jQuery对象转化成DOM对象，有以下两种方法。
（1） jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应 的DOM对象：

var $cr = $("#cr");
var cr = $cr[0];
alert(cr.checked);

（2）jQuery本身提供的，通过get(index)方法可以得到相应的DOM对象。

var $cr = $("#cr");
var cr = $cr.get(0);
alert(cr.checked);

DOM对象转化成jQuery对象，用$()把DOM对象包装起来，可以获得jQuery对象。

var cr = document.getElementById("cr");
var $cr = $(cr);