JavaScript进阶 - 第10章 编程挑战

10-1 编程挑战

现在利用之前我们学过的JavaScript知识，实现选项卡切换的效果。

效果图:

文字素材:

房产：

    275万购昌平邻铁三居 总价20万买一居
    200万内购五环三居 140万安家东三环
    北京首现零首付楼盘 53万购东5环50平
    京楼盘直降5000 中信府 公园楼王现房

家居:

     40平出租屋大改造 美少女的混搭小窝
     经典清新简欧爱家 90平老房焕发新生
     新中式的酷色温情 66平撞色活泼家居
     瓷砖就像选好老婆 卫生间烟道的设计

二手房：

     通州豪华3居260万 二环稀缺2居250w甩
     西3环通透2居290万 130万2居限量抢购
     黄城根小学学区仅260万 121平70万抛!
     独家别墅280万 苏州桥2居优惠价248万
 
   

任务

大家先思考和分析实现思路，然后在动手实现

一、HTML页面布局

提示:
选项卡标题使用ul..li
选项卡内容使用div

二、CSS样式制作

提示:
整个选项卡的样式设置
选项卡标题的样式设置
选项卡内容的样式设置
一开始只显示一个选项卡内容，其它选项卡内容隐藏。

三、JS实现选项卡切换

提示:
获取选项卡标题和选项卡内容
选项卡内容多个，需要循环遍历来操作，得知哪个选项卡和哪个选项内容匹配
通过改变DOM的css类名称,当前点击的选项卡显示，其它隐藏。

代码：

  1 <!DOCTYPE html>
  2 
  3 <html>
  4 
  5 <head lang="en">
  6 
  7     <meta charset="UTF-8">
  8 
  9     <title>实践题 - 选项卡</title>
 10 
 11     <style type="text/css">
 12 
 13         *{padding:0px;margin: 0px;font:12px normal "microsoft yahei";}
 14 
 15         #tabs {width:290px;padding:5px;height:150px;margin:20px;}
 16 
 17         #tabs ul{list-style:none;display: block;height:30px;line-height:30px;border-bottom:2px saddlebrown solid;}
 18 
 19         #tabs ul li{background:#fff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0px 3px;border:1px solid #aaaaaa;border-bottom:none;display:inline-block;width:60px;text-align: center;}
 20 
 21         #tabs ul li.on{border-top:2px solid saddlebrown;border-bottom: 2px solid #fff;}
 22 
 23         #tabs div{height:120px;line-height: 25px;border:1px solid #336699;border-top:none;padding:5px;}
 24 
 25         .hide{display: none;}
 26 
 27     </style>
 28 
 29     <script type="text/javascript">
 30 
 31          window.onload = function(){
 32 
 33              var oTab = document.getElementById("tabs");
 34 
 35              var oUl = oTab.getElementsByTagName("ul")[0];
 36 
 37              var oLis = oUl.getElementsByTagName("li");
 38 
 39              var oDivs= oTab.getElementsByTagName("div");
 40 
 41  
 42 
 43              for(var i= 0,len = oLis.length;i<len;i++){
 44 
 45                  oLis[i].index = i;
 46 
 47                  oLis[i].onclick = function() {
 48 
 49                      for(var n= 0;n<len;n++){
 50 
 51                          oLis[n].className = "";
 52 
 53                          oDivs[n].className = "hide";
 54 
 55                      }
 56 
 57                      this.className = "on";
 58 
 59                      oDivs[this.index].className = "";
 60 
 61                  }
 62 
 63              };
 64 
 65          }
 66 
 67     </script>
 68 
 69  
 70 
 71 </head>
 72 
 73 <body>
 74 
 75 <div id="tabs">
 76 
 77     <ul>
 78 
 79         <li class="on">房产</li>
 80 
 81         <li>家居</li>
 82 
 83         <li>二手房</li>
 84 
 85     </ul>
 86 
 87     <div>
 88 
 89         275万购昌平邻铁三居 总价20万买一居<br>
 90 
 91         200万内购五环三居 140万安家东三环<br>
 92 
 93         北京首现零首付楼盘 53万购东5环50平<br>
 94 
 95         京楼盘直降5000 中信府 公园楼王现房<br>
 96 
 97     </div>
 98 
 99     <div class="hide">
