实例
大家好：
以下是我对jQuery选择器的简单的运用，如有错误望大家指出，谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器的应用</title>
<style type="text/css">
.eq {
color: red;
}
</style>
</head>
<body>
<h2>天天关注</h2>
<ul>
<li>新闻：<a href="">习近平举行仪式欢迎津巴布韦总统</a></li>
<li>军事：<a href="">中国空军有大动作</a></li>
<li>证券：<a href="">创指险守5日线沪指跌0.84%</a></li>
<li>科技：<a href="">盯上摩拜的还有软银和滴滴</a></li>
<li>社会：<a href="">甘肃金昌出租车停运维权</a></li>
<span></span>
<h2>最新新闻</h2>
</ul>
<p>更多关注 <img src="images/fbb.jpg" alt="" width="150"></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','green')
// 选择ul标签下的直接子元素h2标签
$('ul').children('h2').css('color','green')
// 选取页面中的空标签（什么都没有）并插入文本
$(':empty').text('昨日关注').css('color','red')
// 选择有img标签(图片)的p元素
$('p:has("img")').css('background-color','yellow')
// 选择第四个li标签下面的第一个同级元素
$('li').eq('3').next().css('color','orange')
// 选择li标签中奇数位（实际页面中看到的效果是偶数位，因为在JS中是从0开始的）
$('li:odd').css('color','lightblue')
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
课程总结
通过这节jQuery选择器的课程，使我了解了它与css选择器的相同点和不同点，以下是我对这节课程的理解：
1. eq（）的运用，它可以制定元素，与nth-child异曲同工— $('li:nth-child(6)')=$('li:eq(5)')
2. 偶数位和奇数位I的选择：选中所有序号为偶数用元素‘even’、‘奇数用元素odd’（注意:实际页面中看到的效 果正好相反，因为在JS中是从0开始的）— $('li:even')、$('li:odd')
3.表单过滤器$(':input')的用法
4.初步了解find（）、children（）、next（）、siblings（）、prev（）等等的用法