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。

时间: 2024-10-20 12:00:13

JavaScript进阶 - 第10章 编程挑战的相关文章

慕课网javascript 进阶篇 第九章 编程练习

把平常撸的码来博客上再撸一遍既可以加深理解,又可以理清思维.还是很纯很纯的小白,各位看官老爷们,不要嫌弃.最近都是晚睡,昨晚也不例外,两点多睡的.故,八点起来的人不是很舒服,脑袋有点晕呼呼,鉴于昨晚看到了这章的编程练习,想着自己DOM编程艺术也差不多看完了,高级3也看了点,所打算开始多敲代码了. 谁知,看着编辑器一脸懵逼,不知道如何啃下这块骨头,米思绪,写着也没什么感觉,索性就不写了,这不下午才来撸它. 要求如下: <!DOCTYPE html> <html> <head&g

JavaScript进阶 - 第8章 浏览器对象

第8章 浏览器对象 8-1 window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,window对象重点讲解计时器. 任务 在右边编辑器script标签内补充代码,弹出对话框"欢迎来到慕课网". 定义一个函数,实现打开一个网页,宽为600,高为400. 当点击"点击我,打开新窗口"按钮时,在打开网页. 如果忘记了,可以查看JavaScript基础篇. 代码

JavaScript进阶 - 第7章 JavaScript内置对象

第7章 JavaScript内置对象 7-1 什么是对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等: 对象的方法:能够在对象上执行的动作.例如,表单的“提交”(Submit),时间的“获取”(getYear)等: JavaScript 提供多个内建对象,比如 String.Date.Array 等等,使用对象前先定义,如下使用数组对象:   var objectNa

JavaScript进阶 - 第4章 跟着我的节奏走(流程控制语句)

第4章 跟着我的节奏走(流程控制语句) 4-1 做判断(if语句) if语句是基于条件成立才执行相应代码时使用的语句. 语法: if(条件) { 条件成立时执行代码} 注意:if小写,大写字母(IF)会出错! 假设你应聘web前端技术开发岗位,如果你会HTML技术,你面试成功,欢迎加入公司.代码表示如下: <script type="text/javascript">   var mycarrer = "HTML";   if (mycarrer ==

JavaScript进阶 - 第2章 你要懂的规则(JS基础语法)

第2章 你要懂的规则(JS基础语法) 2-1什么是变量 什么是变量? 从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服.玩具.水果...等. 2-2 给变量取个名字(变量命名) 我们为了区分盒子,可以用BOX1,BOX2等名称代表不同盒子,BOX1就是盒子的名字(也就是变量的名字). 我们赶快给变量取个好名字吧!变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可

JavaScript进阶 - 第3章 一起组团(数组)

第3章 一起组团(数组) 3-1 一起组团(什么是数组) 我们知道变量用来存储数据,一个变量只能存储一个内容.假设你想存储10个人的姓名或者存储20个人的数学成绩,就需要10个或20个变量来存储,如果需要存储更多数据,那就会变的更麻烦.我们用数组解决问题,一个数组变量可以存放多个数据.好比一个团,团里有很多人,如下我们使用数组存储5个学生成绩. 数组是一个值的集合,每个值都有一个索引号,从0开始,每个索引都有一个相应的值,根据需要添加更多数值. 任务 编辑器中定义数组myarr,并赋值3个学生的

JavaScript进阶 - 第6章 事件响应,让网页交互

6-1什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果. 主要事件表: 6-2鼠标单击事件( onclick ) onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件.同时onclick事件调用的程序块就会被执行,通常与按钮一起使

JavaScript进阶 - 第5章 小程序,大作用(函数)

5-1什么是函数 函数的作用,可以写一次代码,然后反复地重用这个代码. 如:我们要完成多组数和的功能. var sum;   sum = 3+2; alert(sum);   sum=7+8 ; alert(sum);   ....  //不停重复两行代码 如果要实现8组数的和,就需要16行代码,实现的越多,代码行也就越多.所以我们可以把完成特定功能的代码块放到一个函数里,直接调用这个函数,就省去重复输入大量代码的麻烦. 使用函数完成: function add2(a,b){ sum = a +

慕课网javascript 进阶篇 第十章 编程练习

---恢复内容开始--- 第十章的编程练习是选项卡切换的问题. 先分析下思路, 一.HTML页面布局 我们可以用ui li 标签来写最上面一行的内容:用个div来装下面内容,为了实现更多的效果,我们可以把上面那行的文字放在<a>标签里. 二.CSS样式制作 对文档进行基本的样式设置,font color border 那些 三.JS实现选项卡切换 通过改变DOM的css类名称,当前点击的选项卡显示,其它隐藏. ---恢复内容结束--- 第十章的编程练习是选项卡切换的问题. 先分析下思路, 一.