层级选择器;
A B ----> 获取 A 下面的所有的 B(重点)
A>B ----> 获取A的直接子级 B(重点)
A+B ----> 获取A的第一个B兄弟元素
A~B ----> 获取A的所有B兄弟元素
$(function(){
var ds = $("#main div");
alert(ds.length);
var ds = $("#main>div");
alert(ds.length);
var d = $("#header+div");
alert(d.html());
var ds = $("#header~div");
alert(ds.length);
})
<body>
<div id="main">
<div id="header">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div id="product">
product
</div>
<div id="footer">
footer
</div>
</div>
</body>
过滤选择器:
$(function(){
// 需求1:获取 main div 下面的第一个子级div
var first = $("#main :first");//空格有自己特有含义,不能随便使用
alert(first.html());
获取最后一个
var last = $("#main :last");
alert(last.html());
获取main div 的所有子级(偶数)
var ds = $("#main :even");//根据索引计算,索引从0开始
alert(ds.length);
//获取main div 的所有子级(奇数)
var ds = $("#main>:odd");//根据索引计算,索引从0开始
alert(ds.length);
属性选择器
[属性名] ---- 获取具有该属性的元素
[属性 = 值] -- 获取属性为某个具体值的元素
[属性 != 值] -- 获取属性不是这个值的元素,可以写多个,值用单引号''
var d = $("div[id = 'header']")
表单选择器;
:disabled --- 不可以
:enabled ---- 可用
:checked ---- 被选定 --- 复选框 单选按钮
:selected --- 被选定 --- 下拉列表
$(function(){
var is = $("input:enabled");//注意空格的使用
alert(is.length);
var is = $("input:disabled");//注意空格的使用
alert(is.length);
//相同的效果,思路不同,可能选择器书写也不同
var cs = $("input:checked");
var cs = $("input[type='checkbox']:checked");
alert(cs.length);
var s = $("#city option:selected");
alert(s.length);
var s = $("#city2 option:selected");
alert(s.length);
})