jQuery 学习笔记
一、jQuery概述
宗旨: Write Less, Do More.
基础知识：
1.符号$代替document.getElementById()函数
2.使用Css+Xpath来查询页面元素
3.适当的混用jQuery、Dom和JavaScript能够提升程序的执行效率。
如：Offset、Append、Before是jQuery的瓶颈
4.函数$()是$("document").ready的简写，功能与JavaScript的Window.OnLoad=function(){}相同。
如：<Script type="text/javascript">
$( function(){
$("div").after("");
}
)
</script>
5.jQuery变量定义需要附加前缀$,以与javascript变量区分开
如：var $div = $("div")
二、比较流行的javascript技术框架
1.Dojo http://dojotoolkit.org 强大的面向对象的JavaScript框架
2.YUI http://developer.yahoo.com/yui 是yahoo user interface的简称
3.jQuery http://jquery.com
4.Mootools http://mootools.net 简洁、高效面向对象的JavaScript框架
5.Prototype http://www.prototypejs.org 易于使用、面向对象的JavaScript框架。封装并简化和扩展了一些在Web开发中常用到的JavaScript方法及Ajax处理过程
6.Script.aculo.us http://Script.aculo.us 易于使用，支持多浏览器且用于增强Prototype的JavaScript框架
7.ExtJS http://www.extjs.com 是一个跨浏览器，用于开发RIA应用的JavaScript框架
三、jQuery应用
1.连写
对于发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。
2.库导入
<Script src="jquery.js" type="text/javascript"></Script>
3.使用
如：在页面载入后弹出一个对话框
<Script type="text/javascript">
$( function(){
alert("Hello world!");
}
)
</Script>
4.jQuery对象与Dom对象是不同的。所以jQuery对象的属性方法不能被Dom对象直接调用，反之亦然。
jQuery是一组相同Dom对象的数组。将jQuery对象转换为Dom对象，可以：
1>使用数组下标
$( function(){
var $li = $("li");
var li = $li[0];
alert(li.innerHtml);
}
)
2>使用jQuery对象的Get()方法,传递一个索引值
$( function(){
var $li = $("li");
var li = $li.get(0);
alert(li.innerHtml);
}
)
将一个Dom对象转为jQuery对象:
1>直接使用$()函数
$( function(){
var li = document.getElementById("li");
var $li = $( li[0] );
alert($li.html());
}
)
2>直接把Dom数组传递给$()
$( function(){
var li = document.getElementById("li");
var $li = $( li );
alert($li.html());
}
)
注：jQuery是一个类数组，而不数组类型的数据。
5.jQuery.ready与window.Load比较
1>Load在网页中所有元素加载完才会执行。可能会出现的情况是网页已显示出来，但一部分音频文件未加载完，所以Load事件这里也不执行。
ready事件在Dom绘制完毕后执行。这时即使有未加载完的音频也会执行。
ready先于Load执行。只有在网页没有外部文件需要加载的情况下近乎同时执行。
2>Load只会影响最后一次的事件处理过程
如：Window.onLoad = function (){
alert("1");
}
Window.onLoad = function (){
alert("2");
}
只有"2"的处理过程被执行
而，jQuery的ready可被多次执行
$( function(){
alert("1");
}
)
$( function(){
alert("2");
}
)
这样有利于复杂的初始化操作。
四、jQuery核心
1.构造函数
jQuery把所有的操作都封装到jQuery()函数中,形成了唯一的入口。其参数为
1>jQuery(expression,context)
expression可以是ID,Dom元素名,CSS表达式或Xpath表达式。jQuery将根据此值匹配文档中的元素，然后把找到的元素封装到jQuery对象并返回。
如： $(div#wrap>p:first).addClass("red"); //CSS表达式
context 上下文.指定在文档DOM中的哪个节点开始进行查询。默认为document
2>jQuery(html)
html表示一个html结构字符串。
如：$("ul").append($("<li>new item</li>"));
3>jQuery(element)
element是一个Dom对象
如：$(document).ready( function(){
...;
}
);
4>jQuery(fn)
fn表示一个处理函数。
如：$( function(){
...;
}
);
2.链式语法,即一些函数的返回值仍为jQuery对象本身。
如：$("input[type='button']").eq(0).click( function(){
alert('Button clicked.');
}
).end();
end()函数取消当前的jQuery对象,返回前面的jQuery对象。(jQuery是类数组，或集合)
注：1>在同一个jQuery对象上执行不超过3个方法，可以写在同一行。
2>如果在同一个jQuery上执行很多操作，则应该分行。
3>代码缩进
3.jQuery选择器
支持ID、tagName、CSS1~3表达式及Xpath表达式。见：http://docs.jquery.com/Selectors。自定义的过滤方法
jQuery支持 选择 和 过滤
1.过滤
* 表示从全部"*"元素中筛选
如：$(":[title]") 等同于 $("*:[title]")
2.选择功能没有默认范围。
$( function(){
$("input[type='button']").click( function(){
var i = 0;
//下面的匹配所有的输入框
$("input[type='text']").each( function(){
i += parseInt( $(this).val() );
}
)
}
);
示例中：为按钮添加了一个事件。$(this)表示当前选择的文本框，或当前jQuery对象。
4.jQuery扩展
五、jQuery操作
1.操作内家
1>属性
attribute、class、style等，jQuery扩展属性，缓存数据、expando的自定义属性
2>元素
元素的创建、添加、被加、移动、复制、删除
3>内容
html()
4>样式
height、width、innerHeight...
5>事件
AddEvent、removeEnent、domready等
6>通信
Ajax
7>
六、jQuery原型
JavaScript中的原型对象(以下为示例，有错误。)
JavaScript通过为所有函数绑定一个prototype属性用来指向一个原型对象。此原型对象可以定义类继承、属性和方法
<Script >
var jQuery = function(){
jQuery.prototype = {//扩展的原型对象
}
}
</script>
更安全的作法是，定义一个属性
<Script >
var jQuery.fn = jQuery.prototype = {//扩展的原型对象
}
</script>
这里的jQuery.fn相当于jQuery.prototpye的别名。那么
var $ = jQuery = function(){}
给jQuery添加两个成员
var $ = jQuery = function (){
jQuery.fn = jQuery.prototype = {
jquery: "1.2.3", //原型属性
size: function(){ //原型方法
return this.length;
}
}
}
调用方法：
正常调用方法为：
var my$ = new $();//实例化
alert( my$.jquery );
alert( my$.size() );
但jQuery却如下：
$().jquery;
$().size();
即，jQuery没有使用new运算符将jQuery类实例化。实际在浏览器使用这段代码会报错。没有实例化，那么
var $ = jQuery = function(){
return new jQuery();
}
然而，仍然会报错，堆栈溢出。说明有死循环。那么：
使用一个工厂方法来创建一个实例，并把它放到prototype原型对象中，然后在构造函数中返回这个调用。
var $ = jQuery = function() {
return jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
init: function(){
return this;
},
jquery:"1.2.4",
size: function(){
return this.length;
}
}
以上示例还是有错误，它并没有实例化jQuery，那么要如何做？
七、jQuery的函数,都有两个功能，取值与赋值
1.html()
若参数不为空，则先清空匹配元素的内容，然后调用append()插入内容。
若为空，则返回第一个匹配的元素的hmtl源码
2.extend() 用于扩展
八、名字空间
在JavaScript中
var jQuery = function(){};
jQuery = function(){};
都是合法的。但第一句表示声明一个变量,而第二句表示定义Window对象的一个属性。它相当于Window.jQuery = function(){};
若需要隔离代码，即你的代码不希望被别的代码随意访问，且不愿意暴露内部实现，这时需要使用匿名函数(闭包).
如：
( function (){
function f1(){
return "This is f1.";
}
}
)();
noConfilit()方法，实现禁止jQuery使用$与jQuery变量，而用临时变量_$ 与 _jQuery 代替
九、61 ~ 64 页Init()构造器函数中6种处理情况!!!!
1.
十、选择器
由于jQuery返回的是一个类数组，所以判断jQuery是否为空的方法应该为
if ( $("xxx").length > 0 )
{
...
}
1.简单选择器
1>选择指定ID的元素,使用 # + Id 的字符串表示
JavaScript: document.getElementById(ID)
jQuery: $("#ID")
在效率上jQuery要比JavaScript慢，所以,可以通过将JavaScript的原生方法传递给$的方式进行混用
例：
<批量操作一例：>
通过ID来获取Dom对象并存入数组
var arr = [];
var $ = document.getElementById;//临时把JavaScript的原生方法传递给$
for (var i = 0;i < 1000; i++)
{
var item = $("#span" + i);
arr.push(item);
}
$ = jQuery;//恢复$的默认值
jQuery转义操作
选择器中有特殊字符，需要转义。原因：jQuery使用正则表达式进行字符串匹配
如：. : [ ]
转义方法为使用 \\
则：\\. \\: \\[ \\]
2>选择指定类型的元素
JavaScript: document.getElementByTagName(Tag)
jQuery: $("Tag")
在效率上依然慢于JavaScript,可采用混用的方式解决。
3>选择指定"类"的元素,使用 . + 类名 的字符串表示
JavaScript中没有类选择的方法，但可以扩展(在Dom3版本中已有此方法)
document.getElementByClassName = function(className) {
var el = [];
_el = document.getElementByTagName('*');//获取所有元素
for (var i = 0 ;i < _el.length; i++)
{
if (_el[i].className == className )
el[el.length] = _el[i];
}
return el;
}
jQuery: $(".className")
如: $(".red") 与 document.getElementByClassName("red")功能相同
4>选择所有元素及优化,使用 *
$("body *) 表示选择body下的所有元素
例：
$( function()
{
var all = document.getElementByTagName("*");
$(all).css("color","red");
}
与
$("body *).css("color","red"); 结果相同,效率也相同
5>多选,使用 , 分隔不同的选择器表达式
$("h2,#wrap,span.red,[title='text'].css("color","red");
2.关系选择器.文档节点之间的包含与并列关系
1>层级选择器
<1>$("ancestor descendant") 在给定的"ancestor"选择器下匹配所有的"descendant"选择器
<2>$("parent > child") 在给定的"父"选择器下匹配所有的"child"选择器
<3>$("prev + Next") 匹配所有紧跟在"prev"选择器后的所有"Next"选择器
<4>$("prev ~ Siblings") 匹配"prev"选择器这后的所有"siblings"的选择器
示例：
$("div").css("border","solid 1px red"); //文档中所有的div
$("div>div").css(....); //文档中所有的div的子div,若div(第二个表达式)没有子div，则跳过
$("div div").css(....); //文档中所有的div下的div，即使div(第二个表达式)没有子div。
$("div div div").css(....); //文档中第三层的div,这个div必须能向上有两层。
$("div + p").css(....); //文档中紧跟在div后面的p
$("div:eq(1) ~ p").css(....); //文档如div同级相邻的p
2>子元素选择器
<1>:nth-child 匹配父元素下的第N个子(或奇偶)元素。索引从１开始
<2>:first-child 匹配第一个子元素。:first只匹配一个元素;:first-child为每个父元素匹配一个子元素
<3>:last-child 匹配最后一个元素。:last与:last-child区别同上。
<4>:only-child 若某元素是父元素的唯一元素，则会被匹配。否则不会被匹配
示例：
:nth-child(even); 匹配偶数位元素
:nth-child(odd); 匹配奇数位元素
:nth-child(2); 匹配第2个元素
:nth-child(3n); 匹配第3个元素及后面间隔3的所有元素
:nth-child(3n+1); 匹配第1个元素及后面间隔3的所有元素
:nth-child(3n+2); 匹配第2个元素及后面间隔3的所有元素
$("ul li:first-child").css(...);
$("ul li:last-child").css(...);
$("ul li:nth-child(1)").css(...);
$("ul li:nth-child(2n)").css(...);
3.过滤选择器
1>定位过滤器
<1>:first 匹配找到的第一个元素，只一个。
<2>:last 匹配找到的最后一个元素，只一个。
<3>:not 取反，如：:not(div a)
<4>:even 匹配索引值为偶数的元素。从0开始
<5>:odd 奇数
<6>:eq 匹配一个给定索引值的元素，从0开始。如：$("tr:eq(1)") 匹配第二行表格
<7>:gt 匹配所有大于给定的索引值的元素，从0开始。$("tr:gt(1)") 匹配第三行及以后行
<8>:lt 小于
<9>:header 匹配如 h1, h2 ,h3 之类的标题元素
<10>:animated 匹配所有正在执行动画效果的元素
2>内容过滤器。根据匹配元素所包含的子元素或文本内容进行过滤。
<1>:contains 匹配包含给一文本的元素,如：$("div:contains('图片')")
<2>:empty 匹配不含子元素或空文本的元素。
<3>:has 匹配含有指定选择器元素的上xxx级元素。如：$("div:has(p)"); 匹配含有选择器p的div元素
<4>:parent 匹配有子元素或非空文本内容的元素
示例：
$("li:empty").text("空内容");//匹配空的li元素，并将其值设为"空内容"。
$("div ul:parent").css(....);//匹配div下有子元素或非空文本的ul ??
$("h2:contains('标题')").css(....);//匹配含有"标题"的h2元素
$("p:has(span)").css(....);//匹配含有span元素的p元素
3>可见过滤器。根据元素的可见或隐藏进行匹配。通过判断CSS属性的offsetWidth或offsetHeight，只要不为0则visible为真。
<1>:hidden 匹配所有不可见元素,或type为hidden的元素
<2>:visible 匹配所有可见元素
示例：
$("p:odd").hide();//隐藏奇数位的p元素。
$("p:hidden").show();//将奇数位的p元素显示出来
4.属性选择器。把元素的属性及其值作为过滤条件。使用 [ ]作为定界符。
1>[attribute] 匹配指定属性的元素。如：$("div[id]");匹配具有id属性的div
2>[attribute=value] 匹配指定属性及属性值的元素。 $("div[name='text']"); 若value中含有"]"，那需要使用引号以避免冲突
3>[attribute=!value] 匹配属性值不为(或含有)value的元素。与 :not([attribute=value])功能相同。若匹配含有某属性，但值不为value的元素，则[att]:not([att=value])。
4>[attribute^=value] 匹配属性值以value开始的元素。如：$("input[name^='text']");匹配name以text开始的input
5>[attribute$=value] .................结束.......
6>[attribute*=value] ..........包含value.........如：$("input[name*='test']");匹配name中含有text的input
7>[selecctor1][selecctor2][selecctorN] 复合属性选择器，匹配满足多个条件的元素。如：$("input[name*='text'][id]");匹配name含有text，且具有id属性的input
5.表单选择器
1>简单表单域选择器
<1>:input 匹配所有的input、textarea、select、button元素
<2>:text 匹配所有的文本框
<3>:password 匹配所有的密码框
<4>:radio 匹配所有的单选框
<5>:checkbox 匹配所有的复选框
<6>:submit 匹配所有的提交按钮
<7>:image 匹配所有的图像域
<8>:reset 匹配所有的重置按钮
<9>:button 匹配所有的按钮
<10>:file 匹配所有的文本域
<11>:hidden 匹配所有的不可见元素，或type为hidden的元素。
示例：
<form id="testForm" action="" method="get">
<input name="" type="text" value="文本框"><br/>
<input name="" type="password" value="密码框"><br/>
<input name="" type="file" value="文件">
</form>
$("#testForm :text").val("这里是修改的内容"); //修改表单Id为testForm的文本框的内容为"这里是修改的内容"
$("#testForm :file).val("f:\tmp\122.txt"); //修改表单Id为testForm的文件浏览框的文件名为"f:\tmp\122.txt"
2>表单属性选择器
<1>:enabled 匹配所有可用元素
<2>:disabled ........不......
<3>:checked 匹配所有选中的元素(复选框，单选框，但不包含sselect中的option)
<4>:selected 匹配所有选中的option元素
示例：
<form id="test">
<input type="text" disabled="disabled" value="文本框"><br/>
<input type="checkbox" checked="checked" value="复选框"><br/>
<select name="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
</select>
</form>
$("#test :disabled").val("不可用"); //修改文本内容
$("#test :checked").removeAttr("checked"); //去掉选中
$("#test :selected").removeAttr("selected"); //去掉第三项选中
3>表单取值与赋值使用 val()，否则无法正确读取值。
var psw = encodeURIComponent($("#IdPsw").val());
十一、DOM操作
1.添加节点，效率上不相上下，使用firefox，jQuery要快于JavaScript
1>JavaScript
$( function()
{
var t1 = new Date();
var body = document.getElementsByTagName("body")[0];
for(var i =0; i < 5000 ;i++)
{
var span = document.createElement("span");
span.setAttribute("class","red");
body.appendChild(span);
}
var t2 = new Date();
$("#result").html("添加5000个span用时:" + (t2-t1));
}
)
2>jQuery
$( function()
{
var t1 = new Date();
for (var i = 0;i<5000;i++)
{
var $span = $("<span/>");
$span.attr("class","red");
$("body").append($span);
/*
注：在效率上使用
$("body").append("<span class='red' />");
要快,大约2到3倍
*/
}
var t2 = new Date();
$("#result").html("添加5000个span用时:" + (t2-t1));
}
)
2.添加文本节点
var $h1 = $("<h1>标题，这个是</h1>");
$("body").add($h1);
3.添加属性
$span.attr("class","red");
或
var $span = $("<span class='red'/>");
4.添加元素
1>append 在末尾追加。添加后成为最后一个
2>appendTo
3>prepend 在开始追加。添加后成为第一个
4>prependTo
5>after 在每个匹配元素后插入。如 ：$("div").after("<p>一段文本</p>");
6>before ..............前....
7>insertAfter 如：$("<p>一段文本</p>").insertAfter("div");
8>insertBefore
5.删除元素
1>remove() 如：$("p").remove();
2>empty()
6.复制元素
1>clone() 如；var $div = $("div").clone();若使用clone(true)则同时会复制目标元素的事件
7.元素替换
1>replaceWith() 如：$("p").replaceWith("<div>替换</div>");
2>replaceAll()
8.包裹(加壳)元素
1>A.wrap(B) 用元素Ｂ包裹元素Ａ。如：$("p").wrap("<span class='wrap' />");在p元素外加一层span，这里每一个p都会有一个span
2>wrapAll() 用元素Ｂ包裹全部元素Ａ。如：$("p").wrapAll("<span class='wrap' />");则在新增元素span下有(连续)若干原有的p元素
3>wrapInner() 元素B将包裹在每个元素Ａ里。与1>刚好相反。
9.属性操作
1>attr()
<1>设置属性 如：$("img").attr( { src:"1.jpg" , alt:"测试图像"); $("p").attr("title","文本");
<2>获取属性 如：$("p").attr("title"); 若没有此属性则返回 undefined.
<3>删除属性 removeAttr() 如：$("p").removeAttr("title");
10.类样式
1>追加样式 addClass()。 如：$("p").addClass("style1");
2>删除样式 removeClass()。 如：$("p").removeClass("style1");
3>切换样式 toggleClass(styleName ,[选项])。如果第二个参数不存在，如果目标元素中的样式不存在，则追加，如果存在，则删除样式。如：$("p").toggleClass("hidden",n++ % 3== 0);//每三次切换一次样式
4>样式判断 hasClass()。 如 $("p").hasClass("style1"); 返回true或false
11.操作Html、文本与值
1>读写Html，html()。此方法是对Dom的innerHtml的封装
如：var $html = $("p").html();
$("p").html($html);
2>读写文本，text()。用法同上。
3>读写表单值，val()。用法同上。
示例：
<form>
<select id="s1">
<option value="1" selected="selected">单选1</option>
<option value="2" >单选2</option>
</select>
<select id="s2" multiple="multiple">
<option value="1" selected="selected">单选1</option>
<option value="2" >单选2</option>
<option value="3" >单选3</option>
</select>
<input type="checkbox" value="6">复选框</input>
<input type="radio" value="8">单选框</input>
</form>
$("#s1").val("单选2");
$("s2").val(["多选2","多选3"]);
$("input").val(["6","8"]);
12.读写样式,css() 第169页
13.偏移位置
1>绝对偏移位置 offset()方法返回元素在当前窗口的相对位置。返回值为一个对象，包含top与left属性。仅对可见元素有效。
2>相对偏移位置 position()方法。用法同上。
注：
相对偏移位置是元素相对于距离最近的父级定位元素左上角的距离。
<1>定位元素，就是被定义了 相对(),绝对(),固定()定位的元素，即设置了CSS的position为absolute,fixed或relative。
<2>最近的父级定位元素是指元素的父级的position被定义为<1>中的值。若父级中没有定义position的三个属性值，那么父级要再向上追溯，直到body
14.元素的高和宽
1>width()
2>height()
3>innerHeight() //返回元素的内部高
4>innerWidth() //..............宽
5>outerHeight() //返回元素的总高
6>outerWidth() //............宽
15.元素遍历
1>children() //子元素。如：$("body").children().eq(2).children()[0];
2>next() //相邻的下一个(同级)
3>prev() //......上.........
4>parent() //父元素
十二、事件
1.注册与注销
addEventListener()、removeEventListener()及arguments.callee
事件层级向上冒泡直到document,
attachEvent()、detachEvent()
事件冒泡的中上，2级事件模型使用stopPropageagtion(),而Ie中使用Event的ancelBubble属性。
2.jQuery事件模型
1>特征如下：
<1>统一了事件处理中的各种方法
<2>允许在每个元素上为每个事件建立多个处理程序
<3>采用2级事件模型中标准的事件类型名称
<4>统一了Event对象的传递方法，并对Event对象的常用属性和方法进行规范
<5>为事件管理和操作提供统一的方法
2>事件绑定
<1>bind(type,[data],fn)
type: 事件类型
data: 可选,做为event.data属性值传递给事件处理对象的数据对象
fn: 事件处理函数
示例：
$("p").bind("click",function()
{
alert($(this).text());//这里$(this)取当前对象
}
)
或
$("p").bing( "click",
{a:"A:,b:"B"},
function(event)
{
$(this).text(event.data.a + event.data.b);//传递数据
/*如果想取消事件类型的默认行为且阻止事件冒泡则可以
return false;
或
event.preventDefault();
若使用
event.stopPropagation();则只阻止一个事件冒泡。*/
}
)
<2>特定类型事件绑定处理程序
1)blur()
2)focus()
3)mousedown()
4)resize()
5)change()
6)keydown()
7)mousemove()
8)scroll()
9)click()
10)keypress()
11)mouseout()
12)select()
13)dblclick()
14)keyup()
15)mouseover()
16)submit)
17)error()
18)load()
19)mouseup()
20)unload()
<3>一次性绑定 one()。绑定的事件在执行一次后就失效。用法与bind相同
如：$("p").one("click",function(){....});
<4>注销事件,unbind()方法。能够从每一个匹配元素中删除绑定的事件。如果没有指定参数，则删除所有绑定的事件。
$("p").unbind();
或
$("p").unbind("mouseover");
多绑定的删除
$("p").mouseover(f);
$("p").mouseover(e);
function f()
{.....}
function e()
{.....}
$("p").unbind("mouseover",e);//删除绑定的事件 e
<5>jQuery的事件模型中Event对象的属性
1)type 事件类型,返回事件名称
2)target 事件发生的节点,获取激活事件的对象
3)relatedTarget 相关节点。事件激活时的前一个节点
4)altKey 是否按下alt键。是为true
5)ctrlKey
6)shiftKey
7)metaKey 是否按下meta键
8)which 在mousedown,mouseup,click时哪个键改变了状态。1=左,2=中,3=右
9)which 在keydown,keypress时键盘的数字编码
10)pageX 光标相对于页面原点的水平坐标
11)pageY ....................垂直....
12)screenX ..........屏幕......水平....
13)screenY ....................垂直....
14)data 传递的数据
15)preventDefault() 取消可能引起任何语义操作的事件
16)stopPropagation() 防止事件沿着Dom数据向上传播
<6>jQuery事件的触发
1)trigger(type ,[data]),会触发浏览器默认行为，可以使用return false或 15) 16)方法进行阻止。
type: 事件类型，以字符串表示
data: 传递的数据。与bind相同。
如：
$("p").click( function(){.... return false;} );//return false阻止事件冒泡的传播
$("p").mouseover( function()
{
$(this).trigger("click");//在鼠标移动时触发click事件
}
);
2)triggerHandler(type,[data]) 与trigger相似。不同之处有：
(1)不会触发浏览器默认行为。
(2)只触发jQuery对象集合同第一个元素的事件处理过程。即jQuery对象集合中除第一个之外的其它元素的事件不会被触发。
(3)返回值为事件处理函数的返回值，则不是jQuery对象。若开始的jQuery对象集合为空，则返回 undefined。
3)其它触发方法
(1)blur() 失去焦点
(2)change()
(3)click()
(4)dblclick()
(5)error()
(6)focus()
(7)keydown()
(8)keyup()
(9)keypress()
(10)select()
(11)submit()
示例：
$("p").click();
<7>jQuery事件切换
1)toggle()
可以为click事件类型绑定多个事件处理函数，并确保每次单击后顺序依次调用不同的函数。这与直接为click事件绑定两个函数功能不同。
$("input").toggle( function()
{this.value="第一次单击";},//注：这里使用的是this
function()
{this.value="第二次单击";},
function()
{this.value="第三次单击";}
)
若同时给click绑定其它的事件，则也会被同时执行。
问：this 与 $(this) 在什么时候使用？如何区分？
2)hover(fnMouseOver,fnMouseOut)。模拟鼠标悬停事件。可用此函数取代MouseOver与MouseOut函数
fnMouseOver 鼠标移动到元素上要触发的函数
fnMouseOut 鼠标移出元素要触发的函数
$("input").hover(
function()
{...鼠标移过...},
function()
{...鼠标移出...}
)
<8>事件委派
1)live(type,fn)
能够给所有当前以及未来匹配的元素绑定一个事件处理函数。
示例：当前页面的p元素以及以后新增加的p元素都会有一个click方法。
$("p").live("click", function()
{....;}
)
live()只支持绑定一个事件处理函数。且事件冒泡行为与传统方式不同。如果内外元素都用live事件绑定，则可以使用return false阻止。或外部为普通绑定，内部为live绑定，则不能通过return false来阻止。
2)die(type)
删除live()的绑定事件。
$("p").die("click");
若不带参数，则删除所有的事件绑定
$("p").die();
若指定第二个参数，则删除指定的事件处理函数
$("p").die("click",e);
<9>jQuery事件命名空间(catalog?分类)
使用 .XXX 的形式表示
示例：
$("div").bind("click.a", function(){});
$("div").bind("dblclick.a", function(){});
$("div").bind("mouseover.a", function(){});
$("div").bind("mouseout.a", function(){});
$("div").bind("keydown.b", function(){});
若删除同一分类的事件，则
$("p").unbind(".a");
此时 keydown.b 是不会删除的。
另外，使用trigger()时附加了感叹号 ! ，则表示不触发有分类的事件。
如：
$("div").bind("click",function(){});
$("div").bind("click.a",function(){});
$("div").trigger("click!");//将不会触发click.a的事件处理函数
<10>jQuery多事件绑定
1)分开写绑定过程
$("div").bind("click",function(){});
$("div").bind("click.a",function(){});
2)连写绑定过程
$("div").bind( "click",function(){} ).bind("click.a",function(){});
3)多事件对应同一事件处理函数
$("div").bind("mouseover mouseout", function(event){...} );//同时绑定mouseover与mouseout到同一处理过程。
<11>jQuery自定义事件
如：事件名称： delay
处理函数: function(){}
$("input").bind("delay",function(event)
{
setTimeout( function()
{...},
1000
);
}
)
3>ready事件，初始化
可用于每一个jQuery对象。jQuery允许在文档中无限次使用ready事件，但不能同时使用JavaScript的load事件。若使用了load事件，那么ready事件将不会被触发。
ready事件在Dom完全就绪时就可以被触发。此时文档元素全部可以被访问，即浏览器下载完源码并解析html后。但是，一些资源可能没有被下载，如：图像。这时无法访问图像的属性，如width,height。
那么可以使用jQuery的load方法。此方法与JavaScript的load方法功能相同。
$(window).load( function(){} );
4>使用JavaScript自定义addLoadEvent()方法，模拟window.OnLoad()
function addLoadEvent(fn)
{
var oldOnLoad = window.onload;//保存句柄
if ( typeof window.onload != 'function')
{
window.onload = fn;
}
else
{
window.onload = function()
{
oldOnLoad();
fn();
}
}
}
使用方法：
addLoadEvent(function(){...});
addLoadEvent(function(){....});
十三、元素的显示、隐藏及动画
1.hide() 隐藏元素
$("div").hide();
2.show() 显示元素
$("div").show();
3.toggle() 可以切换元素显示与隐藏
$("div").toggle();
4.slideDown() 滑动显示,将隐藏的元素滑动显示出来。
$("div").slideDown();
5.slideUp() 滑动隐藏。
$("div").slideUp();
6.slideToggle() 滑动隐藏与显示切换
$("div").slideToggle();
7.fadeIn() 渐显。只用于隐藏的元素。
$("div").fadeIn(2000);
8.fadeOut() 渐隐。由"显示"状态改变透明度直接"隐藏"。只用到显示的元素。
$("div").fadeOut(2000);
9.fadeTo() 改变透明度。
$("div").fadeTo(2000,0.4);
10.fadeToggle 切换
$("div").fadeToggle(2000);
11.animate() 动画显示,参数中的属性必须是驼峰命名法。
$("img").animate( {
width:"100%",
height:"100%",
},
1000
);
12.stop() 停止动画
$("img").stop();
13.off 属性，跳过动画显示的过程，直接到最终效果。
jQuery.fx.off = true;
或
$.fx.off = true;
十四、Ajax
1.get(url[,data] [,callBack] [,dataType])方法
url 请求的url地址
data 一个对象结构的键/值对列表
callback 请求成功后的回调函数
datatype 返回的数据格式，如：xml、html、script、json、text、_default
示例：
1>字符串组装
$( function()
{
$("#ValideId").click( function()
{
var name = encodeURIComponent($("#Vid :text").val());
var psw = encodeURIComponent($("#IdPsw").val());
$("#IdA").html(name);
$("#IdB").html(psw);
$.get("test2.asp?name=" + name + "&psw=" + psw, function(data)
{
$("#ValideIdResult").html(data);
}
)
}
)
}
)
2>传递对象结构
$( function()
{
$("#ValideId").click( function()
{
var _name = encodeURIComponent($("#Vid :text").val());
var _psw = encodeURIComponent($("#IdPsw").val());
$("#IdA").html(_name);
$("#IdB").html(_psw);
$.get("test2.asp",
{
name : _name,
psw : _psw
},
function(data)
{
$("#ValideIdResult").html(data);
}
)
}
)
}
)
2.getJSON() 与 getScript()
getJSON请求 json 数据
getScript请求 Script 文件。
3.post() 用法与get()相同
4.ajax()
1>ajax()只有一个参数，表示列表结构的对象。
如：
ajax({
type : "GET",
url : "test.js",
dataType : "script"
}
);
2>参数列表：
<1>async 是否异步.默认true
<2>beforeSend 发送请求前的函数
<3>cache 是否设置缓存，默认True
<4>complete 请求完成后的回调函数
<5>....见 280页
3>ajax状态
<1>ajaxStart() 请求时响应
<2>ajaxSend() 发送前响应
<3>ajaxComplete() 完成请求时响应
<4>ajaxSuccess() 请求成功时响应
<5>ajaxStop() 请求结束时响应
<6>ajaxError() 请求发生错误时响应
例：
$("div").ajaxStart( function()
{
alert("Ajax请求开始。");
}
)
事件中的默认参数
<1>event 事件类型
<2>request 请求信息
<3>settings 设置的选项信息
<4>ajaxError的四个参数 event、XMLHttpRequest、ajaxOption、thrownError。前三个与前面相同，最后一个表示抛出的错误。
4>load()方法。能把加载的网页文件附加到指定的标签中。
例：
$( function()
{
$("#btnLoad").click( function()
{
$("#loadInner").load("testInner.html");
}
)
}
)
可以使用ajax来代替。因为load()是ajax来实现的。
$( function()
{
$("#btnLoad2").click( function()
{
var htmlSrc = $.ajax( {
url : "testInner.html",
async : false
}
).responseText;
$("#loadInner").html(htmlSrc);
}
)
}
)
5.ajaxSetup() 预设选项
与ajax()的参数选项相同，并实现全局共享。
如：
$.ajaxSetup(
{
url : "test6.asp",
global : false,
type : "POST:,
dataType : "text"
}
)
$("input").eq(0).click( function()
{
$.ajax(
{
data : "name=zhu"
}
);
}
)
6.对字符串参数的处理
1>serialize() 能将form中的元素按 元素id=元素值&元素id=元素值...的形式组成字符串。
例：$("#serialize").html($("form").serialize());
2>serializeArray() 与1>相似的 json格式的JSON对象。此方法不能作用于form，而只能作用于表单中的域。
例：var jsonArr = $("input,select,:radio").serializeArray(); //解出这个对象数组
var str = "";
var $json = $(jsonArr);//转换
for(var i=0;i< $json.length ;i++)
{
str += $json[i]["name"] + " : " + $json[i]["value"] + "<br/>";
}
$("#serialize").html(str);
十五、jQuery插件扩展
1.jQuery.extend() 能够创建全局函数或选择器
示例：
$.extend(
{
min : function(a,b)
{
return a<b?a:b;
},
max : function(a,b)
{
return a>b?a:b;
}
}
)
调用
$.min(1,2);
$.max(1,2);
P311页