基本选择器:
<div id="a" class="b">基本选择器</div>
id选择器: KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲a").click(funct…(".b").click(function(){});
标签选择器:$(“div”).click(function(){});
过滤选择器书写时都以:冒号开头
1)基本过滤器
:first 获取第一个元素
eg: $(“li:first”) 获取所有li中的第一个li
:last
:even 获取索引为偶数的元素
eg:$(“li:even”)获取索引为偶素的li
:odd 获取索引为奇数的元素
:eq(index)获取索引等于index的元素,索引从0开始计算
eg: $(“li:eq(2)”) 获取索引等于2的li
:gt(index)获取索引大于index的元素
:lt(index)获取索引小于index的元素
…
内容过滤选择器
:contains(text) 获取含有text的 元素
:empty 获取没有后代的元素(且没有文本)
:has(selector) 获取有后代元素为selector的元素
:parent 获取有后台元素或者有文本的元素
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style type="text/css">
div{
width:50px;
height:50px;
float:left;
margin:10px;
}
p{
clear:left;
}
</style>
<script>
$(function(){
$("#a").click(function(){
$("div:contains('A')").css('background-color','#F00');
});
$("#b").click(function(){
$("div:empty").css('background-color','#0F0');
});
$("#c").click(function(){
$("div:has(span)").css('background-color','#00F');
});
$("#d").click(function(){
$("div:parent").css('color','white');
});
})
</script>
</head>
<body>
<div>ABCD</div>
<div></div>
<div><span></span></div>
<p>
<input type="button" value="a" id="a"/>
<input type="button" value="b" id="b"/>
<input type="button" value="c" id="c"/>
<input type="button" value="d" id="d"/>
</p>
</body>
</html>
可见性过滤器
:hidden 选取不可见元素
:visible 选取可见元素