JQuery学习记录

1. 向页面添加库`<script>标签放在<head>标签内`

<head>
// 本地下载后引用
<script type="text/javascript" src="jquery.js"></script>

// 线上Google 的 CDN
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

// 线上Microsoft 的 CDN
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
</head>

2. 语法

2.1. $(selector).action()

$定义jQuery
选择符(selector)“查询”和“查找”HTML元素
jQuery的action()执行对元素的操作

// 例子
$(this).hide()  // 隐藏当前元素

$("p").hide()  // 隐藏所有段落

$(".test").hide()  //  隐藏所有 class="test" 的所有元素

$("#test").hide() //  隐藏所有 id="test" 的元素

2.2. 文档就绪函数，所有 jQuery 函数位于一个 document ready 函数中。为了防止文档在完全加载就绪之前运行jQuery代码。

$(document).ready(function(){

--- jQuery functions go here ----

});

3. 选择器

选择器	语法	描述
`*`	`$("*")`	所有元素
`#*id`	`$("#lastname")`	id="lastname" 的元素
`.class`	`$(".intro")`	所有 class="intro" 的元素
`element`	`$("p")`	所有 <p> 元素
`.class.class`	`$(".intro.demo")`	所有 class="intro" 且 class="demo" 的元素

`:first`	`$("p:first")`	第一个 <p> 元素
`:last`	`$("p:last")`	最后一个 <p> 元素
`:even`	`$("tr:even")`	所有偶数 <tr> 元素
`:odd`	`$("tr:odd")`	所有奇数 <tr> 元素

`:eq(index)`	`$("ul li:eq(3)")`	列表中的第四个元素（index 从 0 开始）
`:gt(no)`	`$("ul li:gt(3)")`	列出 index 大于 3 的元素
`:lt(no)`	`$("ul li:lt(3)")`	列出 index 小于 3 的元素
`:not(selector)`	`$("input:not(:empty)")`	所有不为空的 input 元素

`:header`	`$(":header")`	所有标题元素 <h1> - <h6>
`:animated`		所有动画元素

`:contains(text)`	`$(":contains('W3School')")`	包含指定字符串的所有元素
`:empty`	`$(":empty")`	无子（元素）节点的所有元素
`:hidden`	`$("p:hidden")`	所有隐藏的 <p> 元素
`:visible`	`$("table:visible")`	所有可见的表格

`s1,s2,s3`	`$("th,td,.intro")`	所有带有匹配选择的元素

`attribute`	`$("[href]")`	所有带有 href 属性的元素
`attribute=value`	`$("[href='#']")`	所有 href 属性的值等于 "#" 的元素
`attribute!=value`	`$("[href!='#']")`	所有 href 属性的值不等于 "#" 的元素
`attribute$=value`	`$("[href$='.jpg']")`	所有 href 属性的值包含以 ".jpg" 结尾的元素

`:input`	`$(":input")`	所有 <input> 元素
`:text`	`$(":text")`	所有 type="text" 的 <input> 元素
`:password`	`$(":password")`	所有 type="password" 的 <input> 元素
`:radio`	`$(":radio")`	所有 type="radio" 的 <input> 元素
`:checkbox`	`$(":checkbox")`	所有 type="checkbox" 的 <input> 元素
`:submit`	`$(":submit")`	所有 type="submit" 的 <input> 元素
`:reset`	`$(":reset")`	所有 type="reset" 的 <input> 元素
`:button`	`$(":button")`	所有 type="button" 的 <input> 元素
`:image`	`$(":image")`	所有 type="image" 的 <input> 元素
`:file`	`$(":file")`	所有 type="file" 的 <input> 元素

`:enabled`	`$(":enabled")`	所有激活的 input 元素
`:disabled`	`$(":disabled")`	所有禁用的 input 元素
`:selected`	`$(":selected")`	所有被选取的 input 元素
`:checked`	`$(":checked")`	所有被选中的 input 元素

4. jQuery名称冲突

var jq = jQuery.noConflict(),用jq来代替$符号

5. jQuery效果

- seed参数规定隐藏/显示的速度，可取值：slow，fast，毫秒
- callback参数是隐藏/显示完成后所执行的函数名称

