实例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器的应用</title>
<style type="text/css">
.eq {
color: #FFE4E1;
}
</style>
</head>
<body>
<h2>我是标题</h2>
<ul>
<li>动物：<a href="">狗子</a></li>
<li>水果：<a href="">香蕉</a></li>
<li>蔬菜：<a href="">白菜</a></li>
<li>饮品：<a href="">娃哈哈</a></li>
<li>食物：<a href="">牛排</a></li>
<span></span>
<h2>我是标题2号</h2>
</ul>
<p>更多关注 <img src="images/a.jpg" alt="" width="50"></p>
<p>敬请期待</p>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// 选择第三个‘li’标签
$('li').eq(2).addClass('eq')
// 选择文本中含有‘狗’字的p标签
$('p:contains("狗")').css('color','blue')
// 选择li标签下的所有a标签，不分层级
$('ul').find('a').css('background-color','lightgreen')
// 选择ul标签下的直接子元素h2标签
$('ul').children('h2').css('color','green')
// 选取页面中的空标签（）并插入文本
$(':empty').text('').css('color','red')
// 选择有img标签(图片)的p元素
$('p:has("img")').css('background-color','#6495ED')
// 选择第四个li标签下面的第一个同级元素
$('li').eq('3').next().css('color','orange')
// 选择li标签中奇数位（实际页面中看到的效果是偶数位，因为在JS中是从0开始的）
$('li:odd').css('color','lightblue')
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
