1、基本选择器
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>基本选择器</title> | |
| <style type="text/css"> | |
| #box { | |
| background-color: #FFF; | |
| border: 2px solid #000; | |
| padding: 5px; | |
| } | |
| </style> | |
| <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
| <script type="text/javascript"> | |
| $(function() { | |
| $("#btn1").click(function() {//触发不同的效果按钮点击事件 | |
| //标签选择器，获取<h3>元素并为其添加背景颜色 | |
| //$("h3").css({"background":"red"}); | |
| //类选择器，获取并设置所有class为title的元素的背景颜色 | |
| //$(".title").css({"background":"red"}); | |
| //ID选择器，获取并设置id为box的元素的背景颜色 | |
| //$("#box").css({"background":"red"}); | |
| //并集选择器，获取并设置所有<h2>、<dt>、class为title的元素的背景颜色 | |
| //$("h2,dt,.title").css({"background":"red"}); | |
| //交集选择器，获取并设置所有class为title的<h2>元素的背景颜色 | |
| //$("h2.title").css({"background":"red"}); | |
| //全局选择器，改变所有元素的字体颜色 | |
| $("*").css({"background":"red"}); | |
| }) | |
| }); | |
| </script> | |
| <body> | |
| <input type="button" id="btn1" value="显示效果" /> | |
| <div id="box"> | |
| id为box的div | |
| <h2 class="title">class为title的h2</h2> | |
| <h3 class="title">class为title的h3</h3> | |
| <h3>热门排行</h3> | |
| <dl> | |
| <dt> | |
| <img src="images/case_1.gif" width="93" height="99" alt="斗地主" /> | |
| </dt> | |
| <dd class="title">斗地主</dd> | |
| <dd>休闲游戏</dd> | |
| <dd>QQ斗地主是国内同时在线人数最多的棋牌游戏......</dd> | |
| </dl> | |
| </div> | |
| </body> | |
| </html> |
2、层次选择器
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>层次选择器</title> | |
| <style type="text/css"> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| line-height: 30px; | |
| } | |
| body { | |
| margin: 10px; | |
| } | |
| #menu { | |
| border: 2px solid #03C; | |
| padding: 10px; | |
| } | |
| a { | |
| text-decoration: none; | |
| margin-right: 5px; | |
| } | |
| span { | |
| font-weight: bold; | |
| padding: 3px; | |
| } | |
| h2 { | |
| margin: 10px 0; | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="menu"> | |
| <h2 title="点击看效果">全部旅游产品分类</h2> | |
| <dl> | |
| <dt> | |
| 北京周边旅游<span>特价</span> | |
| </dt> | |
| <dd> | |
| <a href="#">按天数</a> <a href="#">海边旅游</a> <a href="#">草原</a> | |
| </dd> | |
| </dl> | |
| <dl> | |
| <dt>景点门票</dt> | |
| <dd> | |
| <a href="#">名胜</a> <a href="#">暑期</a> <a href="#">乐园</a> | |
| </dd> | |
| <dd> | |
| <a href="#">山水</a> <a href="#">双休</a> | |
| </dd> | |
| </dl> | |
| <span>更多分类</span> | |
| </div> | |
| <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
| <script type="text/javascript"> | |
| $(document).ready(function() { | |
| $("h2").click(function() {//点击h2标题时触发的事件 | |
| //后代选择器，获取并设置#menu下的<span>元素的背景颜色 | |
| //$("#menu span").css({"background":"red"}); | |
| //子选择器，获取并设置#menu下的子元素<span>的背景颜色 | |
| //$("#menu>span").css({"background":"red"}); | |
| //相邻选择器，获取并设置紧接在<h2>元素后的<dl>元素的背景颜色 | |
| //$("h2+dl").css({"background":"red"}); | |
| //同辈选择器，获取并设置<h2>元素之后的所有同辈元素<dl>的背景颜色 | |
| $("h2~dl").css({"background":"red"}); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
3、属性选择器
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>属性选择器</title> | |
| <style type="text/css"> | |
| #box { | |
| background-color: #FFF; | |
| border: 2px solid #000; | |
| padding: 5px; | |
| } | |
| h2 { | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="box"> | |
| <h2 class="odds" title="cartoonlist">动画列表</h2> | |
| <ul> | |
| <li class="odds" title="kn_jp">名侦探柯南</li> | |
| <li class="evens" title="hy_jp">火影忍者</li> | |
| <li class="odds" title="ss_jp">死神</li> | |
| <li class="evens" title="yj_jp">妖精的尾巴</li> | |
| <li class="odds" title="yh_jp">银魂</li> | |
| <li class="evens" title="hm_da">黑猫警长</li> | |
| <li class="odds" title="xl_ds">仙履奇缘</li> | |
| </ul> | |
| </div> | |
| <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
| <script type="text/javascript"> | |
| $(function() { | |
| $("h2").click(function() { | |
| //改变含有title属性的<h2>元素的背景颜色 | |
| //$("h2[title]").css({"background":"red"}); | |
| //改变class属性的值为odds的元素的背景颜色 | |
| // $("[class='odds']").css({"background":"red"}); | |
| //改变id属性的值不为box的元素的背景颜色 | |
| //$("[id!='box']").css({"background":"red"}); | |
| //改变title属性的值中以h开头的元素的背景颜色 | |
| //$("[title^='h']").css({"background":"red"}); | |
| //改变title属性的值中以jp结尾的元素的背景颜色 | |
| //$("[title$='jp']").css({"background":"red"}); | |
| //改变title属性的值中含有s的元素的背景颜色 | |
| //$("[title*='s']").css({"background":"red"}); | |
| //改变包含class属性，且title属性的值中含有y的<li>元素的背景颜色 | |
| $("li[class][title*='y']").css({"background":"red"}); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
4、基本过滤选择器
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>基本过滤选择器</title> | |
| </head> | |
| <body> | |
| 获取焦点：<input type="text"> | |
| <h1>h1网络小说</h1> | |
| <h2>h2网络小说</h2> | |
| <h3>h3网络小说</h3> | |
| <h4>h4网络小说</h4> | |
| <ul> | |
| <li>王妃不好当</li> | |
| <li>致命交易</li> | |
| <li class="three">迦兰寺</li> | |
| <li>逆天之宠</li> | |
| <li>交错时光的爱恋</li> | |
| <li>张震鬼故事</li> | |
| <li>第一次亲密接触</li> | |
| </ul> | |
| <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
| <script type="text/javascript"> | |
| $(function() { | |
| $("h2").click(function(){ | |
| //改变第1个<li>元素的背景颜色 | |
| //$("li:first").css({"color":"red"}); | |
| //改变最后一个<li>元素的背景颜色 | |
| //$("li:last").css({"color":"red"}); | |
| //改变class不为three的<li>元素的背景颜色 | |
| //$("li:not(.three)").css({"color":"red"}); | |
| //改变索引值为偶数的<li>元素的背景颜色 | |
| //$("li:even").css({"color":"red"}); | |
| //改变索引值为奇数的<li>元素的背景颜色 | |
| //$("li:odd").css({"color":"red"}); | |
| //改变索引值等于1的<li>元素的背景颜色 | |
| //$("li:eq(1)").css({"color":"red"}); | |
| //改变索引值大于1的<li>元素的背景颜色 | |
| // $("li:gt(1)").css({"color":"red"}); | |
| //改变索引值小于1的<li>元素的背景颜色 | |
| //$("li:lt(1)").css({"color":"red"}); | |
| //改变所有标题元素，例如<h1>,<h2>,<h3>……这些元素的背景颜色 | |
| //$(":header").css({"color":"red"}); | |
| }); | |
| //改变当前获取焦点的元素的背景颜色 | |
| $("input").click(function(){ | |
| //让获取焦点的元素改变背景色 | |
| alert("是否获取焦点："+$(this).is(":focus")); | |
| $(":focus").css({"background":"red"}); | |
| }) | |
| }); | |
| </script> | |
| </body> | |
| </html> |
5、可见性过滤器
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>可见性过滤器</title> | |
| </head> | |
| <body> | |
| <button id="show">show</button> | |
| <button id="hide">hide</button> | |
| <div>显示1</div> | |
| <div>显示2</div> | |
| <div style="display:none">显示3</div> | |
| <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
| <script type="text/javascript"> | |
| $(function() { | |
| //点击show按钮触发的事件 | |
| $("#show").click(function(){ | |
| $(":hidden").show(); | |
| }); | |
| //点击hide触发的事件 | |
| $("#hide").click(function(){ | |
| $("div:visible").hide(); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |