JavaScript进阶篇(慕课网)

<h5>第1章 系好安全带,准备启航 </h5>
<b>1.1让你认识JS</b>
1.1.1 JavaScript能做什么？
增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)
实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)
1.1.2 任务
我们先来回顾下JS入门篇的基础内容，在网页中插入JS代码，实现输出"JS进阶篇",并弹出对话框，内容为"关注JS高级篇"。
注意:
JS是区分大小写的，如：classname和ClassName是不一样的。同时注意方法、属性、变量等的大小写吆。
JS中的字符、符号等一定要在英文状态下输入吆
<b>提示：页面加载就引用函数方式：window.onload = function XXX(){ }</b>
<i>代码：</i>

<script language="javascript">
    window.onload = function AlertDialog(){
        document.write("JS进阶篇");//输出
        confirm("关注JS高级篇");//弹出确认框
    }
</script>

<b>1.2 编程练习</b>
1.2.1 任务
第一步:把注释语句注释。
第二步:编写代码，在页面中显示 “系好安全带,准备启航--目标JS”文字；
第三步:编写代码，在页面中弹出提示框“准备好了，起航吧！”
<i>提示: 可以把弹框方法写在函数里。</i>
第四步:使用引入JS外部文件的方式实现以上的任务。
<i>代码：</i>
引入方式<script src="script.js"></script>
<i>功能代码：</i>

document.write("系好安全带,准备启航--目标JS");
confirm("准备好了，启航吧！");

<h5>第2章 你要懂的规则(JS基础语法)</h5>
<b>2.1 什么是变量</b>
  什么是变量? 从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服、玩具、水果...等。

摘自慕课网

<b>2.2 给变量取个名字(变量命名)</b>
  我们为了区分盒子，可以用BOX1,BOX2等名称代表不同盒子，BOX1就是盒子的名字（也就是变量的名字）。

变量 == 盒子

<i>注意：</i>

不可使用的变量名

<i>代码：</i>

<script type="text/JavaScript">
var  myname   ;
</script>

<b>2.3 确定你的存在(变量声明)</b>
  我们要使用盒子装东西,是不是先要找到盒子,那在编程中，这个过程叫声明变量,找盒子的动作，如何表示：

声明变量语法: var 变量名;

