$("#a,.b,p")
表示获得ID是a的元素和使用了类样式b的元素以及所有的p元素$("#a .b p")
表示获得了ID是a的元素所包含的使用了类样式的b元素中的所有的p元素
【第五节】jQuery速成 - 层级对象获取
层级对象的获取$("Element1 Element2 Element3 Element...")
css定义层级元素方式一样,只需要不同的元素之间有空格表示，前者父级后者子级以此类推。
$("div > input")
表示获取div下所有的input。 您如果记不清到底是用“>”符号 还是 “<”符号，可以这么理解。如果你选择的元素有父子关系，那么是父亲辈儿长还是儿子辈儿长？当然是父亲辈儿长喽，因此使用“>”，那么选择的时候就是：$("父亲 > 儿子 > ...")，这下明白了吧？^_^
$("div + p")
表示匹配紧跟在 div 元素后的 p 一个元素 这个可以这么记忆，既然紧跟着，当然就得使用“+”紧密的连在一起嘛。
$("div ~ p")
表示匹配跟在 div 元素后的所有 p 元素 这个也好记忆，你可以把“~”符号想象成一条林荫小道，既然是林荫小道当然是路漫漫兮修远，当然要使用“~”符号嘛，两边的树也是排排站，如果“~”符号是路，p是树的话，那么就表示选择div后面这条路上的所有的树。
本课案例：第5课.rar
案例结构如下：
1.
<!DOCTYPE html PUBLIC "-//W
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>实例1</title>
6.
<script language="javascript" src="js/jquery-
7. <script language="javascript" charset="GB2312" src="js/demo1.js"></script>
8. </head>
9. <body>
10. <input id="bt1" type="button" value="获取div下所有的p标签"/>
11. <input id="bt2" type="button" value="匹配紧跟在 div 元素后的 p 一个元素"/>
12. <input id="bt3" type="button" value="匹配跟在 div 元素后的所有 p 元素"/>
13. <div>
14. <p>1</p>
15. <p>2</p>
16. <p>3</p>
17. <p>4</p>
18. </div>
19. <p>5</p>
20. <p>6</p>
21. <p>7</p>
22. <p>8</p>
23. </body>
24. </html>
复制代码
本课只需要大家记住这四种选择方式即可，同学们下课！
【第六节】jQuery速成 - 简单对象获取
本节课主要学习对对象的另外一种获取方法，没有什么好方法，属于死记的东西，因此大家要加油咯。$("Element:first")
获得在HTML页面中某种元素的第一个，比如$("div:first")表示获得第一个div
$("Element:last")
获得在HTML页面中某种元素的最后一个，比如$("div:last")表示获得最后一个div
$("Element:not(selector)")
去除所有与给定选择器匹配的元素，比如$("input:not(:checked)") 表示选择所有没有选中的复选框
$("Element:even")
获得偶数行，从0开始计数
$("Element:odd")
获得奇数行，从0开始计数
$("Element:eq(index)")
匹配一个给定索引值的元素，从0开始计数，比如$("div:eq(3)")表示获得HTML中的第4个div
$("Element:gt(index)")
匹配所有大于给定索引值的元素，从0开始计数，比如$("p:gt(3)")表示获得比索引3也就是第4个p开始，之【后】所有的p
$("Element:lt(index)")
匹配所有小于给定索引值的元素，从0开始计数，比如$("p:lt(3)")表示获得比索引3也就是第2个p开始，之【前】所有的p
注：如果上面两个方法的大于号小于号记不清，就想想HTML标记中的[& gt ;]和[& lt ;](中括号中内容去掉空格)就行了哈。$(":header")
匹配h1,h2,h3...标题之类的元素
$("Element:animated")
匹配所有没有在执行动画效果中的元素（关于动画效果，在后面会讲到，在此只是一提，不必要在意，看不懂不要紧）
本节课没有案例，不过有作业，我会根据大家作业的情况，再发布案例。如果没有作业提交上来，就表示大家都明白了，案例也就没有发布的必要了。作业发布在回帖中即可，编辑的时候使用代码功能发布，并且复制后可以直接执行，jQuery在下面已经引入OK，格式如下：
1.
<!DOCTYPE html PUBLIC "-//W
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>第六章jQuery作业</title>
6.
<script
language="javascript"
src="http://jqueryjs.googlecode.com/files/jquery-
7. <script language="javascript" charset="GB2312">
8. 此处编写jQuery代码
9. </script>
10. <style>
11. 如有需要，此处编写CSS代码
12. </style>
13. </head>
14. <body>
15. 如有需要，此处编写HTML代码
16. </body>
17. </html>
复制代码
注：可能用到的事件：text()方法，用法参考上一章节中的案例。【作业1】1、写一个5行的表格或列表2、使用jQuery将第一行中填写的内容是:我是第一行3、使用jQuery将最后一行中填写的内容是:我是最后一行【作业2】1、写一个10行的表格或列表2、使用jQuery将所有的偶数行均显示“偶数行”，奇数行均显示“奇数行”【作业3】1、写一个3行的表格或列表2、使用jQuery将第2个表格或列表写入“我是第二行”【作业4】1、写一个10行的表格或列表2、使用jQuery将第5行之前的表格或列表写入“我在第五行之前”3、使用jQuery将第5行之后的表格或列表写入“我在第五行之后”【作业5】1、写h1—h6的标题标签如下：中括号内容去掉空格[< h1 > h1 < / h1 >][< h2 > h2 < / h2 >][< h3 > h3 < / h3 >][< h4 > h4 < / h4 >][< h5 > h5 < / h5 >][< h6 > h6 < / h6 >]2、使用jQuery将所有的h标签中的内容都更改成“我是h标题标签”
【第七节】jQuery速成 - 内容对象的获取和对象可见性！
【内容获取】$("Element:contains(text)")
匹配元素对象中的文本是否包含某个字母或者某个字符串（符串或串(String)是由零个或多个字符组成的有限序列。）
$("Element:empty")
获得对象元素不包含文本或子元素
$("Element:parent")
以上面相反，获得对象元素包含文本或子元素
$("Element:has(selector)")
匹配含有某个元素是否包含某个元素 比如$("p:has(span)")表示所有包含span元素的p元素
【可见性】$("Element:hidden")
匹配所有不可见元素，包括display:none以及input的属性是hidden都可以匹配得到。
$("Element:visible")
与上面相反，匹配所有可见元素
【第八节】jQuery速成 - 对象获取进阶
今天我们来学习一下其他对对象获的方法，当您学完这节课，相信你会觉得jQuery真的是太方便了，本节课与第五章《jQuery速成 - 简单对象获取》一样，也是属于死记的东西。$("Element[id]")
获得所有带有ID属性的元素
$("Element[attribute=KwooShung]")
获得所有某个属性为KwooShung的元素
$("Element[attribute!=KwooShung]")
获得所有某个属性不为KwooShung的元素，我想如果学过C#和java的人都明白"!"在程序中表示非
$("Element[attribute^=Kwoo]")
获得所有某个属性值是以Kwoo开头的元素
$("Element[attribute$=Kwoo]")
获得所有某个属性值是以Kwoo结尾的元素
$("Element[attribute*=Kwoo]")
获得所有某个属性值包含Kwoo的元素
$("Element[selector1][selector2][....]")
符合属性选择器，比如$("input[id][name][value=kwooshung]")表示获得带有ID、Name以及value是KwooShung的input元素。
【第九节】jQuery速成 - 子元素的获取
到目前为止，我写的jQuery教程已经到了第八章了，不知大家现在对jQuery是否还比较陌生，如果你还很陌生的话，没关系。css学习网也在教程的后面留下了作业或案例，希望朋友们能认真的完成作业认真的看案例。我相信大家一定能好好的驾驭这匹烈马的。本节课相对来说比较简单，就四个函数。$("Element:nth-child(index)")选择父级下的第N个子级元素，索引从1开始，而eq函数（eq函数会在后面学习到）从0开始。 ┣━:nth-child(even)偶数 ┣━:nth-child(odd)奇数 ┣━:nth-child(3n)表达式 ┣━:nth-child(2)索引 ┣━:nth-child(3n+1)表达式 ┗━:nth-child(3n+2)表达式$("Element:first-child")
匹配父级下的第一个子级元素
$("Element:last-child")
匹配父级下的最后一个子级元素
$("Element:only-child")
匹配父级下的唯一的一个子级元素，例如dt在dl列表中唯一，那么将选择dt
【第十节】jQuery速成 - 表单对象的获取
我相信看到本节标题的时候都可能会问，我们表单对象获取已经学过了，之前学的都是对象的获取，表单对象的获取还有什么可学的呢？其实不是这样，本节课主要学习一下针对表单对象的另外一种获取方法，由于表单对象较多，所以本节课的内容也很多，当然喽，也属于一些死记的东西。没什么好办法。$(:input)
只能匹配Input元素类型为input button select textarea
$(:text)
匹配所有的单行文本框
$(:password)
匹配所有的密码框
$(:radio)
匹配所有的单选按钮
$(:checkbox)
匹配所有的复选框
$(:submit)
匹配所有的提交按钮
$(:image)
匹配所有的图像域，例如<input type="image" />
$(:reset)
匹配所有的重置按钮
$(:button)
匹配所有的按钮
$(:file)
匹配所有的文件上传域
$(:hidden)
匹配所有的不可见元素或者type为hidden的元素
$(:enabled)
匹配所有可用的input元素，比如radio:enabled表示匹配所有可用的单选按钮
$(:disabled)
匹配所有的不可用input元素，作用与上相反
$(:checked)
匹配所有选中的复选框元素
$(:selected)
匹配所有的下拉列表
【第十一节】jQuery速成 - 元素属性的设置与移除
这节课是jQuery基础篇的最后一课，学完这节课，同学们就算是掌握了骑马的技巧，但是如果想要驾驭它还很难，同学们加油啊！$("Element").attr(name)
取得第一个匹配元素的属性值，比如$("img").attr("src")
$("Element").attr({key:value,key,value,....})
表示为某一个元素一次性设置多个属性
$("Element").attr(key,value)
为某一个元素设置属性
$("Element").attr(key,function)
为所有匹配的元素设置一个计算的属性值。
$("Element").removeAttr(name)
移除某一个属性
第二章：进阶篇 - 对象的筛选
【第十二节】jQuery速成 - 过滤
教程写到这里，也不知道大家对我的教程感觉如何，因此我希望大家顶贴，发表自己对此教程的看法。 我们今天的课程就要进入新的一章了。大家要加油
$("Element").eq(index)
取得第n个元素，此方法的是从0算起的。$("div").eq(5)表示获得此页面中的第6个div
$("Element").hasClass("className")
检查当前的元素是否含有某个特定的类，如果有，则返回true。
$("Element").filter("Expression")
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。可用逗号分隔多个表达式。比如$("input",".Names",":last")表示筛选出最后一个使用Names类选择器的input中的最后一个。
$("Element").filter("function")
使用方法同上，Function与《【第十一节】jQuery速成 - 元素属性的设置与移除》中的第四个元素使用方法一致。
$("Element").is("Expression")
用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。比如$("div:first[class=\'abc\']").parent().is("body")
$("Element").map("callback")
将一组元素转换成其他数组（不论是否是元素数组）
$("Element").not("Expression")
删除与指定表达式匹配的元素，
$("Element").slice(start,end)
$("Element").slice(start,end),start (Integer) :开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。end (Integer) : (可选) 结束选取自己的位置，如果不指定，则就是本身的结尾。
补充：案例中的not写错了，我又写了一个例子。$("Element").not("Expression")
比如：HTML:<p>Hello</p><p id="abc">Hello Again</p>jQuery：$("p").not( $("#abc")[0] ) 结果： <p>Hello</p> 案例中此效果写错了，看这个即可。
【第十三节】jQuery速成 - 查找
今天圣诞节，首先要祝大家节日快乐！$("Element").add("Expressions")
把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。
$("Element").children("Expressions")
可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。
$("Element").contents()
表示获得某个元素的子元素内容
$("Element").find("Expressions")
表示搜索某个元素下面的某个子元素，比如$("div").find("p")等同于$("div p")
$("Element").next("Expressions")
表示获得某个元素后面的同辈元素的集合,这里的同辈不是指同种元素，而是在同一个层下的所有元素。
$("Element").nextAll("Expressions")
表示查找当前元素之后的所有元素。可以用表达式过滤
$("Element").prev("Expressions")
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
$("Element").prevAll("Expressions")
查找当前元素之前所有的同辈元素可以用表达式过滤。
$("Element").parent("Expressions")
取得一个包含着所有匹配元素的唯一父元素的元素集合。
$("Element").parents("Expressions")
取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
$("Element").siblings("Expressions")
查找当前元素之前所有的同辈元素,可以用表达式过滤。
本节课没有案例，与第六节:jQuery速成 - 简单的对象获取规则一样，我会根据大家作业的情况，再发布案例。
1.
<!DOCTYPE html PUBLIC "-//W
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>第十三章jQuery作业</title>
6.
<script
language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-
7. <script language="javascript" charset="GB2312">
8. 此处编写jQuery代码
9. </script>
10. <style>
11. 如有需要，此处编写CSS代码
12. </style>
13. </head>
14. <body>
15. 如有需要，此处编写HTML代码
16. </body>
17. </html>
复制代码
【作业】将上述所有的方法写一个例子。
【第十四节】jQuery速成 - 串联
本节结束后，又要进入一个新的篇章咯。本节较为简单，就2个方法。$("Element").andSelf()
将先前所选的加入当前元素中比如$("p a")表示选择p下面的所有a元素，如果加上$("p a").andSelf()表示选择的是p
$("Element").end()
回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。详细解释在案例中
第三章：文本篇 - 对象文本处理
【第十五节】jQuery速成 - 内部插入
$("Element").append("content")
向选中的元素中追加内容
$("Element").appendTo("content")
将选中的元素追加到到另外一个元素内部，实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
$("Element").prepend("content")
向选中的元素中追加内容并前置
$("Element").prependTo("content")
将选中的元素追加到到另外一个元素内部并前置，实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。
【第十六节】jQuery速成 - 外部插入
这节课非常的有意思，从标题上来看与上一节非常相似，而且功能也非常相似，甚至解释和案例也非常相似。当然与上节一样，用处也非常大。$("Element").after("content")
向选中的元素后面追加内容
$("Element").before("content")
将选中的元素前面添加内容
$("Element").insertAfter("content")
使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。
$("Element").insertBefore("content")
使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。
【第十七节】jQuery速成 - 包裹
我相信很多人看到了这个标题会非常迷惑，包裹在这里到底是什么意思呢？其实也非常容易理解，就是把所有匹配的元素用其他元素的结构化标记包裹起来。看完这句话您估计就能理解个差不多了，那么再看看包裹的方法和案例，你就能很容易的掌握它！$("Element").wrap("html")
所匹配的元素分别用其他元素的结构化标记包裹起来，比如$("p").wrap("<div></div>")或者$("p").("<div>")，否则无效。无效的方式有：$("p").("div")等
$("Element").wrap("elem")
同上比如$("p").wrap($("#Element"))
$("Element").wrapAll("html")
将所有匹配的元素用单个元素包裹起来，$("p").wrapAll("<div></div>")便会将所有的p使用一个div包裹起来
$("Element").wrapAll("elem")
同上，比如$("p").wrapAll($("#Element"))
$("Element").wrapInner("html")
将每一个匹配的元素的子内容(包括文本也属于子元素)用一个HTML结构包裹起来$("p").wrapInner("<div></div>")
$("Element").wrapInner("elem")
同上，比如$("p").wrapInner($("#Element"))
【第十八节】jQuery速成 - 替换，删除和复制
本章主要讲解jQuery对文本替换，删除和复制的处理方法。替换：$("Element").replaceWith("content")
将所有匹配的元素替换成指定的HTML或DOM元素。
$("Element").replaceAll("selector")
用匹配的元素替换掉所有 selector匹配到的元素。
删除：$("Element").empty()
删除匹配的元素集合中所有的子节点。包括文本也属于子节点。
$("Element").remove("Expressions")
从DOM中删除所有匹配的元素。
复制：$("Element").clone()
克隆匹配的DOM元素并且选中这些克隆的副本，就是复制的意思。
$("Element").clone("true")
元素以及其所有的事件处理并且选中这些克隆的副本。比如某个按钮带有事件，他将自己复制后，事件也可以复制。详细讲解在案例。
【第十九节】jQuery速成 - 元素的赋值
本节课较为简单，并且下面的这7个方法也都已经在前面的章节的案例中使用过，因此本节课便不再做案例。如果您真的有什么问题或者觉得有必要出案例，请在下面回帖。HTML:$("Element").HTML()
获得选定元素的HTML代码
$("Element").HTML("val")
设置指定元素的HTML代码，HTML代码想怎么写就怎么写与平时在body中写HTML一样
文本：$("Element").text()
获得指定标签中显示的文字,与HTML不一样
$("Element").text("val")
获得指定标签设置内容，即使是HTML也会按原样输出
值：$("Element").val()
获得input的值check,select,radio等都能获取
$("Element").HTML("val")
设置指定的input的值
第四章：样式篇 - 层叠样式表的处理
【第二十节】jQuery速成 - 样式的设置与定义
今天这节课内容稍微多了一点，但是与按照章节来说，还是比较少的。另外jQuery可以对元素更好的设置样式，也更加方便快捷。样式设置：$("Element").addClass("Class")
获得选定元素的HTML代码,假如定义了一个类样式叫做.main{.....}，那么可以为p元素这么添加$("p").addClass("main")
$("Element").removeClass("Class")
与上述一样，addClass("main")表示添加样式，此方法则是移除main样式
$("Element").toggleClass("Class")
这个可以算是前两个方法的一个综合。简单来说就是：如果存在（不存在）就删除（添加）一个类。
样式定义：$("Element").css("name")
表示获得某个元素的css样式，比如$("div").css("color")表示获得此div的字体颜色。
$("Element").css(name,value)
name表示属性名称，value表示值。如果为所有的div设置字体颜色为#f00的话，只需要$("div").css("color","#f00");
$("Element").css({name:"value",name:"value",......})
此方法是为了能够对元素一次性设置多个样式属性，比如我想对所有的p设置字体颜色是红色并且背景颜色是绿色，就用到了此方法$("p").css({color: "#f00", background: "#0f0"}); 当然中括号中项设置几个就设置几个
元素位置：$("Element").offset()
此方法返回两个整形属性，分别是top和left，此方法只对可见元素有效。
元素宽高：$("Element").width()
获得某个元素的宽度
$("Element").width("val")
设置某个元素的宽度
$("Element").height()
获得某个元素高度
$("Element").height("val")
设置某个元素的高度
第五章：提高篇 - jQuery中的事件机制
【第二十一节】jQuery速成 - 页面的载入事件与事件处理
从今天开始，我们要学习jQuery中事件机制，如之前用过的click()这就是事件机制中的一种。通过如此简单的开场白，相信大家也能明白些什么是事件机制了吧？如果你还不明白，没关系，你还可以这么理解，当你在元素上进行单击、双击、移入、移出都是事件。当你将鼠标移入元素表示出发了移入事件，当你点击了元素那么就触发了click()事件。注：红色的方法是本教程原来没有的，后来补充上的。载入事件：$(document).ready(function)
等同于jQuery(document).ready(fn)等同于$ 上面这个方法我相信大家应该不会陌生，因为它充当的是js中的onLoad()事件，凡是做过作业或者看过我的案例的朋友都应该看到了，每当我们要是用jQuery进行对元素的控制的时候都需要在第一行的开始使用"$"符号，这是为了当页面载入完毕，在调用jQuery方法对元素进行控制。如果看到这里你还不懂，建议你再重新看一下第二节的教程【第二节】jQuery速成 - 核心
[/quote]事件处理：$("Element").bind("type",[data],function)
表示为某一个元素绑定特定的事件type:事件类型data：返回类型（可选）function:普通的js方法或者jQuery方法详细应用见案例
$("Element").live("type",function)
表示为某一个元素绑定特定的事件,推荐使用此方法代替上面的bind
$("Element").unbind([type],function)
与bind方法相反，删除匹配的元素所绑定的某个特定的事件type:事件类型（可选）function：反绑定的事件处理函数（可选）如果以上参数均无，则表示将所匹配元素的所有事件取消绑定$("Element").die("type",function)[quote]表示为某一个元素解除特定的事件,推荐使用此方法代替上面的unbind
$("Element").one("type",[data],function)
表示为某一个元素绑定一次性的特定事件type:事件类型data：返回类型（可选）function:普通的js方法或者jQuery方法此方法看似与bind相似，使用方法亦是如此，但是功能差距很大，因为这个事件是一次性的，如果在一个页面中不刷新，绑定的这个事件只能使用一次。
$("Element").trigger("type",[data])
在每个匹配的元素上绑定某类事件type:事件类型data：附加参数（可选）比如$("form:first").trigger("submit")表示页面中的第一个form表单提交。我们知道一般将按钮放在form中，点击此按钮才会提交他所在的form表单，如果使用此方法，即使按钮在表单区域之外，也同样会使其提交。另外如果这个按钮有浏览器默认的事件，它也会执行，你设置的事件也会执行。如果要阻止默认事件，那么此方法返回false或者使用下面的的方法都可。
更多的使用方法见案例$("Element").triggerHandler("type",[data])
在每个匹配的元素上绑定某类事件,但不会执行浏览器默认的事件type:事件类型data：返回类型（可选）使用方法如上，不同的是不会执行浏览器默认事件
【第二十二节】jQuery速成 - 鼠标事件与交互
由于牵扯到CSS学习网首页的改版，因此教程停写了两天，呵呵。大家包涵包涵哈。今天为大家带来的主要是鼠标有关的事件讲解，由于交互处理方面与鼠标交互处理事件多多少少牵扯到点儿关系，因此这2个元素与本节合并为一节。交互处理：$("Element").hover(over,out)
模拟鼠标悬停的事件，当鼠标移入移出选定元素的时候分别触发over和out事件。参数：over：function out：function
$("Element").toggle(function,function)
与上面的方法雷同，当鼠标第一次点击的时候触发前者，当鼠标第二次点击的时候触发后者。
鼠标单击：$("Element").click()$("Element").click(function)
当鼠标点击的时候触发，具体的应用方法我想不用具体讲解了。因为大家看了我过去的所写的案例就已经有数了。
鼠标双击：$("Element").dblclick()$("Element").dblclick(function)
与鼠标单击一样，只不过这个是鼠标双击事件。也就是说只有鼠标在选定的元素上双击才会触发此事件。dbl是Double的缩写。
鼠标点击前后：$("Element").mousedown(function)
当鼠标点击后触发，从表面上看类似click事件，其实有本质上的区别。
$("Element").mouseup(function)
当鼠标点击释放的时候触发。就是鼠标点击了元素当你松开鼠标按键的时候触发。
鼠标的移动：$("Element").mousemove(function)
当鼠标在选定的元素上来回移动的时候触发。
$("Element").mouseover(function)
当鼠标在移入选定的元素范围的时候触发。
$("Element").mouseenter(function)
当鼠标在移入选定的元素范围的时候触发。与mouseover有很大的区别就是它不冒泡的事件，点击子元素的时候不会触发父级元素
$("Element").mouseout(function)
当鼠标移出选定的元素范围的时候触发。
$("Element").mouseleave(function)
当鼠标移出选定的元素范围的时候触发。与mouseenter一样，不是冒泡事件
本节作业： 1、将以上所有的事件均做一个例子发上来。 2、作业发布在回帖中即可，编辑的时候使用代码功能发布，并且复制后可以直接执行。
1.
<!DOCTYPE html PUBLIC "-//W
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>第二十二节jQuery作业</title>
6.
<script
language="javascript"
src="http://jqueryjs.googlecode.com/files/jquery-
7. <script language="javascript" charset="GB2312">
8. 此处编写jQuery代码
9. </script>
10. <style>
11. 如有需要，此处编写CSS代码
12. </style>
13. </head>
14. <body>
15. 如有需要，此处编写HTML代码
16. </body>
17. </html>
复制代码
【第二十三节】jQuery速成 - 焦点事件
今天学习以下焦点事件，这些事件在网页中经常使用。比如文本框失去焦点后验证输入。建议大家本节课与下节课一起学习。触发焦点：$("Element").focus()
触发每一个匹配元素获得焦点事件。
$("Element").focus(function)
事件会在获得焦点的时候触发，既可以是鼠标行为，也可以是按tab键导航触发的行为，并且绑定一个处理方法。
失去焦点：$("Element").blur()
触发每一个匹配元素失去焦点事件。
$("Element").blur(function)
事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的行为，并且绑定一个处理方法。
改变焦点：$("Element").change()
触发每一个匹配元素改变时事件.
$("Element").change(function)
在每一个匹配元素的change事件中绑定一个处理函数。
【第二十四节】jQuery速成 - 键盘事件
键盘按下：$("Element").keydown()
当键盘按下的时候触发此事件。
$("Element").keydown(function)
当键盘按下的时候触发此事件，并绑定一个处理方法。
键盘敲击：$("Element").keypress()
当键盘按下的时候触发此事件。
$("Element").keypress(function)
当键盘按下的时候触发此事件，并绑定一个处理方法。
注：虽然从表面上理解keypress与keydown是一个意思，但二者的本质区别是：系统由keydown返回键盘的代码, 然后由TranslateMessage函数翻译成字符, 由keypress返回字符值. 因此在keydown中返回的是键盘的代码, 而keypress返回的是ASCII字符. 所以根据你的目的, 如果只想读取字符, 用keypress, 如果想读各键的状态, 用keydown。键盘弹起：$("Element").keyup()
当键盘按键释放的时候触发。
$("Element").keyup(function)
当键盘按键释放的时候触发并绑定一个处理方法。
课后作业：
注：本节课后作业可以对前几节的内容进行回顾，并且可以使大家能够快速的将讲过的方法融合在一起使用，更好的驾驭jQuery！作业1： 页面上有一个文本域并有一段文字，当失去焦点的时候在旁边“比如div span等”显示有多少个字。作业2： 页面中有一个文本域，当在页面上输入文字的时候，在上方显示“正在输入”的字样，并以蓝色字体显示，停止输入的时候上方无任何文字。
1.
<!DOCTYPE html PUBLIC "-//W
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>第二十三节jQuery作业</title>
6.
<script
language="javascript"
src="http://jqueryjs.googlecode.com/files/jquery-
7. <script language="javascript" charset="GB2312">
8. 此处编写jQuery代码
9. </script>
10. <style>
11. 如有需要，此处编写CSS代码
12. </style>
13. </head>
14. <body>
15. 如有需要，此处编写HTML代码
16. </body>
17. </html>
复制代码
【第二十五节】jQuery速成 - 其他事件
由于我最近入职于麒麟网信息技术有限公司的关系，所以课程的进度停的大概有1周左右，凑这两天我会尽量将《jQuery速成教程》结束掉。大家要有个心理准备。 这节课，我们就要结束了jQuery中的事件。$("Element").load(type,function)
在元素后面绑定一个处理函数，当元素内容加载完毕后自动调用。就如同每次写jQuery的时候都写jQuery，$(document).reday()或者$的方式差不多。type：事件类型function:函数体
$("Element").unload(function)
与上面的函数相反，在每一个匹配元素的卸载事件中绑定一个处理函数。比如页面卸载的时候弹出一个警告框。$(document).unload( function () { alert("Bye now!"); } );
$("Element").resize(function)
当窗口大小发生改变的时候触发,比如$(window).resize(function(){alert("你正在试图改变窗口的大小");});
$("Element").scroll(function)
当滚动条发生改变的时候触发$(window).scroll(function(){alert("你正在试图改变滚动条");});
$("Element").select()
触发每一个匹配元素的select事件，这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。比如触发所有input元素的select事件，$("input").select();
$("Element").select(function)
当用户在文本框(包括input和textarea)中选中某段文本时会触发select事件。
$("Element").submit()
函数会调用执行绑定到submit事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。$("form:first").submit(); 表示第一个form提交的时候触发。
$("Element").submit(function)
在每一个匹配元素的submit事件中绑定一个处理函数。
$("Element").error()
这个函数会调用所有绑定到error事件上的函数，包括在对应元素上的浏览器默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。error事件通常可以在元素由于点击或者tab导航失去焦点时触发。
$("Element").error(function)
对于error事件，没有一个公众的标准。在大多数浏览器中，当页面的JavaScript发生错误时，window对象会触发error事件;当图像的src属性无效时，比如文件不存在或者图像数据错误时，也会触发图像对象的error事件。
课后作业：
作业： 根据上面所描述的所有方法，均写一个例子出来。最好都在一个HTML文件里。
1.
<!DOCTYPE html PUBLIC "-//W
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>第二十五节jQuery作业</title>
6.
<script language="javascript"
src="http://jqueryjs.googlecode.com/files/jquery-
7. <script language="javascript" charset="GB2312">
8. 此处编写jQuery代码
9. </script>
10. <style>
11. 如有需要，此处编写CSS代码
12. </style>
13. </head>
14. <body>
15. 如有需要，此处编写HTML代码
16. </body>
17. </html>
复制代码
第六章：效果篇 - jQuery中的动画效果
【第二十六节】jQuery速成 - 动画实现的基本方法
$("Element").show()
将不可见元素设置为可见，比如某个元素被定义为display:none;
$("Element").show(speed,[callback])
speed为显示的速度，推荐600毫秒为佳speed:时间，单位毫秒callback：回调函数（可选）
$("Element").hide()
与第一个函数相反，将某个元素设置为隐藏，也就是设置为display:none；
$("Element").hide(speed,[callback])
speed为显示的速度，推荐600毫秒为佳speed:时间，单位毫秒callback：回调函数（可选）
$("Element").toggle()
切换元素的显示状态，如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
$("Element").toggle(speed,[callback])
speed为显示的速度，推荐600毫秒为佳speed:时间，单位毫秒callback：回调函数（可选）
课后作业：
作业： 由于这两节课程比较简单，所以本节作业还是跟前一节一样，根据上面所描述的所有方法，均写一个例子出来。最好都在一个HTML文件里。
1.
<!DOCTYPE html PUBLIC "-//W
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>第二十六节jQuery作业</title>
6.
<script
language="javascript"
src="http://jqueryjs.googlecode.com/files/jquery-
7. <script language="javascript" charset="GB2312">
8. 此处编写jQuery代码
9. </script>
10. <style>
11. 如有需要，此处编写CSS代码
12. </style>
13. </head>
14. <body>
15. 如有需要，此处编写HTML代码
16. </body>
17. </html>
复制代码
【第二十七节】jQuery速成 - 元素的渐隐渐显
$("Element").fadeIn(speed,[callback])
通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。speed:时间，单位毫秒callback：回调函数（可选）
$("Element").fadeOut(speed,[callback])
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。speed:时间，单位毫秒callback：回调函数（可选）
$("Element").fadeTo(speed,opacity,[callback])
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。speed:时间，单位毫秒opacity:要调整到的不透明度值(0到1之间的数字，一般小数点后面保留2位).callback：回调函数（可选）
作业： 本节作业还是跟前一节一样，根据上面所描述的所有方法，均写一个例子出来。最好都在一个HTML文件里。[/quote]
1.
<!DOCTYPE html PUBLIC "-//W
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>第二十七节jQuery作业</title>
6.
<script language="javascript"
src="http://jqueryjs.googlecode.com/files/jquery-
7. <script language="javascript" charset="GB2312">
8. 此处编写jQuery代码
9. </script>
10. <style>
11. 如有需要，此处编写CSS代码
12. </style>
13. </head>
14. <body>
15. 如有需要，此处编写HTML代码
16. </body>
17. </html>
复制代码
【第二十八节】jQuery速成 - 元素的滑动
$("Element").slideDown(speed,[callback])
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。speed:时间，单位毫秒callback：回调函数（可选）
$("Element").slideUp(speed,[callback])
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。speed:时间，单位毫秒callback：回调函数（可选）
注：这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。$("Element").slideToggle(speed,[callback])
相当于以上两个方法的结合，展开后然后在缩小，比如：用200毫秒快速将段落滑上或滑下$("p").slideToggle(200); speed:时间，单位毫秒callback：回调函数（可选）
【第二十九节】jQuery速成 - 自定义动画
今天是动画效果的最后一节课，内容比较难比较多，大家加油啊！
$("Element").animate(params[,duration[,easing[,callback]]])[quote]用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。 注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left，如果有不懂得骆驼命名法的朋友请看三种通用CSS规范化命名的规则。而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合duration (String,Number) : (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)easing (String) : (可选) 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".callback (Function) : (可选) 在动画完成时执行的函数$("Element").animate(params,options)
同上params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合options (Options) : 一组包含动画选项的值的集合。
$("Element").stop()停止指定元素上正在运行的动画$("Element").queue()返回指向第一个匹配元素的队列，常与length配合使用；可以将其理解为数组，一个动画数组中包含了好几个效果，queue().length表示获得当前所执行的第一个效果。
本帖隐藏的内容
1.
<!DOCTYPE html PUBLIC "-//W
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>第二十九节jQuery作业</title>
6.
<script language="javascript"
src="http://jqueryjs.googlecode.com/files/jquery-
7. <script language="javascript" charset="GB2312">
8. $(
9. function()
10. {
11. $("#show").click
12. (
13. function()
14. {
15. var n = $("div").queue();
16. $("span").text("Queue length is: " + $("div").queue().length);
17. }
18. );
19. runIt();
20. }
21. );
22.
23. function runIt()
24. {
25. $("div").show("slow");
26. $("div").animate({left:\'+=200\'},2000);
27. $("div").slideToggle(1000);
28. $("div").slideToggle("fast");
29. $("div").animate({left:\'-=200\'},1500);
30. $("div").hide("slow");
31. $("div").show(1200);
32. $("div").slideUp("normal", runIt);
33. }
34. </script>
35. <style>
36. div { margin:3px; width:40px; height:40px;position:absolute; left:0px; top:30px; background:green; display:none; }
37. div.newcolor { background:blue; }
38. span { color:red; }
39. </style>
40. </head>
41. <body>
42. <button id="show">Show Length of Queue</button>
43. <span></span>
44. <div></div>
45. </body>
46. </html>
47. [/quote][/hide]
48. $("Element")[color=blue][color=black].[color=#0000ff]queue(function)[/color][/color][/color][color=#9acd32]// 要添加进队列的函数[/color]
49. [hide]
50.
<!DOCTYPE html PUBLIC "-//W
51. <html xmlns="http://www.w3.org/1999/xhtml">
52. <head>
53. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
54. <title>第二十九节jQuery作业</title>
55.
<script
language="javascript"
src="http://jqueryjs.googlecode.com/files/jquery-
56. <script language="javascript" charset="GB2312">
57. $
58. (
59. function()
60. {
61. $(document.body).click
62. (
63. function ()
64. {
65. $("div").show("slow");
66. $("div").animate({left:\'+=200\'},2000);
67. $("div").queue
68. (
69. function()
70. {
71. $(this).addClass("newcolor");
72. $(this).dequeue();
73. }
74. );
75. $("div").animate({left:\'-=200\'},500);
76. $("div").queue(function(){$(this).removeClass("newcolor");$(this).dequeue();});
77. $("div").slideUp();
78. }
79. )
80. }
81. );
82. </script>
83. <style>
84. div {margin:3px; width:40px; height:40px;position:absolute; left:0px; top:30px; background:green; display:none; }
85. div.newcolor{ background:blue;}
86. </style>
87. </head>
88. <body>
89. Click here...
90. <div></div>
91. </body>
92. </html>
93. [/quote][/hide]
94.
95. $("Element")[color=blue][color=black].[color=#0000ff]queue(queue)[/color][/color][/color][color=#9acd32]//将匹配元素的动画队列用新的一个队列来代替(函数数组)[/color]
96. [hide][indent]
97.
<!DOCTYPE html PUBLIC "-//W
98. <html xmlns="http://www.w3.org/1999/xhtml">
99. <head>
100. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
101. <title>第二十九节jQuery作业</title>
102.
<script language="javascript"
src="http://jqueryjs.googlecode.com/files/jquery-
103. <script language="javascript" charset="GB2312">
104. $
105. (
106. function()
107. {
108. $("#start").click
109. (
110. function()
111. {
112. $("div").show("slow");
113. $("div").animate({left:\'+=200\'},5000);
114. $("div").queue
115. (
116. function()
117. {
118. $(this).addClass("newcolor");
119. $(this).dequeue();
120. }
121. );
122. $("div").animate({left:\'-=200\'},1500);
123. $("div").queue
124. (
125. function()
126. {
127. $(this).removeClass("newcolor");
128. $(this).dequeue();
129. }
130. );
131. $("div").slideUp();
132. }
133. )
134.
135. $("#stop").click
136. (
137. function()
138. {
139. $("div").queue("fx", []);
140. $("div").stop();
141. }
142. )
143. }
144. );
145. </script>
146. <style>
147. div {margin:3px; width:40px; height:40px;position:absolute; left:0px; top:30px; background:green; display:none; }
148. div.newcolor{ background:blue;}
149. </style>
150. </head>
151. <body>
152. <button id="start">Start</button>
153. <button id="stop">Stop</button>
154. <div></div>
155. </body>
156. </html>
复制代码
$("Element").dequeue()//从动画队列中移除一个队列函数
本帖隐藏的内容
1.
<!DOCTYPE html PUBLIC "-//W
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>第二十九节jQuery作业</title>
6.
<script
language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-
7. <script language="javascript" charset="GB2312">
8. $
9. (
10. function()
11. {
12. $("button").click
13. (
14. function()
15. {
16. $("div").animate({left:\'+=200px\'}, 2000);
17. $("div").animate({top:\'0px\'}, 600);
18. $("div").queue
19. (
20. function()
21. {
22. $(this).toggleClass("red");
23. $(this).dequeue();
24. }
25. );
26. $("div").animate({left:\'10px\', top:\'30px\'}, 700);
27. }
28. );
29. }
30. );
31. </script>
32. <style>
33. div {margin:3px; width:50px; position:absolute;height:50px; left:10px; top:30px; background-color:yellow; }
34. div.red { background-color:red; }
35. </style>
36. </head>
37. <body>
38. <button>Start</button>
39. <div></div>
40. </body>
41. </html>
复制代码
第七章：工具篇 - jQuery中的工具使用
【第三十节】jQuery速成 - 浏览器种类及其特性的检测
有很多朋友跟我提建议说，青色字有点刺眼，看着很累，这次已经将注释或解释使用深绿色，随后我也会将所有的课程都修改成深绿色。 这节课我们来学习一下在jQuery中如何检测浏览器的种类及特性。$.support.*
此方法目前用到的不多，而且兼容性不是很好，所以暂不详解，大家可以看一下API
$.browser.type
此方法用于返回浏览器内核标识。type:safari/opera/msie/mozillatype的值分别表示苹果浏览器/opera浏览器/IE浏览器/火狐浏览器
注：经过本人测试，在chrome浏览器中 $.browser.safari 返回值为true，因此chrome与safari是同一内核。$.browser.version
此方法用于返回浏览器渲染引擎版本号【注意：不是浏览器的版本号】。
$.boxModel
此方法返回当前页面中浏览器是否使用标准盒模型渲染页面，boolean类型。
【第三十一节】jQuery速成 - 数组和对象的操作
在我们编写JS的时候，数组和对象是我们经常用到的，但是对于复杂的数组操作有的时候很不方便，因此jQuery提供了一系列的快捷简便的方法。本节课建议先下载案例在对比着学效果会好一些。$.each(object,function)
object填写数组对象，function是遍历后的回调函数
$.eachnd(boolean,object1,object2,[objectN])
boolean布尔值(true/false)。object与function为必填项，此方法主要用于合并两个数组，相同的下标将有第二个数组对象中的值替换第一个数组对象中相同位置的内容
$.grep(array,function,boolean)
array填写数组，function是遍历后的回调函数,boolean设置为true则从数组中排除function中符合条件的选项。
$.makeArray(object)
将【类】数组对象转换为数组对象
$.map(array,function(i))
将array:数组通过function:回调函数根据条件转换为一个新数组
$.inArray(value,array)
value:用于在数组中查找是否存在的条件，array待查找的数组
$.toArray()
把jQuery集合中所有的DOM元素转换成一个数组
$.merge(object1,object2)
此方法主要用于合并两个数组，相同的下标不会被替换
$.unique(array)
删除数组中重复元素。只处理删除DOM元素数组，而不能处理字符串或者数字数组。
$.parseJSON(json)
解析一个【标准的】JSON字符串，详见案例。
【第三十二节】jQuery速成 - 工具杂项
今天这节课是第七章的最后一节可，下节课将为大家讲解jQuery的高级应用——Ajax的应用。$.noop
就是一个纯粹的空参数，主要用与船体一个空参的时候使用。
$.proxy(function,object)
设置某个时间的特定域。我感觉这个jQuery方法有点像把方法跟方法体（方法的实现）分离开了，通过proxy指定执行某个方法体。通过真正的应用，感觉这个方法真的是非常有用,返回值为Boolean。。
$.contains(obj)
判断一个dom节点是否包含另一个dom节点，返回值为Boolean。
$.isArray(obj)
判断一个对象是否为数组对象，返回值为Boolean。
$.isFunction(obj)
判断一个对象是否为一个方法，返回值为Boolean。
$.isEmptyObject(obj)
判断一个对象是否为空，返回值为Boolean。
$.isPlainObject(obj)
判断一个对象是否仅仅只是一个纯粹的对象，返回值为Boolean。
$.trim(string)
去除字符串的开头与结尾的空格。
$.param()
将表单元数组对象进行序列化，个人感觉在Ajax URL传递方面比较有用。
$.error(message)
接受一个字符串，并且直接抛出一个包含这个字符串的异常。只要针对开发人员在火狐的fireBug插件中使用，
第八章：高级篇 - Ajax异步请求及调用实战
【第三十三节】jQuery速成 - Ajax请求 (讲解篇)
jQuery的Ajax教程已经停写了2个月之久，对各位CSSer说声抱歉。现在切入正题，说一下本章的安排。 本章，一节课对大家讲解jQuery Ajax的函数(方法)进行说明，另一节课直接通过示例来为大家进行更详细的说明。以此类推，一节课内容和介绍，另一节课案例实战。 本节课内容稍多，肯定会有很多人一看下面那么多属性、参数、键值对就会对自己产生了疑问或者不自信，我给大家的建议是只需了解即可不必深究，下节课我们便会对今天学习的内容进行小练一把。 $.load(url,[data],[callback])
方法说明：载入远程 HTML 文件代码并插入至 DOM 中。url:待装入 HTML 网页地址data:(可选) 发送至服务器的key/value(键值对) 数据。callback: (可选) 载入成功时回调函数。过去并没有对回调函数进行说明，今天稍微的说一下，jQuery中的回调函数意思是指当某个操作执行完毕后要执行的函数。举例： 要求：1、随便建立两个页面，假设为A.html和B.html 2、在B中随便写几个DIV 3、推荐在A.html中定义B中的DIV样式，因为$("html").load()只载入HTML不会载入【外链】样式。 写法： $ ( function() { $("html").load("B.html"); } );
$.get(url,[data],[callback])
方法说明：简单的 Get 的请求，url: 请求 HTML 网页地址data:(可选) 发送至服务器的key/value(键值对) 数据。callback: (可选) 载入成功时回调函数。
$.post(url,[data],[callback])
方法说明：简单的 Post 请求，url: 请求 HTML 网页地址data:(可选) 发送至服务器的key/value(键值对) 数据。callback: (可选) 载入成功时回调函数。
$.getJSON(url,[data],[callback])
方法说明：简单的 GET 请求载入 JSON 数据url: 请求 HTML 网页地址data:(可选) 发送至服务器的key/value(键值对) 数据。callback: (可选) 载入成功时回调函数。
$.getScript(url,[callback])
方法说明：简单的 GET 请求载入 script 脚本数据并执行url: 请求 HTML 网页地址data:(可选) 发送至服务器的key/value(键值对) 数据。callback: (可选) 载入成功时回调函数。
$.Ajax(options)
//此方法只要用于返回创建的 XMLHttpRequest 对象。大家如果看了jQuery API对Ajax的参数的讲解，肯定会觉得此方法的内容较多，其实此方法只有一个值，是key/value(也就是我们常说的“键值对”)，下面将对此方法的参数进行逐一讲解。注意：参数options是可选的其中键值对也都是可选的。async://Boolean类型 此键值对默认情况下为true，也就是异步请求（局部刷新）；如果设置为false，将会变成同步请求，那么此时将会锁住浏览器，用户无法对其进行其他操作，必须等待请求完毕后才会解锁。global (Boolean类型) //表示是否触发全局，默认为触发（true），Ajax的全局设置将在后面的章节讲，设置全局则表示所有的Ajax将能够使用此全局内容，比如所有的Ajax事件都触发同一个路径。type (String) : //(默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。cache:(Boolean类型) //设置false将不会从浏览器缓存中加载信息，用于jQuery1.2或更高的版本。contentType:(String类型) //用于设置编码格式，默认为: "application/x-www-form-urlencoded")格式，一般推荐此格式。ifModified (Boolean) : //(默认: false) 仅在服务器数据改变时获取新数据。processData (Boolean) : // (默认: true) 默认情况下，发送的数据将被转换为对象。timeout (Number) ://设置置请求超时时间（毫秒）。此设置为全局设置。dataType:(String类型) //用于设置服务器返回的数据类型，但填写的内容也是有限制的，可用值如下 ┠xml //设置此值服务器端将XML文档，如果大家对Ajax比较了解，我想大家也知道Ajax中的x代表是什么了吧？因此叫做A(Asynchronous)j(javascript)a(and)x(xml) ┠html //服务器返回HTML格式文档,（根据个人理解，如果按照遭上面的理解xml表示x的话，那么此类型不就表示ajah了嘛）。 ┠script //服务器返回【纯文本】的脚本，不会执行或进行计算。 ┠json //返回Json格式的文档 ┠text //返回纯文本 ┗jsonp //JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问，比如用户想得到["kwoojan","KwooShung"]，如果设置了jsonp那么服务器将返回callbackFunction(["kwoojan","KwooShung"])data(String类型) //此方法至关重要，主要用于将数据发送至服务器。格式为键值对，如userName=CSS学习网&Address=http://www.cssxuexi.cn/ 那么服务器接受到的userName相对应的值就是CSS学习网url (String) :// (默认: 当前页地址) 发送请求的地址，也就是你的data数据需要被处理的地址。beforeSend(function) //此键值为函数方法，当你发送请求之前调用此方法。例如当用户进行了某个操作，这时页面上显示出“正在加载中，请稍后”等类似的字样，多数情况下此键值对用于给予用户友好的提示。success (Function) //当Ajax请求成功时，调用此方法，一般用于解析服务器所返回的数据。error (Function) //求失败时调用此方法。complete (Function) //当Ajax请求完毕的时候调用此方法。
【第三十四节】jQuery速成 - Ajax请求 (实战篇)
今天我们对上节课的所讲解的内容进行实战，通过案例可以使我们更加熟练的掌握jQuery Ajax。首先我们先来对这个案例的流程进行一下简要的说明。注意： ① 下面的内容注释较多因而显着内容稍乱，从而给我们的心理上造成此课较难的印象，其实这是没必要的，只要专心的看下去，本节课真的很简单。 ② 本课的服务器提交地址虽然是aspx结尾，但是【并没有因为服务器语言而对大家进行了限制，比如必须会.NET才能学习本课，因为这节内容根本没有牵扯到ASP.NET(C#)的编程。】无论你是否会服务器编程这都不限制你学习本课所讲的jQuery Ajax。 ③ 本课的案例分别有JavaEE、ASP.NET、ASP和PHP这四种不同的版本，可以方便的帮助大家学习。 1、当在登录/注册窗口中的用户名输入框中输入完毕，将判读用户名是否已经被注册。 2、用户可以点击注册，将用户名和密码写入数据库。 3、用户点击登录时则判断用户是否存在，密码是否正确，符合以上条件便可以成功登录。 4、登录成功，在页面内显示出前最新注册的13条用户记录。
以下是HTML页面中比较重要的代码
<input id="userName" type="text" />//输入框 - 用户名<input id="userPwd" type="password" />//输入框 - 密码<p id="userNameError"></p>//用户名错误提示信息<p id="userPwdError"></p>//密码错误提示信息<a id="bt_Reg" href="#"></a>//注册按钮<a id="bt_Login" href="#"></a>//登录按钮
判断用户名是否已经被注册
/** 下面的代码与案例中代码稍微有些不一样，因为没有判断用户名* 或者密码是否为空等操作，下面的代码是只要失去焦点就执行。* 当用户名点击bt_Login这个按钮的时候则异步调用执行服务器程序* 从而进行判断用户名是否已经被注册*/$("#bt_Login").click( function() { $.ajax ({ type: "POST",//使用POST方式进行提交 cache:false,//不从浏览器缓存中读取信息 url: "userServer.aspx",//待处理的页面 dataType:"json",//设置处理格式为Json data: "class=check&userName="+ $("#userName").val(),/* * 这里的键值对随便写，class=check这就是一个键值对。 * 多个键值对使用&(and符)连接 * =(等号)右边为传输的内容 * 按照平时，我们只需要传输userName即可 * 由于案例中的处理页面根据class判断类型 * 从而执行不同的操作（检测用户名/注册/登录）所以多写了一个 * classclass=check这就是一个键值对 */ beforeSend :function() {/** 提交请求中(服务器没有返回数据或正在处理信息的时候)* 我们给用户一个友好的提示*/ $("#userNameError").text("正在验证，请稍后。"); }, success: function(data) { $("#userNameError").text(data.info);/** data为一个Json对象，由服务器段创建的一段字符串，将其返回* 假如在用户名输入框中输入"CSS学习网"经过服务器的判断此用户名存在* 则拼成的字符串如下* {"info":"此用户名已经被注册",}这就是一个最简单的Json格式的字符串* $("#userNameError").text(data.info); 等同于 $("userNameError").text("此用户名已经被注册")*/ }, error: function()//当访问失败或者服务器出错，则直接提示访问数据失败。 { alert("访问数据失败！"); } }); });
由于上面的代码加了注释因而显着较乱，我们对它进行一下整理，代码如下：
$("#bt_Login").click( function() { $.ajax ({ type: "POST", cache:false, url: "userServer.aspx", dataType:"json", data: "class=check&userName="+ $("#userName").val(), beforeSend :function() { $("#userNameError").text("正在验证，请稍后。"); }, success: function(data) { $("#userNameError").text(data.info); }, error: function() { alert("访问数据失败！"); } }); });这样一看，代码是不是很简单？
由于登录与注册跟上面的检测用户名差不多，只不过传参与提交地址不一致而已，所以注册登录省略不讲，大家看案例即可。下面我们对$.getJSON(url,[data],[callback])进行实际应用，只有已经登录的用户才能显示内容。
$.getJSON( "userList.aspx?random=" + Math.random(),/** 向处理页面(userList.aspx)发送请求，对其“索要”处理结果* 按常理来说地址应该写成userList.aspx 从?问号开始(包括问号)* 根本不用写后面的随即数，由于次方法从服务器的缓存中读取内容* 【假设】数据库目前就13条数据且第13条数据是kwooshung* 第一次访问的时候获得的后13条用户也就是从1-13，最后一条是* kwooshung，这时突然又注册进来一条新的数据叫做kwoojan* 那么读取的内容就是2-14条，这才是最新的数据* 当第二次请求此页面的时候还是从【缓存中读取】，页面自然* 呈现的最新的数据还是1-13条的内容，最后一个注册的是kwooshung* 这是不对的，因为目前最后一个注册的是kwoojan* 所以url设置为不会重复的随机数，这样每次请求就是一个新URL，* 也就不会从缓存中读取信息了，从而每次读取信息都是最新的。* 如果上面的例子没有读懂，没有关系，只要记住设置随机数是为了* 防止每次读取内容都是读取缓存造成每次读取的都不是最新的数据*/ function(data) {/** 我相信很多朋友都遇到此问题，不知道如何取出多条数据* 应该怎么循环出数据。其实多条数据也很简单，只不过返回的* Json没有上面的验证用户是否被注册的Json的写法那么简单罢了* 假如有3条数据如下:* ID userName* 1 CSS学习网* 2 KwooJan* 3 KwooShung* 以上数据如果使用Json来表示便是(倒序)：* {* "userList":* [* {"id":"3","userName":"KwooShung"},* {"id":"2","userName":"KwooJan"},* {"id":"1","userName":"CSS学习网"}* ]* }* * userList、ID、userName是随便起的名字* 目前我们只需知道多条Json数据按照上面的格式如何写即可。* 看完下面的循环继续深入讲解。*/ for(var i=0; i < data.userList.length; i++) { $("#content").html ( $("#content").html() + "<li>"+ data.userList.id +"、 "+ data.userList.userName +"</li>" ); }/** 通过上面的循环我们可以看出data便是上面所写出的Json数据* userList是data中的某一组json的数据名称* 那么data.userList.length就是获取userList中有多少条数据* 我们不难看出次循环需要执行3次* 我们向ID为content的html元素中输入Html内容* * $("#content").html* (* 每次输入HTML都将原来的内容取出并与新的数据拼接字符串并输入* $("#content").html() * + "<li>"+ data.userList.id +"、* "+ data.userList.userName +"</li>"* );* * 最终HTML内容如下* <ul id="content">* <li>3、KwooShung</li>* <li>2、KwooJan</li>* <li>1、CSS学习网</li>* </ul>* */ });
上述代码整理后如下：
$.getJSON( "userList.aspx?random=" + Math.random(), function(data) { for(var i=0; i < data.userList.length; i++) { $("#content").html ( $("#content").html() + "<li>"+ data.userList.id +"、 "+ data.userList.userName +"</li>" ); } });
总结： 通过上面的讲解，KwooShung已经为大家讲解完了Ajax请求的所有内容。 至于 $.get(url,[data],[callback]) $.post(url,[data],[callback]) $.getScript(url,[callback]) 这四种请求方法与$.getJson(url,[data],[callback])的使用方法如出一辙， 而他们唯一的区别就是返回的数据不同。 使用方法已经在上节课中简单的讲解过，在此便不在做过多的讲解。本课案例：目前为大家提供了JAVAEE版本和ASP.NET版本的jQuery Ajax异步请求/调用案例。近期将会放上ASP和PHP版本，敬请期待。
提高谈吐的15条建议
【建议：真挚坦率的态度】 与他人的交往，抛开交流沟通技巧，真挚坦率的态度是一切的基础。可以不懂技巧，但真挚会令对方更好信任和接受我们。 【建议：做一个好的倾听者】 我们总是希望倾诉，希望别人倾听，我们总是话太多，既然如此，如果我们希望别人喜欢和我们说话，我们至少要先满足他人表达的意愿，那就是我认真倾听他人的谈话。越是重视他人的讲话，他人就越是愿意给我们讲。因此在社交场合，特别是自己与谈话对象身份同等和略低时，更要首先做倾听者。【建议：倾听的要领】倾听的要点是，确认在认真听和思考，并且保持眼神的交流注视以及适当给予点头或回应肯定我们确实听到了对方的表达内容。眼神交流关键是至少面带微笑注视他人的鼻子，因为对方会知道我们在看他她，但不至于是直勾勾盯着对方的眼睛会令对方不舒服。而在餐桌倾听对方说话时，就放下筷子专心听，千万别还不停夹菜扒饭，好像没吃过好东西似的，少吃几口没关系。 【建议：做好背景资料和话题准备】 如果有可能，要打有准备之战。功夫在戏外，这句话给大家的启示在与事先就做好交流对象的背景资料收集研究，特别对于对方是有身份的人。根据掌握的资料，知道对方的机构、相关新闻、喜好、精彩经历、学术事业成就和忌讳话题等等，这样我们就掌握发现更适合交流的话题，以及知道哪些话题不适合谈。如果我们无法确知交流对象，则至少要准备和熟悉社交主题相关的背景题材。最后的提醒是万一我们没有时间准备，可以利用手机上网立刻搜索相关背景信息，或者发短信给好友让他们帮查并短信我们最关键的信息。 【建议：提升自己的知识广度和储备】 人都希望通过和有内涵的人交流，令交流更富信息价值。因此自身的知识素养是必须日积月累的，平时扎实学习的同时要广泛涉猎各种领域的知识和新闻，包括科技、时政、体育、艺术、财经、民生等。我们有了知识的储备会令谈话内容更丰富和有含金量，至少别人谈的话题，我们能有共同语言的比例提高些。 【建议：避免单向鼓励互动方式交流】 既然是社交场合，不是报告会，就是让大家都可以表达观点。自己表达观点时切勿长篇大论，应该保持简洁和适当通过征询对方观点，令交流更加互动和令对方有参与感，可以让整个过程更有吸引力和收获同时印象深刻。切忌不礼貌打断对方谈话，即使自己有事情要离场或有特别话题必须提出，也应该观察合适契机提出。 【建议：平衡的谦虚和自信】 自信会令你的社交更平等和自然，然而不可以桀骜不驯，虽然对于年轻人要保持青春激情。但在社交场合我们作为后辈晚学都应该体现谦虚，可令我们更多听到宝贵的建议和指导。这里的自信更多是鼓励大家可以大方表达自己的观点。 【建议：保持尊敬和礼节及肢体语言】 没有人愿意与不尊重自己的人打交道，年轻人更应该保持虚心态度，尊重谈话对象。保持适当的社交距离，切不可凑太近或太远，要保持与对方沟通的舒适度距离，观察对方反应就可以大致判断是否合适了。谈话时的仪态应保持年轻人的挺拔阳光，不可体现松垮懈怠，适当运用自己的积极肢体语言，同时也要读懂对方的肢体暗示。有关肢体语言和社交的安全距离，可以网上搜索更多内容 【建议：适应场合和身份的着装】 对于同学们在校园范围以及学术背景的社交环境，着装的基本点至少是整洁和不夸张，除非就是去化妆舞会等需要特别服饰。正式场合，切勿运动服出场，应该正装，比如西装、套装，化妆方面女生淡妆；酒会场合可能需要更高级的礼服和浓妆。着装是个人品味和生活态度的体现，鼓励同学要懂得和提升这方面的品味。 【建议：准备好简洁的自我介绍和名片】 推销自己也很重要，基本的道具除了你的准备好的话题之外，就是应该有一个很精炼的能够给对方深刻印象和人记住你的故事；当然名片就更好的道具了，除了你要保管好对方的名片，你最好带上自己的名片。我见过用手写名片的学生，也可以；如果印盒体现自己才华和特点的学生名片，是很好的方法。如果你在某些场合给一些大人物留下良好的印象并记住你，可能对你未来的发展就是一个很好的铺垫。 【建议：牢记和你互动过的人士名字和基本信息】 记住他人的姓名永远是重要的。如果确实记不住，就老老实实带着小本子或记录在手机上，把对方的特征和关键信息和这个人对应上，令下次还能认出对方，主动称呼对方，会令对方印象深刻和感觉良好。有个小技巧就是征询对方合影，这样就有了更好的记录和资料。 【建议：忌讳粗俗主题和语言，提倡有智慧和启迪的幽默】 坚决反对任何粗俗的话题和粗口语言。能讲庸俗笑话故事不是啥光荣，是没有修养和低素质的体现。大家应该平日就积极向上，提升修养内涵。jin也喜欢幽默风趣，但都是主张富有启迪的故事和带着智慧的幽默和笑话。 【建议：观察和学习】 社交场合本身就是一个学习和提升的机会，可以见到各种类型的人士，可以从他们身上学到课堂之外课本没有的知识和技能。因此保持观察和学习的心，可以令学习和提升更多，范围不但包括资讯、人脉、表达方式，还包括举止和为人处世的态度。 【高级建议：事先的问候和事后的回访】 如果我们真有心思，应该在事先就和会谈对象沟通和表达对会晤及话题的期待。例如电邮、电话或短信给对方说盼望在￥￥￥会议见到您，可以当面请教￥￥。而在会谈后，更应该对认为重要的会谈方跟进一个问候表达这次的会谈收获，以及期待的后续接触和互动。这些都是非常专业的商务级别的方式。同学们也可以运用。 【高级建议：维护和管理人脉数据库】 机会总是留给有准备的人，平常就保持对自己人脉的积累和维护，定期维护通讯录，这就是人脉数据库了。除了联系方法和基本信息，其中还应该记录照片、相关网页、生日、什么时候沟通过什么主题、对方的喜好、家乡、学校、专业等等能够帮助我们未来沟通和工作用得上的信息。 【后记】上面的方法和建议，也只是点滴，会有不全面的地方。同学们可以在看看相关书籍有全面深度介绍，另外在网上找到更多有价值和丰富的相关题材资讯。然而，一切的努力都是为了提高自己的社交水平，因此大家的在实践中学习和灵活应用就更加重要。同学们，加
油！