基础语法是:$(selector).action()
· 美元符号定义 jQuery
· 选择符(selector)“查询”和“查找” HTML元素
· jQuery 的 action() 执行对元素的操作
示例
$(this).hide()- 隐藏当前元素
$("p").hide()- 隐藏所有段落
$(".test").hide()隐藏所有 class="test"的元素。
$("p.test").hide()- 隐藏所有class="test"的段落
$("#test").hide()- 隐藏所有id="test"的元素
文档就绪函数
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 documentready 函数中:
$(document).ready(function(){
--- jQuery functions go here ----
});
这是为了防止文档在完全加载(就绪)之前运行jQuery 代码。
jQuery 属性选择器
$("p") 选取 <p>元素。
$("p.intro") 选取所有class="intro"的 <p> 元素。
$("p#demo") 选取id="demo"的第一个 <p> 元素。
$("[href]") 选取所有带有 href属性的元素。
$("[href='#']") 选取所有带有 href值等于"#" 的元素。
$("[href!='#']") 选取所有带有 href值不等于"#" 的元素。
$("[href$='.jpg']")选取所有href 值以 ".jpg" 结尾的元素。
jQuery 事件函数
jQuery 事件处理方法是 jQuery中的核心函数。
事件处理程序指的是当 HTML中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。
通常会把 jQuery 代码放到 <head>部分的事件处理方法中:
jQuery 名称冲突
jQuery 使用 $符号作为 jQuery 的简介方式。
某些其他 JavaScript库中的函数(比如 Prototype)同样使用 $符号。
jQuery 使用名为 noConflict()的方法来解决该问题。
varjq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $符号。
例如:
<scripttype="text/javascript">
var jq=jQuery.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").hide();
});
});
</script>
jQuery 事件方法
方法 | 描述 |
向匹配元素附加一个或更多事件处理器 | |
触发、或将函数绑定到指定元素的 blur事件 | |
触发、或将函数绑定到指定元素的 change事件 | |
触发、或将函数绑定到指定元素的 click事件 | |
触发、或将函数绑定到指定元素的 double click事件 | |
向匹配元素的当前或未来的子元素附加一个或多个事件处理器 | |
移除所有通过 live() 函数添加的事件处理程序。 | |
触发、或将函数绑定到指定元素的 error事件 | |
返回 event 对象上是否调用了 event.preventDefault()。 | |
相对于文档左边缘的鼠标位置。 | |
相对于文档上边缘的鼠标位置。 | |
阻止事件的默认动作。 | |
包含由被指定事件触发的事件处理器返回的最后一个值。 | |
触发该事件的 DOM 元素。 | |
该属性返回从 1970 年 1 月 1日到事件发生时的毫秒数。 | |
描述事件的类型。 | |
指示按了哪个键或按钮。 | |
触发、或将函数绑定到指定元素的 focus事件 | |
触发、或将函数绑定到指定元素的 key down事件 | |
触发、或将函数绑定到指定元素的 key press事件 | |
触发、或将函数绑定到指定元素的 key up事件 | |
为当前或未来的匹配元素添加一个或多个事件处理器 | |
触发、或将函数绑定到指定元素的 load事件 | |
触发、或将函数绑定到指定元素的 mouse down事件 | |
触发、或将函数绑定到指定元素的 mouse enter事件 | |
触发、或将函数绑定到指定元素的 mouse leave事件 | |
触发、或将函数绑定到指定元素的 mouse move事件 | |
触发、或将函数绑定到指定元素的 mouse out事件 | |
触发、或将函数绑定到指定元素的 mouse over事件 | |
触发、或将函数绑定到指定元素的 mouse up事件 | |
向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 | |
文档就绪事件(当 HTML 文档就绪可用时) | |
触发、或将函数绑定到指定元素的 resize事件 | |
触发、或将函数绑定到指定元素的 scroll事件 | |
触发、或将函数绑定到指定元素的 select事件 | |
触发、或将函数绑定到指定元素的 submit事件 | |
绑定两个或多个事件处理器函数,当发生轮流的 click事件时执行。 | |
所有匹配元素的指定事件 | |
第一个被匹配元素的指定事件 | |
从匹配元素移除一个被添加的事件处理器 | |
从匹配元素移除一个被添加的事件处理器,现在或将来 | |
触发、或将函数绑定到指定元素的 unload事件 |
实例:
$("button#demo").click(function(){$("img").hide()})
jQuery 效果函数
方法 | 描述 |
对被选元素应用“自定义”的动画 | |
对被选元素移除所有排队的函数(仍未运行的) | |
delay() | 对被选元素的所有排队函数(仍未运行)设置延迟 |
dequeue() | 运行被选元素的下一个排队函数 |
逐渐改变被选元素的不透明度,从隐藏到可见 | |
逐渐改变被选元素的不透明度,从可见到隐藏 | |
把被选元素逐渐改变至给定的不透明度 | |
隐藏被选的元素 | |
queue() | 显示被选元素的排队函数 |
显示被选的元素 | |
通过调整高度来滑动显示被选元素 | |
对被选元素进行滑动隐藏和滑动显示的切换 | |
通过调整高度来滑动隐藏被选元素 | |
停止在被选元素上运行动画 | |
对被选元素进行隐藏和显示的切换 |
jQuery 文档操作方法
这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html()。
方法 | 描述 |
向匹配的元素添加指定的类名。 | |
在匹配的元素之后插入内容。 | |
向匹配的元素内部追加内容。 | |
向匹配的元素内部追加内容。 | |
设置或返回匹配元素的属性和值。 | |
在每个匹配的元素之前插入内容。 | |
创建匹配元素集合的副本。 | |
从 DOM 中移除匹配元素集合。 | |
删除匹配的元素集合中所有的子节点。 | |
检查匹配的元素是否拥有指定的类。 | |
设置或返回匹配的元素集合中的 HTML内容。 | |
把匹配的元素插入到另一个指定的元素集合的后面。 | |
把匹配的元素插入到另一个指定的元素集合的前面。 | |
向每个匹配的元素内部前置内容。 | |
向每个匹配的元素内部前置内容。 | |
移除所有匹配的元素。 | |
从所有匹配的元素中移除指定的属性。 | |
从所有匹配的元素中删除全部或者指定的类。 | |
用匹配的元素替换所有匹配到的元素。 | |
用新内容替换匹配的元素。 | |
设置或返回匹配元素的内容。 | |
从匹配的元素中添加或删除一个类。 | |
移除并替换指定元素的父元素。 | |
设置或返回匹配元素的值。 | |
把匹配的元素用指定的内容或元素包裹起来。 | |
把所有匹配的元素用指定的内容或元素包裹起来。 | |
将每一个匹配的元素的子内容用指定的内容或元素包裹起来 |
jQuery 属性操作方法
下面列出的这些方法获得或设置元素的 DOM 属性。
这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html()。
方法 | 描述 |
向匹配的元素添加指定的类名。 | |
设置或返回匹配元素的属性和值。 | |
检查匹配的元素是否拥有指定的类。 | |
设置或返回匹配的元素集合中的 HTML内容。 | |
从所有匹配的元素中移除指定的属性。 | |
从所有匹配的元素中删除全部或者指定的类。 | |
从匹配的元素中添加或删除一个类。 | |
设置或返回匹配元素的值。 |