JQuery 第四章 Jquery选择器

来源：互联网发布：华为手机抢购软件编辑：程序博客网时间：2024/05/19 04:29

<!DOCTYPE html><html>  <head>    <title>sj1.html</title><script type="text/javascript" src="js/jquery-1.11.1.js"></script>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript">$(document).ready(function(){$("html body p a").click(function(){$(".txt_box .current").css("background-color","#6FF");$("p>span").css("background-color","#F9F");$("h1+p").css("background-color","#F06");$("strong~span").css("background-color","#00C");});});</script>  </head>    <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></html>

<!DOCTYPE html><html>  <head>    <title>sj2.html</title><script type="text/javascript" src="js/jquery-1.11.1.js"></script>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">   <script type="text/javascript">   $(document).ready(function(){   $("html body .main .right .dy").click(function(){   $("html body .main .right .dy~span").css("font-weight","bold");       });     $("html body .main .right dl dt").click(function(){     $("html body .main .right dl strong").css("color","#FF0099");         });                  $("html body .main .right #bq").click(function(){     $("html body .main .right dl p #bq~span>a:even").css("background-color","#E0F8EA").css("color","#10A14B").css("padding","2px");         });         $("img[alt=收藏本片]").click(function(){        alert("您已收藏成功");         });            });   </script><style type="text/css"> .main{ width:500px;}.left{width:200px;float:left;}.right{width:300px;float:left;} </style>  </head>    <body>    <div class='main' >     <div class='left'>        <img src="img/pic.gif" />            <br/><br/><br/><br/>            <img src="img/col.gif" alt="收藏本片"/>        </div>        <div class='right'>        <dl>            <dt><b>非缘勿扰</b></dt>            <dd>                <p>                <strong>主演：</strong><span>苏有朋/秦岚/傅艺伟等</span>                </p>                <p>                <strong class='dy'>导演：</strong><span>赖水清</span>                </p>                <p>                <strong id='bq'>标签：</strong><span><a>苏有朋</a> <a> 国产电视剧</a>  <a>2013</a> <a>连续剧</a></span>                </p>                <p>                <strong>剧情：</strong><span>当代都市，大年女刘林、杨阳都在寻找自己的如意郎君，刘林偶遇陆氏房地产总裁路西诺，两人成了欢喜冤家，遭到暗恋西诺的丁娟的嫉恨。。。<a href="#">点击了解更多 </a></span>                </p></dd>            </dl>            <img src="img/btn.gif"/>        </div>     </div>      </body></html>

<!DOCTYPE html><html>  <head>    <title>sj3.html</title><script type="text/javascript" src="js/jquery-1.11.1.js"></script>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">      <script type="text/javascript">$(document).ready(function(){$("table tr td:last:visible").hide(); $("table tr td:even").css("background-color","#FF99CC");$("h4 .more").click(function(){$(":hidden").show();});});</script>  </head>    <body><h3>乐淘，发现更多生活，快乐就在你身边...</h3>  <h4>近期热门......<a href='#' class='more'>（更多）</a></h4>   <table width="800" border="0" cellspacing="0" cellpadding="0">  <tr>    <td>语言之庭</td>  </tr>  <tr>    <td>斯托克</td>  </tr>  <tr>    <td>迷醉</td>  </tr>  <tr>    <td>巨人携手皆可</td>  </tr>  <tr>    <td>副作用</td>  </tr>  <tr>    <td>血肉之躯</td>  </tr>  <tr>    <td>7号房的礼物</td>  </tr>  <tr>    <td>惊声笑</td>  </tr></table><a href='#' class='more'>更多排名</a>      </body></html>

<!DOCTYPE html><html>  <head>    <title>kh5.html</title><script type="text/javascript" src="js/jquery-1.11.1.js"></script>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script type="text/javascript">$(document).ready(function(){$("img[alt=hh]:visible").hide();$("img[alt=好片子]").click(function(){$("img[alt=hh]:hidden").show();});$("img[alt=hh]").click(function(){$("img[alt=hh]:visible").hide();});});</script>  </head>    <body>   <dl>  <dt ><img src="img/text.gif" alt="hh" /></dt>    <dd>分享到：<img src="img/iocns.gif"  alt="好片子" /></dd>  </dl>     </body></html>

0 0