[转] jQuery零基础学习笔记
jQuery零基础学习笔记（一）
Q：如何添加jQuery库？
A：两种方式。
第一种，从jQuery.com网站上下载名为jQuery.js的库函数到本地，再加载，如下：
<head> <script type="text/javascript" src="jquery.js"></script> </head>
第二种，不用在本地存放jQuery库，而是加载google和Microsoft的jQuery的核心文件，如下：
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> </head> <head> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script> </head>
Q：jQuery有哪些重要语法？
A：基础语法是：$(selector).action()
美元符号定义 jQuery 选择符；
（selector）“查询”和“查找” HTML 元素 ，可以选择html元素，id，class以及标签等；
action() 是用来对获取的元素执行操作；
Q：(selector)选择器如何进行元素选择？
A：举例说明
$("this") 获取当前html元素
$("#test") 获取id=test的第一个元素
$(".test") 获取所有class=test的元素
$("p") 获取所有段落<p></p>
$("p.test") 获取所有class=test的段落
$("ul li:first") 获取每个 <ul> 的第一个 <li> 元素
$("[href]") 获取所有带有href属性的元素
$("[href$='.jpg']") 获取所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#test.test") 获取id="test" 的 <div> 元素中的所有 class="test" 的元素
$("p").css("background-color","red") 将所有 段落 的背景颜色更改为红色
jQuery零基础学习笔记（二）
Q:$操作符是一定的吗？
A:当有冲突时，可以定义其他操作符。
有些javascript库中的函数会用到$符号，比如说Prototype。这时为了避免冲突就要用其他字符来替代$.
jQuery 通过调用 noConflict() 方法来重新定义"$"解决该问题，具体使用如下：
var test=jQuery.noConflict(); test(document).ready(function(){ test("button").click(function(){ test("p").hide(); }); });
Q：jQuery有哪些事件？
A：很多，常用的jQuery事件：
$(document).ready(function)
$(selector).click(function)
$(selector).dblclick(function)
$(selector).focus(function)
$(selector).mouseover(function)
$(selector).attr()
$(selector).change()
更多请查看jQuery事件
Q：jQuery可以产生哪些效果？
A：常用的jQuery效果如下：
jQuery 可以创建隐藏、显示、切换、滑动以及自定义动画等效果。
$(selector).hide()
$(selector).show()
$(selector).toggle()
$(selector).slideDown()
$(selector).slideUp()
$(selector).slideToggle()
$(selector).fadeIn()
$(selector).fadeOut()
$(selector).fadeTo()
$(selector).animate()
PS:需要注意，在使用animate对对象进行移动时，需要先将元素的position属性设置为relative 或 absolute。因为HTML 元素默认是静态定位，且无法移动。
hide(),show(),slideup()等效果方法都有callback参数，即执行完效果后调用该方法。
jQuery零基础学习笔记（三）一句话事件
bind()——为被选元素添加一个或多个事件，及发生时的运行函数
live()——为被选元素添加一个或多个事件，及发生时的运行函数，可以使用die()方法使其失效
die()——使live()添加的事件失效
blur()——当元素失去焦点时发生此事件
change()——适用于text类型，当数值变化时发生
click()——单击时
dblclick()——双击时
delegate()——为被选元素添加多个事件，及这些事件发生时的处理函数
error()——遇到错误，即载入失败时发生
event.isDefaultPrevented()——返回是否调用了preventedDefault()方法
event.pageX() ——鼠标指针相对于文档的左边缘的位置
event.pageY()——鼠标指针相对于文档的上边缘的位置
event.preventDefault()——阻止事件发生
event.result——event最后一次的返回值
event.target——显示具体的触发事件的dom元素
event.timeStamp——返回距离1970101的时间
event.type——返回触发事件的类型
event.which——返回输入值的键位
focus()——获取焦点
keydown() ——按下按键时
keyup()——松开按键时
keypress()——与 keydown 事件类似，……
load()——当指定的元素（img）加载完发生事件
mousedown()——按下鼠标时发生事件
mouseenter()——鼠标指针进入元素时发生事件（进入被选元素）
mouseleave()——鼠标指针离开元素时发生事件（离开被选元素）
mousemove()——鼠标指针在元素中移动时发生事件
mouseout()——鼠标从元素上移开时发生事件（不论鼠标指针离开被选元素还是任何子元素）
mouseover()——鼠标位于元素上方时发生事件（不论鼠标指针穿过被选元素或其子元素）
mouseup()——松开鼠标时发生事件
one()——定义一个或多个事件及方法，但只能调用一次
ready()——文档就绪
resize()——浏览器窗口大小修改时发生事件
scroll()——滚动指定元素时发生事件
select()——当文本被选择时发生事件
submit()——表单提交时
toggle()——绑定多个函数，响应轮流的click事件
trigger()——触发被选元素的指定事件类型
triggerHandler()——与 trigger() 方法类似。不同的是它不会触发事件（比如表单提交）的默认行为，而且只影响第一个匹配元素。
unbind()——移除被选元素的事件处理程序。
undelegate() ——删除由 delegate() 方法添加的一个或多个事件处理程序。
unload()——当用户离开页面时，发生 unload 事件。
jQuery零基础学习笔记（四）一句话效果
animate() ——通过css自定义动画
clearQueue() ——停止所有队列中还在排队的函数，且只适用于动画
delay()——对排队函数设定延迟
dequeue()——运行被选元素的下一个排队函数
fadeIn()——淡入
fadeOut()——淡出
fadeTo()——透明度变成××%
hide()——被选元素隐藏
queue()——被选元素的排队函数显示
show()——被选元素出现
slideDown()——下拉显示
slideToggle()——下拉显示或上升隐藏
slideUp()——上升隐藏
stop()——停止当前正在进行的动画
toggle()——隐藏或显示
jQuery零基础学习笔记（五）一些文档处理的方法
1.append()和appendTo()
$("p").append("<b>123</b>");
是指将"<b>123</b>"追加到所有的<p>中。
$("p").appendTo("div");
是指将所有匹配到的<p>元素追加到<div>元素中。
2.prepend和prependTo()
与append()类似只是加到匹配元素的前端。
3.after()和before()
前者是追加到匹配元素的后面，即匹配元素外。后者是添加到匹配元素的前面。
4.insetAfter()和insertBefore()
将匹配的所有元素插入到另一个匹配元素的后面或前面，也属于外部插入。
$("p").insertAfter("div");
将所有的<p>都移到<div>的后面。
5.wrap()
将每一个匹配的元素用其他标签包裹起来。
wrap中传递的参数可以是
(1)自己写的标签
$("p").wrap("<div></div>");
(2)页面中的dom元素
$("p").wrap(document.getElementById("test"));
(3)function
6.unwrap()
移除所选元素的父元素。
7.wrapAll()
将所有匹配的元素用一个标签包含起来。
不同于wrap()将每个匹配的元素都包含。
8.wrapInner()
将每一个匹配元素的子元素用标签包含起来。
$("p").wrapInner("<b></b>");
将所有<p>下的内容都加粗。
9.replaceWith() 和replaceAll()
前者是将所有匹配的元素替换成指定的html或dom元素。
后者是用匹配的元素替换掉所有()内的元素。
$("p").replaceWith("<b>123</b>");
$("<b>123</b>").replaceAll("p");
二者功能相同。
10.empty()
将所有匹配元素的子元素全部删除。
11.remove()和detach()
前者将删除所有匹配的元素，但这些元素仍在jquery对象中。但除了这个元素本身在对象中外，其他的比如绑定事件都会被删除。
后者同前者唯一的不同是所有绑定的事件会被保留。
12.clone()
复制匹配的dom元素并且选中这些复制的副本。
当传入“true”这个参数后，会同时将这个元素所有的事件处理添加到副本中。
<button>clone!</button>
$("button").click(function(){
$(this).clone(true).insertAfter(this);
});
此按钮可以复制自己，并且复制后的自己也有自己拥有的功能。
jQuery零基础学习笔记（六）一些用于筛选的方法
1.add()
用于链接分别与两个表达式匹配的元素结果集。
$("p").add("div");
匹配p和div，即查找所有的p和div都放到匹配元素中。
$("p div");
实现相同的功能。
2.andself()
对于筛选或查找后的元素，加入先前所选元素。
$("div").find("span").andself().addClass("test");
3.end()
回到最近的一个“破坏性”操作之前，即将匹配的元素列表变为前一次匹配的状态。
所谓的“破坏性”操作是指对于获取的jquery元素，做了进一步的匹配，例如find,add,children,not,prev等等。
4.filter()
参数为一个或多个表达式时，就是过滤的作用。
当参数是function时，返回的为false元素被删除，否则保留。
$("p").filter(function(){
return $("ol",this).length==0;
});
取到的是<p>中不不含有ol的元素。
5.map()
将一组元素转换成其他数组。
$("p").append($("input").map(function(){
return $(this).value();
}).get().join(","));
将所有input标签的value组成一个以“,”连接的字符串并追加到<p>元素中。
6.children()
得到一个包含匹配的元素集合中每一个元素的所有子元素的元素集合，不考虑子元素的子元素。
7.closest()和parents()
| closest() | parents() | |
| 起始匹配元素 | 当前元素开始匹配 | 父级元素开始匹配 |
| 匹配结束元素 | 直到发现匹配元素 | 一直到根元素 |
| 返回结果 | 0或1个 | 0或1或多个 |
8.next()、nextAll()和nextUntil()
第一个，取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
第二个，取得当前匹配元素后面的所有同辈元素。
第三个，查找当前元素之后所有的同辈元素，直到遇到传入的那个参数为止。
9.parent()
取得一个包含着所有匹配元素的唯一父元素的元素集合。
10.prev()、prevAll()和prevUntil()
同next一样，仅仅是取得前面的元素。
11.siblings()
取得所选元素的所有同辈元素集合，不包括自己。
但加上andself()方法即可以取到自己以及自己的同辈。
jQuery零基础学习笔记（七）CSS
1.css()
$("p").css("color");
$("p").css("color",green);
$("p").css({color:"green",background:"red"});
$("p").css({width:function(){},height:function(){}});
css方法，可以取得属性值，获得单个、多个属性值。
2.offset()和offset(coordinates)
前者获取匹配元素在当前窗口的相对偏移，返回值为top和left。
var offset = $("p:first").offset(); alert("便宜量为left:"+offset.left);
后者设置匹配元素相对于document对象的坐标。
$("p:first").offset({top:10,left:50});
设置后如果原来对象的position样式属性是static，会变成relative来实现重新定位。
3.position()
获取匹配元素相对父元素的偏移。返回两个整形属性top和left，用法和 offset()基本相同。
此方法只对可见元素有效。
4.scrollTop()和scrollTop(val)
前者为获取匹配元素相对滚动条顶部的偏移，后者为设置相对滚动条顶部的偏移。
$("p").scrollTop(200);
5.scrollLeft()和scrollLeft(val)
前者为获取匹配元素相对滚动条左侧的偏移，后者为设置相对滚动条左侧的偏移。
6.height()和height(val)
前者为获取匹配元素的高度值，后者为设置匹配元素的高度值。
7.width()和width(val)
前者为获取匹配元素的宽度值，后者为设置匹配元素的宽度值。
8.innerHeight()和innerWidth()
前者为获取匹配元素内部区域高度（包括补白，不包括边框）。
后者为获取匹配元素内部区域宽度（包括补白，不包括边框）。
9.outerHeight(options)和outerWidth(options)
前者为获取匹配元素外部高度（包括补白和边框）。
后者为获取匹配元素外部宽度（包括补白和边框）。
当options为true时，计算边距在内。默认值为false。
jQuery零基础学习笔记（八）ajax中的参数含义
所有options均可选，下面简要说明每个option
1.async
默认为true，即请求为异步请求，这也是ajax存在的意义。但同时也可以将这个参数设置为false，实现同步请求。（同步请求会锁定浏览器，直到这个请求结束后才可以执行其他操作）
2.bforeSend(XHR)
这个方法是用来在发送请求前修改XMLHttpRequest对象的，若修改失败返回false，则取消此次ajax请求；
3.cache
默认为true，设置为false即不缓存。（当datatype为script或jasonp时默认为fasle）
4.complete(jqXHR,textStatus)
请求完成后的回调函数,无论成功与否。textStatus为一个描述请求类型的字符串，它可以有以下值success，notmodified，error，timeout，abort，parsererror。
5.contents
jQuery1.5添加。一个字符串或常规表达式的map，用来确定用何种方式处理jQuery的response。
6.contentType
它是发送到服务器的额数据的内容编码类型，它的默认值是"appliction/x-www-form-urlencoded"。传递的服务器的数据通常以UTF-8编码。
7.context
用来设置ajax回调函数的上下文。让回调函数中的this指向这个对象。
8.converters
jQuery1.5添加。一组数据类型到数据类型的转换。每一个转换值都是一个返回了response转换后的值的方法。
9.crossDomain
false表示同一域请求，true表示跨域请求。它可以使服务器端重定向到另外一个域。
10.data
发送到服务器的数据。必须为key/value格式。且自动转换为query string，get请求会将字符串附加在url后。
11.dataFilter(data,type)
将ajax的返回值进行预处理的函数，data为返回值，teype为传递的datatype参数。
12.dataType
预期服务器返回的数据类型。若没指定，则自动根据http包中的mime信息来判断。可用值为xml，html，script，json，jsonp，text。
13.error(jqXHR,textStatus,errorThrown)
当请求失败时调用这个方法。textStatus为错误信息，可用值为error，timeout，abort，parsererror。errorThrown为可选的要捕获的异常对象。
14.global
默认为true，触发全局ajax事件。设置为false可以用来不触发。可以用来控制不同的ajax事件。
15.headers
jQuery1.5添加。一个用于一起进行请求的额外的key/value对的map。这项需要在beforeSend方法被调用前设置，因为headers中的任意值都有肯那个在beforeSend方法中被覆盖。
16.ifModified
默认为false，仅在服务器数据改变时获取数据，使用http包中的Last-Modified头信息判断。
17.isLocal
jQuery1.5.1添加。允许将当前环境识别为local，jquery默认是不会识别的。file，*-extension 和widget协议可以被识别为local。如果isLocal需要被修改，推荐使用$.ajaxSetup()方法。
18.jsonp
重启jsonp请求中的回调函数名。这个值用来代替在“callback=？”这种请求中url参数里的callback部分。
19.jsonpCallback
为jsonp请求指定一个回调函数名。jquery会自动生成随机函数名，用这个值可以修改此名。
20.mimetype
jQuery1.5.1添加。可以用来覆盖XHR中的mimetype。
21.password
用于响应http访问认证请求的密码。
22.processData
默认为true。可以将data传递的数据类型进行修改用来匹配contenttype的类型。false则不修改。
23.scriptCharset
只有当请求为jsonp或script，并且type为get时才会用于强制修改charset。
24.statusCode
jQuery1.5添加。用来定义http的返回码对应的处理函数。下面的例子定义了返回404后的处理方法。
$.ajax({ statusCode: { 404: function() { alert("page not found"); } } })；
25.success(data,textStatus,jqXHR)
请求成功后的回调函数。参数由服务器返回，并会根据datatype参数进行参数处理。
26.timeout
设置请求超时时间，毫秒为单位。此设置会覆盖全局设置，即所有ajax请求共享同一个超时时间。
27.traditional
设置为true，用传统的方式来序列化数据。
28.type
请求方式，get或post或put或delete。默认为get。put和delte不是得到所有的浏览器支持。
29.url
发送请求的地址。为空表示当前页。
30.username
用于响应http访问认证请求的用户名。同password配对。
31.xhr
默认在ie下是ActiveXObject而其他浏览器是XMLHttpRequest。用于重写或提供一个增强的XMLHttpRequest对象。
32.xhrFields
jQuery1.5.1添加。它可以添加到原生xhr对象上的key/value对。举个例子，你可以通过它来设置跨域的withCredentials为true。
$.ajax({ url: a_cross_domain_url, xhrFields: { withCredentials: true } });
在jQuery1.5中，withCredentials这个属性不在原生的xhr中，所以这个请求会被忽略到。若要测试这个例子，需要使用jQuery1.5.1。
详细文档 jquery.ajax英文文档
