jQuery知识点（摘要）

//CSS选择器选取HTML 元素
$("p.intro").hide();

//XPath表达式选择带有指定属性的元素
$("[href='#']").attr("href","http://www.baidu.com/");
$("[src$='.jpg']").attr("src","index.png");

把jQuery 函数放在文档就绪事件处理器【$(document).ready(function(){});】里是为了避免文档未加载完就运行jQuery函数导致出现一些错误。

chaining（链式调用）技术允许在相同的元素上一条接一条运行多条 jQuery 命令，这样可减少浏览器多次查找相同元素的次数。jQuery语句执行时会过滤掉多余的空格。

示例代码：

 //文字被缓慢遮盖后，再缓慢出现，最后缓慢隐藏。
 $("#p1").css("font-size","30px")
      .slideUp(2000)
      .slideDown(2000).hide(2000);

名称

jQuery 代码里可将jQuery 简写为 $。

其它一些JavaScript库里的函数【如Prototype】也会使用到$符号，这时可以用jQuery里的noConflict()方法来释放jQuery对$符号的占用，还可以给jQuery另外起一个简写的名称。

代码示例：

var jq=jQuery.noConflict();

规范

遵守以下规范，jQuery代码会更容易维护。

把所有 jQuery 代码放在事件处理函数里。
把所有事件处理函数放在文档就绪事件处理器里。
把 jQuery 代码放在单独的js 文件里。
如果存在名称冲突，则重命名 jQuery 库。

jQuery选择器

DOM

*【所有元素】|element【指定元素】|:not(selector)【不满足选择条件的】

:header【标题元素，<h1>至<h6>】

selector1,selector2,selector3【满足其中任意一个选择条件的元素】

[attribute]【带有该属性的元素】|[attribute=value]【属性值为指定值】|[attribute!=value]|[attribute$=value]【属性值以指定值结尾的元素】

特征

#id【指定id】|.class【指定class】|.class1.class2【同时具有这些样式名，中间无空格】

:contains(text)【包含指定字符串的元素】|:empty【内容为空的元素】

:animated【动画元素】

次序

:first【第一个】|:last【最后一个】|:even【偶数序号】|:odd【奇数序号】

:gt(No)【> No序号】|:eq(No)【=No序号,从0开始排】|:lt(No)【< No序号】

表单

:input【所有input元素】|:text【type="text"的input元素】|

状态

:hidden【隐藏元素】|:visible【可见元素】

:enabled【可用】|:disabled【禁用】|:selected【选取】|:checked【选中】

jQuery DOM

尺寸

width() 设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 设置或返回元素的高度（不包括内边距、边框或外边距）。

innerWidth() 返回元素的宽度（包括内边距）。

innerHeight() 返回元素的高度（包括内边距）。

outerWidth() 返回元素的宽度（包括内边距和边框）。

outerHeight() 返回元素的高度（包括内边距和边框）。

outerWidth(true) 返回元素的宽度（包括内边距、边框和外边距）。

outerHeight(true) 返回元素的高度（包括内边距、边框和外边距）。

类名

addClass() 向匹配的元素添加指定的类名。

hasClass() 检查匹配的元素是否拥有指定的类。

removeClass() 从所有匹配的元素中删除全部或者指定的类。

toggleClass() 从匹配的元素中添加或删除一个类。

节点

get() 获得由选择器指定的 DOM 元素。

index() 返回指定元素相对于其他指定元素的 index 位置。

size() 返回被 jQuery 选择器匹配的元素的数量。

toArray() 以数组的形式返回 jQuery 选择器匹配的元素。

clone() 创建匹配元素集合的副本。

detach() 从 DOM 中移除匹配元素集合。

empty() 删除匹配的元素集合中所有的子节点。

remove() 移除所有匹配的元素。

position() 返回第一个匹配元素相对于父元素的位置。

scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移。

scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移。

resize() 触发、或将函数绑定到指定元素的 resize 事件

focus() 触发、或将函数绑定到指定元素的 focus 事件

offset() 返回第一个匹配元素相对于文档的位置。

