实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery常用选择器</title>
<style type="text/css">
.blue{
background-color: blue;
color: white;
}
.red{
background-color: red;
color:yellow;
}
.green{
background-color: green;
color: cyan;
}
.ling {
float: left;
width: 500px;
border: 1px solid #030303;
margin: 20px;
list-style-type: none;
}
</style>
</head>
<body>
<h2 id="1">腾讯新闻</h2>
<ul>
<li class="ling">要闻
<ul>
<li>习近平举行仪式欢迎津巴布韦总统访华并举行会谈</li>
<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>
<li><a href="">清明祭扫、踏青、旅游 这份小贴士收好 清明节专题</a></li>
<li><a href="">美公布拟加征关税的中国商品清单 价值500亿美元</a></li>
<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>
<li><a href="">人民日报头版刊文谈机构改革 脱贫攻坚抓关键</a></li>
<li><a href="">清明祭扫、踏青、旅游 这份小贴士收好 清明节专题</a></li>
<li><a href="">美公布拟加征关税的中国商品清单 价值500亿美元</a></li>
</ul>
</li>
<li class="test ling">今日话题
<ul>
<li><a href="">中国男孩需不需要阳刚教育？</a></li>
<li><a href="">因“玩具枪”坐牢的故事要结束了</a></li>
<li>重塑研究生导师关系，需要一条“逃生通道”</li>
<li>16岁小妈妈网红：比起流量，网络平台更需要节操</li>
<li>划“充电禁区”保“电驴”安全</li>
<li><a href="">高铁消费专座卖“假茶叶”，服务丢了一路</a></li>
<li><a href="">建设西湖大学，追求的不是新增一所大学</a></li>
</ul>
</li>
<li class="ling">财经 / 证券 / 理财
<ul>
<li><a href="">美国公布加征关税中国商品清单 总额500亿美元</a></li>
<li><a href="">五大行去年减员2.7万 平均年薪24万</li>
<li>新一轮楼市调控“杀手锏”来袭 买不买房都要注意</li>
<li>中汽协：失去中国市场 美三大车企将沦为二流公司</li>
<li>美团100%控股摩拜 创始人胡玮炜不认同“出局说”</li>
<li><a href="">宝能欲清盘万科资管计划 浮盈150亿接盘人待定</a></li>
<li><a href="">倔强董明珠：重仓新能源 十亿赌约背后野心与耐心</a></li>
</ul>
</li>
<li class="test ling">汽车 / 在线购车
<ul>
<li><a href="">迈凯伦Senna碳纤维加身 多款超跑抢先看</a></li>
<li><a href="">市场多变难选股 机构斗法巧持仓</a></li>
<li><a href="">全球避险情绪升温 黄金投资机会显现</a></li>
<li><a href="">大跌中仍有轮动 资金布局“假日经济”</a></li>
<li><a href="">产能利用率提高 钢企将开启新一轮大规模重组</a></li>
<li><a href="">A股大赛总决赛冠军大赚28% 免费领取炒股秘籍</a></li>
<li><a href="">三六零净利增逾80% 超业绩承诺5.5亿元</a></li>
</ul>
</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">
// // id选择器
// $('#1').addClass('red')
// // 类选择器
// $('.test').addClass('blue')
// // 通配符选择器
// $('li:nth-child(7) ~ *').css('background-color','#90EE90')
// //直接命中选择器
// $('li:eq(5)').css('background-color','#FFC0CB')
// // 选择包含直接文本内容的
// $('li > ul > li:contains(习近平)').addClass('green')
// // 选择包含某个标签的
// $('li > ul > li:has("a")').css('background-color','#3B0909')
// // 清除样式
// $('*').removeAttr('style')
// $('*').removeClass()
// //find():返回所有的后代元素,包括子,孙...
// $('ul').find('li').addClass('red')
// $('*').removeClass()
// $('ul').find('a').addClass('red')
// $('*').removeClass()
// //选取页面的偶数项
// $('li:odd').addClass('green')
// $('*').removeClass()
// //选取页面的基数项
// $('li:even').addClass('blue')
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
效果图
ID选择器
类选择器
通配符选择器
直接命中选择器
选择包含直接文本内容的
选择包含某个标签的
清除样式
find():返回所有的后代元素,包括子,孙...
选取页面的偶数项
选取页面的基数项
