实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>403</title>
<style type="text/css">
.box{
background-color: #f4f4f4;
width: 600px;
height: 450px;
margin: auto;
overflow: hidden;
text-align: center;
}
.box ul{
float: left;
margin: auto;
}
.box ul li{
padding: 10px 10px;
}
.box ul li span{
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
display: block;
}
.box ul li a {
display: block;
margin-top: -30px;
margin-left: 60px;
}
.color{
color:lightcoral;
}
</style>
</head>
<body>
<div class="box">
<h2>jQuery选择器</h2>
<ul>
<li>
<span>1</span><a href="">最新电影</a>
</li>
<li>
<span>2</span><a href="">国语电影</a>
</li>
<li>
<span></span><a href="">外国电影</a>
</li>
<li>
<span>4</span><a href="">高清电影</a>
</li>
<li>
<span>5</span><a href="">动画电影</a>
</li>
</ul>
<input type="serach " name="serachbox" placeholder="查找影片/动漫">
<button type="submit" name="submit">搜索</button>
<button type="reset" name="reset">重填</button>
</div>
<script type="text/javascript" src="jQuery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('li a').addClass('color')
$('li').css('listStyleType','none')
$('li:nth-child(5)~*').css('backgroundColor','lightgreen')
$('span').css('backgroundColor','lightblue')
$(':empty').text('3').css('color','orange')
$('a:contains("外")').css('color','green')
$('li').last().css('color','white')
$('input').css('background-color', 'skyblue')
$('button:reset').css({
'background-color':'lightblue',
'color':'white',
'width':'80px',
'height':'30px',
'border-radius':'5px'
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：本节课老师介绍了 jQuery中 的各种选择器 以及一些简单的实例 。 要想学好jQuery 选择器一定要熟练，毕竟只有找准元素 才能对症下药。
