JQuery温故而知新

JQuery简介

JQuery能做什么。JQuery能做的普通的Dom能做，普通Dom能做的JQuery也能做。

JQuery的优点：尺寸小、使用简单方便（Write Less, Do More，吃得少干得多。链式编程（$("#div1").draggble().show().hide().fly()）、隐式迭代（自动对于多个元素进行迭代方法调用））、屏蔽浏览器差异跨浏览器兼容性好（IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome）、插件丰富、开源、免费。

VS中JavaScript、JQuery的自动完成功能：在VS2010中直接有，VS008需要安装VisualStudio和VS90SP1-KB958502-x86补丁会更强更好用,下载地址｛

（http://www.microsoft.com/downloads/details.aspx?displaylang=zh-cn&familyid=27673c47-b3b5-4c67-bd99-84e525b5ce61）和VS90SP1-KB958502-x86（http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736）补丁会更强更好用。然后引用jquery-1.4.1.js，jquery-1.4.1-vsdoc.js放到同目录下，不需要在页面引用。

｝。然后引用jquery-1.4.2.js放到同目录下。（2010内置仅指的是不用自己把js文件放进去了，页面照样引用）。

vsdoc是vs2008sp1以后增加的一个技术，将js文件对应的vsdoc（相当于js库提供的方法的说明库）放到和js一起，就有会这个第三方js的自动提示的功能。

通过DomJQuery的例子简单复习Dom。

简单的JQuery

Dom中动态设置事件和静态设置。Jquery中一般习惯动态设置。

$(document).ready(function(){

alert("加载完毕！");

});//注册事件的函数，和普通的dom不一样，不需要在元素上标记on**这样的事件。

当页面Dom元素加载完毕时执行代码，可以简写为：

$(function(){

alert("加载完毕！");

});
｛

和onload类似，但是onload只能注册一次(window.onload=function...)（没有C#中的+=机制），后注册的取代先注册的，而ready则可以多次注册都会被执行。

JQuery的ready和Dom的onload的区别(*)：onload是所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发，而ready则是Dom元素创建完毕后就被触发，这样可以提高网页的响应速度。在jQuery中也可以用$(window).load()来实现onload那种事件调用的时机。

｝

JQuery选择器

JQuery选择器用于查找满足条件的元素，比如可以用$("#控件Id")来根据控件id获得控件的jQuery对象，相当于getElementById：