offsetParent() 返回最近的定位父级元素。

内容

val() 设置或返回匹配元素的值。

html() 设置或返回匹配的元素集合中的 HTML 内容。

text() 设置或返回匹配元素的内容。

before() 在每个匹配的元素之前插入内容。

after() 在匹配的元素之后插入内容。

append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容。

appendTo() 向目标结尾插入匹配元素集合中的每个元素。

insertAfter() 把匹配的元素插入到另一个指定的元素集合的后面。

insertBefore() 把匹配的元素插入到另一个指定的元素集合的前面。

prepend() 向匹配元素集合中的每个元素开头插入由参数指定的内容。

prependTo() 向目标开头插入匹配元素集合中的每个元素。

replaceAll() 用匹配的元素替换所有匹配到的元素。

replaceWith() 用新内容替换匹配的元素。

wrap() 把匹配的元素用指定的内容或元素包裹起来。

wrapAll() 把所有匹配的元素用指定的内容或元素包裹起来。

unwrap() 移除并替换指定元素的父元素。

wrapinner() 将每个匹配到元素的子内容用指定的内容或元素包裹起来。

data() 存储与匹配元素相关的任意数据。

hasData() 存储与匹配元素相关的任意数据。

removeData() 移除之前存放的数据。

链式调用

children() 获得匹配元素集合中每个元素的所有子元素。

each() 对 jQuery 对象进行迭代，为每个匹配元素执行函数。

eq() 将匹配元素集合缩减为位于指定索引的新元素。

find() 获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。

has() 将匹配元素集合缩减为包含特定元素的后代的集合。

next() 获得匹配元素集合中每个元素紧邻的同辈元素。

nextAll() 获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。

not() 从匹配元素集合中删除元素。

parent() 获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。

parents() 获得当前匹配元素集合中每个元素的父级元素，可由选择器筛选。

prev() 获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。

prevAll() 获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。

siblings() 获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。

slice() 将匹配元素集合缩减为指定范围的子集。

add() 将元素添加到匹配元素的集合中。

andSelf() 把堆栈中之前的元素集添加到当前集合中。

closest() 从元素本身开始逐级向上级元素匹配，并返回最先匹配的父级元素。

contents() 获得匹配元素集合中每个元素的子元素，包括文本和注释节点。

first() 将匹配元素集合缩减为集合中的第一个元素。

is() 根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。

last() 将匹配元素集合缩减为集合中的最后一个元素。

map() 把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象。

end() 结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。

filter() 将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。

nextUntil() 获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。

prevUntil() 获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。

parentsUntil()获得当前匹配元素集合中每个元素的父级元素，直到遇到匹配选择器的元素为止。

offsetParent()获得用于定位的第一个父元素。

jQuery属性

属性值

length 包含 jQuery 对象中的元素数目。

event.type 描述事件的类型。

event.which 指示按了哪个键或按钮。

event.target 触发该事件的 DOM 元素。

event.result 包含由被指定事件触发的事件处理器返回的最后一个值。

event.pageX 相对于文档左边缘的鼠标位置。

event.pageY 相对于文档上边缘的鼠标位置。

方法

css() 设置或返回匹配元素的样式属性。

attr() 设置或返回匹配元素的属性和值。

removeAttr() 从所有匹配的元素中移除指定的属性。

jQuery.fx.interval 改变以毫秒计的动画速率。

jQuery.fx.off 全局禁用/启用所有动画。

jQuery事件

jQuery事件方法用于将函数绑定到所匹配到元素的某个事件上，或者触发所匹配到元素的某个事件。

加载

ready()

当 DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。

语法1:

$(document).ready(function)

语法2:

$(function)

load()

当指定的元素（及子元素）已加载时，会发生 load() 事件。该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）。

根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。

语法：

$(selector).load(function)

注意：

jQuery还有一个名为load()的Ajax方法。

绑定

bind()

bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

语法

$(selector).bind(event,data,function)

参数

event：事件名称，多个事件名称用空格分隔。

data：传递给事件处理函数的额外数据。

function：绑定的事件发生时触发的函数。

unbind()

