一、认识 JQuery
1. 概述
jQuery是为了简化JavaScript的开发而诞生的一个JavaScript库。它是一个轻量级的库、拥有强大的选择器、出色的DOM操作、可靠的事件处理、完善的兼容性和链式操作等功能。
jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。
2. 配置jQuery环境
获取jQuery最新版本： http://jquery.com/
jQuery库类型说明：
jquery-1.x.js（完整无压缩版本，用于测试、学习和开发）
jquery-1.x.min.js（经过JSMin等工具压缩后的版本，体积非常小，用于产品和项目）
使用JQuery：
a.将jquery-1.x.js放入项目中
b.在页面引入jQuery：<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
3. 页面加载事件（可以写多个 $(document).ready()）
同JS中的window.onload，但window.onload只能有一个，window.onload必须等页面所有内容加载完毕后执行。$(document).ready()只需等DOM结构绘制完毕就执行，可能DOM关联的东西并没有加载完。
<script type="text/javascript">
$(document).ready(function(){
alert("hello world");
})
</script>
4. jQuery代码风格（链式操作风格)
JQuery 允许你在一句代码中操做任何与其相关联的元素，包括其子元素、父元素等
例：$("#myDiv").addClass("css1")
.children("a").removeClass("css2"); //选择名称为myDiv的元素，为其自身添加css1的样式，然后再选择其所有子元素a，为其移除 css2 样式。
5. jQuery对象(不能使用DOM对象的方法)
$("#myDiv").html(); //获取id为myDiv的元素内的html代码，同 document.getElementById("foo").innerHTML;
JQuery 对象 转换成 DOM 对象 ：
var $obj = $("#myDiv"); // jQuery对象
var obj = $obj.get(0); // DOM对象，或者 var obj = $obj[0];
DOM对象转换成 JQuery对象：
var obj = documnet.getElementById("myDiv"); //DOM对象
var $obj = $(obj); //jQuery对象
6. 解决jQuery和其它库的冲突
jQuery库在其他库之后导入：
jQuery.noConflict(); // 释放 JQuery对 $ 符号的控制权，释放后不能使用 $ 访问jQuery。
var $j = jQuery.noConflict(); // 自定义 $j 作为jQuery的快捷方式。
如果不想转让 $ :
jQuery.noConflict();
jQuery(function($){...}); 或 （function($){...})(jQuery); //此时，可在函数内部继续使用 $ 。
jQuery库在其他库之前导入：
则可以使用jQuery关键字来使用jQuery，可以使用$来操作其它库。
7. jQuery开发工具和插件
Dreamweaver：
Dreamweaver是一个可视布局工具，代码自动提示需在 http://xtnd.us/dreamweaver/jquery 上下一个 jQuery-API.mxp插件。
Aptana：
Aptana是一个功能非常强大、开源和专注于Javascript的Ajax开发IDE。
jQueryWTP 和 Spket插件：
这两款插件都可以使Eclipse支持jQuery自动提示代码功能。分别在http://www.langtags.com/jquerywtp/ 和http://spket.com/ 上下载。
二、JQuery选择器
1. CSS选择器
CSS是一项出色的技术，它使得网页的结构和表现层样式完全分离。利用CSS选择器能轻松地对某个元素添加样式而不改动HTML结构，只需通过添加不同的CSS规则，就可以行到各种不同样式的网页。其中包括标签选择器、ID选择器、类选择器、群组选择器、后代选择器、通配选择器等。
2. jQuery选择器
写法简洁：
jQuery使用 $("#ID") 来代替 document.getElementById("ID")来通过ID获取元素。
使用$("tagName") 来代替 document.getElementsByTagName("tagName")来通过标签名获取HTML元素。
支持CSS1、CSS2的全部和CSS3的部分选择器:
完善的处理机制：
if(document.getElementById("test")){ // 判断test是否存在，
document.getElementById("test").style.color = "red"; //如果不进行判断，test不存在时页面会出现异常
}
$("#test").css("color","red"); // 这里无需判断test是否存在,不存在时也不会发生异常
if($("#test").length>0){...} //或 if($("#test")[0]) 来判断是否得到该jQuery对象
3. jQuery基本选择器
$("#myDiv") //根据给定的ID选择匹配的元素，返回单个元素
$(".myClass") //根据给定的样式名称选择匹配的元素，返回集合元素
$("p") //选取所有的<p>元素，返回集合元素
$("*") //选择页面所有元素，返回集合元素
$("div,span,p.myClass") // 选取所有<div>、<span>和拥有class为myClass的<p>元素，返回集合元素
4. jQuery层次选择器
$("div span") //选择所有<div>里的所有<span>元素，返回集合元素
$("div>span") //选择所有<div>里的<span>的子元素，返回集合元素
$(".myClass+div") //选择紧接在样式名称为 myClass 的下一个<div>，等价于 $(".myClass").next("div")，返回集合元素
$(".myClass~div") //选择样式名称为 myClass 之后的所有<div>兄弟元素，等价于 $(".myClass").nextAll()，返回集合元素
$(".myClass").siblings("div") //选择样式名称为myClass的元素的所有同辈<div>元素（无论前后），返回集合元素
4. jQuery过滤选择器
基本过滤选择器：
$("div:first") //选择所有<div>元素下的第一个<div>元素，返回单个元素
$("div:last") //选择所有<div>元素下的最后一个<div>元素，返回单个元素
$("div:not(.myClass)") //选择所有样式不包括myClass的<div>元素，返回集合元素
$("div:even") //选择所有索引是偶数的<div>元素，返回集合元素
$("div:odd") //选择所有索引是奇数的<div>元素，返回集合元素
$("div:eq(1)") //选择所有索引等于1的<div>元素，返回集合元素
$("div:gt(1)") //选择所有索引大于1的<div>元素，返回集合元素
$("div:lt(1)") //选择所有索引小于1的<div>元素，返回集合元素
$(":header") //选择所有标题元素（<h1>,<h2>,<h3>..... ），返回集合元素
$("div:animated") //选择所有正在执行动画的<div>元素，返回集合元素
内容过滤选择器：
$("div:contains('我')") //选择含有文本'我'的<div>元素，返回集合元素
$("div:empty") //选择不包含子元素（包括文本元素）的<div>元素，返回集合元素
$("div:has(p)") //选择所有含有<p>元素的<div>元素，返回集合元素
$("div:parent") //选择所有含有子元素（包括文本元素）的<div>元素，返回集合元素
可见性过滤选择器：
$(":hidden") //选择所有不可见的元素（包括<input type="hidden"/>、<div style="display:none;">、<div style="visibility:hidden;">等元素），返回集合元素
$("input:hidden") //选择所有不可见的<input>元素，返回集合元素
$(":visible") //选择所有可见的元素，返回集合元素
属性过滤选择器：
$("div[id]") //选择含有 id 属性的<div>元素，返回集合元素
$("div[class=myClass]") //选择所有 class 属性值是myClass的<div>元素，返回集合元素
$("div[class!=myClass]") //选择所有 class 属性值不是 myClass 的<div>元素，返回集合元素
$("div[alt^=test]") //选择所有 alt 属性值以 test 开始的<div>元素，返回集合元素
$("div[alt$=test]") //选择所有 alt 属性值以 test 结束的元素，返回集合元素
$("div[alt*=some]") //选择所有 alt 属性值含有 some 的<div>元素，返回集合元素
$("div[id][title=test]") //选择所有含有 id 属性的并且 title 属性值是 test 的元素，返回集合元素
子元素过滤选择器（注意：index从1开始）：
$(":nth-child(index/even/odd)") //选择每个父元素下的第 index/偶数/奇数子元素，而:eq(index)只匹配一个元素，返回集合元素
$(":first-child") //选择每个父元素下的第一个子元素，:first只匹配并返回单个元素，返回集合元素
$(":last-child") //选择每个父元素下的最后一个子元素，:last只匹配并返回单个元素，返回集合元素
$("ul li:only-child") //在<ul>元素中选择只有一个<li>元素的子元素，返回集合元素
表单对象属性过滤选择器：
$("#myForm:enabled") //选择ID属性为myForm的表单的所有可用元素，返回集合元素
$("#myForm:disabled") //选择ID属性为myForm的表单的所有不可用元素，返回集合元素
$("input:checked") //选择所有被选中的<input>元素，返回集合元素
$("#myForm:selected") //选择所有被选中的选择元素，返回集合元素
5. 表单选择器
$(":input") //选择所有 <input> <select> <button> <textarea> 元素，返回集合元素
$(":text") //选择所有单行文本框元素，返回集合元素
$(":password") //选择所有密码框元素，返回集合元素
$(":radio") //选择所有单选框元素，返回集合元素
$(":checkbox") //选择所有复选框元素，返回集合元素
$(":submit") //选择所有提交按钮元素，返回集合元素
$(":image") //选择所有图片按钮元素，返回集合元素
$(":reset") //选择所有重置按钮元素，返回集合元素
$(":button") //选择所有按钮元素，返回集合元素
$(":file") //选择所有上传域元素，返回集合元素
$(":hidden") //选择所有不可见元素，返回集合元素
6. jQuery选择器中的一些注意事项
特殊符号：
选择器中含有 "."，"#"，"("，"]" 等特殊字符，应采用 "\\" 对特殊符号进行转义。
空格：
$('.test :hidden'); //选择class为"test"的元素里面的隐藏元素
$('.test:hidden'); //选择隐藏的class为"test"的元素
7. jQuery提供的选择器的扩展
MoreSelectors for jQuery插件
Basic Xpath
8. 其他使用CSS选择器的方法
document.getElementsBySelector()
cssQuery()
querySelectorAll()
三、JQuery中的DOM操作
1. 查找节点
$("#myDiv").text(); //获取节点文本内容
$("#myDiv").attr("title"); //获取节点title属性
2. 创建节点
$("#myDiv").append($("<li title='000'>111</li>")); //使用jQuery的工厂函数$()创建一个新的<li>节点，再使用jQuery的append()方法将其插入文档中
3. 插入节点
$("p").append("<b>你好</b>"); //在<p>元素内追加内容（下一级）
$("<b>你好</b>").appendTo("p"); //同上
$("p").prepend("<b>你好</b>"); //往<p>元素内最前面插入元素（下一级）
$("<b>你好</b>").prependTo("p"); //同上
$("p").after("<b>你好</b>"); // 往<p>元素后插入元素（同级）
$("<b>你好</b>").insertAfter("p"); //同上
$("p").before("<b>你好</b>"); //往<p>元素前面插入元素（同级）
$("<b>你好</b>").insertBefore("p"); //同上
4. 删除节点
var $li = $("p").remove(); //将<p>元素及它的后代元素全部移除，返回被删节点的引用
$li.appendTo("ul"); //继续使用被删的节点，将它重新添加到<ul>元素里
$("p").appendTo("ul"); //简化上面的两部操作，addendTo()方法直接来移动元素
$("p").remove("p[title != 你好]"); //选择性的删除
$("p").empty(); //清空<p>里面的内容和子节点
5. 复制节点
$("#myDiv1 span").click( function(){ //点击id为myDiv1的元素内的span元素，触发click事件
$(this).clone().appendTo("#myDiv2"); //将span元素克隆添加到id为myDiv2的元素内
$(this).clone(true).appendTo("#myDiv"); //如果clone传入true参数，表示同时复制事件
})
6. 替换节点
$("p").replaceWith("<strong>您好</strong>"); //替换所有的<p>元素
$("<strong>您好</strong>").replaceAll("p"); //同上
7. 包裹节点
$("strong").wrap("<b></b>"); //用<b>元素把所有<strong>元素单独包裹起来
$("strong").wrapAll("<b></b>"); //用<b>元素把所有<strong>元素全部包裹起来
$("strong").wrapInner("<b></b>"); //把<b>元素的子内容（包括文本节点）包裹起来
8. 属性操作
$("#myDiv").arrt("title"); //获取id为myDiv的元素的title属性
$("#myDiv").attr("title","我是标题"); //设置id为myDiv的元素的title属性的值
$("#myDiv").attr({"title":"我是标题", "alt":"我还是标题"); //一次性设置多个属性的值
$("#myDiv").removeArrt("title"); //移除id为myDiv的元素的title属性
9. 样式操作
var txt = $("#myDiv").arrt("class"); //获取id为myDiv的元素的样式
$("#myDiv").attr("class","myClass"); //设置id为myDiv的元素的样式为myClass
$("#myDiv").addClass("other"); //在id为myDiv的元素中追加other样式，有相同样式属性时后者覆盖前者
$("#myDiv").removeClass("other"); //在id为myDiv的元素中移除other样式
$("#myDiv").removeClass("myClass other"); //在id为myDiv的元素中同时移除myClass和other两个样式
$("#myDiv").removeClass(); //将id为myDiv的元素移除所有样式
$("#myDiv").toggleClass("other"); //切换样式，在有other样式和没other样式之间切换
$("#myDiv").hasClass("other"); //判断是否有other样式
10. 设置和获取HTML、文本和值
$("#myDiv").html(); //获取id为myDiv的元素的HTML代码（相当于JavaScript中的innerHTML）
$("#myDiv").html("<span>hello</span>"); //设置id为myDiv的元素的HTML代码
$("#myDiv").text(); //获取id为myDiv的元素的文本内容（相当于innerText ）
$("#myDiv").text("hello"); //设置id为myDiv的元素的文本内容
$("#myInput").val(); //获取id为myDiv的元素的value值 （支持文本框、下拉框、单选框、复选框等）
$("#myInput").val("hello"); //设置id为myDiv的元素的value值（下拉框、单选框、复选框带有选中效果）
11. 遍历节点
$("#myDiv").children(); //获取id为myDiv的元素的子元素（只考虑子元素，不考虑后代元素）
$("#myDiv").next(); //获取id为myDiv的元素的下一个同辈元素
$("#myDiv").prev(); //获取id为myDiv的元素的上一个同辈元素
$("#myDiv").siblings(); //获取id为myDiv的元素的所有同辈元素
$("#myDiv").closest("span"); //从id为myDiv的元素开始，逐级向上匹配最接近的span元素，直到匹配到或返回空
12. CSS-DOM 操作
$("#myDiv").css("color"); //获取id为myDiv的元素的color样式的值
$("#myDiv").css("color", "blue"); //设置id为myDiv的元素的color样式的值
$("#myDiv").css({"color":"blue", "fontSize":"12px"}); //设置id为myDiv的元素的color和fontSize样式的值
$("#myDiv").css("opacity", "0.5"); //设置id为myDiv的元素的透明度为半透明（兼容浏览器）
$("#myDiv").css("height"); //获取id为myDiv的元素的高度（单位：px，兼容浏览器）
$("#myDiv").height(); //同上
$("#myDiv").height(100); //设置id为myDiv的元素的高度为100px
$("#myDiv").height(10em); //设置id为myDiv的元素的高度为10em
$("#myDiv").css("width"); //获取id为myDiv的元素的宽度（单位：px，兼容浏览器）
$("#myDiv").width(); //同上
var offset = $("#myDiv").offset(); //获取id为myDiv的元素在当前窗口的相对偏移量
alert(offset.top + "|" + offset.left); //分别为左偏移和右偏移
var position = $("#myDiv").position(); //获取id为myDiv的元素相对于最近一个position设置为relative或absolute的父元素的相对偏移量
alert(offset.top + "|" + offset.left); //分别为左偏移和右偏移
$("#txtArea").scrollTop(); //获取id为txtArea的元素滚动条距离顶端的距离
$("#txtArea").scrollLeft(); //获取id为txtArea的元素滚动条距离左侧的距离
$("#txtArea").scrollTop(100); //设置id为txtArea的元素垂直滚动条距离顶端的距离
$("#txtArea").scrollLeft(100); //设置id为txtArea的元素横向滚动条距离左侧的距离
四、JQuery中的事件和动画
1. 加载DOM
$(document).ready(); //页面加载完毕后添加事件，相当于JS中的window.onload方法
$(document).ready()和window.onload的区别：
window.onload 是在网页中所有元素（包括元素的所有关联文件）完全加载后才执行。$(document).ready()是在DOM完全就绪时就可以被调用，此时，并不意味着这些元素关联的文件都已经加载完毕。
window.onload注册时后面注册的要覆盖前面的，故只可以注册一次。但可以在同一个页面注册多个(document).ready()事件。
$(document).ready()可以缩写成 $(function(){ }) 或 $().ready()
2. 事件绑定
bind(type [,data], fn); //文档装载完成后，可以通过bind()方法为元素进行事件绑定，可多次绑定。
type：指事件的类型
blur（失去焦点 ）
focus（获得焦点）
load（加载完成 ）
unload（销毁完成）
resize（调整元素大小 ）
scroll（滚动元素）
click（单击元素事件 ） //常用事件可简写为：$("p").click(function(){...});
dbclick（双击元素事件）
mousedown（按下鼠标 ）
mouseup（松开鼠标）
mousemove（鼠标移过 ）
mouseover（鼠标移入 ）
mouseout（鼠标移出）
mouseenter（鼠标进入 ）
mouseleave（鼠标离开）
change（值改变 ）
select（下拉框索引改变 ）
submit（提交按钮）
keydown（键盘按下 ）
keyup（键盘松开 ）
keypress（键盘单击）
error（异常）
data：事件传递的属性值，event.data额外传递给对象事件的值
fn：绑定的处理函数，在此函数体内， $(this) 指携带相应行为的DOM元素
$("p").bind("mouseover mouseout", function(){...}); //同时绑定多个事件
3. 合成事件
hover(enter,leave) ：鼠标移入执行enter方法、移出事件执行leave方法
toggle(fn1,fn2,...fnN) ：鼠标第一次点击执行fn1，第二次点击执行fn2...直到最后一个后重复
4. 事件冒泡
如果父元素和子元素都绑定了同一个事件，事件会按照DOM的层次结构，像水泡一样不断向上触发直到顶端。
$("span").bind("click", function(event){ //得到event事件对象
...
event.stopPropagation(); //停止事件冒泡
});
$("#btnSubmit").bind("click", function(event){
...
event.preventDefault(); //阻止事件默认行为，相当于return false;
});
jQuery不支持事件捕获，即事件从最顶端往下开发触发。
5. 事件对象的属性
event.type() //获取事件的类型
event.preventDefault(); //阻止事件默认行为，相当于return false;
event.stopPropagation(); //停止事件冒泡
event.target() //获取触发事件的元素
event.relatedTarget() //引发事件的元素
event.pageX()/event.pageY() //获取鼠标相对于页面的 X 和 Y 坐标
event.which() //在单击事件中获取到对应的鼠标左、中、右键，值分别是1、2、3
event.metaKey() //获取<ctrl>按键
event.originalEvent() //指向原始的事件对象
6. 移除事件
$("#myDiv").unbind(); //移除id为myDiv的元素的所有事件
$("#myDiv").unbind("click"); //移除id为myDiv的元素的所有click事件
$("#myDiv").unbind("click",fn1); //移除id为myDiv的元素的名称为fn1的click事件
$("#myDiv").one("click", [data], function(){ //使用one绑定的事件只执行一次
alert("function1");
});
7. 触发事件（模拟操作）
$("#btn").trigger("click"); //手动触发click事件，不需要用户真正的click
$("#btn").click(); //同上
8. 事件命名空间
$("#myDiv").bind("click.hello", function(){
...
});
$("#myDiv").bind("click", function(){
...
})
$("div").unbind("click"); //两个事件都被移除
$("div").unbind(".hello"); //只移除第一个,hello空间下的事件
$("div").unbind("click!"); //只移除第二个（注意感叹号，指没有名字空间的）
9. JQuery 中的动画
$("div").hide(); //隐藏所有DIV元素，相当于sytle="display:none"
$("div").show(); //显示所有DIV元素
$("div").show(slow); //slow(600毫秒)，normal(400)，fast(200)
$("div").hide(1000); //一秒内隐藏所有DIV元素
$("div").show(1000); //一秒内显示所有DIV元素
$("div").fadeOut(); //降低元素的不透明度，直至消失（支持速度参数，不会改变宽高）
$("div").fadeIn(); //升高元素的不透明度，直至显示
$("div").slideUp(); //由下至上收缩元素，直至消失（支持速度参数）
$("div").slideDown(); //由上至下展开元素，直至显示
10. 自定义动画 animate
$(elem).animate(params, [speed], [callback]);
params ：样式属性及值的映射
speed: 速度参数
callback: 动画完成后执行函数
例：$("#myDiv").animate({left:"500px"}, 2000); //两秒内ID为myDiv的元素移至左边距500px的位置
$("#myDiv").animate({left:"+=500px"}, 2000); //在当前位置累加、累减
$("#myDiv").animate({top:"200px", left:"+=500px"}, 2000); //多重动画，同时执行。想分开执行的话就写成两条语句
11. 停止动画
$("#myDiv").stop([cleanQuene] [,gotuEnd]); //停止动画，参数都是boolean型，cleanQuene表示是否要清空未执行完的动画队列，gotuEnd表示是否直接将正在执行的动画跳转到末状态。
$("#myDiv").is(":animate") //判断元素是否在执行动画
$("#myDiv").toggle(); //显示与隐藏元素
$("#myDiv").slideToggle(); //展开与收缩元素
$("#myDiv").fadeTo(1000, 0.2); //一秒内将元素透明度调整到20%