100 
101         40平出租屋大改造 美少女的混搭小窝<br>
102 
103         经典清新简欧爱家 90平老房焕发新生<br>
104 
105         新中式的酷色温情 66平撞色活泼家居<br>
106 
107         瓷砖就像选好老婆 卫生间烟道的设计<br>
108 
109  
110 
111     </div>
112 
113     <div class="hide">
114 
115         通州豪华3居260万 二环稀缺2居250w甩<br>
116 
117         西3环通透2居290万 130万2居限量抢购<br>
118 
119         黄城根小学学区仅260万 121平70万抛!<br>
120 
121         独家别墅280万 苏州桥2居优惠价248万<br>
122 
123  
124 
125     </div>
126 
127 </div>
128 
129  
130 
131 </body>
132 
133 </html>
实践题 - 选项卡

 

要点：

JS 中“===”与 “==”比较的区别

1. ==用于一般比较，==在比较的时候可以转换数据类型。
2. ===用于严格比较，===严格比较，只要类型不匹配就返回flase。
看一个简单的例子:
 
给定 x=5
 
==  等于             x==8 为 false 
=== 全等（值和类型） x===5 为 true；x==="5" 为 false
 
举例说明：
 
"1"  ==  true
 
类型不同，"=="将先做类型转换，把true转换为1，即为 "1"  ==  1；
 
此时，类型仍不同，继续进行类型转换，把"1"转换为1，即为 1 == 1；
 
此时，"==" 左右两边的类型都为数值型，比较成功！
 
如果比较："1"  ===  true 左侧为字符型，右侧为bool布尔型，左右两侧类型不同，结果为false；
 
如果比较："1" === 1 左侧为字符型，右侧为int数值型，左右两侧类型不同，结果为false；
 
如果比较：1 === 1 左侧为int数值型，右侧为int数值型，左右两侧类型相同，数值大小也相同，结果为true；
 
如果比较：1 === 2 左侧为int数值型，右侧为int数值型，左右两侧类型相同，但数值大小不同，结果为false；
 
简而言之就是 "==" 只要求值相等; "===" 要求值和类型都相等

++a与a++的区别

a++是运算后自增，而++a是先自增在运算（即++a 先自加再取值，a++先取值在自加)

相同点：

a++和++a中， i的值自增1，也就是a=a+1;

不同点：

a++ ： 把（a++）作为一个整体表达式，a 的值虽然自增1，但是整个表达式的值是取 a自增  之前  的值；

++a : 也把（++a）作为一个整体表达式，a 的值也自增1，但是整个表达式的值是取 a 自增  之后  的值。

看实例:

m=a++ 相当于 m=a,a=a+1

m=++a 相当于 a=a+1,m=a 这种自加运算和自减运算,都相当于两步骤


总结: a++ 是先把 a 赋值,然后自己加一, ++a,是先自己加一,然后再把 a 赋值。

JS中substr和substring的用法和区别

substr 和 substring都是JS 截取字符串函数,两者用法很相近,下面是两者的语法很示例:

一、substr 方法

返回一个从指定位置开始的指定长度的子字符串。
string.substr(start [, length ])

注意: length可选项。如 length 为 0 或负数，将返回一个空字符串。如果没有指定该参数，则子字符串到 string 的最后。

二、substring 方法

返回位于 String 对象中指定位置的子字符串。
string.substring(start, end)

注意:

substring 方法将返回一个包含从 start 到最后（不包含 end ）的子字符串的字符串。

三、示例代码

var str = "I love JS!";// 有一个str字符串，如想获取JS子字符串，用两种方法如何实现。
str.substr(7, 2); // 获取子字符串。

str.substring(7, 9); // 获取子字符串。

结果:  JS

区别:第二参数，substr第二个参数是获取子字符串的长度，substring第二个参数是获取子字符串的结束位置。

四、注意事项

substr和substring两个函数截取带有空格的字符串后的长度是每个空格算一个字符长度。例如：

    var a = "I am imooc!";

    a.substring(0, 5).length的值是5，而不是4，但alert(a.substring(0, 5));的值却是I am ，这样在做alert("I am" == a.substring(0, 5));的时候就是false了，alert("I am" == a.substring(0, 4));才是true。

 

posted @ 2015-06-07 15:53  竹立荷塘  阅读(308)  评论(0)  编辑  收藏  举报