1
、
Jquery
选择器的各种用法
$(this)
当前元素
$("p")
所有
<p>
元素
$("input")
所有
input
元素
$(".intro")
所有
class=
“
intro
”
的元素
$("p.intro")
所有
class="intro"
的
<p>
元素
$("#intro")
id="intro"
的第一个元素
$("ul > li")
ul
下的所有
li
节点
$("ul li:first")
每个
<ul>
的第一个
<li>
元素
$("[href$='.jpg']")
所有带有以
".jpg"
结尾的
href
属性的属性
$("div#intro .head")
id="intro"
的
<div>
元素中的所有
class="head"
的元素
$(li[a:contains('Register')]")
内容包含
Register
的
<a>
元素
$("input[@name=bar]")
name
是
bar
的
<input>
元素
$("input[@type=radio][@checked]")
type
是
radio
的
<input>
元素
$(“li”).not(“ul”)
li
下没有包含
ul
节点的节点元素
$("span[@id]")
包含
id
属性的
<span>
元素
$("[@id=span1]")
id
为
span1
的节点元素
2
、
Jquery
事件器的介绍
语法:
$(元素). 事件( 事件属性);
常见事件
$(selector).click()
被选元素的点击事件
$(selector).dblclick()
被选元素的双击事件
$(selector).focus()
被选元素的获得焦点事件
$(selector).mouseover()
被选元素的鼠标悬停事件
$(selector).css();
被选元素的
CSS
事件
$(selector). hide();
被选元素的隐藏事件
$(selector). show(
'slow
'
);
被选元素的显示事件
……
Dom
节点操作
$(
“
a
”
).addClass(
“
red
”
)
为所有
<a>
增加
class=
”
red
”
$(
“
a
”
).removeClass(
“
red
”
)
为所有
<a>
去掉
class=
”
red
”
$(
“
li
”
).append(
“
BB!
”
)
为
<li>
增加
”BB!”innerHTML
执行事件
//hover
是在执行完第一个函数后再执行第二个
$(“p”).hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});
//toggle
第一次点击执行第一个函数,再点击执行第二个
$(“p”).toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
});