爱站程序员基地层级选择器是jQuery根据DOM元素之间的层级关系获取元素的选择器
$(\”parent>child\”)获取元素内的子元素(所有子类元素)
格式 $(\”parent>child\”)
<script type=\”text/javascript\”>
//文档就绪函数
$(function(){
var data=$(\”#test>input\”);
console.log(data);
})
</script>
<body>
<div id=\”test\”>
<input type=\”text\”> //选择
<input type=\”text\”> //选择
<div>
<input type=\”text\”/>
</div>
</body>
$(\”ancestor children\”) 获取元素内的后代元素(所有后代元素)
<script type=\”text/javascript\”>
//文档就绪函数
$(function(){
var data=$(\”#test input\”);
console.log(data);
})
</script>
<body>
<div id=\”test\”>
<input type=\”text\”> //选中
<input type=\”text\”> //选中
<div>
<input type=\”text\”/> //选中
</div>
</body>
$(\”prev+next\”) 获取元素紧挨着的下一个同辈元素
<script type=\”text/javascript\”>
//文档就绪函数
$(function(){
var data=$(\”#prev+input\”);
console.log(data);
})
</script>
<body>
<div id=\”test\”>
<input type=\”text\” value=\”北京\” id=\”prev\”/>
<input type=\”text\” value=\”上海\” id=\”next\”/> //选中
<input type=\”text\” value=\”广州\”/>
</div>
</body>
$(\”prev~siblings\”)
<script type=\”text/javascript\”>
//文档就绪函数
$(function(){
var data=$(\”#prev~input\”);
console.log(data);
})
</script>
<body>
<div id=\”test\”>
<input type=\”text\” value=\”北京\” id=\”prev\”/>
<input type=\”text\” value=\”上海\” /> //选中
<input type=\”text\” value=\”广州\”/> //选中
</div>
</body>
表单域选择器是jQuery 根据表单元素或类型来获取元素的选择器
$(\”:input\”)
<script src=\”js/jquery-1.8.2.min.js\”></script>
<script type=\”text/javascript\”>
//文档就绪函数
$(function(){
var data=$(\”:input\”);
console.log(data);
})
</script>
<body>
<form>
<input type=\”text\” value=\”北京\” id=\”prev\”/> //选中
<button value=\”按钮\”>按钮</button> //选中
</form>
</body>
$(\”:text\”) 获取所有type属性值为text的元素
<script src=\”js/jquery-1.8.2.min.js\”></script>
<script type=\”text/javascript\”>
//文档就绪函数
$(function(){
var data=$(\”:text\”);
console.log(data);
})
</script>
<body>
<form>
<input type=\”text\” value=\”北京\” /> //选中
<input type=\”text\” value=\”上海\” /> //选中
<input type=\”button\” value=\”提交\”/>
</form>
</body>
$(:password) 获取所有type属性值为password的元素
<script src=\”js/jquery-1.8.2.min.js\”></script>
<script type=\”text/javascript\”>
//文档就绪函数
$(function(){
var data=$(\”:password\”);
console.log(data);
})
</script>
<body>
<form>
<input type=\”password\” value=\”密码\”/> //选中
<input type=\”text\” value=\”北京\” />
<input type=\”button\” value=\”提交\”/>
</form>
</body>
$(:radio) 获取所有type属性值 radio的元素
$(:checkbox) 获取所有type属性值为checkbox的元素
$(:button) 获取所有type属性值和button和<button>元素
注：和$(“button”)不同。$(“button”)只获取<button>元素。
表单域属性选择器是jQuery根据表单域的属性帅选元素的选择器
$(\”:checked\”) 获取所有被选中单选框或者复选框元素
<script src=\”js/jquery-1.8.2.min.js\”></script>
<script type=\”text/javascript\”>
//文档就绪函数
$(function(){
var data=$(\”:checkbox:checked\”);
console.log(data);
})
</script>
<body>
<form>
<input type=\”checkbox\” value=\”篮球\”/>篮球
<input type=\”checkbox\” value=\”足球\” checked />足球 //轩重工
</form>
</body>
$(\”:selected\”) 获取下拉框中被选中元素
<script type=\”text/javascript\”>
//文档就绪函数
$(function(){
var data=$(\”select option:selected\”);
console.log(data);
})
</script>
<form>
<select>
<option >北京</option>
<option selected>上海</option> //选中
<option >广州</option></select>
</form>
位置选择器是jQuery根据元素所在位置获取元素的选择器
$(\”:first\”) 获取匹配元素中的第一个元素
<script src=\”js/jquery-1.8.2.min.js\”></script>
<script type=\”text/javascript\”>
//文档就绪函数
$(function(){
var data=$(\”input:first\”);
console.log(data);
})
</script>
<body>
<div>
<input type=\”text\” value=\”北京\” /> //选中
<input type=\”text\” value=\”上海\” />
<input type=\”text\” value=\”广州\” />
</div>
</body>
$(\”:last\”) 获取匹配元素中的最后一个元素
<script src=\”js/jquery-1.8.2.min.js\”></script>
<script type=\”text/javascript\”>
//文档就绪函数
$(function(){
var data=$(\”input:last\”);
console.log(data);
})
</script>
<body>
<div>
<input type=\”text\” value=\”北京\” />
<input type=\”text\” value=\”上海\” />
<input type=\”text\” value=\”广州\” /> //选中
</div>
</body>
$(\”:even\”) 匹配一类元素中索引为偶数的元素,从0开始计数
<script src=\”js/jquery-1.8.2.min.js\”></script>
<script type=\”text/javascript\”>
//文档就绪函数
$(function(){
var data=$(\”input:even\”);
console.log(data);
})
</script>
<div>
<input type=\”text\” value=\”北京\” /> //选中
<input type=\”text\” value=\”上海\” />
<input type=\”text\” value=\”广州\” /> //选中
<input type=\”text\” value=\”深圳\” />
</div>
$(\”odd\”)匹配一类元素中索引为奇数的元素，从0开始计数
<script src=\”js/jquery-1.8.2.min.js\”></script>
<script type=\”text/javascript\”>
//文档就绪函数
$(function(){
var data=$(\”input:odd\”);
console.log(data);
})
</script>
<div>
<input type=\”text\” value=\”北京\” />
<input type=\”text\” value=\”上海\” /> //选中
<input type=\”text\” value=\”广州\” />
<input type=\”text\” value=\”深圳\” /> //选中
</div>
:eq(index) 匹配一个给定索引值得元素
<script src=\”js/jquery-1.8.2.min.js\”></script>
<script type=\”text/javascript\”>
//文档就绪函数
$(function(){
var data=$(\”input:eq(2)\”);
console.log(data);
})
</script>
<div>
<input type=\”text\” value=\”北京\” />
<input type=\”text\” value=\”上海\” />
<input type=\”text\” value=\”广州\” /> //选中
<input type=\”text\” value=\”深圳\” />
</div>
:gt(index) 匹配所有大于给定索引值的元素
<script src=\”js/jquery-1.8.2.min.js\”></script>
<script type=\”text/javascript\”>
//文档就绪函数
$(function(){
var data=$(\”input:gt(2)\”);
console.log(data);
})
</script>
<div>
<input type=\”text\” value=\”北京\” />
<input type=\”text\” value=\”上海\” />
<input type=\”text\” value=\”广州\” />
<input type=\”text\” value=\”深圳\” /> //选中
</div>
:it(index) 匹配所有小于给定索引值的元素
<script src=\”js/jquery-1.8.2.min.js\”></script>
<script type=\”text/javascript\”>
//文档就绪函数
$(function(){
var data=$(\”input:lt(2)\”);
console.log(data);
})
</script>
<div>
<input type=\”text\” value=\”北京\” /> //选中
<input type=\”text\” value=\”上海\” /> //选中
<input type=\”text\” value=\”广州\” />
<input type=\”text\” value=\”深圳\” />
</div>
属性选择器
属性选择器是jQuery根据元素的属性来获取元素的选择器
$(\”[属性名]\”) 匹配所有包含该属性的元素
<script type=\”text/javascript\”>
$(function(){
var data=$(\”[name]\”);
console.log(data);
})
</script>
<div>
<input type=\”text\” name=\”beijing\” value=\”北京\” /> //选中
<input type=\”text\” name=\”shanghai\” value=\”上海\” />//选中
<input type=\”text\” value=\”广州\” />
<input type=\”text\”\” value=\”深圳\” />
</div>
$(\”[属性名=属性值]\”) 匹配所有该元素和该属性值的元素
<script type=\”text/javascript\”>
$(function(){
var data=$(\”[name=\’beijing\’]\”);
console.log(data);
})
</script>
<div>
<input type=\”text\” name=\”beijing\” value=\”北京\” /> //选中
<input type=\”text\” name=\”shanghai\” value=\”上海\” />
<input type=\”text\” value=\”广州\” />
<input type=\”text\”\” value=\”深圳\” />
</div>
$(\”[属性选择器1],[属性选择器2]\”) 匹配所有包含这些元素属性的元素
<script type=\”text/javascript\”>
$(function(){
var data=$(\”[id][name=\’beijing\’]\”);
console.log(data);
})
</script>
<div>
<input type=\”text\” name=\”beijing\” id=\”bj\” value=\”北京\” /> //选中
<input type=\”text\” name=\”shanghai\” value=\”上海\” />
<input type=\”text\” id=\”gz\” value=\”广州\” />
<input type=\”text\”\” value=\”深圳\” />
</div>
