jQuery高级选择器
层级选择器
和CSS层级选择器类似，可以通过层级关系获取对应标签对象。
语法
| A B 获得A元素内部的所有的B元素。（后代） |
| A>B 获得A元素下面的所有B子元素。（子标签） |
| A+B 获得A元素同级下一个B元素。（直接后兄弟） |
| A~B 获得A元素之后的所有B元素。（一般后兄弟） |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery.js" ></script>
<script>
$(function(){
//后代选择器（所有后代）
alert("后代选择器");
var choise = $('#main div');
for(var i=0;i<choise.length;i++){
alert(choise[i].innerHTML);
}
//子标签选择器（只在儿子辈中）
alert("子标签选择器");
choise = $("#main>div");
for(var i=0;i<choise.length;i++){
alert(choise[i].innerHTML);
}
//直接后兄弟
alert("直接后兄弟");
choise = $("#main+div");
for(var i=0;i<choise.length;i++){
alert(choise[i].innerHTML);
}
//一般后兄弟
alert("一般后兄弟");
choise = $("#main~div");
for(var i=0;i<choise.length;i++){
alert(choise[i].innerHTML);
}
})
</script>
</head>
<body>
<span id="main">
<div>子代111111</div>
<div>子代222222</div>
<div>子代333333</div>
<span>
<div>孙代44444</div>
</span>
</span>
<div>同辈55555</div>
<span>
<div>同辈的子代66666</div>
</span>
<div>同辈77777</div>
</body>
</html>
属性选择器
我们可以通过属性选择器，以属性名或者值来匹配对应标签,比如：
<input type="radio" name="sex" value="man" />男
<input type="radio" name="sex" value="woman" />女中，拥有共同的type属性，或者type属性一样的，或者比如value属性里都有a字母的。
| [属性名] 获得有 指定属性名 的标签对象。 |
| [属性名=值] 获得 指定属性名等于指定值 的标签对象 |
| [属性名*=值] 获得 指定属性名 含有 指定值 的标签对象 [value *= a ] |
| 多个属性选择器可以组合使用 [选择器1][选择器2][选择器3] ，多个属性同时过滤。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery.js" ></script>
<script>
$(function(){
alert("[属性名]");
var prop = $("[type]");
for(var i=0;i<prop.length;i++){
alert(prop[i].value);
}
alert("[属性名=值]");
var prop = $("[type=radio]");
for(var i=0;i<prop.length;i++){
alert(prop[i].value);
}
alert("[属性名*=值]");
var prop = $("[value*=man]");
for(var i=0;i<prop.length;i++){
alert(prop[i].value);
}
alert("多个属性选择器");
var prop = $("[value*=man][type=radio][name=sex]");
for(var i=0;i<prop.length;i++){
alert(prop[i].value);
}
})
</script>
</head>
<body>
用户名：<input type="text" name="uname" value="小刘"/><br />
密码：<input type="password" name="pwd" value="123"/><br />
性别：<input type="radio" name="sex" value="man" />男
<input type="radio" name="sex" value="woman" />女<br />
是否VIP：<input type="radio" name="vip" value="no" />不是
<input type="radio" name="vip" value="yes" />是<br />
</body>
</html>
基本过滤选择器
语法为： 标签：过滤选择器（具体看下面代码演示）
- :first 第一个
- :last 最后一个
- :even 偶数，索引从 0 开始计数
- :odd 奇数
- :not(..) 除了指定内容。 1234:not(1) 234
- :eq(index) 获取指定索引的元素 =
- :gt(index) 大于index索引的元素 >
- :lt(index) 小于index索引的元素 <
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery.js" ></script>
<script>
$(function(){
alert(":first 第一个");
var dd = $("div:first");
//注意这里是jq对象，所以要用jq的方法
alert(dd.html());
alert(":last 最后一个");
dd = $("div:last");
alert(dd.html());
alert(":even 偶数，索引从 0 开始计数");
dd = $("div:even");
for(var i=0;i<dd.length;i++){
//这里在进行遍历的时候又变回了js对象，所以其要用js的方法
alert(dd[i].innerHTML);
}
alert("odd 奇数");
dd = $("div:odd");
for(var i=0;i<dd.length;i++){
alert(dd[i].innerHTML);
}
alert(":not() 除了指定内容。");
dd = $("div:not(:eq(3),:eq(0),:eq(5))");
for(var i=0;i<dd.length;i++){
alert(dd[i].innerHTML);
}
alert(":eq(index) 获取指定索引的元素 =");
dd = $("div:eq(4)");
alert(dd.html());
alert(":gt(index) 大于index索引的元素 >");
dd = $("div:gt(5)");
for(var i=0;i<dd.length;i++){
alert(dd[i].innerHTML);
}
alert(":lt(index) 小于index索引的元素 <");
dd = $("div:lt(2)");
for(var i=0;i<dd.length;i++){
alert(dd[i].innerHTML);
}
})
</script>
</head>
<body>
<div>11111111，索引是0</div>
<div>22222222，索引是1</div>
<div>33333333，索引是2</div>
<div>44444444，索引是3</div>
<div>55555555，索引是4</div>
<div>66666666，索引是5</div>
<div>77777777，索引是6</div>
<div>88888888，索引是7</div>
</body>
</html>
表单选择器
语法
- :input $(":input") 所有<input>元素 textarea select 等标签也会选中
- :text $(":text") 所有type="text"的<input>元素
- :password $(":password") 所有type="password"的<input>元素
- :radio $(":radio") 所有type="radio"的<input>元素
- :checkbox $(":checkbox") 所有type="checkbox"的<input>元素
- :submit $(":submit") 所有type="submit"的<input>元素
- :reset $(":reset") 所有type="reset"的<input>元素
- :button $(":button") 所有type="button"的<input>元素
- :image $(":image") 所有type="image"的<input>元素
- :file $(":file") 所有type="file"的<input>元素
- :enabled $(":enabled") 所有激活的input元素
- :disabled $(":disabled") 所有禁用的input元素
- :selected $(":selected") 所有被选取的input元素
- :checked $(":checked") 所有被选中的input元素
因为实在太多，所以挑选一些演示。触类旁通：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery.js" ></script>
<script>
$(function(){
//1、获取可用的表单输入项(太多，显示前五项)
alert("可用按钮(太多，显示前五项)");
var use = $(":enabled:lt(5)");
for(var i=0;i<use.length;i++){
alert(use[i].value+">>>"+i);
}
//2、获取不可用的表单输入项
alert("下面是不可用按钮");
var nouse = $(":disabled");
for(var i=0;i<nouse.length;i++){
alert(nouse[i].value+">>>"+i);
}
//3、获取选中的复选框
alert("获取选中的复选框");
var check = $(":checkbox:checked");
for(var i=0;i<check.length;i++){
alert(check[i].value+">>>"+i);
}
//4、获取国家下拉框中，被选中的option
alert("获取国家下拉框中，被选中的option");
var sel = $("#country option:selected");
for(var i=0;i<sel.length;i++){
alert(sel[i].value+">>>"+i);
}
});
</script>
</head>
<body>
<h1>不可用的表单输入项</h1>
<input type="text" disabled="disabled" value="admin" />
<input type="button" value="不可用按钮" disabled="disabled" />
<h1>复选框</h1>
<input type="checkbox" name="hobby" value="code"/>编程
<input type="checkbox" name="hobby" value="swimming" checked="checked"/>游泳
<input type="checkbox" name="hobby" value="reading" checked="checked"/>阅读
<hr />
<h1>下拉选择框</h1>
城市：<select id="city" value="city">
<option value="choise">请选择</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
国家：<select id="country" multiple="multiple" value="country">
<option value="China" selected="selected">中国</option>
<option value="America" selected="selected">美国</option>
<option value="Russia">俄罗斯</option>
<option value="England">英国</option>
</select>
</body>
</html>
扫一扫
554
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
