摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery选择器</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
margin-bottom: 10px;
background: #888;
}
</style>
</head>
<body>
<script>
$(document).ready(function() {
//基本选择器
$('#box').css('background', 'red');
$('.box').css('background', 'blue');
$('div').css('background', 'lightblue');
$('*').css('font-size', '20px');
$('#box,.box').css('color', '#ff6500');
//层级选择器
$('ul > li').css('color', 'red');
$('ul li').css('background', '#ccc');
$('div + li').css('font-size', '30px');
$('div ~ li').css('color', 'blue');
//顺序选择器
$('li:first').css('font-size', '40px');
$('li:last').css('font-size', '40px');
$('li:gt(4)').css('background', 'red');
$('li:lt(2)').css('background', 'blue');
$('li:eq(3)').css('background', 'pink');
$('li:odd').css('background', '#ff6500');
$('li:even').css('background', 'lightblue');
$(':not(span)').css('color', 'lightgreen');
//内容选择器
$('li:contains(a)').css('color', '#000');
$('p:has(span)').css('color', 'red');
$('div:empty').css('width', '300px');
$('p:parent').css('color', '#456789');
//属性选择器
$('div[id]').css('width', '200px');
$('div[id=box2]').css('width', '400px');
$('div[id != box2]').css('color', 'red');
$('div[id ^= b]').css('color', 'blue');
$('div[id $= 2]').css('font-size', '50px');
$('div[id *= o]').css('font-size', '80px');
$('div[id][name=name]').css('font-size', '10px');
$('input:enabled').css('background', '#888');
$('input:disabled').css('background', '#ff6500');
$('option:selected').css('background', '#ff6500');
$('input:checked').parent().css('color', 'red');
})
</script>
<div id="box">1</div>
<div>2</div>
<div id="box2" name="name">3</div> <span>PHP中文网</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<div>
<li>a</li>
<li>b</li>
</div>
<li>5</li>
<li>6</li>
</ul>
<div></div>
<p> <span>123</span>
</p>
<p></p>
<form action="">
<input type="text">
<input type="text">
<input type="text" disabled>
<select name="" id="">
<option value="">新城区</option>
<option value="" selected>赛罕区</option>
<option value="">玉泉区</option>
</select>
<label>
<input type="checkbox" name="box">篮球</label>
<label>
<input type="checkbox" name="box" checked>足球</label>
</form>
</body>
</html>
批改老师：灭绝师太批改时间：2019-02-21 15:34:08
老师总结：测试的比较全面,要确保会使用和了解选择器之间的区别