// 1. 显示/隐藏
$(selector).hide(speed,callback); // 隐藏
$(selector).show(speed,callback); // 显示
$(selector).toggle(speed,callback); // 切换隐藏、显示

// 2. 淡入淡出
$(selector).fadeIn(speed,callback); // 淡入已隐藏的元素
$(selector).fadeOut(speed,callback); // 淡出可见元素
$(selector).fadeToggle(speed,callback); // 切换淡入、淡出
$(selector).fadeTo(speed,opacity,callback); // 允许渐变为给定的不透明度opacity （值介于 0 与 1 之间）

// 3. 滑动
$(selector).slideDown(speed,callback); // 下滑
$(selector).slideUp(speed,callback); // 上滑
$(selector).slideToggle(speed,callback); // 切换上下滑

// 4. 动画
$(selector).animate({parmas},speed,callback); // 自定义动画。params 参数定义形成动画的css属性

// 5. 停止
$(selector).stop(stopAll,goToEnd);// stopAll是否应该清除动画队列默认false，goToEnd是否立即完成当前动画。默认是 false。

6. jQuery HTML

6.1. 获取方法

text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容包括html标记
val() 设置或返回表单字段的值
attr() 获取属性值

6.2. 添加方法

append() 在被选元素的结尾插入内容
prepend() 在被选元素的开头插入内容
after() 在被选元素之后插入内容
before() 在被选元素之前插入内容

6.3. 删除元素/内容

remove() 删除被选元素及其子元素
empty() 从被选元素中删除子元素

6.4. css类方法

addClass() 向被选元素添加一个或多个类
removeClass() 从被选元素删除一个或多个类
toggleClass() 对被选元素进行添加/删除类的切换操作
css() 设置或返回样式属性

6.5. 尺寸

width() 设置或返回元素的宽度，不包括内外边距，边框
height() 设置或返回元素的高度，不包括内外边距，边框
innerWidth() 返回元素的宽度，包括内边距
innerHeight() 返回元素的高度，包括内边距
outerWidth() 返回元素的宽度，包括外边距
outerHeight() 返回元素的宽度，包括外边距

7. jQuery遍历

方法	语法	描述
.add()	`.add(selector)`	将元素添加到匹配元素的集合中。
.andSelf()	`.andSelf()`	把堆栈中之前的元素集添加到当前集合中。
.children()	`.children(selector)`	获得匹配元素集合中每个元素的所有子元素。
.closest()	`.closest(selector)`	从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。
.contents()	`.contents()`	获得匹配元素集合中每个元素的子元素，包括文本和注释节点。
.each()	`$(selector).each(function(index,element))`	对 jQuery 对象进行迭代，为每个匹配元素执行函数。
.end()]	`.end()`	结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。
.eq()	`.eq(index)`	将匹配元素集合缩减为位于指定索引的新元素。
.filter()	`.filter(selector)`	将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
.find()	`.find(selector)`	获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。
.first()	`.first()`	将匹配元素集合缩减为集合中的第一个元素。
.has()	`.has(selector)`	将匹配元素集合缩减为包含特定元素的后代的集合。
.is()	`.is(selector)`	根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。
.last()	`.last()`	将匹配元素集合缩减为集合中的最后一个元素。
.map()	`.map(callback(index,domElement))`	把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象。
.next()	`.next(selector)`	获得匹配元素集合中每个元素紧邻的同辈元素。
.nextAll()	`.nextAll(selector)`	获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。
.nextUntil()	`.nextUntil(selector,filter)`	获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。
.not()	`.not(selector)`	从匹配元素集合中删除元素。
.offsetParent()	`.offsetParent()`	获得用于定位的第一个父元素。
.parent()	`.parent(selector)`	获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。
.parents()	`.parents(selector)`	获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。
.parentsUntil()	`.parentsUntil(selector,filter)`	获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。
.prev()	`.prev(selector)`	获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。
.prevAll()	`.prevAll(selector)`	获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。
.prevUntil()	`.prevUntil(selector, filter)`	获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。
.siblings()	`.siblings(selector)`	获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。
.slice()	`.slice(selector,end)`	将匹配元素集合缩减为指定范围的子集。

