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 选择器匹配的元素。 |
