jQuery的简介

jQuery凭借简洁的语法和跨平台的兼容性，极大简化了JavaScript开发人员便利HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。

jQuery的优势

轻量级
强大的选择器
出色的DOM操作的封装
可靠的事件处理机制
完善的Ajax
不污染顶级变量
出色的浏览器兼容性
链式操作方式
隐式迭代。当用jQuery找到带有“.myClass”类的全部元素，然后隐藏他们时，无需循环遍历每一个返回元素。相反，jQuery里的方法都被设计成自动操作对象集合，而不是单独的对象，这使得大量的循环结构变得不再必要，从而大幅地减少了代码量
行为层与结构层的分离。开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。这种将行为层有结构层完全分离的思想，可以使jQuery开发人员和HTML或其他页面开发人员各司其职，拜托过去开发冲突或个人单干模式。同时为后期维护也非常方便，不需要再HTML代码中寻找某些函数和重复修改HTML代码
丰富的插件支持
完善的文档
开源

jQuery简单示例

jQuery程序中，首先要明确一点：在jQuery库里，$就是jQuery的一个简写形式，例如$('#foo')和jQuery('#foo')是等价的。

$(document).ready(function(){
    alert('Hello World!')
});

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

对比	window.onload	$(document.ready)
执行时机	必须等待网页中的所有内容加载完毕之后，才能执行	网页2中所有的DOM结构绘制完毕之后就执行，可能DOM元素关联的东西还没有加载完
编写个数	不能同时编写多个	能同时编写多个
简写形式	无	可以简写成$(function(){...});

jQuery代码风格

对于同一个对象不超过3个操作的，可以直接写成一行。
$('li').show().unbind('click');
对于同一个对象的较多操作，建议每行写一个操作。

$(this).removeClass('mouseout')
       .addClass('moseover')
       .stop()
       .fadeTo('fast',0.6)
       .fadeTo('fast',1)
       .unbind('click')
       .click(function(){...});

对于多个对象的少量操作，可以把每个对象写作一行，如果涉及子元素，可以适当缩进

$(this).addClass('highlight')
       .chlidren('li').show().end()
.siblings().removeClass('highlight')
       .children('li').hide();

jQuery对象和DOM对象

DOM对象

DOM(Document Object Model，文档对象模型)，每一份DOM都可以表示成一棵树。在这个树中，每一个元素节点都是DOM元素节点。可以通过JavaScript中的getElementsByTagName或者getElementById来获取元素节点。像这样得到的DOM元素就是DOM对象。DOM对象可以使用JavaScript中的方法。

var domObj = document.getElementById('id');     //获得DOM对象
var ObjHTML= domObj.innerHTML   //使用JavaScript中的属性--innerHTML

jQuery对象

jQuery就是通过jQuery包装DOM对象后产生的对象。

jQuery对象是jQuery是jQuery中独有的、如果一个对象是jQuery对象，那么就可以使用jQuery中的方法。
$('#foo').html; //获取id为foo元素内的html代码 .html是jQUery里的方法

在jQuery对象中午饭使用DOM对象的任何方法。同理DOM对象也不可以使用jQUery里的方法。

jQuery对象和DOM对象的相互转换

在讨论相互转换之前，先约定好定义变量风格。如果获取的是jQuery对象，就在变量前面加上$
var $variable = 'jQuery对象';
如果是DOM对象
var variable = 'Dom对象';

1. jQuery对象转换为DOM对象

jQuery提供了两种方法将一个jQuery对象转换成DOM对象，即[index]和get[index]。

jQuery对象是一个类似数组的对象，可以通过[index]方法得到相应的DOM对象

var $cr = $('#cr');     //jQuery对象
var cr = $cr[0];        //DOM对象

另一种方法是jQuery本身提供的，通过get(index)来得到相应的DOM对象。

var $cr = $('#cr');     //jQuery对象
var cr = $cr.get(0);        //DOM对象

1. DOM对象转换为jQuery对象

对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象。

var cr = document.getElementById('$cr');    DOM对象
var $cr = $(cr);    jQuery对象

jQuery的简介