8. jQuery AJAX

// 1. load方法
$(selector).load(URL,data,callback)
- url地址
- data查询字符串键值对
- callback执行完成后执行的函数
responseTxt成功，statusTxt调用状态，xhr包括XMLHttpRequest对象

// 2. get方法
$.get(URL,callback);

// 3. post方法
$.post(URL,data,callback);

方法	语法	描述
jQuery.ajax()	`jQuery.ajax([settings])`	执行异步 HTTP (Ajax) 请求。
.ajaxComplete()	`jQuery.ajaxComplete(function(event,xhr,options))`	当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError()	`.ajaxError(function(event,xhr,options,exc))`	当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend()	`.ajaxSend([function(event,xhr,options)])`	在 Ajax 请求发送之前显示一条消息。
jQuery.ajaxSetup()	`jQuery.ajaxSetup(name:value, name:value, ...)`	设置将来的 Ajax 请求的默认值。
.ajaxStart()	`.ajaxStart(function())`	当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop()	`.ajaxStop(function())`	当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess()	`.ajaxSuccess(function(event,xhr,options))`	当 Ajax 请求成功完成时显示一条消息。
jQuery.get()	`$(selector).get(url,data,success(response,status,xhr),dataType)`	使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON()	`jQuery.getJSON(url,data,success(data,status,xhr))`	使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.getScript()	`jQuery.getScript(url,success(response,status))`	使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。
.load()	`load(url,data,function(response,status,xhr))`	从服务器加载数据，然后把返回到 HTML 放入匹配元素。
jQuery.param()	`jQuery.param(object,traditional)`	创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。
jQuery.post()	`jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)`	使用 HTTP POST 请求从服务器加载数据。
.serialize()	`$(selector).serialize()`	将表单内容序列化为字符串。
.serializeArray()	`$(selector).serializeArray()`	序列化表单元素，返回 JSON 数据结构数据。

9. jQuery事件

方法	语法	描述
bind()	`$(selector).bind(event,data,function)`	向匹配元素附加一个或更多事件处理器
blur()	`$(selector).blur(function)`	触发、或将函数绑定到指定元素的 blur 事件
change()	`$(selector).change(function)`	触发、或将函数绑定到指定元素的 change 事件
click()	`$(selector).click(function)`	触发、或将函数绑定到指定元素的 click 事件
dblclick()	`$(selector).dblclick(function)`	触发、或将函数绑定到指定元素的 double click 事件
delegate()	`$(selector).delegate(childSelector,event,data,function)`	向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die()	`$(selector).die(event,function)`	移除所有通过 live() 函数添加的事件处理程序。
error()	`$(selector).error(function)`	触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented()	`event.isDefaultPrevented()`	返回 event 对象上是否调用了 event.preventDefault()。
event.pageX	`event.pageX`	相对于文档左边缘的鼠标位置。
event.pageY	`event.pageY`	相对于文档上边缘的鼠标位置。
event.preventDefault()	`event.preventDefault()`	阻止事件的默认动作。
event.result	`event.result`	包含由被指定事件触发的事件处理器返回的最后一个值。
event.target	`event.target`	触发该事件的 DOM 元素。
event.timeStamp	`event.timeStamp`	该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type	`event.type`	描述事件的类型。
event.which	`event.which`	指示按了哪个键或按钮。
focus()	`$(selector).focus(function)`	触发、或将函数绑定到指定元素的 focus 事件
keydown()	`$(selector).keydown(function)`	触发、或将函数绑定到指定元素的 key down 事件
keypress()	`$(selector).keypress(function)`	触发、或将函数绑定到指定元素的 key press 事件
keyup()	`$(selector).keyup(function)`	触发、或将函数绑定到指定元素的 key up 事件
live()	`$(selector).live(event,data,function)`	为当前或未来的匹配元素添加一个或多个事件处理器
load()	`$(selector).load(function)`	触发、或将函数绑定到指定元素的 load 事件
mousedown()	`$(selector).mousedown(function)`	触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter()	`$(selector).mouseenter(function)`	触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave()	`$(selector).mouseleave(function)`	触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove()	`$(selector).mousemove(function)`	触发、或将函数绑定到指定元素的 mouse move 事件
mouseout()	`$(selector).mouseout(function)`	触发、或将函数绑定到指定元素的 mouse out 事件
mouseover()	`$(selector).mouseover(function)`	触发、或将函数绑定到指定元素的 mouse over 事件
mouseup()	`$(selector).mouseup(function)`	触发、或将函数绑定到指定元素的 mouse up 事件
one()	`$(selector).one(event,data,function)`	向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready()	`$(document).ready(function)`	文档就绪事件（当 HTML 文档就绪可用时）
resize()	`$(selector).resize(function)`	触发、或将函数绑定到指定元素的 resize 事件
scroll()	`$(selector).scroll(function)`	触发、或将函数绑定到指定元素的 scroll 事件
select()	`$(selector).select(function)`	触发、或将函数绑定到指定元素的 select 事件
submit()	`$(selector).submit(function)`	触发、或将函数绑定到指定元素的 submit 事件
toggle()	`$(selector).toggle(function1(),function2(),functionN(),...) $(selector).toggle(speed,callback) $(selector).toggle(switch)`	绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
trigger()	`$(selector).trigger(event,[param1,param2,...]) $(selector).trigger(eventObj)`	所有匹配元素的指定事件
triggerHandler()	`$(selector).triggerHandler(event,[param1,param2,...])`	第一个被匹配元素的指定事件
unbind()	`$(selector).unbind(event,function) $(selector).unbind(eventObj)`	从匹配元素移除一个被添加的事件处理器
undelegate()	`$(selector).undelegate(selector,event,function)`	从匹配元素移除一个被添加的事件处理器，现在或将来
unload()	`event.unload(function)`	触发、或将函数绑定到指定元素的 unload 事件

10. 效果

方法	语法	描述
animate()	`$(selector).animate(styles,speed,easing,callback) $(selector).animate(styles,options)`	对被选元素应用“自定义”的动画
clearQueue()	`$(selector).clearQueue(queueName)`	对被选元素移除所有排队的函数（仍未运行的）
delay()		对被选元素的所有排队函数（仍未运行）设置延迟
dequeue()		运行被选元素的下一个排队函数
fadeIn()	`$(selector).fadeIn(speed,callback)`	逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()	`$(selector).fadeOut(speed,callback)`	逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()	`$(selector).fadeTo(speed,opacity,callback)`	把被选元素逐渐改变至给定的不透明度
hide()	`$(selector).hide(speed,callback)`	隐藏被选的元素
queue()		显示被选元素的排队函数
show()	`$(selector).show(speed,callback)`	显示被选的元素
slideDown()	`$(selector).slideDown(speed,callback)`	通过调整高度来滑动显示被选元素
slideToggle()	`$(selector).slideToggle(speed,callback)`	对被选元素进行滑动隐藏和滑动显示的切换
slideUp()	`$(selector).slideUp(speed,callback)`	通过调整高度来滑动隐藏被选元素
stop()	`$(selector).stop(stopAll,goToEnd)`	停止在被选元素上运行动画
toggle()	`$(selector).toggle(speed,callback,switch)`	对被选元素进行隐藏和显示的切换

11. 文档/属性操作