$(“#div1”).html(“<fontcolor=red>hello</font>”)。语法、意义类似于CSS选择器

$就是函数，自己动手写一把。

$("TagName")来获取所有指定标签名的jQuery对象，相当于getElementsByTagName：

$(function() {

$("#btnClick").click(function(){

$("p").html("我们都是P");

});

–匿名函数的写法如果嵌套层数过多，可以将匿名函数写到单独的一个匿名函数然后用变量指向它，但是不推荐直接写一个命名函数再传进去

JQuery中注册事件监听的写法：click()、leave()、focus()、blur...，自己动手写click函数。

jQuery对象、Dom对象

jQuery对象就是通过jQuery包装Dom对象后产生的对象：alert($('#div1').html())。Dom对象要想通过jQuery进行操作，先要转换为JQuery对象。

$('#div1').html()等价于：document.getElementById("div1").innerHTML;

$('#div1')得到的就是jQuery对象，jQuery对象只能调用jQuery对象封装的方法，不能调用Dom对象的方法，Dom对象也不能调用jQuery对象的方法，所以alert($('#div1').innerHTML是错的，因为innerHTML是DOM对象的属性。

Array是JS语言本身的对象，不是Dom对象，因此不需要转换为Jquery对象才能用

（*）将Dom对象转换为JQuery对象的方法，$(dom对象)；当调用jQuery没有封装的方法的时候必须用Dom对象，转换方法：vardomobj = jqobj[0]或者vardomobj=jqobj.get(0)

在引用外部js的Script标签内不能再写js代码，引用外部js的Script标签也不能用简写方法闭合。

jQuery修改样式：$(“#div1”).css(“background”, “red”);获得样式$(“#div1”).css(“background”)；修改value：$(“#un”).val(“abc”)，获得value：$(“#un”).val()，类似的获得、设置innerText、innerHTML用text()和html()。val、html、text等是方法，不是属性，jQuery中很少有属性的用法（没有css.color=‘red’），因为属性写法很难“链式编程”。

•CSS选择器，同时选择拥有样式的多个元素（类似于CSS选择器）：

– <style type="text/css">

– .test{ background-color:Red}

– </style>

– <script type="text/javascript">

– $(function() {

– $(".test").click(function() {

– alert($(this).text());

– });

– </script>

– <pclass="test">test1</p>

– <pclass="test">test2</p>

– <pclass="test">test3</p>

•CSS选择器，同时选择拥有样式的多个元素（类似于CSS选择器）：

– <style type="text/css">

– .test{ background-color:Red}

– </style>

– <script type="text/javascript">

– $(function() {

– $(".test").click(function() {

– alert($(this).text());

– });

– </script>

– <pclass="test">test1</p>

– <pclass="test">test2</p>

– <pclass="test">test3</p>

•标签选择器，拥有样式的标签选择器

•多条件选择器：$("p,div,span.menuitem")，同时选择p标签、div标签和拥有menuitem样式的span标签元素（类似于CSS选择器）

•注意选择器表达式中的空格不能多不能少。易错！

•层次选择器：

–（1）$("div li")获取div下的所有li元素（后代，子、子的子……）

–（2）$("div > li")获取div下的直接li子元素

–（3）$(".menuitem +div")获取样式名为menuitem之后的第一个div元素（不常用）

–（4）$(".menuitem ~div")获取样式名为menuitem之后所有的div元素（不常用）

JQuery的迭代

•如何判断对象是否存在，jQuery选择器返回的是一个对象数组(数组中的每个对象还是Dom对象)，调用text()、html()、click()之类方法的时候其实是对数组中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错，如果需要判断指定的id是否存在，应该写：

•if($("#btn1").length <= 0) {

• alert("id为btn1的元素不存在！");

• }

JQuery的Dom操作

•1、使用html()方法读取或者设置元素的innerHTML：

•alert($("#btn1").html());

•$("#btn1").html("hello");

•2、使用text()方法读取或者设置元素的innerText：

•alert($("#btn1").text());

•$("#btn1").text("hello");

•3、使用attr()方法读取或者设置元素的属性，对于JQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。

• alert($(“#btn1").attr("href"));

• $("#btn1").attr("href","http://www.rupeng.com");

•4、(*)使用removeAttr删除属性。删除的属性在源代码中看不到，这是和清空属性的区别。“查看源文件”只能看服务器上下载下来的那份。

节点遍历

•next()方法用于获取节点之后的挨着的第一个同辈元素，$(".menuitem").next("div")、nextAll()方法用于获取节点之后的所有同辈元素，$(".menuitem").nextAll("div")

•prev、prevAll兄弟中之前的元素。

•siblings()方法用于获取所有同辈元素，$(“.menuitem”).siblings(“li”)。siblings、next等所有能传递选择器的地方能够使用的语法都和$()语法一样。如果是两组ul，则其中一个的siblings不包括另外一个ui中的，兄弟指的是同父元素的。

•重申问题，不要$().click=function；好多时候能.出来；不要在引用js的代码里再写代码。

•//对于设置css、attr等这种本来不需要返回值的函数，jquery前面对象给返回。如果函数返回jquery对象数组(siblings)，则后续是基于返回的数组进行迭代。如果函数返回值根本不是jquery对象数组(取innerHTML的html())，则无法继续迭代。

• //前面的所有的“后面的”

• $(this).css("backgroundColor","red").prevAll().css("backgroundColor","green").nextAll().css("backgroundColor","black");

• //$(this).css("backgroundColor","red").prevAll().css("backgroundColor", "green");

•//$("#ul1li").text().css("backgroundColor","red");//错误：返回值根本不是jquery对象数组

链式编程

•高亮选中项：给所有有menuitem这个样式的元素添加click监听事件，当click的时候，向被点击的元素添加highlight这个样式，然后从其兄弟节点（siblings）中移除highlight风格。“.”的时候是针对的上一步的返回值的节点集合的操作。链式编程就是对象一棒棒向下传，能不能正确传下来要看返回值，html()不能传，prevAll().nextAll()也传错。自己动手写。$("#tableRating td").click(function() {$(this).prevAll().next().html("a"); });//经典！

• <styletype="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 />

基本过滤选择器

•:first 选取第一个元素。$("div:first")选取第一个<div>$(".warn:first");

•:last 选取最后一个元素。$("div:last")选取最后一个<div>

•:not(选择器) 选取不满足“选择器”条件的元素，$("input:not(.myClass)")选取样式名不是myClass的<input>

•:even、:odd，选取索引是奇数、偶数的元素：$("input:even")选取索引是奇数的<input>

•:eq(索引序号)、:gt(索引序号)、:lt(索引序号)选取索引等于、大于、小于索引序号的元素，比如$("input:lt(5)")选取索引小于5的<input>

•组合选择器是按照表达式从前向后进行数据过滤。

$(":header")选取所有的h1……h6元素（*）

$(“div:animated”)选取正在执行动画的<div>元素。（*）

样式操作

•获取样式 attr("class")，设置样式attr("class","myclass")，追加样式addClass("myclass")(不影响其他样式)，移除样式removeClass("myclass")，切换样式（如果存在样式则去掉样式，如果没有样式则添加样式）toggleClass("myclass")，判断是否存在样式：hasClass("myclass")

•点击表格行，被点击的行高亮显示（背景是黄色），其他行白色背景。监听每个tr的click事件，将点击的背景设置为黄色，其他的设置为白色背景。颜色定义为class样式。

过滤器（*）

•属性过滤选择器：

–$("div[id]")选取有id属性的<div>

–$("div[title=test]")选取title属性为“test”的<div>，JQuery中没有对getElementsByName进行封装，用$("input[name=abc]")

–$("div[title!=test]")选取title属性不为“test”的<div>

–还可以选择开头、结束、包含等，条件还可以复合。（*）

•表单对象选择器（过滤器）：

–$("#form1:enabled")选取id为form1的表单内所有启用的元素

–$("#form1:disabled")选取id为form1的表单内所有禁用的元素

–$("input:checked")选取所有选中的元素（Radio、CheckBox）

–$("select option:selected")选取所有选中的选项元素（下拉列表）

元素的each

•jQuery元素的也可以调用each方法，只是对$.each的简化调用。

显示选中的复选框信息

$(function() {

$("input[name=names]").click(function() {

varnames = $("input[name=names]:checked");

vararr = new Array();

names.each(function(key,value) { arr[key]= $(value).val();});

$("#msgNames").text("共选中"+names.length+"条："+arr.join(","));

});

<input type="checkbox" name="names"value="tom" />tom

<input type="checkbox" name="names" value="jim" />jim

<input type="checkbox" name="names"value="lily" />lily

表单选择器

•$(":input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样， $("input")只获得<input>

•$(":text")选取所有单行文本框，等价于$("input[type=text]")

•$(":password")选取所有密码框。同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。

选择器的相对定位

•$(select,queryContext)

•siblings、next、children等方法都可以指定选择器

动态创建Dom节点

•使用$(html字符串)来创建Dom节点，并且返回一个jQuery对象，然后调用append等方法将新创建的节点添加到其他节点（元素）中：

• var link = $("<a href='http://www.baidu.com'>百度</a>");

• $("div:first").append(link);

•$()创建的就是一个jQuery对象，可以完全进行操作

–var link = $("<a href='http://www.baidu.com'>百度</a>");

–link.text("百毒");

–$("div:first").append(link);。getElementByid的问题

•append方法用来在元素的末尾追加元素。//$("#select1option:selected").remove().appendTo($("#select2")) ;

$("#select1option:selected").appendTo($("#select2")) ;

创建出的元素没有append到界面之前是无法用选择器找到的，就像new一个对象，没有insert到数据库之前是无法select出来的。

•prepend，在元素的开始添加元素。prependto。after，在元素之后添加元素（添加兄弟）。before：在元素之前添加元素（添加兄弟）

删除节点

•（1）remove()删除选择的节点

–案例：清空ul中的项，代码见备注。$(“ul li.testitem”).remove(); 删除ul下li中有testitem样式的元素。自杀。把找到的都删掉。

•remove方法的返回值是被删除的节点对象，还可以继续使用被删除的节点。比如重新添加到其他节点下

• varlis = $("#ulSiteli").remove();

• $("#ulSite2").append(lis); // $("#ulSiteli").remove().appendTo($("#ulSite2"));

•权限选择：var items = $("#select1 option:selected").remove();$("#select2").append(items); 更狠的：$("#select1option:selected").appendTo($("#select2"))

•（2）empty()是将节点清空，清除节点的innerHTML，节点还在

补充

•写代码的好习惯，{、(写完开始就写结束，省得忘了。，在JQuery中这样写就不容易写错了。

•如果报错“例外被抛出”等，很可能是选择器表达式有问题，比如单词拼写错误、加了不必要的空格等。val是方法不是属性。jQuery是完全按照JavaScript的语法写出来的JavaScript函数库，没有任何的魔法，任何看似怪异的写法都是很合法的JavaScript语法。JQuery就是一堆写好的JavaScript函数库而已，没有什么特殊的，你也可以写出来，因此完全可以和普通JS代码混着用。最好不要dom、jQuery方式混着用。

节点操作(*)

•替换节点：

•$("br").replaceWith("<hr/>");

•将<br/>替换为<hr/>

•

•包裹节点

•wrap()方法用来将所有元素逐个用指定标签包裹：

•$("b").wrap("<fontcolor='red'></font>") 将所有粗体字红色显示

RadioButton操作

•取得RadioButton的选中值

–$("input[name=gender]:checked").val()

– <input id="Radio2"checked="checked" name="gender" type="radio"value="男"/>男<input

– id="Radio1"checked="checked" name="gender" type="radio"value="女"/>女<inputid="Radio3"

– checked="checked"name="gender" type="radio" value="未知"/>未知</p>

•设置RadioButton的选中值：

–$("input[name=gender]").val(["女"]);

–或者

–$(":radio[name=gender]").val(["女"]);

–注意val中参数的[]不能省略

事件

•(*)JQuery中的事件绑定：$(“#btn”).bind(“click”,function(){})，每次都这么调用太麻烦，所以jQuery可以用$(“#btn”).click(function(){})来进行简化。unbind

•mouseover、mouseenter的区别：div里套div。见备注。和事件冒泡有关系。

•(*)合成事件hover，hover(enterfn,leavefn)，当鼠标放在元素上时调用enterfn方法，当鼠标离开元素的时候调用leavefn方法。

•事件冒泡：JQuery中也像JavaScript一样是事件冒泡

•如果想获得事件相关的信息，只要给响应的匿名函数增加一个参数：e，e就是事件对象。调用事件对象的stopPropagation()方法终止冒泡。e.stopPropagation();

•$("tr").click(function(e){ alert("tr被点击"); e.stopPropagation(); });//注意函数的参数是e

•阻止默认行为：有的元素有默认行为，比如超链接点击后会转向新链接、提交按钮默认会提交表单，如果想阻止默认行为只要调用事件对象的preventDefault()方法和Dom中的window.event.returnValue=false效果一样。

•$("a").click(function(e) { alert("所有超链接暂时全部禁止点击"); e.preventDefault(); });

事件其他（*）

•属性：pageX、pageY、target获得触发事件的元素(冒泡的起始，和this不一样)、which如果是鼠标事件获得按键（1左键，2中键，3右键）。altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下，为bool值。keyCode、charCode属性发生事件时的keyCode（键盘码，小键盘的1和主键盘的keyCode不一样）、charCode（ASC码）。

•移除事件绑定：bind()方法即可移除元素上所有绑定的事件，如果unbind("click")则只移除click事件的绑定。bind:+=；unbind:-=

•一次性事件：如果绑定的事件只想执行一次随后立即unbind可以使用one()方法进行事件绑定：

鼠标

•获得发生事件时鼠标的位置

•$(document).mousemove(function(e) {

• document.title = e.pageX + "," + e.pageY;

• });

•在mousemove、click等事件的匿名响应函数中如果指定一个参数e，那么就可以从e读取发生事件时的一些信息，比如对mousemove等鼠标事件来说，就可以读取e.pageX、e.pageY来获得发生事件时鼠标在页面的坐标。

动画

lshow()、hide()方法会显示、隐藏元素。用toggle()方法在显示、隐藏之间切换

l $(":button[value=show]").click(function() {$("div").show(); });

l $(":button[value=hide]").click(function() {$("div").hide(); });

l如果show、hide方法不带参数则是立即显示、立即隐藏，如果指定速度参数则会用指定时间进行动态显示、隐藏，单位为毫秒，也可以使用三个内置的速度：fast（200毫秒）、normal（400毫秒）、slow（600毫秒），jQuery动画函数中需要速度的地方一般也可以使用这个三个值。toggle、slideDown、slideUp

l案例：QQTab效果。常见错误：animate参数是词典类型。隐藏和显示的级别不一样。mouseover（进入图片的时候触发一次）和mousemove（鼠标在元素上移动就会一直不断的触发）的区别。mousemove中放大造成的“没效果”的迷局。“没效果”不等于“没执行”。如何证明“这段代码运行了吗”alert。样式优先级

复杂动画

lanimate：anmite内部设置的多个值是同步变化的，链式的animate是依次动画的。

l例子：animate({ left: 0, top: 0, 300, height: 300 })、.animate({ opacity: 0 }).animate({ opacity: 1 })。

l还可以指定增量，$(“#div1”).animate({ height: “+=100” }); //如果是+=、-=等增量形式要写成字符串，因为JavaScript不认识这种语法

JQuery提供的函数

l$.map(array,fn)对数组array中每个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新数组。猜猜内部实现。

例子，得到一个元素值是原数组值二倍的新数组

vararr = [3, 5, 9];

var arr2= $.map(arr,function(item) { return item * 2; });//联想C#委托的例子。函数式编程。

$.map不能处理Dictionary风格的数组。

l$.each(array,fn)对数组arry每个元素调用fn函数进行处理，没有返回值。猜猜内部实现。

vararr = { "tom":"汤姆","jerry": "杰瑞", "lily": "莉莉" };

$.each(arr, function(key, value) { alert(key+"="+value); });

如果是普通风格的数组，则key的值是序号。

l还可以省略function的参数，这时候用this可以得到遍历的当前元素：

vararr = [3, 6, 9];

$.each(arr, function() { alert(this); });//能读懂。

普通数组推荐用无参，用dict风格的就用key、value。

常用JQuery插件

lJQuery官方的UI控件 JQueryUI

•http://jqueryui.com/下发包

•演示常用方法，分析代码。

•表现和内容分离，语义化。

lJQuery.validate表单验证插件

lForm,用于为表单提供直接的Ajax能力

l所有插件列表http://plugins.jquery.com/

使用JQueryUI

l使用JQueryUI

l1、引用jquery的css（注意不要忘了image文件夹）

l2、引用jquery.js，引用jqueryui.js（如果想减小尺寸，可以引用单独的每个插件的js）

l3、查看文档，根据说明使用，一般就是在ready里面加一句类似于$("#aa").draggle();

l“development-bundle\demos”是例子，development-bundle\docs是每个控件的详细用法。

JQuery插件： JQuery cookie

l什么是cookie：Cookie就是保存在浏览器上的内容，用户在这次浏览页面的时候向Cookie中保存文本内容，下次再访问页面的时候就可以取出来上次保存的内容，这样就可以得到上次“记忆”的内容。Cookie不是JQuery特有的概念，只不过JQueryCookie把它简化的更好用而已。Cookie就是存储在浏览器里的一些数据。（不能在IE中存，FF中取）

lCookie需要浏览器的支持，浏览器的Cookie是可以禁用的，如果禁用了Cookie就不能使用了，不过一般不用考虑禁用Cookie的情况。Cookie的几个特征：Cookie是与域名相关的，所以163.com不能读取baidu.com记录的Cookie，正因为如此读取、设置Cookie的时候不用担心不同域名cookie的冲突；一个域名能写入的Cookie总尺寸是有限制的，一般是是几千字节，能写入的Cookie总条数一般是几十条，超过以后浏览器自己会根据自己的策略移除一些Cookie；Cookie不是写入以后一定下次能读出来，浏览器可能会定期清除、用户也可能会手动清除。写到Cookie中的数据一定是可有可无的数据，像防止投票作弊就不能用Cookie。

JQuery Cookie使用

l使用方法，Cookie保存的是键值对

•1、添加对jquery.cookie.js

•2、设置值，$.cookie('名字', '值')。cookie中保存的值都是文本。

•3、读取值，var v=$.cookie('名字')

•alert($.cookie("用户名"));

•$.cookie("用户名","tom");在同域名的另外一个页面中也能读取到。

l案例：点击登录以后保存用户名，再登录的时候读取上次保存的用户名，帮用户填上

l设置值的时候还可以指定第三个参数，$.cookie(‘名字’, ‘值’, { expires: 7, path: ‘/’, domain: ‘itcast.cn’, secure: true})，expires表示要求浏览器保留Cookie几天，这个值只是给浏览器的建议，可能没到时间就已经被清除了。可以实现“勾选【记录我的用户名10天】”的功能。如果不设定expires在浏览器关闭以后就清除，options参数用哪个设置哪个。Cookie存在哪？IE中是存在临时文件夹中以cookie开头的文件。

l练习：实现“上次访问时间”功能；写到div上。

l练习：允许用户点击不同颜色的色块设置网页的背景颜色，然后记住用户的选择，下次进入的时候是用用户上次设置的背景色。

l案例：换CSS文件实现换肤。$("link:first").attr("href","hongijin.css")

案例，点击登录以后保存用户名，再登录的时候读取上次保存的用户名，帮用户填上

varoldusername =$.cookie("username");

if (oldusername) {

$("#username").val(oldusername);

}

$("#btnLogin").click(function(){

$.cookie("username", $("#username").val());

});

错误

l$(“document”)与$(document)。为什么$(“document”)不可以，因为没有document这个标签。为什么$(“body”)可以？因为有body标签。

l不要用attr设置背景颜色，分清属性和样式。$(“#btn1”).attr(“style”, “background-color:Red”)；$("#btn1").css("backgroundColor","Red")

l分清执行顺序，不要先设置立即执行。