摘要：<!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下面的所有li样式去除小圆点
$('#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')//从零开始，奇数顺序的li标签字体为30px
$('li:even').css('font-size','18px')//偶数顺序的li标签字体大小为18px
$('span:not(#d3)').css('font-size','50px')//span标签不是id=d3的，字体大小为60px
$('span:contains("第四行")').css('background','yellow')//内容为“第四行”的span标签，背景颜色为黄色
$('div:has(em)').css('color','green')//内部包含em标签的div，字体颜色为绿色
$('div:empty').css('background','red')//内容为空的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结尾的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
老师总结：很棒！可以试试带案例了！把知识点运用到案例中去！
