在简单选择器外，还有一些进阶的选择器方便我们更精准的选择元素。
1、群组选择器
可以将相同的样式合并
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function(){
/*$(‘div,p,strong‘).css(‘color‘,‘red‘); 同样可以是id，class等选择器组合*/
$(‘#box,.pox,strong‘).css(‘color‘,‘red‘);
});
</script>
<style>
/*div,p,strong{ color:red;}多种选择器添加红色字体 多个选择器之间逗号隔开就行，可以是id，class等选择器的组合*/
</style>
</head>
<body>
<div id="box">div</div>
<div>div</div>
<div>div</div>
<p>p</p>
<p>p</p>
<p class="pox">p</p>
<strong>strong</strong>
<strong>strong</strong>
<strong>strong</strong>
</body>
2、后代选择器
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function(){
$(‘ul li a‘).css(‘color‘, ‘red‘); //后代选择器 jQuery 方式
});
</script>
<style>
/*ul li a { color:red;}层层追溯到的元素添加红色字体*/
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
<a href="#">首页</a>
<a href="#">首页</a>
</body>
3、通配选择器
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function(){
$(‘*‘).css(‘color‘, ‘blue‘); //通配选择器
alert($(‘*‘).size());//测试通配选择器到底选择了多少个节点
alert($(‘*‘)[0]);//第一个是html节点对象
//html节点对象一般不是想要的，只想要body节点对象里面的有用的，所以通配选择器会极大的消耗资源，所以不建议在全局中使用
});
</script>
<style>
*{ color:red;}/*页面所有元素都添加红色字体*/
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
<a href="#">首页</a>
<a href="#">首页</a>
</body>
警告：在实际使用上，通配选择器一般用的并不多，尤其是在大通配上，比如：$(‘*‘)，这种使用方法效率很低，影响性能，建议竟可能少用。可以在局部中使用通配选择器
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function(){
$(‘ul li *‘).css(‘color‘,‘green‘);
alert($(‘ul li *‘).size());/*只选择了四个不会像在全局中使用通配选择器那样把一些不必要的也选中*/
});
</script>
<style>
ul li *{ color:red;}/*ul li 里面的所有都选中*/
</style>
</head>
<body>
<ul>
<li><a href="#">首页ul li a</a></li>
<li><a href="#">首页ul li a</a></li>
<li><p>首页ul li p<p></li>
</ul>
</body>
4、混合选择器
在实际应用中，我们可以灵活的搭配，使得选择器更加的精准和快速：
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function(){
$(‘ul li a,#pox,.box‘).css(‘color‘,‘green‘);
});
</script>
<style>
ul li a,#pox,.box{ color:red;}
</style>
</head>
<body>
<ul>
<li><a href="#">首页ul li a</a></li>
<li><a href="#">首页ul li a</a></li>
</ul>
<a href="#">首a页</a>
<a href="#">首a页</a><!--a标签有默认的属性：下划线，字体为蓝色-->
<p>首页p</p>
<div class="box">div#box</div>
<div id="pox">div.pox</div>
</body>
时间： 2024-11-02 22:17:30