收藏
批改状态：未批改
老师批语：
今天学习了jQuery常用的选择器，选择器选择元素的方式多种多样，要选择到一个元素或几个元素有不止一种的方法，以下是其中的一些方法，与大家分享。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery常用选择器</title>
<style type="text/css">
.blue{
background-color: blue;
color: white;
}
.red{
background-color: red;
color:yellow;
}
.green{
background-color: green;
color: cyan;
}
</style>
</head>
<body>
<h2 id="1">我是jobing的标题</h2>
<ul>
<li >jobing的测试框01</li>
<li class="test">jobing的测试框02</li>
<li>jobing的测试框03</li>
<li>jobing的测试框04</li>
<li>jobing的测试框05<a href="">点我</a></li>
<li>jobing的测试框06</li>
<li class="test">jobing的测试框07</li>
<li>jobing的测试框08</li>
<li>jobing的测试框09</li>
<li>jobing的测试框10</li>
</ul>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// id选择器
$('#1').addClass('red')
// 类选择器
$('.test').addClass('blue')
// 通配符选择器
$('li:nth-child(7) ~ *').css('background-color','lightgreen')
//直接命中选择器
$('li:eq(5)').css('background-color','pink')
// 选择包含直接文本内容的
$('li:contains(04)').addClass('green')
// 选择包含某个标签的
$('li:has("a")').css('background-color','yellow')
// 清除样式
$('*').removeAttr('style')
$('*').removeClass()
//find():返回所有的后代元素,包括子,孙...
$('ul').find('li').addClass('red')
$('*').removeClass()
$('ul').find('a').addClass('red')
$('*').removeClass()
//选取页面的偶数项
$('li:odd').addClass('green')
$('*').removeClass()
//选取页面的基数项
$('li:even').addClass('blue')
</script>点击 "运行实例" 按钮查看在线实例
总结：
jQuery常用选择器有很多，选择的方法月CSS选择元素的方法类似
选择到同一个元素的方法不止一种，多种多样
上文列举了id选择器、类选择器、通配符选择器、直接命中选择器、选择包含直接文本内容的、选择包含某个标签的、选择所有的后代元素,包括子,孙的、选取对应的偶数项与奇数项等等
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