方法	语法	描述
addClass()	`$(selector).addClass(class) $(selector).addClass(function(index,oldclass))`	向匹配的元素添加指定的类名。
after()	`$(selector).after(function(index))`	在匹配的元素之后插入内容。
append()	`$(selector).append(function(index,html))`	向匹配元素集合中的每个元素结尾插入由参数指定的内容。
appendTo()	`$(content).appendTo(selector)`	向目标结尾插入匹配元素集合中的每个元素。
attr()	`$(selector).attr(attribute,value) $(selector).attr(attribute,function(index,oldvalue))`	设置或返回匹配元素的属性和值。
before()	`$(selector).before(content) $(selector).before(function(index))`	在每个匹配的元素之前插入内容。
clone()	`$(selector).clone(includeEvents)`	创建匹配元素集合的副本。
detach()	`$(selector).detach()`	从 DOM 中移除匹配元素集合。
empty()	`$(selector).empty()`	删除匹配的元素集合中所有的子节点。
hasClass()	`$(selector).hasClass(class)`	检查匹配的元素是否拥有指定的类。
html()	`$(selector).html() $(selector).html(content) $(selector).html(function(index,oldcontent))`	设置或返回匹配的元素集合中的 HTML 内容。
insertAfter()	`$(content).insertAfter(selector)`	把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore()	`$(content).insertBefore(selector)`	把匹配的元素插入到另一个指定的元素集合的前面。
prepend()	`$(selector).prepend(content) $(selector).prepend(function(index,html))`	向匹配元素集合中的每个元素开头插入由参数指定的内容。
prependTo()	`$(content).prependTo(selector)`	向目标开头插入匹配元素集合中的每个元素。
remove()	`$(selector).remove()`	移除所有匹配的元素。
removeAttr()	`$(selector).removeAttr(attribute)`	从所有匹配的元素中移除指定的属性。
removeClass()	`$(selector).removeClass(class) $(selector).removeClass(function(index,oldclass))`	从所有匹配的元素中删除全部或者指定的类。
replaceAll()	`$(content).replaceAll(selector)`	用匹配的元素替换所有匹配到的元素。
replaceWith()	`$(selector).replaceWith(content) $(selector).replaceWith(function())`	用新内容替换匹配的元素。
text()	`$(selector).text() $(selector).text(content) $(selector).text(function(index,oldcontent))`	设置或返回匹配元素的内容。
toggleClass()	`$(selector).toggleClass(class,switch) $(selector).toggleClass(function(index,class),switch)`	从匹配的元素中添加或删除一个类。
unwrap()	`$(selector).unwrap()`	移除并替换指定元素的父元素。
val()	`$(selector).val(value) $(selector).val(value) $(selector).val(function(index,oldvalue))`	设置或返回匹配元素的值。
wrap()	`$(selector).wrap(wrapper) $(selector).wrap(function())`	把匹配的元素用指定的内容或元素包裹起来。
wrapAll()	`$(selector).wrapAll(wrapper)`	把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner()	`$(selector).wrapInner(wrapper) $(selector).wrapInner(function())`	将每一个匹配的元素的子内容用指定的内容或元素包裹起来

12. css操作

css属性	语法	描述
css()	`$(selector).css(name) $(selector).css(name,value) $(selector).css(name,function(index,value))`	设置或返回匹配元素的样式属性。
height()	`$(selector).height() $(selector).height(length) $(selector).height(function(index,oldheight))`	设置或返回匹配元素的高度。
offset()	`$(selector).offset() $(selector).offset(value) $(selector).offset(function(index,oldoffset))`	返回第一个匹配元素相对于文档的位置。
offsetParent()	`$(selector).offsetParent()`	返回最近的定位祖先元素。
position()	`$(selector).position()`	返回第一个匹配元素相对于父元素的位置。
scrollLeft()	`$(selector).scrollLeft() $(selector).scrollLeft(position)`	设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop()	`$(selector).scrollTop(offset)`	设置或返回匹配元素相对滚动条顶部的偏移。
width()	`$(selector).width() $(selector).width(length)`	设置或返回匹配元素的宽度。

13. DOM元素方法

方法	语法	描述
函数	描述
.get()	`$(selector).get(index)`	获得由选择器指定的 DOM 元素。
.index()	`$(selector).index()`	返回指定元素相对于其他指定元素的 index 位置。
.size()	`$(selector).size()`	返回被 jQuery 选择器匹配的元素的数量。
.toArray()]	`$(selector).toArray()`	以数组的形式返回 jQuery 选择器匹配的元素。

JQuery学习记录

1. 向页面添加库<script>标签放在<head>标签内

2. 语法

3. 选择器

4. jQuery名称冲突

5. jQuery效果

6. jQuery HTML

7. jQuery遍历

8. jQuery AJAX

9. jQuery事件

10. 效果

11. 文档/属性操作

12. css操作

13. DOM元素方法

推荐阅读更多精彩内容

1. 向页面添加库`<script>标签放在<head>标签内`