元素
:
eq（index）
$（"ulli:
eq（3）"）
列表中的第四个元素（index从0开始）
:
gt（no）
$（"ulli:
gt（3）"）
列出index大于3的元素
:
lt（no）
$（"ulli:
lt（3）"）
列出index小于3的元素
:
not（selector）
$（"input:
not（:
empty）"）
所有不为空的input元素
:
header
$（":
header"）
所有标题元素
...
:
animated
所有动画元素
:
contains（text）
$（":
contains（'W3School'）"）
包含文本的所有元素
:
empty
$（":
empty"）
无子（元素）节点的所有元素
:
hidden
$（"p:
hidden"）
所有隐藏的
元素
:
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"）
所有元素
:
text
$（":
text"）
所有type="text"的元素
:
password
$（":
password"）
所有type="password"的元素
:
radio
$（":
radio"）
所有type="radio"的元素
:
checkbox
$（":
checkbox"）
所有type="checkbox"的元素
:
submit
$（":
submit"）
所有type="submit"的元素
:
reset
$（":
reset"）
所有type="reset"的元素
:
button
$（":
button"）
所有type="button"的元素
:
image
$（":
image"）
所有type="image"的元素
:
file
$（":
file"）
所有type="file"的元素
:
enabled
$（":
enabled"）
所有激活的input元素
:
disabled
$（":
disabled"）
所有禁用的input元素
:
selected
$（":
selected"）
所有被选取的input元素
:
checked
$（":
checked"）
所有被选中的input元素
jQuery事件
jQuery是为事件处理特别设计的。
jQuery事件函数
jQuery事件处理函数是jQuery中的核心函数。
事件处理函数是当HTML中发生事件时自动被调用的函数。
由“事件”（event）“触发”（triggered）是经常被用到的术语。
在您
中由于jQuery是为事件处理特别设计的，通常是把jQuery代码置于网页
部分的“事件处理”函数中：实例
$（document）.ready（function（）{
$（"button"）.click（function（）{
$（"p"）.hide（）;
}）;
}）;
Thisisaheading
Thisisaparagraph.
Thisisanotherparagraph.
Clickme
TIY
在上面的例子中，定义了一个处理HTML按钮的点击事件的click函数：
$（"button"）.click（function（）{..somecode...}）
click函数内部的代码隐藏所有
元素：
$（"p"）.hide（）;
所有事件函数都在文档自身的“事件处理器”内部进行定义：
$（document）.ready（function（）{..somecode...}）
单独文件中的函数
如果您的网站包含许多页面，并且您希望您的jQuery函数易于维护，那么请把您的jQuery函数放到独立的.js文件中。
当我们在教程中演示jQuery时，会将函数直接添加到
部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过src属性来引用文件）：
实例
jQuery名称冲突
jQuery使用$符号作为jQuery的简介方式。
某些其他JavaScript库中的函数（比如Prototype）同样使用$符号。
jQuery使用名为noConflict（）的方法来解决该问题。
varjq=jQuery.noConflict（），帮助您使用自己的名称（比如jq）来代替$符号。
TIY
结论
由于jQuery是为处理HTML事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
∙把所有jQuery代码置于事件处理函数中
∙把所有事件处理函数置于文档就绪事件处理器中
∙把jQuery代码置于单独的.js文件中
∙如果存在名称冲突，则重命名jQuery库
jQuery参考手册-事件
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（）
触发、或将函数绑定到指定元素的doubleclick事件
error（）
触发、或将函数绑定到指定元素的error事件
focus（）
触发、或将函数绑定到指定元素的focus事件
keydown（）
触发、或将函数绑定到指定元素的keydown事件
keypress（）
触发、或将函数绑定到指定元素的keypress事件
keyup（）
触发、或将函数绑定到指定元素的keyup事件
load（）
触发、或将函数绑定到指定元素的load事件
mousedown（）
触发、或将函数绑定到指定元素的mousedown事件
mouseenter（）
触发、或将函数绑定到指定元素的mouseenter事件
mouseleave（）
触发、或将函数绑定到指定元素的mouseleave事件
mousemove（）
触发、或将函数绑定到指定元素的mousemove事件
mouseout（）
触发、或将函数绑定到指定元素的mouseout事件
mouseover（）
触发、或将函数绑定到指定元素的mouseover事件
mouseup（）
触发、或将函数绑定到指定元素的mouseup事件
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效果
jQuery是为事件处理特别设计的。
jQuery事件函数
隐藏、显示、切换、滑动以及动画。
WOW!
Becausetimeisvaluable,wedeliverquickandeasylearning.
AtW3School,youcanstudyeverythingyouneedtolearn,inanaccessibleandhandyformat.
ClickHeretoShow/HidePanel
实例
jQueryhide（）
演示简单的jQueryhide（）函数。
jQueryhide（）
另一个hide（）演示。
如何隐藏部分文本。
jQueryslideToggle（）
演示简单的slidepanel效果。
jQueryfadeTo（）
演示简单的jQueryfadeTo（）函数。
jQueryanimate（）
演示简单的jQueryanimate（）函数。
jQuery隐藏和显示
通过hide（）和show（）两个函数，jQuery支持对HTML元素的隐藏和显示：
实例
$（"#hide"）.click（function（）{
$（"p"）.hide（）;
}）;
$（"#show"）.click（function（）{
$（"p"）.show（）;
}）;
TIY
hide（）和show（）都可以设置两个可选参数：
speed和callback。
语法：
$（selector）.hide（speed,callback）
$（selector）.show（speed,callback）
callback参数是在hide或show函数完成之后被执行的函数名称。
您将在本教程下面的章节学习更多有关callback参数的知识。
speed参数可以设置这些值：
"slow","fast","normal"或milliseconds：
实例
$（"button"）.click（function（）{
$（"p"）.hide（1000）;
}）;
TIY
jQuery切换
jQuerytoggle（）函数使用show（）或hide（）函数来切换HTML元素的可见状态。
隐藏显示的元素，显示隐藏的元素。
语法：
$（selector）.toggle（speed,callback）
speed参数可以设置这些值：
"slow","fast","normal"或毫秒。
实例
$（"button"）.click（function（）{
$（"p"）.toggle（）;
}）;
TIY
callback参数是在hide或show函数完成之后被执行的函数名称。
您将在本教程下面的章节学习更多有关callback参数的知识。
jQuery滑动函数-slideDown,slideUp,slideToggle
jQuery拥有以下滑动函数：
$（selector）.slideDown（speed,callback）
$（selector）.slideUp（speed,callback）
$（selector）.slideToggle（speed,callback）
speed参数可以设置这些值：
"slow","fast","normal"或毫秒。
callback参数是在hide或show函数完成之后被执行的函数名称。
您将在本教程下面的章节学习更多有关callback参数的知识。
slideDown（）实例
$（".flip"）.click（function（）{
$（".panel"）.slideDown（）;
}）;
TIY
slideUp（）实例
$（".flip"）.click（function（）{
$（".panel"）.slideUp（）
}）
TIY
slideToggle（）实例
$（".flip"）.click（function（）{
$（".panel"）.slideToggle（）;
}）;
TIY
jQueryFade函数-fadeIn（）,fadeOut（）,fadeTo（）
jQuery拥有以下fade函数：
$（selector）.fadeIn（speed,callback）
$（selector）.fadeOut（speed,callback）
$（selector）.fadeTo（speed,opacity,callback）
speed参数可以设置这些值：
"slow","fast","normal"或毫秒。
fadeTo（）函数中的opacity参数规定减弱到给定的不透明度。
callback参数是在hide或show函数完成之后被执行的函数名称。
您将在本教程下面的章节学习更多有关callback参数的知识。
fadeTo（）实例
$（"button"）.click（function（）{
$（"div"）.fadeTo（"slow",0.25）;
}）;
TIY
fadeOut（）实例
$（"button"）.click（function（）{
$（"div"）.fadeOut（4000）;
}）;
TIY
jQuery自定义动画
jQuery函数创建自定义动画的语法：
$（selector）.animate（{params},[duration],[easing],[callback]）
关键的参数是params。
它定义了产生动画的属性。
可以同时设置多个此类属性：
animate（{width:
"70%",opacity:
0.4,marginLeft:
"0.6in",fontSize:
"3em"}）;
第二个参数是duration。
它定义用来应用于动画的时间。
它设置的值是：
"slow","fast","normal"或毫秒。
实例1
$（document）.ready（function（）{
$（"#start"）.click（function（）{
$（"#box"）.animate（{height:
300},"slow"）;
$（"#box"）.animate（{width:
300},"slow"）;
$（"#box"）.animate（{height:
100},"slow"）;
$（"#box"）.animate（{width:
100},"slow"）;
}）;
}）;
TIY
实例2
$（document）.ready（function（）{
$（"#start"）.click（function（）{
$（"#box"）.animate（{left:
"100px"},"slow"）;
$（"#box"）.animate（{fontSize:
"3em"},"slow"）;
}）;
}）;
TIY
HTML元素默认是静态定位，且无法移动。
如需使元素可以移动，请把CSS的position设置为relative或absolute。
jQuery参考手册-效果
jQuery效果函数
Hide/Show
描述
show（）
显示被选的元素
hide（）
隐藏被选的元素
toggle（）
对被选元素进行隐藏和显示的切换
Slide
slideDown（）
通过调整高度来滑动显示被选元素
slideUp（）
通过调整高度来滑动隐藏被选元素
slideToggle（）
对被选元素进行滑动隐藏和滑动显示的切换
Fadein/out
展开阅读全文
相关搜索