jQuery简述

是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。

一、jQuery 语法实例

$(this).hide()
演示 jQuery hide() 函数，隐藏当前的 HTML 元素。

$("#test").hide()
演示 jQuery hide() 函数，隐藏 id=“test” 的元素。

$(“p”).hide()
演示 jQuery hide() 函数，隐藏所有

元素。

$(".test").hide()
演示 jQuery hide() 函数，隐藏所有 class=“test” 的元素。

二、jQuery选择器

1.基本选择器

选择器	实例	选取
#id	$("#lastname")	id=“lastname” 的元素
.class	$(".intro")	所有 class=“intro” 的元素
element	$(“p”)	所有 < p > 元素
*	$(*)	页面所有元素
selector1,selector2,selector3	$("#name,a,.intro")	id=“name”，所有< a >元素和class=“intro”

2.基本过滤器

过滤器	实例	选取
: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 的元素（index 从 0 开始）
:lt(no)	$(“ul li:lt(3)”)	列出 index 小于 3 的元素（index 从 0 开始）
:not(selector)	$(“input:not(:empty)”)	所有不为空的 input 元素
:header	$(":header")	所有标题元素 < h1 > - < h6 >
:animated		所有正在执行的动画元素

3.内容过滤器

过滤器	实例	选取
:contains(text)	$(":contains(‘W3School’)")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:contains(text )	$(“div:contains(John)”)	查找所有包含John的div元素

4.可见性过滤器

过滤器	实例	选取
:hidden	$(“p:hidden”)	所有隐藏的 < p > 元素
:visible	$(“table:visible”)	所有可见的表格

5.属性过滤器

过滤器	实例	选取
[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href=’#’]")	所有 href 属性的值等于 “#” 的元素
[attribute!=value]	$("[href!=’#’]")	所有 href 属性的值不等于 “#” 的元素
[attribute$=value]	$("[href $=’.jpg’]")	所有 href 属性的值包含以 “.jpg” 结尾的元素

6.表单选择器

表单选择器主要是对表单元素进行选择，需要注意的是，选择不仅是input元素，还包括textarea和select元素

选择器	实例	选取
:input	$(":input")	所有 < input > 元素
:text	$(":text")	所有 type=“text” 的 < input > 元素
:password	$(":password")	所有 type=“password” 的 元素
: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” 的 元素

7.表单过滤器

表单过滤器主要是对表单元素进行过滤，对于选取的表单元素有比较大的帮助

过滤器	实例	选取
: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” 的按钮时隐藏所有图像。

过滤器	实例
bind()	向匹配元素附加一个或更多事件处理器
blur()	当元素失去焦点时发生 blur 事件
change()	当元素的值发生改变时，会发生 change 事件
click()	当点击元素时，会发生 click 事件
dblclick()	当双击元素时，会发生 dblclick 事件
delegate()	向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die()	移除所有通过 live() 函数添加的事件处理程序
error()	当元素遇到错误（没有正确载入）时，发生 error 事件。该方法是 bind(‘error’, handler) 的简写方式。
event.isDefaultPrevented()	返回 event 对象上是否调用了 event.preventDefault()
event.pageX	相对于文档左边缘的鼠标位置
event.pageY	相对于文档上边缘的鼠标位置
event.preventDefault()	阻止事件的默认动作
event.result	包含由被指定事件触发的事件处理器返回的最后一个值
event.target	触发该事件的 DOM 元素
event.timeStamp	该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数
event.type	描述事件的类型
event.which	指示按了哪个键或按钮
focus()	当元素获得焦点时，发生 focus 事件
keydown()	当按钮被按下时，发生 keydown 事件
keypress()	keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件
keyup()	当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上
live()	为当前或未来的匹配元素添加一个或多个事件处理器
load()	当指定的元素（及子元素）已加载时，会发生 load() 事件
mousedown()	当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
mouseenter()	当鼠标指针穿过元素时，会发生 mouseenter 事件
mouseleave()	当鼠标指针离开元素时，会发生 mouseleave 事件
mousemove()	当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件
mouseout()	当鼠标指针从元素上移开时，发生 mouseout 事件
mouseover()	当鼠标指针位于元素上方时，会发生 mouseover 事件
mouseup()	当在元素上放松鼠标按钮时，会发生 mouseup 事件
one()	向匹配元素添加事件处理器。每个元素只能触发一次该处理器
ready()	文档就绪事件（当 HTML 文档就绪可用时）
resize()	当调整浏览器窗口的大小时，发生 resize 事件
scroll()	当用户滚动指定的元素时，会发生 scroll 事件
select()	当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件
submit()	当提交表单时，会发生 submit 事件
toggle()	绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行
trigger()	所有匹配元素的指定事件
triggerHandler()	第一个被匹配元素的指定事件
unbind()	从匹配元素移除一个被添加的事件处理器
undelegate()	从匹配元素移除一个被添加的事件处理器，现在或将来
unload()	当用户离开页面时，会发生 unload 事件