摘要:<!DOCMENT TYPE> <head> <title>课后练习-jQuery选择器</title> <style type="text/css"> .clear{clear:both;}  
<!DOCMENT TYPE>
<head>
<title>课后练习-jQuery选择器</title>
<style type="text/css">
.clear{clear:both;}
li{list-style:none;}
li{width: 100px;height: 40px;line-height:40px;float:left;}
form{width:600px;margin:0 auto;border:1px solid #333;margin-top:20px;}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('li:first').css('color', '#f00');
$('li:eq(12)').css('color', '#e50');
$('li:odd').css('backgroundColor', '#eee');
$('li:contains(成都)').css('fontSize', '20px');
$('li:gt(17)').css('width', '200px');
$('li:has(i)').css('fontWeight', '700');
$('li:empty').css('background', '#ff0');
$('input,textarea,select').css('display', 'block');
$('input[type=text],input[type=password]').css('width', '200px');
$('input[type=text],input[type=password]').css('margin', '10px');
$('input[type=radio]').css('display', 'inline-block');
$(':selected').css('color', 'red');
});
</script>
</head>
<body>
<div id="area">
<div id="prov">
<h3>四川</h3>
<div class="city">
<ul>
<li>成都</li>
<li>自贡</li>
<li>攀枝花</li>
<li>泸州</li>
<li>德阳</li>
<li>绵阳</li>
<li>广元</li>
<li>遂宁</li>
<li>内江</li>
<li>乐山</li>
<li><i>南充</i></li>
<li>眉山</li>
<li>宜宾</li>
<li>广安</li>
<li>达州</li>
<li>雅安</li>
<li>巴中</li>
<li>资阳</li>
<li>阿坝藏族羌族自治州</li>
<li>甘孜藏族自治州</li>
<li></li>
<li>凉山彝族自治州</li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
<form>
<input type="text" name="user" value="123" />
<input type="password" name="pass" value="456" />
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
<textarea></textarea>
<select name="city">
<option>1</option>
<option selected>2</option>
<option>3</option>
</select>
<button>提交</button>
</form>
</body>
</html>
批改老师:韦小宝批改时间:2019-03-01 09:08:29
老师总结:写的很不错 jQuery中的选择器还是比较好理解的 和css中使用的几乎一样