摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery選擇器實例</title> <script type="text/javascript" src=&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery選擇器實例</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
.aa{width:100px;height:100px;border:1px solid #ccc;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('a').css('font-size','20px')//標簽a的字體大小20像素
$('div>span').css('font-weight','bold')//div下面的span，字體加粗
$('ul li').css('list-style','none')//ul下面的所有l(wèi)i樣式去除小圓點
$('#d3').css('color','slive')//id=d3的顏色為銀色
$('.d4').css('color','#ccc')//class為d4的顏色為#ccc
$('span+h3').css('font-size','20px')//span后面的h3標簽，20px字體
$('span:first').css('font-size','25px')//第一個span標簽字體25px
$('span:last').css('color','red')//最后一個span標簽顏色為紅色
$('li:gt(1)').css('color','green')//從零開始，順序大于1的li標簽顏色為綠色
$('li:lt(1)').css('color','blue')//順序小于1的il標簽顏色為藍色
$('li:eq(1)').css('color','pink')//順序等于1的li標簽顏色為粉色
$('li:odd').css('font-size','30px')//從零開始，奇數(shù)順序的li標簽字體為30px
$('li:even').css('font-size','18px')//偶數(shù)順序的li標簽字體大小為18px
$('span:not(#d3)').css('font-size','50px')//span標簽不是id=d3的，字體大小為60px
$('span:contains("第四行")').css('background','yellow')//內(nèi)容為“第四行”的span標簽，背景顏色為黃色
$('div:has(em)').css('color','green')//內(nèi)部包含em標簽的div，字體顏色為綠色
$('div:empty').css('background','red')//內(nèi)容為空的div，背景色為紅色
$('b:parent').css('font-size','50px')//非空的B標簽里的字體大小為50px
$('input[id]').css('background','yellow')//包含id屬性的input框，背景色為黃色
$('input[name=kk]').css('background','black')//name等于kk的input框，背景色為黑色
$('input[type!=button]').css('border','2px solid #ccc')//tpye類型不是button的input框，邊框為2px，實線，顏色#ccc
$('input[value^=u]').css('background','green')//value以u開頭的input框，背景顏色綠色
$('input[value$=o]').css('background','blue')//value值以o結(jié)尾的input框，背景顏色為藍色
$('input[name*=d]').css('background','pink')//name值包含d的input框，背景色為粉色
$('input[value][name*=a]').css('border','5px solid #000')//同時滿足包含value屬性，且name的值里有a的input框，邊框為5px，實線，黑色
$(':enabled').css('color','red')//所有激活的input字體顏色為紅色
$(':disabled').css('color','#fff')//所有禁用的input字體顏色為白色
$(':selected').css('color','#000')//所有被選取的select元素字體顏色為黑色
$(':checked').parent().css('font-size','30px')//所有被選中的input元素字體大小為30px
})
</script>
<a href="#">鏈接</a><br>
<div><span>第一行</span></div>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul><br>
<span id="d3">第三行</span><br>
<span class="d4">第四行</span><h3>你好</h3><br>
<span>第五行</span><br>
<div>大家好<em>第六行</em></div>
<div class="aa"></div>
<b>hello</b><br>
<input type="text" name="good"><br>
<input type="password" name="kk"><br>
<input type="button" name="" id="ya"><br>
<input type="button" name="" value="update"><br>
<input type="button" name="a" value="goso"><br>
<input type="text" name="" value="nihao"><br>
<input type="text" name="" value="hello" disabled><br>
<select>
<option>no1</option>
<option selected>no2</option>
<option>no3</option>
</select>
<label><input type="checkbox" name="" checked>ok</label>
<label><input type="checkbox" name="">ok1</label>
</body>
</html>
批改老師：滅絕師太批改時間：2019-01-06 09:53:29
老師總結(jié)：很棒！可以試試帶案例了！把知識點運用到案例中去！