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对象
网友评论