目录
基本选择器的使用
<body>
<input type="button" id="btn1" value="标签选择器" />
<input type="button" id="btn2" value="类选择器" />
<input type="button" id="btn3" value="元素选择器" />
<input type="button" id="btn4" value="*全选选择器" />
<input type="button" id="btn5" value="任意多个选择器" />
<hr />
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<span id="four">
我是span
</span>
</body>
jQuery
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script>
$(function(){
$('#btn1').click(function(){
//id选择器
$('#one').css('background-color','pink');
});
$('#btn2').click(function(){
//类选择器
$('.mini').css('background-color','pink');
});
$('#btn3').click(function(){
//元素选择器
$('span').css('background-color','red');
});
$('#btn4').click(function(){
//全选选择器
$('*').css('background-color','aqua');
});
$('#btn5').click(function(){
$("#four,hr,#two").css("background-color","pink");
});
});
</script>
层级选择器
A B | 获得a元素内部的所有b元素 | 儿子、孙子,曾孙子等 |
A>B | 获得a元素下的所有b子元素 | 儿子 |
A+B | 获得a元素同级下一个b元素 | 兄弟 |
A~B | 获得a元素同级所有b元素 | 兄弟、同级的所有兄弟 |
列:层级选择器练习
html
<body>
在给定的祖先元素下匹配所有的后代元素(儿子、孙子,曾孙子等)
<input type="button" id="btn1" value="选择body中的所有的div元素" /><br />
在给定的父元素下匹配所有的子元素(儿子)
<input type="button" id="btn2" value="选择body中的第一级的孩子" /><br />
匹配所有紧接在 prev 元素后的 next 元素(找与prev元素紧邻的下个元素 兄弟)
<input type="button" id="btn3" value="选择id为two的元素的下一个元素" /><br />
匹配 prev 元素之后的所有 siblings 元素(兄弟、同级的所有兄弟)
<input type="button" id="btn4" value="选择id为one的所有的兄弟元素" /><br />
<hr />
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<div id="four">
</div>
</body>
jQuery
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script>
$(function(){
$('#btn1').click(function(){
$('div .mini').css('background-color','#FF0000');
});
$('#btn2').click(function(){
$('body>div').css('background-color','#FF0000');
});
$('#btn3').click(function(){
$('#one+div').css('background-color','#FF0000');
});
$('#btn4').click(function(){
$("#one~div").css("background-color","#FF0000");
});
});
</script>
结果:
![A B](https://i-blog.csdnimg.cn/blog_migrate/b038581b1a59d335ba649473d1619862.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0df37a07c6644a061fd160821188a49d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5fc180bf8d01b19c81641c071b92528e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b635129c731fcd139f7cd777639c2746.png)
基本过滤选择器
html
<body>
<input type="button" id="btn1" value="body中的第一个div元素" />
<input type="button" id="btn2" value="body中的最后一个div元素" />
<input type="button" id="btn3" value="选择body中的奇数的div" />
<input type="button" id="btn4" value="选择body中的偶数的div" />
<hr />
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>
jQuery
<script src="../js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script>
$(function(){
$('#btn1').click(function(){
$('body div:first').css('background-color','#FF0000');
});
$('#btn2').click(function(){
$('body div:last').css('background-color','#FF0000');
});
$('#btn3').click(function(){
$('body div:odd').css('background-color','#FF0000');
});
$('#btn4').click(function(){
$('body div:even').css('background-color','#FF0000');
});
});
</script>
结果:点击第三个按钮时
属性选择器
<body>
<input type="button" id="btn1" value="选择有id属性的div" />
<input type="button" id="btn2" value="选择有id属性的值为two的div" />
<hr />
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<span id="four">
</span>
</body>
jQuery
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$("div[id]").css("background-color","red");
});
$("#btn2").click(function(){
$("div[id='two']").css("background-color","red");
});
});
</script>
结果:
表单选择器
<body>
<input type="button" id="btn1" value="选择所有input元素" />
<input type="button" id="btn2" value="选择文本框" />
<br />
<form>
文本框<input type="text" /><br />
复选框<input type="checkbox" /><br />
单选框<input type="radio" /><br />
图片<input type="image" /><br />
文件<input type="file" /><br />
提交按钮<input type="submit" /><br />
恢复按钮<input type="reset" /><br />
密码框<input type="password" /><br />
btn按钮<input type="button" /><br />
下拉列表<select>
<option />1</select>
<option />2</select>
</select>
文本域<textarea></textarea><br />
btn按钮<button></button>
</form>
</body>
jQuery
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script>
$(function(){
$('#btn1').click(function(){
$(":input").css('background-color','#FF0000');
});
});
$(function(){
$('#btn2').click(function(){
$(":text").css('background-color','#FF0000');
});
});
</script>
结果: