JQuery官方网站
1、JQuery概念
A、Jquery是一个优秀的Javascript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器，jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
B、JavaScript的缺点:控件的操作方式不统一，不同浏览器容易出观兼容问题。为了简化操作，出现了许多对JavaScript封装的函数库比如Prototype、JQuery等。
C、JQuery的优点:小巧、方便、功能强大。插件丰富、开源、免费。
D、VS在VS2010中已经实现自动完成功能，VS2008需要安装VSSP1补丁和VS90SP1-KB958502-X86补丁才能更好的支持，然后引用jquery-1.4.1.js，jquery-1.4.1-vsdoc.js放在同目录下，VS2008中才会有自动提示和自动完成功能。
E、JQuery文件说明:
jquery-1.4.2.js是JQuery主文件。
jquery-1.4.2.min.js是压缩板JQuery主文件。
jquery-1.4.2-vsdoc.js是JQuery在VS中的自动提示功能。
2、JQuery之Ready
A、JQuery的read和Dom onload的区别:onload是所有Dom元素创建完毕触发，而ready则是Dom元素创建完就触发，这样可以提高网页的响应速度。
3、JQuery内置函数
A、$.map(array, function)函数:对数组array中每个元素调用function函数逐个处理，function函数处理返回一个新的数组。如:
var array = [3, 6, 9];
var arrary2 = $.map(array, function(item) { return item * 2 });
for (var i = 0; i < arrary2.length; i++) {
alert(arrary2[i]);
};
或: alert(arrary2);
注: $.map函数不能处理dictionary风格的数组。
B、$.each(array, function)对array每个元素进行处理，但没有返回值。
var array = ["TOM", "汤姆", "Jerry", "杰瑞"];
$.each(array, function() { alert(this); });
或:
var dict = { "TOM": 20, "Jerry": 50 };
$.each(dict, function(key, value) { alert(key + "=" + value); });
4、JQuery对象与Dom对象
A、JQuery对象是通过对Dom对象的封装产生的对象。
B、Dom对象要想通过JQuery进行操作，需要先转换成JQuery对象。
$(‘#div1’).html等价于:document.getElementByid(‘div1’).innerHTML;
$(‘#div1’)得到的是JQuery对象，JQuery对象可以调用JQuery对象封装的方法，不能调用Dom对象的方法，Dom对象也不能调用JQuery对象的方法。
C、将Dom对象转换成JQuery对象的方法，$(Dom对象)。当调用JQuery没有封装的方法时必须用Dom对象，转换方法:var docobj = jqobj[0]或var domobj=jqobj.get(0)。
D、样式的修改：
JQuery修改样式方法:$(“#div1”).css(“background”, “red”);
JQuery获得样式的方法:$(“#div1”).css(“background”);
修改value值方法:
JQuery修改value方法: $(“#div1”).val(“Dragon”);
JQuery获得value方法: $(“#div1”).val();
5、JQuery选择器
A、JQuery选择器用于查找满足条件的元素，比如可以使用$(“#控件id”)来根据控件id获得控件的JQuery对象。相当于getElementByid。
B、$(“TagName”)来获取所有指定签名的JQuery对象，相当于getElementsByTagName。
C、CSS选择器，同时选择拥有某个样式的多个元素:
$(“.text”).click(function(){alert($(this).text();)});
D、多条件选择器:$(“p,div,span.menuitem”),同时选择p标签、div标签和拥有menuitem样式的span标签。
E、层次选择器:
1、$(“div li”)获取div下的所有li标签(后代，子、子的子标签…)。
2、$(“div > li”)获取div下的直接li子标签。
3、$(“.menuitem + div”)获取样式名为menuitem之后的第一个div标签。
4、$(“.menuitem ~ div”)获取样式名为menuitem之后的所有div标签。
6、JQuery隐式迭代
A、注:如果用隐式迭代就会不容易发现错误。
$(function(){
var elements = $(“#btn1”);
If (elements.length <= 0){
alert(“没有找到提定对象”);
return;
}
elements.mouseover(function(){ alert(“找到了”)});
7、节点遍历
A、next()方法用于获取节点之后的挨着的第一个同辈标签，$(“.menuitem”).next(“div”)、nextAll()方法用于获取节点之后的所有同辈标签。
B、siblings()方法用于获取所有同级标签。
8、链式编程
A、JQuery可以实现链式编程
9、JQuery过滤选择器
A、:first选择第一个标签。$(“div:first”)选取第一个<div>。
B、:last选取最后一个标签。$(“div:last”)选取最后一个<div>。
C、:not选取不满足选择器条件的标签。$(“input:not(.myclass)”)选取样式名不是myclass的<input>标签。
D、:even、:odd，选取索引是奇数、偶数的标签:$(“input:event”)选取索引是奇数的<input>。
E、:eq、:gt、:lt选取索引等于、大于、小于索引序号的标签，比如$(“input:lt(1)”)选取索引小于1的<input>。
F、$(“:header”)选取所有的h1…h6标签。
G、$(“div:animated”)选取正在执行动画的<div>标签。
10、属性过滤选择器
A、$(“div[id]”)选取有id属性的<div>。
B、$(“div[title=test]”)选取title属性为“text”的<div>。
C、$(“div[title!=test]”)选取title属性不为“text”的<div>。
11、表单对象选择器
A、$(“#form1:enabled”)选取id为form1的表单内所有启用的标签。
B、$(“#form1:disabled”)选取id为form1的表单内所有禁用的标签。
C、$(“#form1:checked”)选取所有选中的标签。(checkBox)。
D、$(“#form1:selected”)选取所有选中的选项标签。(下拉列表)。
12、JQuery的Dom操作
A、使用html()方法读取或设置标签的innerHTML:
alert($“a:first”).html());
$(“a:first”).html(“hello”);
B、使用text()方法读取或设置标签的innerText:
alert($(“a:first”).text());
$(“a:first”).text(“hello”);
C、使用att()方法读取或设置标签的属性:
alert($(“a:first”).attr(href”));
$(“a:first”).attr(“href”, http://www.rupeng.com);
D、使用removeAttr删除属性。
13、动态创建Dom节点
A、使用$(html字符串)来创建Dom节点，返回一个JQuery对象，然后调用append方法将新创建的节点添加到Dom中
var link = $(“<a href=’http://www.baidu.com’>百度</a>”);
$(“div:first”).append(link);
Append方法用来在标签的末尾追加标签。
prepend在标签的开始添加标签。
after在标签之后添加标签。
before在标签之前添加标签。
14、删除节点
A、remove()删除选择的节点。
如:清空ul中的项。$(“ul li.testitem”).remove();删除ul下的li id=testitem的标答。
B、remove()方法返回值是被删除的节点对象，还可以继续使用删除的节点。
var lis = $(“#ulsite li”).remove();
$(“#ulsite2”).append(lis);
C、empty()是将节点清空。
15、设定按钮的启用时间
<script type=“text/javescript”>
var leftseconds = 10
var intervalid;
$(function(){
$(“#btnReg”).attr(“disabled”,true);
Intervalid = setInterval(“countDown()”,1000);
}
Function CountDown(){
if(leftseconds <= 0){
$(“#btnReg”).val(“同意”);
$(“#btnReg”).attr(“disabled”,false);
clearIntervalid(Intervalid);
return;
}
Leftseconds--;
$(“#btnReg”).val(“请仔细阅读”+ Leftseconds + “”);
}
</script>
16、样式操作
A、获取样式attr(“class”)，设置样式attr(“class”, “myclass”)。
B、追加样式addclass(“myclass”)。
C、移除样式removeclass(“myclass”)。
D、切换样式togleclass(“myclass”)。如果存在则去掉样式，如果不存在则添加。
E、判断样式是否存在:hasclass(“myclass”)。
17、RadioButton操作
A、取RadioButton选中值:
$(“input[name=gender]:checked”).val()
<input id= “radio1” checked= “checked” name= “gender” type= “radio” value= “男” />男
<input id= “radio2” checked= “checked” name= “gender” type= “radio” value= “女” />女
<input id= “radio3” checked= “checked” name= “gender” type= “radio” value= “未知” />未知
B、设置RadioButton选中值:
$(“input[name=gender]”).val([“女”]);
18、事件
A、JQuery中事件的绑定:$(“#btn”).bind(“click”,function(){})。
JQuery用$(“#btn”).click(function(){})来简化。
B、调用事件对象的stopPropagation()方法终止事件冒泡。
C、阻止默认行为: 比如超链接点击后会转向新的链接。如果想阻止默认行为只要调用事件对象的preventDefault()方法。
D、属性:pageX、pageY、target获得触发事件的元素（冒泡的起始,和this不一样）。
which如果是鼠标事件获得按键(1左键，2中键，3右键)。
altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下，为bool值。
keyCole、charCode属性发生事件时的keyCode、charCode。
E、移除事件绑定:unbind()方法即可移除元素上绑定的事件，如果bind(“click”)则移除click事件的绑定。
F、一次性事件:如果绑定的事件只想执行一次随后立即unbind可以使用one()方法进行绑定。
19、动画
A、show、hide()方法用于显示、隐藏标签。用toggle()方法在显示、隐藏之间切换。
$(“:button[value=show]”).click(function(){$(“div”).show();});
$(“:button[value=hide]”).click(function(){$(“div”).hide();});
B、show、hide可以带参数使用。fast(200毫秒)、normal(400毫秒)、slow(600毫秒)。
20、JQuery cookie
A、使用方法:
1、添加对jquery.cookie.js引用。
2、设置,$.cookie(‘名字’, ‘值’)。cookie中保存的值是文本。
3、读取,var v = $.cookie(‘名字’)
B、$.cookie(‘名字’, ‘值’,{expires:7,path:’/’,domain:’baidu.com’,secure:true});
expires 保存的天数。
path 设置网站那些目录下的文件可以读取。
domain 保存的是哪个域名的。
21、JQueryUI
22、JQuery辅助工具
A、DebugBar
B、IE开发人员工具