jQuery 选择器
选择器 | 实例 | 选取 |
---|---|---|
* | $("*") | 所有元素 |
#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><h2>... |
: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 元素 |
jQuery 事件方法
事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。
触发实例:
$("button#demo").click()
上面的例子将触发 id="demo" 的 button 元素的 click 事件。
绑定实例:
$("button#demo").click(function(){$("img").hide()})
上面的例子会在点击 id="demo" 的按钮时隐藏所有图像。
方法 | 描述 |
---|---|
ready() | 文档就绪事件(当 HTML 文档就绪可用时) |
blur() | 触发、或将函数绑定到指定元素的 blur 事件 |
change() | 触发、或将函数绑定到指定元素的 change 事件 |
click() | 触发、或将函数绑定到指定元素的 click 事件 |
dblclick() | 触发、或将函数绑定到指定元素的 double click 事件 |
error() | 触发、或将函数绑定到指定元素的 error 事件 |
focus() | 触发、或将函数绑定到指定元素的 focus 事件 |
keydown() | 触发、或将函数绑定到指定元素的 key down 事件 |
keypress() | 触发、或将函数绑定到指定元素的 key press 事件 |
keyup() | 触发、或将函数绑定到指定元素的 key up 事件 |
load() | 触发、或将函数绑定到指定元素的 load 事件 |
mousedown() | 触发、或将函数绑定到指定元素的 mouse down 事件 |
mouseenter() | 触发、或将函数绑定到指定元素的 mouse enter 事件 |
mouseleave() | 触发、或将函数绑定到指定元素的 mouse leave 事件 |
mousemove() | 触发、或将函数绑定到指定元素的 mouse move 事件 |
mouseout() | 触发、或将函数绑定到指定元素的 mouse out 事件 |
mouseover() | 触发、或将函数绑定到指定元素的 mouse over 事件 |
mouseup() | 触发、或将函数绑定到指定元素的 mouse up 事件 |
resize() | 触发、或将函数绑定到指定元素的 resize 事件 |
scroll() | 触发、或将函数绑定到指定元素的 scroll 事件 |
select() | 触发、或将函数绑定到指定元素的 select 事件 |
submit() | 触发、或将函数绑定到指定元素的 submit 事件 |
unload() | 触发、或将函数绑定到指定元素的 unload 事件 |
jQuery 事件处理方法
事件处理方法把事件处理器绑定至匹配元素。
方法 | 触发 |
---|---|
$(selector).bind(event) | 向匹配元素添加一个或更多事件处理器 |
$(selector).delegate(selector, event) | 向匹配元素添加一个事件处理器,现在或将来 |
$(selector).die() | 移除所有通过 live() 函数添加的事件处理器 |
$(selector).live(event) | 向匹配元素添加一个事件处理器,现在或将来 |
$(selector).one(event) | 向匹配元素添加一个事件处理器。该处理器只能触发一次。 |
$(selector).unbind(event) | 从匹配元素移除一个被添加的事件处理器 |
$(selector).undelegate(event) | 从匹配元素移除一个被添加的事件处理器,现在或将来 |
$(selector).trigger(event) | 所有匹配元素的指定事件 |
$(selector).triggerHandler(event) | 第一个被匹配元素的指定事件 |
jQuery 效果函数
Hide / Show | 描述 |
---|---|
show() | 显示被选的元素 |
hide() | 隐藏被选的元素 |
toggle() | 对被选元素进行隐藏和显示的切换 |
Slide | |
slideDown() | 通过调整高度来滑动显示被选元素 |
slideUp() | 通过调整高度来滑动隐藏被选元素 |
slideToggle() | 对被选元素进行滑动隐藏和滑动显示的切换 |
Fade in / out | |
fadeIn() | 淡入被选元素至完全不透明 |
fadeOut() | 淡出被选元素至完全不透明 |
fadeTo() | 把被选元素减弱至给定的不透明度 |
Animation | |
animate() | 对被选元素应用“自定义”的动画 |
stop() | 停止在被选元素上运行动画 |
Queue | |
clearQueue() | 对被选元素移除所有排队的函数(仍未运行的) |
delay() | 对被选元素的所有排队函数(仍未运行)设置延迟 |
dequeue() | 运行被选元素的下一个排队函数 |
queue() | 显示被选元素的排队函数 |
jQuery 文档操作方法
这些方法对于 XML
方法 | 描述 |
---|---|
addClass() | 向匹配的元素添加指定的类名。 |
after() | 在匹配的元素之后插入内容。 |
append() | 向匹配的元素内部追加内容。 |
appendTo() | 向匹配的元素内部追加内容。 |
attr() | 设置或返回匹配元素的属性和值。 |
before() | 在每个匹配的元素之前插入内容。 |
clone() | 创建匹配元素集合的副本。 |
detach() | 从 DOM 中移除匹配元素集合。 |
empty() | 删除匹配的元素集合中所有的子节点。 |
hasClass() | 检查匹配的元素是否拥有指定的类。 |
html() | 设置或返回匹配的元素集合中的 HTML 内容。 |
insertAfter() | 把匹配的元素插入到另一个指定的元素集合的后面。 |
insertBefore() | 把匹配的元素插入到另一个指定的元素集合的前面。 |
prepend() | 向每个匹配的元素内部前置内容。 |
prependTo() | 向每个匹配的元素内部前置内容。 |
remove() | 移除所有匹配的元素。 |
removeAttr() | 从所有匹配的元素中移除指定的属性。 |
removeClass() | 从所有匹配的元素中删除全部或者指定的类。 |
replaceAll() | 用匹配的元素替换所有匹配到的元素。 |
replaceWith() | 用新内容替换匹配的元素。 |
text() | 设置或返回匹配元素的内容。 |
toggleClass() | 从匹配的元素中添加或删除一个类。 |
unwrap() | 移除并替换指定元素的父元素。 |
val() | 设置或返回匹配元素的值。 |
wrap() | 把匹配的元素用指定的内容或元素包裹起来。 |
wrapAll() | 把所有匹配的元素用指定的内容或元素包裹起来。 |
wrapinner() | 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。 |
文档和 HTML 文档均是适用的,除了:html()。