实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>20180403 jQuery作业</title>
<style type="text/css">
.bg-green{
background-color: lightgreen;
}
</style>
</head>
<body>
<ul>
<li>最新电影01<a href="">立即播放</a></li>
<li>最新电影02<a href="">立即播放</a></li>
<li>最新电影03<a href="">立即播放</a></li>
<li>最新电影04<a href="">立即播放</a></li>
<li>最新电影05<a href="">立即播放</a></li>
<li>最新电影06<a href="">立即播放</a></li>
<li>最新电影07<a href="">立即播放</a></li>
<li>最新电影08<a href="">立即播放</a></li>
<li>最新电影09<a href="">立即播放</a></li>
<p>我是一个另类呀</p>
<li>最新电影10<a href="">立即播放</a></li>
</ul>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//first():返回第一个元素,不需要参数
$('li').first().css('background-color','wheat')
//last():回最后一个元素,不需要参数
$('li').last().css('background-color','wheat')
//eq():获取指定序号的元素,注意,返回的是jQuery对象
$('li').eq(2).css('background-color','wheat')
//find():返回所有的后代元素,包括子,孙...，然后通过find查找需要的元素
$('ul').find('li').css('color','coral')
//children()返回所有的直接子元素
$('ul').children('p').css('color','deeppink')
//元素遍历方法,next()下一个同级元素
$('li').eq(2).next().css('background-color','#8D5050')
//元素遍历方法,nextAll()后面全部的同级元素
$('li').eq(5).nextAll().css('color','blue')
//元素遍历方法,siblings():返回所选元素的所有同级元素,除它自己
// $('li').eq(3).siblings().css('color','red')
//先去掉所有元素上面的自定义样式,将元素打回原型,素颜模样
// $('*').removeAttr('style')
//选择包含指定文本内容的元素
$('p:contains("我")').addClass('bg-green')
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