unbind() 方法移除被选元素的事件处理程序。

语法

$(selector).unbind(event,function)

参数

event：事件名称，多个事件名称用空格分隔。

function 可选。规定从元素的指定事件取消绑定的函数名。

注意：

如果未规定参数，则 unbind() 方法会删除指定元素的所有事件处理程序。

delegate()

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

语法

$(selector).delegate(childSelector,event,data,function)

undelegate()

undelegate() 方法删除由 delegate() 方法添加的一个或多个事件处理程序。

语法

$(selector).undelegate(selector,event,function)

交互

click()

语法

$(selector).click(function)

dblclick()

当快速双击元素时，会发生 dblclick 事件。

语法

$(selector).dblclick(function)

注意：

如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。

change()

当元素的值发生改变时，会发生 change 事件。

该事件仅适用于文本域（text field），以及 textarea 和 select 元素。

当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。

语法

$(selector).change(function)

scroll()

当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。

语法

$(selector).scroll(function)

select()

当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。

select() 方法触发 select 事件，或规定当发生 select 事件时运行的函数。

语法

$(selector).select()

submit()

当提交表单时，会发生 submit 事件。该事件只适用于表单元素。

submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。

语法（触发 submit 事件）：

$(selector).submit()

语法（将函数绑定到 submit 事件）：

$(selector).submit(function)

toggle()

toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

该方法也可用于切换被选元素的 hide() 与 show() 方法。

语法（向 Toggle 事件绑定两个或更多函数）：

$(selector).toggle(function1(),function2(),functionN(),...)

语法（切换 Hide() 和 Show()）：

$(selector).toggle(speed,callback)

参数：

callback：可选，表示当 toggle() 方法完成时执行的函数。

语法（只显示或只隐藏所有匹配的元素）：

$(selector).toggle(switch)

参数：

switch为true表示显示，为false表示隐藏。

trigger()

trigger() 方法触发被选元素的指定事件类型。

语法

$(selector).trigger(event,[param1,param2,...])

event.preventDefault()

preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。

语法

event.preventDefault()

参数

event：必需,规定阻止哪个事件的默认动作。这个 event 参数来自事件绑定函数。

error()

当元素遇到错误（没有正确载入）时，发生 error 事件。

语法

$(selector).error(function)

参数

function：可选。规定当发生 error 事件时运行的函数。

键盘

keydown() 触发、或将函数绑定到指定元素的 key down 事件

keypress() 触发、或将函数绑定到指定元素的 key press 事件

keyup() 触发、或将函数绑定到指定元素的 key up 事件

鼠标

mousedown() 触发、或将函数绑定到指定元素的 mouse down 事件

mouseenter() 触发、或将函数绑定到指定元素的 mouse enter 事件

mouseleave() 触发、或将函数绑定到指定元素的 mouse leave 事件

mousemove() 触发、或将函数绑定到指定元素的 mouse move 事件

mouseout() 触发、或将函数绑定到指定元素的 mouse out 事件

mouseover() 触发、或将函数绑定到指定元素的 mouse over 事件

mouseup() 触发、或将函数绑定到指定元素的 mouse up 事件

队列

queue() 显示或操作匹配元素所执行函数的队列。

dequeue() 从队列最前端移除一个队列函数，并执行它。

clearQueue() 从队列中删除所有未运行的项目。

动画

animate() 对被选元素应用“自定义”的动画

fadeIn() 逐渐改变被选元素的不透明度，从隐藏到可见

fadeOut() 逐渐改变被选元素的不透明度，从可见到隐藏

fadeTo() 把被选元素逐渐改变至给定的不透明度

hide() 隐藏被选的元素

show() 显示被选的元素

slideDown() 通过调整高度来滑动显示被选元素

slideToggle() 对被选元素进行滑动隐藏和滑动显示的切换

slideUp() 通过调整高度来滑动隐藏被选元素

stop() 停止在被选元素上运行动画

delay() 对被选元素的所有排队函数（仍未运行）设置延迟

Ajax

请参见另一篇文档《 Ajax实现》。

ylnzzl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录