var就相当于找盒子的动作，在JavaScript中是关键字（即保留字），这个关键字的作用是声明变量，并为"变量"准备位置(即内存）。

var mynum ; //声明一个变量mynum

当然，我们可以一次找一个盒子，也可以一次找多个盒子，所以Var还可以一次声明多个变量，变量之间用","逗号隔开。

var num1,mun2 ; //声明一个变量num1

<i>注意:变量也可以不声明，直接使用，但为了规范，需要先声明，后使用。</i>
<b>2.4 多样化的我(变量赋值）</b>

例一：var mynum = 5 ; //声明变量mynum并赋值。
例二：var mynum; //声明变量mynum
   mynum = 5 ; //给变量mynum赋值

例三：var num1 = 123; // 123是数值
   var num2 = "一二三"; //"一二三"是字符串
   var num3=true; //布尔值true（真），false(假)

<b>2.5 表达出你的想法(表达式)</b>
  表达式与数学中的定义相似，表达式是指具有一定的值、用操作符把常数和变量连接起来的代数式。一个表达式可以包含常数或变量。
<b>2.6 我还有其它用途( +号操作符）</b>
  可用作字符串拼接和数字的相加。只要当都为数字时，才用作数字相加。例如：

<script type="text/javascript">  
   var num1 = 5;
   var num2 = "你好";
   var result1 = num1 + num2;
   var result2 = num2 + num1;
   alert(result1);
   alert(result2);
   alert(num1 + num1);
  </script>
弹窗一
弹窗二
弹窗三

<i>注意：当一行代码输出过长时，不要直接换行，用字符串拼接实现。例如：</i>

<script type="text/javascript">  
 //错误的表达方式
 alert("你好你好你好你好你好你好你好你好你好你好你好你
       好你好你好你好你好你好你好你好你好");
   //正确的表达方式
   alert("你好你好你好你好你好你好你好你好你好你好你好你"+
       "好你好你好你好你好你好你好你好你好");
 </script>

<b>2.7 自加一，自减一 ( ++和- -)</b>
  算术操作符除了(+、-、*、/)外，还有两个非常常用的操作符，自加一“++”；自减一“--”。首先来看一个例子：

mynum = 10;
mynum++; //mynum的值变为11
mynum--; //mynum的值又变回10

上面的例子中，mynum++使mynum值在原基础上增加1，mynum--使mynum在原基础上减去1,其实也可以写成:

mynum = mynum + 1;//等同于mynum++
mynum = mynum - 1;//等同于mynum--

<b>2.8 较量较量(比较操作符)</b>

比较符

<b>2.9 我与你同在(逻辑与操作符）</b>

真真假假

<b>2.10 我或你都可以 (逻辑或操作符）</b>

||

<b>2.11 是非颠倒(逻辑非操作符）</b>

非真即假

<b>2.12 保持先后顺序(操作符优先级）</b>

操作符之间的优先级（高到低）:
算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号

<b>2.13 编程练习</b>
对比第二个输出，看看自己能写对多少

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS基础</title>
<script type="text/javascript">
  var a,b,sum;
  var  a  = 5;
  var  b  = 100%7;  
  sum = a > b && a*b > 0 ;
  document.write( "我认为 a 的值是:" + 5  + " b的值是:" + 2 + "sum 的值是:" +　1+"<br/>");
  document.write( "答案是,第一轮计算后，a 为："+ a +";b为："+b +";第一次计算sum为："+ sum +"<br/>");

  sum = ( (++a) + 3 ) / (2 - (--b) ) * 3;  
  document.write( "再一次计算后，我认为 a 的值是:" +  6  + " b的值是:" +  1 + "sum 的值是:" +  3 +"<br/>"); 
  document.write( "答案是，第二轮计算后，a 为：" + a + ";b为：" + b +";第二次计算sum为："+ sum +",sum的类型也发生变化了。");

</script>
</head>
<body>
</body>
</html>

真糟糕，写错两个。

<h5>第3章 一起组团(数组)</h5>
<b>3.1 一起组团（什么是数组） </b>
在c，java中数组长度是一开始就定义好的，可以是常量，也可以是变量。
可是在js中，由于其灵活性，数组定义时长度可以控制也可以不去控制。


数组

使用方式：

<script type="text/javascript">
//var mycars=new Array(3)
//mycars[0]="Saab"
//mycars[1]="Volvo"
//mycars[2]="BMW"

 var myarr=new Array(); //定义数组
 myarr[0]=80; 
 myarr[1]=60;
 myarr[2]=99;
 document.write("第一个人的成绩是:"+myarr[0]);
 document.write("第二个人的成绩是:"+myarr[1]);
 document.write("第三个人的成绩是:"+myarr[2]);
</script>

<b>3.2 组团，并给团取个名（如何创建数组）</b>
  使用数组之前首先要创建，而且需要把数组本身赋至一个变量。好比我们出游，要组团，并给团定个名字“云南之旅”。

数组创建

<i>注意：
1.创建的新数组是空数组，没有值，如输出，则显示undefined。
2.<b>虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。</b></i>

<b>3.3 谁是团里成员（数组赋值）</b>

第一种方法：
var myarray=new Array(); //创建一个新的空数组
myarray[0]=66; //存储第1个人的成绩
myarray[1]=80; //存储第2个人的成绩
第二种方法：
var myarray = new Array(66,80,90,77,59);//创建数组同时赋值
第三种方法：
var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）

<b>3.4团里添加新成员（向数组增加一个新元素）</b>
因为数组的长度是可变的，所以只需使用下一个未用的索引，任何时刻可以不断向数组增加新元素。


数组添加变量

<b>3.5 呼叫团里成员(使用数组元素)</b>

通过索引找变量

<b>3.6 了解成员数量(数组属性length)</b>
语法：

myarray.length; //获得数组myarray的长度

<b>3.7 二维数组</b>

二维数组的表示: myarray[ ][ ]

表格表示

创建一个二维数组【3】【6】，并赋值。

<script type="text/javascript">
var myarr=new Array();  //先声明一维 
for(var i=0;i<3;i++){   //一维长度为3
   myarr[i]=new Array();  //再声明二维 
   for(var j=0;j<6;j++){   //二维长度为6
   myarr[i][j]=i*j;   // 赋值，每个数组元素的值为i*j
   }
 }
</script>

在js中二维数组的定义不太像java中的int 【】【】myarr = new int【2】【2】；这种方式。下面介绍下，js的二维数组的定义。
实例一：

var arr = [[1,2],[a,b]];
alert(arr[1][0]); //a 第2列第1行所在的元素

实例二：

var arr = new array(new array(1,2),new array("a","b"));
alert(arr[1][0]);

实例三：二维数组的声明：

var arr = new array(); //先声明一维
for(var i=0;i<5;i++){ //一维长度为5
arr[i]=new array(); //在声明二维
for(var j=0;j<5;j++){ //二维长度为5
arr[i][j]=1;
}
}

<h5>第4章 跟着我的节奏走(流程控制语句)</h5>
<b>4.1 做判断（if语句）</b>
<i>语法:</i>

if(条件)
{ 条件成立时执行代码}

<b>注意：if小写，大写字母（IF）会出错！</b>
<b>4.2 二选一 （if...else语句）</b>
<i>语法:</i>

if(条件)
{ 条件成立时执行的代码}
else
{条件不成立时执行的代码}

<b>4.3 多重判断（if..else嵌套语句）</b>
<i>语法:</i>

if(条件1)
{ 条件1成立时执行的代码}
else if(条件2)
{ 条件2成立时执行的代码}
...
else if(条件n)
{ 条件n成立时执行的代码}
else
{ 条件1、2至n不成立时执行的代码}

<b>4.4 多种选择（Switch语句)</b>
<i>语法:</i>

switch(表达式)
{
case值1:
执行代码块 1
break;
case值2:
执行代码块 2
break;
...
case值n:
执行代码块 n
break;
default:
与 case值1 、 case值2...case值n 不同时执行的代码
}

<b>4.5 重复重复（for循环）</b>
<i>for语句结构：</i>

for(初始化变量;循环条件;循环迭代)
{
循环语句
}

这个地方我写mymoney < 11竟然说我错，不给力。

<script type="text/JavaScript">
var mymoney,sum=0;//mymoney变量存放不同面值，sum总计
for(mymoney=1;mymoney<=10;mymoney++)
{ 
  sum= sum + mymoney;
}
  document.write("sum合计:"+sum);
</script>

<b>4.6 反反复复(while循环)</b>
<i>while语句结构：</i>

while(判断条件)
{
循环语句
}

<script type="text/javascript">
var num=0;  //初始化值
while (num<=6)   //条件判断
{
  document.write("取出第"+num+"个球<br />");
  num=num+1;  //条件值更新
}
</script>

<b>4.7 来来回回(Do...while循环)</b>
<i>do...while语句结构：</i>

do
{
循环语句
}
while(判断条件)

<b>4.8 退出循环break</b>
<i>格式如下：</i>

for(初始条件;判断条件;循环后条件值更新)
{
if(特殊情况)
{break;}
循环代码
}

<b>4.9 继续循环continue</b>
<i>语句结构：</i>

for(初始条件;判断条件;循环后条件值更新)
{
if(特殊情况)
{ continue; }
循环代码
}

<h5>第5章 小程序，大作用（函数）</h5>
<b>5.1 什么是函数</b>
  函数，又称方法，函数的作用，可以写一次代码，然后反复地重用这个代码。
<b>5.2 定义函数</b>
如何定义一个函数呢？看看下面的格式：

function 函数名( )
{
函数体;
}

在此处并没有像java和c#一样，对方法的访问权限还有一定的限制，如public static void等。无需定义返回类型，也没有入口函数，写好之后，调用即可。
例如下面代码：

<script type="text/javascript">
    function sub2()                     //定义函数
 {
   sub=5-2;
   alert("5和2的差:"+sub);
 }
</script>
</head>
<body>
<form>
    <input type="button" value="点击我" onclick="sub2()" /><!--点击后引用函数-->
</form>

<b>5.3 函数调用</b>
  函数定义好后，是不能自动执行的，需要调用它,直接在需要的位置写函数名。
第一种情况:在<script>标签内调用。

  <script type="text/javascript">
    function add2()
    {
         sum = 1 + 1;
         alert(sum);
    }
  add2();//调用函数，直接写函数名。
</SCRIPT>

第二种情况:在HTML文件中调用，如通过点击按钮后调用定义好的函数。

<html>
<head>
<script type="text/javascript">
   function add2()
   {
         sum = 5 + 6;
         alert(sum);
   }
</script>
</head>
<body>
<form>
<input type="button" value="click it" onclick="add2()">  //按钮,onclick点击事件，直接写函数名
</form>
</body>
</html>

<b>5.4 有参数的函数</b>
格式：

function 函数名(参数1,参数2)
{
函数代码
}

样例代码：

function add2(x,y)
{
   sum = x + y;
   document.write(sum);
}

<b>5.5 返回值的函数</b>
基本格式：

function add2(x,y)
{
   sum = x + y;
   return sum; //返回函数值,return后面的值叫做返回值。
}

使用方式：

<script type="text/javascript">
  function  app2(x,y)
  { var sum,x,y;
    sum = x * y;
    return sum;
  }
 var req1 = app2(5,6);
 var req2 = app2(2,3);
var sumq = req1 + req2;
document.write("req1的值:"+req1+"<br/>");
document.write("req2的值:"+req2+"<br/>");
document.write(req1+"与"+req2+"和:"+sumq);
</script>

既然有了返回值，我们就可以进行利用，将其存放在变量之中。
运行结果：

返回值的使用

<h5>第6章 事件响应，让网页交互</h5>
<b>6.1 什么是事件</b>
  JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
  比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。
主要事件表：

主要事件

<b>6.2 鼠标单击事件( onclick ）</b>
 &esmp;onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。
基本使用方式：

<html>
<head>
   <script type="text/javascript">
      function add2(){
        var numa,numb,sum;
        numa=6;
        numb=8;
        sum=numa+numb;
        document.write("两数和为:"+sum);  }
   </script>
</head>
<body>
   <form>
      <input name="button" type="button" value="点击提交" onclick="add2()" />
   </form>
</body>
</html>

<b>6.3 鼠标经过事件（onmouseover）</b>
  鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。
基本使用方式：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 鼠标经过事件 </title>
<script type="text/javascript">
    function message(){
      confirm("请输入密码后，再单击确定!"); }
</script>
</head>
<body>
<form>
密码:<input name="password" type="password" onmouseover = "message()">
<input name="确定" type="button" value="确定"/>
</form>
</body>
</html>

6.4 鼠标移开事件（onmouseout）
  鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。
基本使用方式：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标移开事件 </title>
<script type="text/javascript">
  function message(){
    alert("不要移开，点击后进行慕课网!"); }
</script>
</head>
<body>
<form>
  <a href="http://www.imooc.com" onmouseout = "message()">点击我</a>
</form>
</body>
</html>

6.5 光标聚焦事件（onfocus）
  当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。
基本使用：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 光标聚焦事件 </title>
  <script type="text/javascript">
    function message(){
      alert("请选择，您现在的职业！");
    }
  </script>
</head>
<body>
请选择您的职业：<br>
  <form onfocus = "message()">
    <select name="career"> 
      <option>学生</option> 
      <option>教师</option> 
      <option>工程师</option> 
      <option>演员</option> 
      <option>会计</option> 
    </select> 
  </form>
</body>
</html>

这个地方也没有输入框，怎么聚焦嘞……这个好像不能调用这个函数，再另外写一个输入框来验证这个函数把，可能我还不知道怎么聚焦这form上吧，不过出于用户角度，也很少有人找到吧，嘿嘿……
调用上面已经编写好的函数：

<input type="text" onfocus = "message()">
光标放在输入框，弹窗

<b>6.6 失焦事件</b>
  onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。
代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 失焦事件 </title>
<script type="text/javascript">
  function message(){
    alert("请确定已输入密码后，在移开!"); }
</script>    
</head>
<body>
  <form>
   用户:<input name="username" type="text" value="请输入用户名！" ><br/><br/>
   密码:<input name="password" type="text" value="请输入密码！" onblur = "message()">
  </form>
</body>
</html>
失焦事件

<b>6.7 内容选中事件（onselect）</b>
  选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 内容选中事件 </title>
<script type="text/javascript">
  function message(){
    alert("您触发了选中事件！"); }
</script>    
</head>
<body>
  <form>
  个人简介：<br>
   <textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介，不少于200字！</textarea>
  </form>
</body>
</html>
内容选中事件

<b>6.8 文本框内容改变事件（onchange）</b>
  通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。
改变内容后，光标离开后便开始出发事件。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 文本框内容改变事件 </title>
<script type="text/javascript">
  function message(){
    alert("您改变了文本内容！"); }
</script>    
</head>
<body>
  <form>
  个人简介：<br>
   <textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介，不少于200字！</textarea>
  </form>
</body>
</html>
文本框内容改变

<b>6.9 加载事件（onload）</b>
  事件会在页面加载完成后，立即发生，同时执行被调用的程序。

<body onload="message()"> </body>

<b>6.10 卸载事件（onunload）</b>
当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。
<font color="red">注意：不同浏览器对onunload事件支持不同。</color>
试了下，2345，谷歌都没效果，在editplus里调试的浏览器上出现了效果，而且是我已经关了浏览器之后才出现的，可见这个已经被淘汰了。

卸载事件

<b>6.11 编程练习（简单的计算器）</b>

简单的计算器

代码：

<!DOCTYPE html>
<html>
<head>
    <title> 事件</title>
    <script type="text/javascript">
        function count(){


            //获取第一个输入框的值
            var txt1 = document.getElementById("txt1").value;
            //获取第二个输入框的值
            var txt2 = document.getElementById("txt2").value;
            //获取选择框的值
            var selection = document.getElementById("select").value;
            var result;
            //获取通过下拉框来选择的值来改变加减乘除的运算法则
            switch(selection){
                case "+": result = parseFloat(txt1) + parseFloat(txt2);break;
                case "-": result = parseFloat(txt1) - parseFloat(txt2);break;
                case "*": result = parseFloat(txt1) * parseFloat(txt2);break;
                case "/" : result = parseFloat(txt1) / parseFloat(txt2);break;
                default :document.write("there is a error");
            }
            document.getElementById("fruit").value = result;

        }
    </script>
</head>
<body>
<input type='text' id='txt1' />
<select id='select'>
    <option value='+'>+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
</select>
<input type='text' id='txt2' />
<input type='button' value=' = ' onclick = "count()"/> <!--通过 = 按钮来调用创建的函数，得到结果-->
<input type='text' id='fruit' />
</body>
</html>
第7章 JavaScript内置对象

7-1 什么是对象
什么是对象
  JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法(在java/c#中的解释也是万物皆对象，面向对象编程无论使用什么语言，其思想是一样的，方法也是类似的)。
  对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；
  对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；
  JavaScript 提供多个内建对象，比如 String、Date、Array 等等，使用对象前先定义，如下使用数组对象：

var objectName =new Array();//使用new关键字定义对象
或者
var objectName =[];

访问对象属性的语法:

objectName.propertyName

访问对象的方法：

objectName.methodName()

7.2 Date 日期对象
  日期对象可以储存任意一个日期，并且可以精确到毫秒数（1/1000 秒）。
定义一个时间对象 :

var Udate=new Date();

<i>注意:使用关键字new，Date()的首字母必须大写。</i>
访问方法语法：“<日期对象>.<方法>”
下图注意月份要加一和毫秒与秒是1s = 1000ms;

Date对象中处理时间和日期的常用方法

7.3 返回/设置年份方法

get/setFullYear() 返回/设置年份，用四位数表示。

7.4 返回星期方法
  getDay() 返回星期，返回的是0-6的数字，0 表示星期天。如果要返回相对应“星期”，通过数组完成，代码如下:

<script type="text/javascript">
  var mydate=new Date();//定义日期对象
  var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//定义数组对象,给每个数组项赋值
  var mynum=mydate.getDay();//返回值存储在变量mynum中
  document.write(mydate.getDay());//输出getDay()获取值
  document.write("今天是："+ weekday[mynum]);//输出星期几
</script>

7.5 返回/设置时间方法
  get/setTime() 返回/设置时间，单位毫秒数，计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数。
7.6 String 字符串对象
<i>用法：</i>

var mystr = "I love JavaScript!"

7.7 返回指定位置的字符
  charAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。
<i>语法：</i>

stringObject.charAt(index)

<i>参数说明：</i>


参数说明

7.8 返回指定的字符串首次出现的位置
  indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
<i>语法：</i>

stringObject.indexOf(substring, startpos)

参数说明：

参数说明

<i>例题：</i>
  补充右边编辑器第8行，使用indexOf()方法，检索第二个字符ｏ出现的位置。
<i>代码：</i>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>string对象 </title>
<script type="text/javascript">
  var mystr="Hello World!"
  document.write(mystr.indexOf("o",2));
</script>
</head>
<body>
</body>
</html>

7.9 字符串分割split()
<i>说明：</i>
  split() 方法将字符串分割为字符串数组，并返回此数组。
<i>语法：</i>

stringObject.split(separator,limit)

<i>参数说明：</i>

参数说明

<i>例题：</i>
  运用split()方法，完成以下任务，并输出:
  1. 补充右边编辑器第8行，以字符"-"分隔字符串对象mystr。
  2. 补充右边编辑器第9行，将字符串对象mystr每个字符分割。
  3. 补充右边编辑器第10行，将字符串对象mystr分割成字符，分割3次。

运行结果

<i>代码：</i>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript">
var mystr="86-010-85468578";
document.write( mystr.split("-")     + "<br />");
document.write( mystr.split("")     + "<br />");
document.write(mystr.split("",3)                );
</script>
</head>
<body>
</body>
</html>

7.10 提取字符串substring()
<i>语法：</i>

stringObject.substring(startPos,stopPos)

<i>参数说明：</i>

参数说明

<i>注意：</i>
  1. 返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符，其长度为 stop 减start。
  2. 如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
  3. 如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。

7.11 提取指定数目的字符substr()
  substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串。
<i>语法:</i>
  stringObject.substr(startPos,length)
<i>参数说明:</i>

参数说明

<i>注意：</i>
  如果参数startPos是负数，从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
  如果startPos为负数且绝对值大于字符串长度，startPos为0。

7.12 Math对象
  Math对象，提供对数据的数学计算。
<i>注意：</i>
  Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别。
<i>Math 对象的属性</i>

Math对象的属性

<i>Math对象的方法</i>

Math对象的方法

7.13 向上取整ceil()
<i>语法:</i>

Math.ceil(x)

<i>参数说明:</i>

参数说明

7.14 向下取整floor()
<i>语法:</i>

Math.floor(x)

<i>参数说明:</i>

参数说明

7.15 四舍五入round()
<i>语法:</i>

Math.round(x)

<i>参数说明:</i>

参数说明

7.16 随机数 random()
  random() 方法可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之间的一个随机数。
<i>语法：</i>

Math.random();

<i>注意：</i>
返回一个大于或等于 0 但小于 1 的符号为正的数字值。
7.17 Array 数组对象
  数组对象是一个对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置，是从零开始的
<i>数组定义的方法：</i>

  1. 定义了一个空数组:

var 数组名= new Array();

  1. 定义时指定有n个空元素的数组：

var 数组名 =new Array(n);
3.定义数组的时候，直接初始化数据：
var 数组名 = [<元素1>, <元素2>, <元素3>...];

3.定义myArray数组，并赋值，代码如下：

var myArray = [2, 8, 6];

<i>说明：</i>
定义了一个数组 myArray，里边的元素是：myArray[0] = 2; myArray[1] = 8; myArray[2] = 6。

<i>数组元素使用：</i>

数组名[下标] = 值;

<i>注意:</i>
数组的下标用方括号括起来，从0开始。
<i>数组属性：</i>
<i>length 用法：</i>
<数组对象>.length；返回：数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。
<i>数组方法：</i>


数组方法

7.18 数组连接concat()
concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。
语法:

arrayObject.concat(array1,array2,...,arrayN)

参数说明：

**注意: **该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
7.19 指定分隔符连接数组元素join()
join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
语法：

arrayObject.join(分隔符)

参数说明:


<i>注意：</i>
返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。这个方法不影响数组原本的内容。
<i>代码:</i>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Array对象 </title>
<script type="text/javascript">
    var myarr1= new Array("86","010")
    var myarr2= new Array("84697581");
   var myarr3= myarr1.concat(myarr2);
    document.write(myarr3.join("-"));
</script>
</head>
<body>
</body>
</html>
执行结果

7.20 颠倒数组元素顺序reverse()
  reverse() 方法用于颠倒数组中元素的顺序。
<i>语法：</i>

arrayObject.reverse()

<i>注意：</i>
该方法会改变原来的数组，而不会创建新的数组。
7.21 选定元素 slice（）
slice() 方法可从已有的数组中返回选定的元素。
<i>语法</i>

arrayObject.slice(start,end)

<i>参数说明：</i>

  1.返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
  2. 该方法并不会修改数组，而是返回一个子数组。
<i>注意：</i>
  1. 可使用负值从数组的尾部选取元素。
  2.如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
  3. String.slice() 与 Array.slice() 相似。
7.22 数组排序sort()
  sort()方法使数组中的元素按照一定的顺序排列。
<i>语法:</i>

arrayObject.sort(方法函数)

<i>参数说明：</i>



  1.如果不指定<方法函数>，则按unicode码顺序排列。
  2.如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。

myArray.sort(sortMethod);

<i>注意: </i>
  该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
  若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。 若返回值>-1 && <1，则表示 A 和 B 具有相同的排序顺序。 若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。
<i>升序排序例题：</i>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Array对象 </title>
<script type="text/javascript">
   function sortNum(a,b) {
       return a -b ;

   }
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr.sort(sortNum));
</script>
</head>
<body>
</body>
</html>
运行结果

感觉这个地方有点难懂……
<i>资料查找</i>

w3cschool

貌似还不能解决问题……
<i>接着查：</i>
代码：

function sortNumber(a, b){
   return a - b; //这里返回的是他们的差值，如果是小于0的值，就会将a排在前面，如果大于0,就会将b排在前面，如果是0的话，就随便。（冒泡排序法！！）
}

因为：若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
  若 a 等于 b，则返回 0。
  若 a 大于 b，则返回一个大于 0 的值

这里说明一下这个过程，明明sortNum应该是有两个参数，但是我们在调用时却一个参数都没有，怎么进行比较啊？这里是这样的，当arr从第一个数开始调用sort时，80前面是没有数与它比较的，所以就到第二个，就是16，这时80就会与16比较，于是就会调用sortNumber并将80和16传进去，这是sort（）的特性。

7.23 编程练习
<i>要求：</i>
  第一步：可通过javascript的日期对象来得到当前的日期。
  提示:使用Date()日期对象，注意星期返回值为0-6，所以要转成文字"星期X"
  第二步：一长窜的字符串不好弄，找规律后分割放到数组里更好操作哦。
  第三步：分割字符串得到分数，然后求和取整。
<i>代码：</i>

<!DOCTYPE  HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系好安全带,准备启航</title>

<script type="text/javascript">

  //通过javascript的日期对象来得到当前的日期，并输出。
  
    var weekday=["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];

    var nowDate=new Date();

    document.write(nowDate.getFullYear()+"年"+(nowDate.getMonth()+1)+"月"+nowDate.getDate()+"日"+" "+weekday[nowDate.getDay()]+"--班级总分为：");
   
  //成绩是一长窜的字符串不好处理，找规律后分割放到数组里更好操作哦
  var scoreStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
 
  //从数组中将成绩撮出来，然后求和取整，并输出。
  var newArr=scoreStr.split(";");

  var sum=0;

  for (var i=0;i< newArr.length;i++) {

      sum=sum+parseInt(newArr[i].substring(3));

  }
document.write("班级平均分为："+Math.round(sum/newArr.length));
  
</script>
</head>
<body>
</body>
</html>
第8章 浏览器对象

8.1 window对象
  window对象是BOM的核心，window对象指当前的浏览器窗口。
window对象方法：

widow对象方法

注意:
在JavaScript基础篇中，已讲解了部分属性，window对象重点讲解计时器。
例题：弹出一个网页(window.open()的使用练习)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>window对象</title>
<script type="text/javascript">
function Wopen(){
var mymessage=confirm("are you sure?");

if(mymessage==true)

    {

         window.open('http://www.iotzzh.com','_blank','width=600,height=400,top100px,left=0px');

    }
}
</script>
</head>
<body>
<form>
<input type="button" value="点击我，打开新窗口"   onClick="Wopen()"/>
</form>
</body>
</html>

8.2 JavaScript 计时器
  在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
计时器类型：
  一次性计时器：仅在指定的延迟时间之后触发一次。
  间隔性触发计时器：每隔一定的时间间隔就触发一次。
计时器方法：

计时器方法

8.3 计时器setInterval()
  在执行时,从载入页面后每隔指定的时间执行代码。
语法:

setInterval(代码,交互时间);

参数说明：
  1. 代码：要调用的函数或要执行的代码串。

2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。
返回值:
  一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。
调用函数格式(假设有一个clock()函数):

setInterval("clock()",1000)
或

setInterval(clock,1000)

8.4 取消计时器clearInterval()
 emsp;clearInterval() 方法可取消由 setInterval() 设置的交互时间。
语法：

clearInterval(id_of_setInterval)

参数说明:

id_of_setInterval：由 setInterval() 返回的 ID 值。
例题：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
   function clock(){
      var time=new Date();                    
      document.getElementById("clock").value = time;
   }
    var T = setInterval(clock,1000);
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" onclick = "clearInterval(T)" />
  </form>
</body>
</html>

8.5 计时器setTimeout()
  setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
语法:

setTimeout(代码,延迟时间);

参数说明：
  1. 要调用的函数或要执行的代码串。
  2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。
例题：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
</head>
<script type="text/javascript">
  var num=0;
  function startCount() {
    document.getElementById('count').value=num;
    num=num+1;
    setTimeout("startCount()",3000);  
  }
  setTimeout("startCount()",3000);  
</script>
</head>
<body>
<form>
<input type="text" id="count" onclick = "startCount()" />
</form>
</body>
</html>

说明：
里面的timeout是设置3秒后调用自己，外面的timeout是设置打开3秒后第一次调用该函数
8.6 取消计时器clearTimeout()
  setTimeout()和clearTimeout()一起使用，停止计时器。
语法:

clearTimeout(id_of_setTimeout)

参数说明:

id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

例题：点击按钮控制是否计数

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
</head>
<script type="text/javascript">
  var num=0;
  var i;
  function startCount(){
    document.getElementById('count').value=num;
    num=num+1;
    i=setTimeout("startCount()",1000);
  }
  function stopCount(){
  clearTimeout(i);
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="count" />
    <input type="button" value="Start" onclick="startCount()" />
    <input type="button" value="Stop"  onclick="stopCount()" />
  </form>
</body>
</html>

8.7 History 对象
  history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
注意:

从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。

语法：

window.history.[属性|方法]

注意：window可以省略。
History 对象属性

History 对象方法

8.8 返回前一个浏览的页面
  back()方法，加载 history 列表中的前一个 URL。
语法：

window.history.back();

比如，返回前一个浏览的页面，代码如下：

window.history.back();

注意：等同于点击浏览器的倒退按钮。

back()相当于go(-1),代码如下:
window.history.go(-1);

8.9 返回下一个浏览的页面
  forward()方法，加载 history 列表中的下一个 URL。如果倒退之后，再想回到倒退之前浏览的页面，则可以使用forward()方法。

window.history.forward();
window.history.go(1);

8.10 返回浏览历史中的其他页面
  go()方法，根据当前所处的页面，加载 history 列表中的某个具体的页面。
语法：

window.history.go(number);

参数：

8.11 Location对象
  location用于获取或设置窗体的URL，并且可以用于解析URL。
语法:

location.[属性|方法]

location对象属性图示:

location 对象属性：

location 对象方法:

8.12 Navigator对象
  Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。
对象属性:

8.13 userAgent

几种浏览器的user_agent

8.14 screen对象
  screen对象用于获取用户的屏幕信息。
语法：

window.screen.属性

对象属性

8.15 屏幕分辨率的高和宽
  window.screen 对象包含有关用户屏幕的信息。
  1. screen.height 返回屏幕分辨率的高
  2. screen.width 返回屏幕分辨率的宽
注意:
  1.单位以像素计。
  2. window.screen 对象在编写时可以不使用 window 这个前缀。
8.16 屏幕可用高和宽度
  1. screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。
  2. screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。
注意:
  不同系统的任务栏默认高度不一样，及任务栏的位置可在屏幕上下左右任何位置，所以有可能可用宽度和高度不一样。

第9章 DOM对象，控制HTML元素

9.1 认识DOM
  文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
将HTML代码分解为DOM节点层次图:

DOM树

节点属性:

遍历节点树:

DOM操作:

注意:前两个是document方法。
9.2 getElementsByName()方法
语法：

document.getElementsByName(name)

注意:
  1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。
9.3 getElementsByTagName()方法
语法:

document.getElementsByTagName(Tagname)

说明:

  1. Tagname是标签的名称，如p、a、img等标签名。
  2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

9.4 区别getElementByID,getElementsByName,getElementsByTagName
  以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。

1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。

2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。

3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。
9.5 getAttribute()方法
语法：

elementNode.getAttribute(name)

9.6 setAttribute()方法
语法：

elementNode.setAttribute(name,value)

9.7 节点属性
  在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：
  1. nodeName : 节点的名称
  2. nodeValue ：节点的值
  3. nodeType ：节点的类型
一、nodeName 属性: 节点的名称，是只读的。
  1. 元素节点的 nodeName 与标签名相同
  2. 属性节点的 nodeName 是属性的名称
  3. 文本节点的 nodeName 永远是 #text
  4. 文档节点的 nodeName 永远是 #document
二、nodeValue 属性：节点的值
  1. 元素节点的 nodeValue 是 undefined 或 null
  2. 文本节点的 nodeValue 是文本自身
  3. 属性节点的 nodeValue 是属性的值
例题：
代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>节点属性</title>
</head>
<body>
  <ul>
     <li>javascript</li>
     <li>HTML/CSS</li>
     <li>jQuery</li>     
  </ul>
  <script type="text/javascript">
    var node = document.getElementsByTagName("li");
    for(var i = 0;i < node.length;i++){
    document.write(node[i].nodeName);
    document.write(node[i].nodeValue);
    document.write(node[i].nodeType);
    }
  </script>
</body>
</html>

9.8 访问子节点childNodes
  访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
<i>语法：</i>

elementNode.childNodes

<i>注意：</i>
如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。

使用注意事项

9.9 访问子节点的第一和最后项
  一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
<i>语法：</i>

node.firstChild

<i>说明：</i>与elementNode.childNodes[0]是同样的效果。
  二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：

node.lastChild

说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
<i>注意:</i>
上一节中，我们知道Internet Explorer 会忽略节点之间生成的空白文本节点，而其它浏览器不会。我们可以通过检测节点类型，过滤子节点。

看到这，我貌似知道css3里的xx：firstchild{}这种伪类选择器怎么来的了……
哦对了，利用此类方式得到的结果并不是直观看到的那种，例如：

获得节点

9.10 访问父节点parentNode
  获取指定节点的父节点
<i>语法：</i>

elementNode.parentNode

<i>注意:</i>
父节点只能有一个。
9.11 访问兄弟节点
  1. nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
<i>语法：</i>

nodeObject.nextSibling

<i>说明：</i>如果无此节点，则该属性返回 null。
  2. previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
语法：

nodeObject.previousSibling

说明：如果无此节点，则该属性返回 null。
注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。
9.12 插入节点appendChild()
在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法:

appendChild(newnode)

参数:

newnode：指定追加的节点。

插入节点样例

9.13 插入节点insertBefore()
  nsertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:

insertBefore(newnode,node);
参数:
newnode: 要插入的新节点。
node: 指定此节点前插入节点。

我们在来看看下面代码，在指定节点前插入节点。

插入节点样例

9.14 删除节点removeChild()
  removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
语法:

nodeObject.removeChild(node)

参数:

node ：必需，指定需要删除的节点。

删除节点样例

9.15 替换元素节点replaceChild()
  replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
语法：

node.replaceChild (newnode,oldnew )

参数：

newnode : 必需，用于替换 oldnew 的对象。
oldnew : 必需，被 newnode 替换的对象。

9.16 创建元素节点createElement
  createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法：

document.createElement(tagName)

参数:

tagName：字符串值，这个字符串用来指明创建元素的类型。

注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。
9.17 创建文本节点createTextNode
  createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
语法：

document.createTextNode(data)

参数：

data : 字符串值，可规定此节点的文本。

9.18 浏览器窗口可视区域大小
获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:

一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：

  • window.innerHeight - 浏览器窗口的内部高度

  • window.innerWidth - 浏览器窗口的内部宽度

二、对于 Internet Explorer 8、7、6、5：

• document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。

• document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。

或者

Document对象的body属性对应HTML文档的<body>标签

• document.body.clientHeight

• document.body.clientWidth

在不同浏览器都实用的 JavaScript 方案：

var w= document.documentElement.clientWidth
      || document.body.clientWidth;
var h= document.documentElement.clientHeight
      || document.body.clientHeight;

9.19 网页尺寸scrollHeight
  scrollHeight和scrollWidth，获取网页内容高度和宽度。
  一、针对IE、Opera:

scrollHeight 是网页内容实际高度，可以小于 clientHeight。

二、针对NS、FF:
scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。

三、浏览器兼容性

var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;

注意:区分大小写

scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。

9.20 网页尺寸offsetHeight
  offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
  一、值

offsetHeight = clientHeight + 滚动条 + 边框。

二、浏览器兼容性

var w= document.documentElement.offsetWidth
    || document.body.offsetWidth;
var h= document.documentElement.offsetHeight
    || document.body.offsetHeight;

9.21 网页卷去的距离与偏移量

图解

  scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容。

scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容。

offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。

offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。

注意:

1. 区分大小写

2. offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。

<h5>第10章 编程挑战</h5>
  编写一个选项卡

简陋选项卡

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
        /* CSS样式制作 */
        .selection-tab{text-align: center;margin-top: 100px;}
        .nav>div{display: inline;padding: 0px 10px;}
        .nav>div:hover{cursor:pointer;}
        ul,li{list-style: none;}
        #home-furnishing-info,#second-hand-house-info{display: none;}



    </style>
    <script type="text/javascript">


        // JS实现选项卡切换
    function showHP() {
        document.getElementById("house-property-info").style.display = "block";
        document.getElementById("home-furnishing-info").style.display = "none";
        document.getElementById("second-hand-house-info").style.display = "none";
    }
    function showHF() {
        document.getElementById("house-property-info").style.display = "none";
        document.getElementById("home-furnishing-info").style.display = "block";
        document.getElementById("second-hand-house-info").style.display = "none";
    }
    function showSHH() {
        document.getElementById("house-property-info").style.display = "none";
        document.getElementById("home-furnishing-info").style.display = "none";
        document.getElementById("second-hand-house-info").style.display = "block";
    }


    </script>

</head>
<body>
<!-- HTML页面布局 -->
<div class="selection-tab">
<div class="nav">
    <div id="house-property" onclick="showHP()">房产</div>
    <div id="home-furnishing" onclick="showHF()">家居</div>
    <div id="second-hand-house" onclick="showSHH()">二手房</div>
</div>
<div class="content">
    <ul id="house-property-info">
        <li>275万购昌平邻铁三居 总价20万买一居</li>
        <li>200万内购五环三居 140万安家东三环</li>
        <li>北京首现零首付楼盘 53万购东5环50平</li>
        <li>京楼盘直降5000 中信府 公园楼王现房</li>
    </ul>
    <ul id="home-furnishing-info">
        <li>40平出租屋大改造 美少女的混搭小窝</li>
        <li>经典清新简欧爱家 90平老房焕发新生</li>
        <li>新中式的酷色温情 66平撞色活泼家居</li>
        <li> 瓷砖就像选好老婆 卫生间烟道的设计</li>
    </ul>
    <ul id="second-hand-house-info">
        <li>通州豪华3居260万 二环稀缺2居250w甩</li>
        <li>  西3环通透2居290万 130万2居限量抢购</li>
        <li>黄城根小学学区仅260万 121平70万抛!</li>
        <li> 独家别墅280万 苏州桥2居优惠价248万</li>
    </ul>
</div>

</div>
</body>
</html>

第一次遇到这个，哈哈……

哈哈，结束咯
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,029评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,395评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,570评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,535评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,650评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,850评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,006评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,747评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,207评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,536评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,683评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,342评论 4赞 330
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,964评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,772评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,004评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,401评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,566评论 2赞 349

推荐阅读更多精彩内容

  • JavaScript进阶
    第1章 认识JS JavaScript能做什么？1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 1,250评论 0赞 5
  • JavaScript
    一、JS前言 （1）认识JS 也许你已经了解HTML标记(也称为结构)，知道了CSS样式(也称为表示)，会使用HT...
    凛0_0阅读 2,755评论 0赞 8
  • 读懂这篇笔记，你也能轻松实现资源变现
    愈演愈烈的同类竞争对企业未来的发展构成了重大挑战，因此开始不断尝试通过产品、渠道、服务、商业模式的创新来实现新的突...
    Kakie阅读 429评论 0赞 2