1.jquery简介
Jquery是继prototype之后又一个优秀的Javascript框架。它是轻量级的js库 ，它兼容CSS3，兼容
各种浏览器(IE6+,FF1.5+,safari2.0+,opera9.0+)
jquery凭借简洁的语法，出色的兼容性，小巧的体积迅速占领前端开发这一阵地。
它极大地简化了js开发人员遍历html文档，操作DOM，处理事件，执行动画和开发ajax的操作。
2.jquery的优势
(1)轻量级
(2)强大的选择器
(3)出色的DOM操作封装
(4)完善的事件和事件对象兼容机制
(5)完善的ajax
(6)不污染全局变量($可以随时交出控制权)
(7)出色的浏览器兼容
(8)方便的链式操作
(9)隐式迭代（一般情况下不需要for循环遍历dom对象）
(10)完善的文档（官方文档相当完备，官方blog每次更新都会有详细说明）
这里给大家提供一份中文的jQuery开发文档:链接
(11)丰富的插件
例如下面这个:
<!doctype html>
<html lang="en">
<head>
<title>demo1</title>
</head>
<body>
<a href="#">aaaaaaaaaaaaaaaaaaa</a>
<!-- 当页面加载完毕的时候，我要让a标签的文字变成红色
当我点击这个a标签的时候，我需要让这个a标签有一个黄色的边框-->
<script>
alert(1);
var a=document.getElementsByTagName('a')[0];
a.style.color="red";
a.onclick=function(){
this.style.border="10px solid #f90";
}
</script>
</body>
</html>
我们利用jQuery可以改写成这样:
<!doctype html>
<html lang="en">
<head>
<title>demo1</title>
<script src="jquery-1.8.0.min.js"></script>
</head>
<body>
<a href="#">aaaaaaaaaaaaaaaaaaa</a>
<!-- 当页面加载完毕的时候，我要让a标签的文字变成红色
当我点击这个a标签的时候，我需要让这个a标签有一个绿色的边框-->
<script>
alert(1);
var a=$('a');
a.css('color','red').click(function(){
$(this).css('border','10px solid #38a38a');
});
</script>
</body>
</html>
可以看到原来获取一个节点对象要写很长的语句，用jQuery就很简洁。onclik事件也不用分开去写，十分方便。
关于隐式迭代，我们来看下一个样例:
<!doctype html>
<html lang="en">
<head>
<meta charset="GBK">
<title>demo2</title>
</head>
<body>
<p>我是第1个标签</p>
<p>我是第2个标签</p>
<p>我是第3个标签</p>
<!-- 当我点击每个p标签的时候，我要弹出当前p标签里的内容 -->
<script>
var p=document.getElementsByTagName('p');
for(var i=0;i<p.length;i++){
p[i].onclick=function(){
alert(this.innerHTML);
};
}
</script>
</body>
</html>
使用jQuery改写为:
<!doctype html>
<html lang="en">
<head>
<meta charset="GBK">
<title>demo2</title>
<script src="jquery-1.8.0.min.js"></script>
</head>
<body>
<p>我是第1个标签</p>
<p>我是第2个标签</p>
<p>我是第3个标签</p>
<!-- 当我点击每个p标签的时候，我要弹出当前p标签里的内容 -->
<script>
var p=$('p');
p.click(function(){
alert($(this).html());
});
</script>
</body>
</html>
可以看到，使用jQuery我们可以不使用for循环，实际上是使用了隐式循环，一般情况下不需要for循环遍历dom对象，很灵活。
3.jquery的不足
(1)不能向后兼容。
新版本可能不兼容早期版本，如果想要升级jquery版本可能会付出额外的维护成本
(2)插件兼容
和上一点相同
(3)插件之间的冲突
如果在同一张页面上引用多个插件时，可能会引起冲突现象，特别是用这些插件依赖
相同事件或相同选择器时最容易出错，虽然这不是jquery本身的错误。
(4)在大型框架框架中，特别是在开发后台UI框架的时候，jquery对于动画支持相对来说不太给力，需要用引用jquery UI来进行弥补
4.获取jquery，版本的选择
(1)官方网站：http://www.jquery.com
(2)cdn获取：
a) 谷歌CDN：http://www.google-jquery-cdn.com/
b) 百度CDN：http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs
c) 微软CDN：http://msdn.microsoft.com/zh-cn/library/ee517318.aspx
d) 新浪CDN：http://sae.sina.com.cn/?m=devcenter&catId=147
5.jQuery的引入
(1)引入jquery
<script src="jquery-1.8.0.min.js"></script>
(2)引入CDN的jquery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js"></script>
(3)优先引入CDN上的jquery,如果失效再引入本地的jquery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-1.8.0.min.js"></script>')</script>
6.编写第一个jquery程序
<script>
$(document).ready(function(){
alert('hello world!!!');
});
</script>
7.$(document).ready()和window.onload的区别
由于html是自上而下读取的文档流，如果javascript代码写在html中文档的前面，而导致先读取javascript代码后读取html文档，造成html文档流失。
如果将代码包裹在window.onload中就会防止这种情况:
<!doctype html>
<html lang="en">
<head>
<meta charset="GBK">
<title>demo2</title>
<script>
window.onload=function(){
alert(1);
}
</script>
</head>
<body>
<p>我是文字</p>
</body>
</html>
弹出对话框的同时会将下面的“我是文字”加载出来
jQuery使用的是$(document).ready()
那么$(document).ready()和window.onload有什么不同呢？
不同点1:执行时机
window.onload执行时机:等网页中所有的资源加载完毕后(包括图片，flash，音频，视频)才能执行。
$(document).ready()执行时机:等dom树加载完毕后就可以执行
不同点2:编写个数
window.onload只能写一个，而$(document).ready()可以写N个
不同点3:简化写法
window.onload无简化写法，而$(document).ready()简化方法可以写为$(function(){})
测试:
<!doctype html>
<html lang="en">
<head>
<meta charset="GBK">
<title>demo2</title>
<script src="jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function(){
alert('我是jQuery的');
});
$(function(){
alert('我是简写的');
});
</script>
</head>
<body>
<p>我是文字</p>
</body>
</html>
转载请注明出处：http://blog.csdn.net/acmman/article/details/48971465