1. 程式人生 > >JavaScript 第六章 作業

JavaScript 第六章 作業

1.寫出能讓下面程式碼中"Part I"加粗的幾種方式,儘量寫jQuery選擇器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<div id="container" style="display: none;">
			<div id="chapter-number">2</div>
			<h1>Selectors</h1>
			<h1 class="subtitle">How to Get Anything You Want</h1>
			<h2>Selected ShakeSpeare Plays</h2>
			<div>
				<ul>
					<li id="part_li">Part I</li>
					<li>Part II</li>
				</ul>
				<ul>
					<li>Part I</li>
					<li>Part II</li>
				</ul>
			</div>
		</div>
	</body>
</html>

方式有:

$("ul li:nth-of-type(1)").css("font-weight","bold");
$("#part_li").css("font-weight","bold");
$("li#part_li").css("font-weight","bold");
$("li:first").css("font-weight","bold);

2.jQuery選擇器有哪幾種?

    基本選擇器、層次選擇器、屬性選擇器、基本過濾選擇器、可見性過濾選擇器

3.運用了CSS選擇器規則的jQuery選擇器有哪些?

基本選擇器、層次選擇器、屬性選擇器

4.使用jQuery選擇器時需要注意什麼?

(1)選擇器中含有特殊符號時需要轉義
(2)注意選擇器中是否需要新增空格

5.製作列表頁面,當頁面載入完成時,列表隔行變色,背景顏色值為:#ECECEC
實現程式碼如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
<title>隔行變色的列表</title>
<link rel="stylesheet" href="css/nav.css">

</head>
<body>
  <div class="content">
    <dl>
        <dt><a href="http://www.6655.com/1/youxi.htm">[頁遊]</a></dt>
        <dd >
        <ul>
            <li><a href="http://codes.dian5000.com/htmlcode/38319.html">槍魂</a>
            <a href="http://p.37pk49.com/s/1/683/11722.html?uid=510412">女神聯盟</a> <a
                href="http://tg.131cc.com/?uid=510412">37WAN遊戲</a> <a
                href="http://p.37pk49.com/s/1/683/13574.html?uid=510412">武易</a> <a
                href="http://jcnm.game3737.com/htmlcode/36266.html">鬥聖</a> <a
                href="http://tk.pk897.com/1616dh.php?id=2467">烈焰</a> <a
                href="http://p.37pk49.com/s/1/683/14006.html?uid=510412">大鬧天宮OL</a></li>
        </ul>
        </dd>
        <dd class="more"><a href="http://www.6655.com/1/youxi.htm">更多&gt;&gt;</a></dd>
    </dl>
    <dl class="s1">
        <dt><a href="http://www.6655.com/1/xiaoyouxi.htm">[小遊戲]</a></dt>
        <dd >
        <ul>
            <li><a href="http://www.4339.cc">4339小遊戲</a> <a
                href="http://www.6949.com">6949小遊戲</a> <a
                href="http://www.3155.com/?hmsr=1616">3155小遊戲</a> <a
                href="http://www.4399i.net/">4399i小遊戲</a> <a
                href="http://www.3199.cn/?hmsr=1616">3199小遊戲</a> <a
                href="http://www.7k7k7.net">7k7k7小遊戲</a></li>
        </ul>
        </dd>
        <dd class="more"><a href="http://www.6655.com/1/xiaoyouxi.htm">更多&gt;&gt;</a>
        </dd>
    </dl>
    <dl>
        <dt><a href="http://www.6655.com/1/yingshi.htm">[影視]</a></dt>
        <dd >
        <ul>
            <li><a href="http://www.iqiyi.com">愛奇藝高清</a><a
                href="http://www.tudou.com/">土豆網</a><a
                href="http://tv.sohu.com/movie/">搜狐電影</a><a href="http://tv.cntv.cn/">CNTV</a>
            <a href="http://www.kktv1.com/c.shtml?c=52560">KK美女視訊</a> <a
                href="http://p.yiqifa.com/s?sid=a4df75c5719e9b11&amp;pid=184&amp;wid=410486&amp;vid=426282&amp;cid=7100&amp;lid=168915&amp;euid=&amp;vwid=">六間房</a>
            </li>
        </ul>
        </dd>
        <dd class="more"><a href="http://www.6655.com/1/yingshi.htm">更多&gt;&gt;</a>
        </dd>
    </dl>
    <dl class="s1">
        <dt><a href="http://www.6655.com/1/xiaoshuo.htm">[小說]</a></dt>
        <dd >
        <ul>
            <li><a href="http://www.qdmm.com/">起點女生網</a> <a
                href="http://www.zongheng.com/?co=1616">縱橫中文網</a> <a
                href="http://p.yiqifa.com/c?s=3b2f15ba&amp;w=88243&amp;c=6805&amp;i=23342&amp;l=0&amp;e=&amp;t=http://www.zazhipu.com/">雜誌鋪</a><a
                href="http://www.xxsy.net/">瀟湘書院</a> <a
                href="http://www.qidian.com/Default.aspx">起點</a> <a
                href="http://www.xs8.cn/">言情小說吧</a></li>
        </ul>
        </dd>
        <dd class="more"><a href="http://www.6655.com/1/xiaoshuo.htm">更多&gt;&gt;</a>
        </dd>
    </dl>
    <dl>
        <dt><a href="http://www.6655.com/1/youxi.htm">[遊戲]</a></dt>
        <dd >
        <ul>
            <li><a href="http://365.uc108.com/">同城遊棋牌</a><a
                href="http://games.sina.com.cn/">新浪遊戲</a><a
                href="http://p.yiqifa.com/c?s=ae39a645&amp;w=154815&amp;c=6756&amp;i=23904&amp;l=0&amp;e=&amp;t=http://www.5173.com/">5173遊戲交易</a><a
                href="http://www.17173.com/">17173遊戲</a><a
                href="http://www.duowan.com/">多玩遊戲</a></li>
        </ul>
        </dd>
        <dd class="more"><a href="http://www.6655.com/1/youxi.htm">更多&gt;&gt;</a>
        </dd>
    </dl>
    <dl class="s1">
        <dt><a href="http://www.6655.com/1/yinyue.htm">[音樂]</a></dt>
        <dd >
        <ul>
            <li><a href="http://www.1ting.com">一聽音樂網</a> <a
                href="http://mp3.sogou.com/">搜狗音樂</a> <a
                href="http://music.baidu.com">百度mp3</a> <a
                href="http://www.yinyuetai.com/">音悅臺MV</a> <a
                href="http://www.iqiyi.com/zongyi/superboy.html">快樂男聲</a></li>
        </ul>
        </dd>
        <dd class="more"><a href="http://www.6655.com/1/yinyue.htm">更多&gt;&gt;</a>
        </dd>
    </dl>
    <dl>
        <dt><a href="http://www.6655.com/1/jiaoyou.htm">[交友]</a></dt>
        <dd >
        <ul>
            <li><a
                href="http://reg.jiayuan.com/st/?id=421710&amp;url=http://reg.jiayuan.com">世紀佳緣</a>
            <a href="http://www.zhiji.com/?ad=1616" class="green">同城交友網</a><a
                href="http://www.zhenai.com/901934.html">珍愛網</a><a
                href="http://www.9see.com/go123?from=120_1">美女秀場</a> <a
                href="http://www.iqiyi.com/zongyi/fcwr.html">非誠勿擾</a></li>
        </ul>
        </dd>
        <dd class="more"><a href="http://www.6655.com/1/jiaoyou.htm">更多&gt;&gt;</a>
        </dd>
    </dl>
    <dl class="s1">
        <dt><a href="http://www.6655.com/1/lvyou.htm">[旅遊]</a></dt>
        <dd >
        <ul>
            <li><a
                href="http://vacations.ctrip.com/?allianceid=1091&amp;sid=1227&amp;ouid=">攜程旅遊</a><a
                href="http://www.tuniu.com/?p=1627&amp;cmpid=mkt_08005301&amp;utm_campaign=daohang&amp;utm_source=1616.net&amp;utm_medium=textlink"
                class="green">途牛旅遊網</a><a href="http://www.zoutu.com/">雲南旅遊</a><a
                href="http://hotel.elong.com/?banid=1616">藝龍訂酒店</a> <a
                href="http://www.qunar.com/?ex_track=auto_4f4dd298">去哪兒旅遊</a> <a
                href="http://detail.tmall.com/item.htm?id=21737099723">迪士尼門票</a> <a
                href="http://www.17u.cn/FlightQuery.aspx#refid=14748221">同程機票</a></li>
        </ul>
        </dd>
        <dd class="more"><a href="http://www.6655.com/1/lvyou.htm">更多&gt;&gt;</a>
        </dd>
    </dl>
</div>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('dl:odd').css('background','#ECECEC');
	});
</script>
</body>

</html>

6.製作分享特效頁面,當單擊圖片時,顯示提示資訊,單擊提示資訊後,該資訊隱藏
實現程式碼如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
<title>分享特效</title>
<style type="text/css">
	dt{height:30px;}
	dt img{margin-left:80px;display:none;}
</style>

</head>
<body>
  <dl>
  	<dt ><img src="img/text.gif"  /></dt>
    <dd>分享到:<img src="img/iocns.gif"  /></dd>
  </dl>
  <script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
  	$(document).ready(function(){
  		$('dd>img').click(function(){
  			$('dt>img').show();
  		});
  		$('dt>img').click(function(){
  			$(this).hide();
  		});
  	});
  </script>
</body>
</html>