【JQuery】学习
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的ready和Dom onload的区别:onload是所有Dom元素创建完毕触发，而ready则是Dom元素创建完就触发，这样可以提高网页的响应速度。这两个看似一样的功能，但实际有很大的区别：
onload不仅在创建DOM树之后，而且在所有外部资源全部加载完毕，并且整个页面在浏览器窗口中显示完毕之后，才会执行。这些资源不仅包括图片资源，而且包括嵌入在页面上的flash视频，如果图片或者flash过多，那么会一段很长加载时间，也就意味这延迟执行代码块的时间会更多。
jQuery中的ready()方法只需要等待文档结构被完全解析并且浏览器已经把HTML转化为DOM树后就会执行代码块，这里注意的是仅仅是DOM，网页中的图片，flash等外部资源都毫无关联。
由此可见jQuery中的ready()方法将缩短等待时间。在jQuery中也可以用$(window).load()来实现onload那种事件调用的时机。
3、JQuery内置函数
$就是函数，Jquery语法放在<script>标签内，
A、$.map(array, function)函数:对数组array中每个元素调用function函数逐个处理，function函数处理返回一个新的数组。也可以：array.map(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每个元素进行处理，但没有返回值。可以省略function的参数，这时候用this可以得
到遍历的当前元素
var array = ["TOM", "汤姆", "Jerry", "杰瑞"];
$.each(array, function() { alert(this); }); //结果一个个显示
或:
var dict = { "TOM": 20, "Jerry": 50 };
$.each(dict, function(key, value) { alert(key + "=" + value); });
如果是普通风格的数组，则key的值是序号。普通数组推荐用无参，用dict风格的就用key、value。
4、JQuery选择器
A、JQuery选择器用于查找满足条件的元素，比如可以使用$(“#控件id”)来根据控件id获得控件的JQuery对象。相当于
getElementByid。
B、$(“TagName”)来获取所有指定签名的JQuery对象，相当于getElementsByTagName。例如：$("p").html("我们
都是P");
C、CSS选择器，同时选择拥有某个样式的多个元素: class="text"
$(“.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标签。（不常用）
注意:选择器表达式中的空格不能多不能少。易错！
4.1 基本过滤选择器
A、:first选择第一个标签。$(“div:first”) 选取第一个<div>。$(".warn:first") 第一个class=warn的标签。
注意：无 :second 。用下面的索引序号。
B、:last选取最后一个标签。$(“div:last”)选取最后一个<div>。
C、:not选取不满足选择器条件的标签。$(“input:not(.myclass)”)选取样式名(class)不是myclass的<input>标签。
D、:even、:odd，选取索引是偶数、奇数的标签:$(“input:event”)选取索引是偶数的<input>。
E、:eq、:gt、:lt选取索引等于、大于、小于索引序号（从0开始）的标签，比如$(“input:lt(1)”)选取索引小于1的<input>。
F、$(“:header”)选取所有的h1…h6标签。
G、$(“div:animated”)选取正在执行动画的<div>标签。
4.2 属性过滤选择器
A、$(“div[id]”)选取有id属性的<div>。
B、$(“div[title=test]”)选取title属性为“text”的<div>。
C、$(“div[title!=test]”)选取title属性不为“text”的<div>。
4.3 表单对象过滤选择器
A、$(“#form1:enabled”)选取id为form1的表单内所有启用的标签。
B、$(“#form1:disabled”)选取id为form1的表单内所有禁用的标签。
C、$(“#form1:checked”)选取所有选中的标签。(checkBox)。
D、$(“#form1:selected”)选取所有选中的选项标签。(下拉列表)。
E、$(":input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样， $("input")只获得
<input>
F、$(":text")选取所有单行文本框，等价于$("input[type=text]")
G、$(":password")选取所有密码框。同理还有:radio、:checkbox、:submit、:image、:reset、:button、
:file、:hidden。
5、JQuery对象与Dom对象
A、JQuery对象是通过JQuery包装Dom对象后产生的对象。$('#div1').html()
B、Dom对象要想通过JQuery进行操作，需要先转换成JQuery对象。
$(‘#div1’).html() 等价于:document.getElementByid(‘div1’).innerHTML;
$(‘#div1’)得到的是JQuery对象，JQuery对象可以调用JQuery对象封装的方法，不能调用Dom对象的方法，
Dom对象也不能调用JQuery对象的方法。所以alert($('#div1').innerHTML是错的，因为innerHTML是DOM对象的属性。
C、将Dom对象转换成JQuery对象的方法，$(Dom对象)。
JQuery对象转化为Dom对象，转换方法 :var docobj = jqobj[0] 或var domobj=jqobj.get(0)。
D、jQuery修改样式、读写元素的值：
1、JQuery修改样式方法:$(“#div1”).css(“background”, “red”);
JQuery获得样式的方法:$(“#div1”).css(“background”);
2、修改value值方法:
JQuery修改value方法: $(“#div1”).val(“Dragon”);
JQuery获得value方法: $(“#div1”).val();
3、类似的获得、设置innerText、innerHTML用text()和html()。
val、html、text等是方法，不是属性，jQuery中很少有属性的用法，因为属性写法很难“链式编程”。
4、使用attr()方法读取或者设置元素的属性，对于JQuery没有封装的属性（所有浏览器没有差异的属性）用attr进
行操作。不要用attr设置背景颜色，（分清属性与样式）
$("#btn1").attr("href", "http://www.rupeng.com");
alert($(“#btn1").attr("href"));
5、使用removeAttr删除属性。删除的属性在源代码中看不到，这是和清空属性的区别。
“查看源文件”只能看服务器上下载下来的那份。
更多查看：jquery中的$("#id")与document.getElementById("id")的区别
6、样式操作
A、获取样式attr(“class”)，设置样式attr(“class”, “myclass”)。 注：样式名就行，不用加# 或 .
B、追加样式addClass(“myclass”)。（不影响其他样式）
C、移除样式removeClass(“myclass”)。
D、切换样式togleClass(“myclass”)。（如果存在样式则去掉样式，如果不存在则添加。）
E、判断样式是否存在:hasClass(“myclass”)。
7、JQuery隐式迭代
A、jQuery选择器返回的是一个对象数组(数组中的每个对象还是Dom对象)，调用text()、html()、click()之类方法
的时候其实是对数组中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错，
注:如果用隐式迭代就很难发现错误。
$(function(){
var elements = $(“#btn1”);
If (elements.length <= 0){ //判断对象是否存在
alert(“没有找到提定对象”);
return;
}
elements.mouseover(function(){ alert(“找到了”)});
8、节点遍历
A、同胞：next()方法用于获取节点之后的挨着的第一个同辈标签，$(“.menuitem”).next(“div”)
nextAll()方法用于获取节点之后的所有同辈标签。$(“.menuitem”).nextAll(“div”)
siblings()方法用于获取所有其他同胞标签。
prev、prevAll兄弟中之前的元素。
9、链式编程
例子：
高亮选中项：给所有有menuitem这个样式的元素添加click监听事件，当click的时候，向被点击的元素添加
highlight这个样式，然后从其兄弟节点（siblings）中移除highlight风格。
<span style="font-size:18px;"><style type="text/css">
.menuitem{background-color:Yellow; }
.highlight { background-color: Red;}
</style>
$(function() {
$(".menuitem").click(function() {
$(this).addClass("highlight").siblings().removeClass("highlight");
});
});
<p class="menuitem">111111</p><br />
<p class="menuitem">111111</p><br />
<p class="menuitem">111111</p><br />
</span>
“.”的时候是针对的上一步的返回值的节点集合的操作。链式编程就是对象一棒棒向下传，能不能正确传下来要看返回
值，html()不能传，prevAll().nextAll()也传错。
10、动态创建Dom节点
A、使用$(html字符串)来创建Dom节点，返回一个JQuery对象，然后调用append方法将新创建的节点添加到Dom中
var link = $(“<a href=’http://www.baidu.com’>百度</a>”);
$(“div:first”).append(link);
Append方法用来在当前标签 内容的末尾追加标签。（本标签内部）
prepend在标签的内容的开始处 添加标签。
after在标签之后添加标签。（添加兄弟）
before在标签之前添加标签。（添加兄弟）
11、删除节点
A、remove()删除选择的节点。
如:清空ul中的项。$(“ul li.testitem”).remove();删除ul下的li id=testitem的标答。
B、remove()方法返回值是被删除的节点对象，还可以继续使用删除的节点。
var lis = $(“#ulsite li”).remove();
$(“#ulsite2”).append(lis);
C、empty()是将节点清空，清除节点的innerHTML，节点还在。
12、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、设置第三个input(RadioButton)被选中
$(“input:eq(2)").attr("checked", "true"));
13、事件
A、JQuery中事件的绑定:$(“#btn”).bind(“click”,function(){})。
JQuery用$(“#btn”).click(function(){})来简化。
B、事件冒泡（从里到外，直至事件它被处理，对象层次的最顶层，即document对象）：
JQuery中也像JavaScript一样是事件冒泡
调用事件对象的stopPropagation()方法终止事件冒泡。如果想获得事件相关的信息，只要给响应的匿名函数增加一
个参数：e，e就是事件对象。例如：
$("tr").click(function(e) { alert("tr被点击"); e.stopPropagation(); }); //注意函数的参数是e
C、阻止默认行为: 比如超链接点击后会转向新的链接。如果想阻止默认行为只要调用事件对象的preventDefault()方
法。和Dom中的window.event.returnValue=false效果一样。
D、属性:pageX、pageY、target获得触发事件的元素（冒泡的起始,和this不一样）。
which如果是鼠标事件获得按键(1左键，2中键，3右键)。
altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下，为bool值。
keyCole、charCode属性发生事件时的keyCode(键盘码，小键盘的1和主键盘的keyCode不一样)、charCode(ASCII
码)。
E、移除事件绑定: unbind()方法即可移除元素上绑定的事件，如果unbind(“click”)则移除click事件的绑定。
F、一次性事件: 如果绑定的事件只想执行一次随后立即unbind可以使用one()方法进行绑定。
14、鼠标
A、获得发生事件时鼠标的位置
$(document).mousemove(function(e) {
document.title = e.pageX + "," + e.pageY;
});
B、在mousemove、click等事件的匿名响应函数中如果指定一个参数e，那么就可以从e读取发生事件时的一些信息，
比如对mousemove等鼠标事件来说，就可以读取e.pageX、e.pageY来获得发生事件时鼠标在页面的坐标。
<script>
$(function () {
$(document).mousemove(function (e) { $("#div1").css("left", e.pageX).css("top", e.pageY); });
})
</script>
<div id="div1" style="position :absolute">
<img src="image/飞.jpg" />
</div>
注意：$(“document”)与$(document)。为什么$(“document”)不可以，因为没有document这个标签。为什么$(“body”)
可以？因为有body标签。
15、动画
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毫秒)。
C、animate：anmite内部设置的多个值是同步变化的，链式的animate是依次动画的。
例子：animate({ left: 0, top: 0, width: 300, height: 300 })、
.animate({ opacity: 0 }).animate({ opacity: 1 })。
16、JQuery插件：JQuery cookie
A、什么是cookie：Cookie就是保存在浏览器上的内容，用户在这次浏览页面的时候向Cookie中保存文本内容，下次
再访问页面的时候就可以取出来上次保存的内容，这样就可以得到上次“记忆”的内容。Cookie不是JQuery特有概念，
只不过JQueryCookie把它简化的更好用而已。Cookie就是存储在浏览器里的一些数据。（不能在IE中存，FF中取）
B、Cookie需要浏览器的支持，浏览器的Cookie是可以禁用的（一般不要）。
Cookie的几个特征：
Cookie是与域名相关的，所以163.com不能读取baidu.com记录的Cookie，正因为如此读取、设置Cookie的时候不用担
心不同域名cookie的冲突；
一个域名能写入的Cookie总尺寸是有限制的，一般是是几千字节，能写入的Cookie总条数一般是几十条，超过以后浏
览器自己会根据自己的策略移除一些Cookie；
Cookie不是写入以后一定下次能读出来，浏览器可能会定期清除、用户也可能会手动清除。
写到Cookie中的数据一定是可有可无的数据，像防止投票作弊就不能用Cookie。
C、使用方法:
1、添加对jquery.cookie.js引用。
2、设置,$.cookie(‘名字’, ‘值’)。cookie中保存的值是文本。
3、读取,var v = $.cookie(‘名字’)
D、设置值的时候还可以指定第三个参数，
$.cookie(‘名字’, ‘值’,{expires:7,path:’/’,domain:’baidu.com’,secure:true});
expires 保存的天数。如果不设定expires在浏览器关闭以后就清除，
path 设置网站哪些目录下的文件可以读取。
domain 保存的是哪个域名的。
17、设定按钮的启用时间
<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>
18、deferred对象
deferred操作就是jquery或zepto回调函数解决方案。
它解决了耗时操作的问题，对那些操作的方法起到了更好的控制，并且有了统一的接口。
