一、选择器(1、基本选择器、2、层级选择器、3、基本过滤选择器、4、内容选择器、5、可见选择器 、6、属性选择器、7、子元素选择器 、8、表单选择器)
1.基本选择器
【1】元素名选择器
$(“div”) – 匹配所有的div元素
【2】class选择器
$(".c1") – 匹配所有class值为c1 的元素
$(“div.c1”) – 匹配所有class值为c1的div元素
【3】id选择器
$("#d1") – 匹配所有id值为d1的元素
$(“div#d1”) – 匹配所有id值为d1的div元素
【4】‘*’号匹配符
$("*") – 匹配所有的元素
【5】多元素选择器
$(“div,span,#d1,.c1”) – 匹配所有的div/span元素以及id值为d1的元素和class值为c1的元素
2、层级选择器
$(“div span”) – 匹配div下所有的span元素
$(“div>span”) – 匹配div下所有的span子元素
$(“div+span”) – 匹配div后面紧邻的span兄弟元素
$(“div~span”) – 匹配div后面所有的span兄弟元素
5、可见选择器
$(“div:hidden”) – 匹配所有隐藏的div元素
$(“div:visible”) – 匹配所有可见的div元素
二、常用方法
parent()
$("#d1").parents() – 获取id为d1元素的祖先元素
parents()
$("#d1").parents(“tr”) – 获取id为d1元素的tr祖先元素
$("#d1").parents(“tr”) – 获取id为d1元素的tr祖先元素
next()
$(“div”).next() – 获取所匹配元素后面紧邻的兄弟元素
$(“div”).next(“span”) – 获取所匹配元素后面紧邻的span兄弟元素
append()
$(“div”).append("") –为所匹配元素追加一个span子元素
remove(
$(“div”).remove() – 删除所匹配元素
html
$(“div”).html() – 获取所匹配元素的html内容
$(“div”).html(“xxx”) – 为所匹配元素设置html内容html()
小提示:append是附加,html是覆盖
text()
$(“div”).text() – 获取所匹配元素的文本内容
$(“div”).text(“xxx”) – 为所匹配元素设置文本内容
attr();
$(“div”).attr(“id”) – 获取所匹配元素的id属性值
$(“div”).attr(“id”, “xx”) – 为所匹配元素设置id属性
css()
(
"
d
i
v
"
)
.
c
s
s
(
"
w
i
d
t
h
"
)
–
获
取
所
匹
配
元
素
的
w
i
d
t
h
样
式
属
性
值
("div").css("width") – 获取所匹配元素的width样式属性值
("div").css("width")–获取所匹配元素的width样式属性值(“div”).css(“width”, “200px”) – 为所匹配元素设置width样式属性
$(“div”).css({“width”:“200px”, “color”:“red”,“font-size”:“24px” }) ; – 为所匹配元素设置width样式属性
三、常用事件
click()
$(“div”).click(function(){}) – 为所匹配元素绑定点击事件
blur()
$(“input”).blur(function(){}) – 为所匹配元素绑定失去输入焦点事件
focus()
$(“input”).focus(function(){}) – 为所匹配元素绑定获得输入焦点事件
change()
$(“select”).change(function(){}) – 为所匹配元素绑定选项切换事件
ready()
(
d
o
c
u
m
e
n
t
)
.
r
e
a
d
y
(
f
u
n
c
t
i
o
n
(
)
)
–
文
档
就
绪
事
件
其
作
用
相
当
于
:
w
i
n
d
o
w
.
o
n
l
o
a
d
=
f
u
n
c
t
i
o
n
(
)
简
写
形
式
为
:
(document).ready(function(){}) – 文档就绪事件其作用相当于: window.onload = function(){} 简写形式为:
(document).ready(function())–文档就绪事件其作用相当于:window.onload=function()简写形式为:(function(){}) – 在整个文档加载完成后立即执行
show()
$(“div”).show() – 将隐藏元素设置为显示(底层操作的是display);
hide()
$(“div”).hide() – 将显示元素设置为隐藏(底层操作的是display);
toggle()
$(“div”).toggle() – 切换元素的可见状态, 如果元素显示则设置为隐藏, 如果元素隐藏则设置为可见