刚刚学习了jquery的选择器，现在来回顾一下
jquery的选择器大概有:基本选择器，层次选择器，属性选择器，过滤选择器，可见性的过滤选择器
下面我来举几个列子来概括这几个选择器:
<title>美化英雄联盟界面</title> <script src="js/jquery-1.12.3.min.js"></script> <script type="text/javascript"> $(function(){ $("p").click(function(){ //点击事件 $("[class=txt_box]>[class=current]").css("background", "#6FF"); $("p>span").css("background", "#F9F"); $("h1+p").css("background", "#F06"); }) }) </script> <body> <h1>英雄联盟</h1> <p>《英雄联盟》,简称LOL.</p> <p>由<strong>Riot Games</strong>开发,为3D竞技场站游戏,其 <span>主创团队由实力强劲的 <strong>魔兽争霸</strong> 系列游戏多人即时对战自定义地图开发团队 </span>... <a href="#">更多详情</a> </p> <h2>目录 </h2> <ul class="txt_box"> <li class="current">开发团队</li> <li>游戏周边</li> <li>游戏介绍</li> <li>游戏需求</li> <li>游戏背景</li> </ul> </body>
例子二：
<script src="js/jquery-1.12.3.min.js"></script> <script type="text/javascript"> $(function () { $("dt").click(function () { $("strong").css("color", "#FF0099"); }); $("#daoyan").click(function () { $("#ll").addClass("ul"); }); $("#biaoqian").click(function () { $(".su").css({"background":"#E0F8EA","color":"red"}) }) $("dd[id]").click(function () { alert("您已收藏成功") }) }) </script> <body> <dl> <dt><img src="img/pic.gif" /><br /><br /> <strong>非缘勿扰(共36集)</strong><br/> <strong>主演：</strong>苏有朋/秦岚/傅艺伟等<br /> <strong id="daoyan">导演：</strong><span id="ll">赖水清</span><br /> <strong id="biaoqian">标签：</strong ><span class="su">苏有朋</span> 国产电视剧 <span class="su">2013连续剧</span><br /> <strong>剧情：</strong>当代都市，大龄女刘琳都在寻找着自己的如意郎君。 刘琳偶遇房产老总....<br /> <a href="">点击了解更多</a><br /> </dt> <dd> <img src="img/btn.gif" /> </dd> <dd id="cc"> <img src="img/col.gif" /> </dd> </dl> </body>
上面2个例子可以清楚明朗的看到选择器的强大最后我在举一个隐藏和显示的例子
<script src="js/jquery-1.12.3.min.js"></script> <script type="text/javascript"> $(function () { $("li:even").css("background", "#CCC") $(".tips:visible").hide(); $(".yin").click(function () { ; $(".tips:hidden").show(); }) }) </script> <body> <h2>近期热门。。。</h2> <ul > <li>语言之庭</li> <li>斯托克</li> <li>宿醉</li> <li>巨人捕手杰克</li> <li>副作用</li> <li class="tips">血肉之躯</li> <li class="tips">7号房的礼物</li> <li class="tips">惊声尖笑</li> </ul> <div class="yin">更多</div> </body>
简简单单的几行代码就能实现隐藏和显示功能。