元素:
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元素
1.6、jQuery事件
jQuery事件函数
jQuery事件处理方法是jQuery中的核心函数。
事件处理程序指的是当HTML中发生某些事件时所调用的方法。
术语由事件“触发”(或“激发”)经常会被使用。
通常会把jQuery代码放到
部分的事件处理方法中:实例
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Thisisaheading
Thisisaparagraph.
Thisisanotherparagraph.
在上面的例子中,当按钮的点击事件被触发时会调用一个函数:
$("button").click(function(){..somecode...})
该方法隐藏所有
元素:
$("p").hide();
jQuery中事件方法的一些例子:
Event函数
绑定函数至
$(document).ready(function)
将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function)
触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)
触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)
触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)
触发或将函数绑定到被选元素的鼠标悬停事件
jQuery参考手册-事件
方法
描述
bind()
向匹配元素附加一个或更多事件处理器
blur()
触发、或将函数绑定到指定元素的blur事件
change()
触发、或将函数绑定到指定元素的change事件
click()
触发、或将函数绑定到指定元素的click事件
dblclick()
触发、或将函数绑定到指定元素的doubleclick事件
delegate()
向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die()
移除所有通过live()函数添加的事件处理程序。
error()
触发、或将函数绑定到指定元素的error事件
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事件
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()
触发、或将函数绑定到指定元素的select事件
submit()
触发、或将函数绑定到指定元素的submit事件
toggle()
绑定两个或多个事件处理器函数,当发生轮流的click事件时执行。
trigger()
所有匹配元素的指定事件
triggerHandler()
第一个被匹配元素的指定事件
unbind()
从匹配元素移除一个被添加的事件处理器
undelegate()
从匹配元素移除一个被添加的事件处理器,现在或将来
unload()
触发、或将函数绑定到指定元素的unload事件
2、jQuery效果-隐藏和显示
DOCTYPEhtml>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
如果点击“隐藏”按钮,我就会消失。
隐藏
显示
2.1、语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的speed参数规定隐藏/显示的速度,可以取以下值:
"slow"、"fast"或毫秒。
可选的callback参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有speed参数的hide()方法:
DOCTYPEhtml>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
隐藏
这是一个段落。
这是另一个段落。
2.2jQuerytoggle()
通过jQuery,您可以使用toggle()方法来切换hide()和show()方法。
显示被隐藏的元素,并隐藏已显示的元素:
DOCTYPEhtml>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
切换
这是一个段落。
这是另一个段落。
2.3、jQuery效果函数
方法
描述
animate()
对被选元素应用“自定义”的动画
clearQueue()
对被选元素移除所有排队的函数(仍未运行的)
delay()
对被选元素的所有排队函数(仍未运行)设置延迟
dequeue()
运行被选元素的下一个排队函数
fadeIn()
逐渐改变被选元素的不透明度,从隐藏到可见
fadeOut()
逐渐改变被选元素的不透明度,从可见到隐藏
fadeTo()
把被选元素逐渐改变至给定的不透明度
hide()
隐藏被选的元素
queue()
显示被选元素的排队函数
show()
显示被选的元素
slideDown()
通过调整高度来滑动显示被选元素
slideToggle()
对被选元素进行滑动隐藏和滑动显示的切换
slideUp()
通过调整高度来滑动隐藏被选元素
stop()
停止在被选元素上运行动画
toggle()
对被选元素进行隐藏和显示的切换
2.4、jQuery效果-淡入淡出
jQueryFading方法
通过jQuery,您可以实现元素的淡入淡出效果。
jQuery拥有下面四种fade方法:
∙fadeIn()jQueryfadeIn()用于淡入已隐藏的元素。
∙fadeOut()jQueryfadeOut()方法用于淡出可见元素。
∙fadeToggle()jQueryfadeToggle()方法可以在fadeIn()与fadeOut()方法之间进行切换。
如果元素已淡出,则fadeToggle()会向元素添加淡入效果。
如果元素已淡入,则fadeToggle()会向元素添加淡出效果。
∙fadeTo()jQueryfadeTo()方法允许渐变为给定的不透明度(值介于0与1之间)。
2.4.1、演示带有不同参数的fadeIn()方法。
DOCTYPEhtml>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
演示带有不同参数的fadeIn()方法。
80px;height:
80px;display:
none;background-color:
red;">
80px;height:
80px;display:
none;background-color:
green;">
80px;height:
80px;display:
none;background-color:
blue;">
2.4.2、演示带有不同参数的fadeOut()方法。
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
演示带有不同参数的fadeOut()方法。
80px;height:
80px;background-color:
red;">
80px;height:
80px;background-color:
green;">
80px;height:
80px;background-color:
blue;">
2.4.3、演示带有不同参数的fadeToggle()方法。
DOCTYPEhtml>
展开阅读全文
相关搜索