javascript再学习

时间  2019-11-07
标签 javascript 学习 栏目 JavaScript 繁體版
原文   原文链接
好久之前系统的学过JavaScript，但有许多细节的知识已经忘了，今天再来一个全面的学习梳理、复习。

1、JavaScript基本概念

一、js 技术用在什么地方?

  1. 地图搜索
  2. 网页游戏
  3. 对用户输入校验(email ,数字,身份证,ip...)
  4. 股市网站..

核心一句话；js能够对网页的元素进行编程控制，实现动态效果.javascript

javascript 并不须要服务器的运行，他能够直接在浏览器上跑起来。php

二、js的基本介绍

① js是一种脚本语句，不能独立运行,它每每和配合别的语言使用, 好比(html/php/jsp/asp/asp.net).css

② js 有本身的函数(系统函数,自定义函数), 变量, 有编程的控制语句(顺序,分支,循环), 可是相对说,js的语法规范不是特别严格. 与编程语言之间最大的区别是编程语言的语法和规则更为严格和复杂一些。html

③ js是解释执行语言
js源码 ->直接被执行(js引擎[内嵌到浏览器])myie开源浏览器java

④ js能够对网页元素编程，能够改变网页某个元素的外观，使其动起来
⑤ js是用于bs开发.
⑥ js是客户端技术，它运行在客户端的浏览器node

java 和 javascript 没有任何关系ajax

请注意: 由于浏览器的差别，可能有这样问题，在ie中运行正常的js脚本，在ff(firefox)中运行不正常.[应当在不一样的浏览器中去测试是否ok 浏览器兼容.] 解决这个问题的简单方法是: 尽可能使用js通用的函数.

2、javascript变量 标识符规范

一、如何理解js是事件驱动的脚本语言

事件发生(用户作某个操做)---[驱动]---->函数的调用正则表达式

二、第一个程序

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script language="javascript">
    //js 中   对象名.方法
    //window是js语句的内置dom对象,无需建立，能够直接使用 有点相似于php中的超全局数组，不须要定义，

    window.alert("hellow,wrold1");
</script>
</head>

<body>
<script language="javascript">
    //js 中   对象名.方法
    //window是js语句的dom对象,无需建立，能够直接使用 
    window.alert("hellow,wrold2");
</script>

</body>

总结: js码能够放在 html/php 页面的任何地方，js码是从上到下依次执行.编程

三、Window 对象

Window 对象表示浏览器中打开的窗口。
若是文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档建立一个 window 对象，并为每一个框架建立一个额外的 window 对象。
注释：没有应用于 window 对象的公开标准，不过全部浏览器都支持该对象。flask

js的变量类型是由js引擎决定，若是要查看某个变量的类型，则可使用 typeof运算符 
//js变量的类型是由js引擎来决定的.

    var name="Corwien";
    //能够经过 typeof 来查看
    window.alert("name的类型是"+ typeof  name);
    name=123;
    //能够经过 typeof 来查看
    window.alert("name的类型是"+ typeof name);

js是弱数据类型的语言，在定义变量时，不须要指明该变量的类型（由js引擎来决定）

var name=“Corwien”; //name是字符串
var kk=2  //kk是数
var yy //yy是undefined

若是name=234;//这时name自动变成数.

不声明变量直接使用
 x=345; //亦可
  • js的变量是区分大小写的
  • 若是一个方法是属于window 对象，则能够不带window.而直接使用

3、javascript数据类型三大类型

一、js的基本数据类型

① 整数

<script type="text/javascript">
    var n1=0x8a;        0x  十六进制
    var n2=0010123;=83  0开头为八进制
    var n3=1234;
    alert(n2);
</script>

② 实数

实数就是小数，这个就不举例说明

特殊的数值

NaN = not a number 若是提示错误说明，你的js代码中把一个变量错误的当作一个数值来使用.
Infinity = 无穷大 

var s="abc";
    
    //parseInt() 函数是js的全局函数，能够直接使用
    //在哪里查询
    alert(parseInt(s));

    var r=7/0;

    alert(r);

输出：会报错，无穷大

在js中提供了两个函数来判断是否是一个NaN 和 intinity

isNaN(判断是否是一个数) isIninity

//正则表达式
    var s="000.000123";

    if(isNaN(s)){
        alert("不是数");
    }else{
        alert("是数");
    }

③ 布尔类型

布尔类型表示真和假
在js中 表示 假有以下:

false, 0, “”, null  , undefined、NaN、空数组假

其它的表示真

代码:

var a=100;    var a=0; (假)

    if(a){
        alert("真");//php  echo();
    }else{
        alert("假");
    }

ajax
    var obj1=获取对象;
    if(!obj1){
    alert(“对象建立失败”);
}

④ 字符型

字符串的基本用法:

var str=”aaaaaaa”;
var str2=’aakflaskf;lsakf;lsa’;

若是咱们但愿在字符串中有包含特殊字符，好比 ’ ” 换行。。。考虑使用转义符\, 用于转义的还有:

字符串中的特殊字符，须要以反斜杠（）后跟一个普通字符来表示，例如：r、n、t、b、'、 " 、\xxx

二、js的复合数据类型

① 数组

//建立一个数组
    var arr1=[3,5,10,34.8,50,10];
    //说明，数组的下标是从[0]
    //window.alert(typeof arr1);
    //经过对象名.constructor 能够显示该对象的构造方法是什么?
    //window.alert(arr1.constructor);
    //遍历咱们的数组
    var total_weight=0;
    for(var i=0;i<arr1.length;i++){
        //document.write("<br/>"+arr1[i]);//遍历
        total_weight+=arr1[i];
    }
document.write("整体重是="+total_weight+" 平均体重="+total_weight/arr1.length);

数组的基本使用

① 如何建立数组

方法1
var arr=[元素1,元素2......] 其实也能够这样建立空数组 var arr=[];

元素的个数能够任意，元素的类型能够任意

方法2.

var arr=new Array();

② 如何访问数组的数据

  1. 指定访问某个元素

数组名[下标号], 下标号默认是从0 开始编号.

  1. 遍历数组
for(var i=0;i<数组.lenght;i++){
    数组[i];
}

☞ 若是下标越界会怎样?

报 undefine

☞ js的数组是否可以动态的增加

var a=[2,3];
  a[2]=56;
  alert(a[2]);
   输出： 56

说明js的数组能够动态增加.

③ 数组在内存中怎样存在..

php程序中，经过一个函数传递数组，是值传递，仍是引用传递?

结论是默认是值传递(拷贝.)

js代码中，经过一个函数传递数组，是引用传递

function test2(val){
        //val[0] 访问第一个元素.
        val[0]=900;
    }

    arr=[1,2,3];

    //调用函数
    test2(arr);
    
    for(var i=0;i<arr.length;i++){
        document.write("*****"+arr[i]);
    }

输出是 900*23

画图说明;

经过下面的代码，咱们来讲明js的数组是怎样存在内存的:

function test2(val){
  //val[0] 访问第一个元素.  val=null;没有改变数组内的数，故不会改变
  val[0]=900;
 }

 arr=[1,2,3];【1】 

 //调用函数
 test2(arr);
 
 for(var i=0;i<arr.length;i++){
  document.write("*****"+arr[i]);
 }

④ js数组的几个重要应用
(1)使用 数组名.length 能够获得数组大小
(2)拆分字符串 字符串.split(拆分标准) 能够获得一个数组。
(3)其它..

① length 属性能够返回该数组的大小(遍历)
② split 函数，能够拆分字符串.

var str="abc hello boy";
var arr=str.split(" ");
document.write(arr1);

数组小结:
①数组可存听任意类型的数据
②数组大小没必要事先指定,能够动态增加
③数组名能够理解为指向数组首地址的引用.
④数组元素默认从0开始编号的.

② 对象

三、js的特殊数据类型

① null 空
② undefined 未定义

四、数据类型的强制转换

js中提供了两个函数能够把字符串强制转成数
parseInt parseFloat
parseInt() 函数可解析一个字符串，并返回一个整数。

案例以下: 让用户输入两个数，并计算和.

var num1=window.prompt("请输入一个数");// 10
var num2=window.prompt("请输第二个数");// 20
//var res=num1+num2;   结果是：1020  js中会把+当作拼接符，而不会是运算符，所以得用parseInt将字符串转换为数
var res=parseFloat(num1)+parseFloat(num2);//php  . 字符串拼接 + 表示运算

    alert("结果是="+res);

    var num3=123;

    var str="hello"+num3;

    alert(str);

四、其余

运算保留精度

var num1=7;
    var num2=3;

    var res=num1/num2;
    res=res+"";
    //window.alert(typeof res);
    //alert(res);//看出 小数保留精度是17位.若是你要到第二位.

    //把res当作一个字符串，看找到小数点在第几位.

    var index=res.indexOf(".");//检索字符串
    window.alert("保留小数两位是"+res.substring(0,index+3));

咱们为了更好的管理js文件，能够把js文件 写在一个独立的文件中，而后再须要的使用引入便可

<script src=”js文件路径”></script>

4、javascript面向对象编程

js面向（基于）对象编程---类（原型对象）与对象（实例）
js面向（基于）对象编程---构造方法和this

基于对象编程(object-based)和面向对象编程叫法区分

js 中咱们能够认为这个叫法一致.

js的面对对象编程的介绍
js是一种支持面向对象编程的脚本语句, 它有继承，封装，多态的特色.

由于javascript中没有class（类），因此有人也把类也称为原型对象，由于这两个概念从在编程中发挥的做用看都是一个意思，为了统一叫法，我这里统一叫类。

课程中 基于对象==面向对象 类==原型对象

 面向对象编程的引入
一个问题?
张老太养了两只猫猫:一只名字叫小白,今年3岁,白色。还有一只叫小花,今年10岁,花色。请编写一个程序，当用户输入小猫的名字时，就显示该猫的名字，年龄， 颜色。若是用户输入的小猫名错误，则显示 张老太没有这只猫猫。

面向过程：

clipboard.png

咱们的一个解决方法是 ：（js面向对象编程的快速入门）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<script type="text/javascript">

    //定义了一个猫类，
   //php中定义一个类为 class cat(){},而js则用构造函数function来定义

    function Cat(){
          
    }
    //建立一只猫 [js对象的属性能够动态增长]
    var cat1=new Cat(); //cat1就是一个对象实例
    cat1.name="小白";  //name属性是公开的
    cat1.age=3;
    cat1.color="白色"

    document.write(cat1.name+"--"+cat1.age+"--"+cat1.color+cat1[‘name’]);

    
    //特别说明
    // var cat1=new Cat(); //当作类（原型对象使用）
    // Cat(); //当作函数
</script>

</html>

对象公开属性的访问方式有
对象名.属性名; cat1.name
对象名[’属性名’]; cat1[‘name’]

js中自定义类(原型对象)的五种方法

  1. 工厂方法---使用new Object建立对象并添加相关性
  2. 经过构造函数来定义类(最多)
  3. 经过prototype 来定义（原型方式）
  4. 构造函数 和 prototype混合
  5. 动态建立对象模式

js中一块儿都是对象

可用经过 instanceof 来 判断某个对象实例是否是某个类的对象实例,
案例:
//如何判断一个对象实例是否是某个 类的(原型对象)

if(p1 instanceof Dog){
        
        window.alert("p1是Person一个对象实例");
    }else{
        window.alert("p1是Dog一个对象实例");
    }

clipboard.png

<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<head>
<script language="javascript" type="text/javascript">
    function Person(name,age,salary){
        this.name=name;//公开
        this.age=age;//公开
        var salary=salary;//私有

        //特权函数
        this.showInfo=function showInfo(){
        document.write(this.name+this.age+salary);//这里salary是私有
        };
    }
    var p1=new Person("宋江",23,100000);
    //window.alert(p1.name+p1.age+p1.salary);
    //p1.showInfo=showInfo;
    p1.showInfo();
</script>
</head>
<body>
</body>
</html>

输出：宋江23100000

一个类中能够有公开的函数 

this.属性=funciton (){};//属性是公开的也必然形成这个函数时公开的

一个类中也能够有私有的函数

代码:

function Person(){
            
            this.name="abc";
            var salary=900;

            this.fun1=function (){//公开的属性、函数
              
                //代码
                sayHello();
            }

            this.fun2=function(){
                sayHello();
            }

            this.fun3=function(){
                sayHello();
            }

            function sayHello(){   //私有函数，只能在函数内部使用
                document.write("hello,资源打开"+this.name+" "+salary);
            }
        }

        var p1=new Person();
        p1.fun2();
//p1.sayHello();  这样调会报错

输出：hello，资源打开abc 900

小结: 经过代码咱们能够看出.私有函数能够被 该类的其它方法(公开)调用，同时私有函数能够去访问 该对象的 公开或者私有的属性.

5、js内部类string、array

一、String类

String是动态类,提供了对字符串的各类操做，在这里介绍几个最经常使用的函数，其它的请你们参考javascript帮助文档。

  1. indexOf() 返回某个字符串值在该字符串中首次出现的位置
  2. split() 把字符串分割为字符串数组
  3. substr() 提取取从start下标开始的指定数目的字符
  4. substring() 提取字符串中介于两个指定下标之间的子串
  5. charAt() 返回指定位置的字符
  6. length 属性,能够获得字符串的长度
  7. toString() js中全部内部对象的成员方法,做用是将对象中的数据转成某个格式的字符串，咱们在实际运用中在详细介绍
  8. match()/replace()/search() 用的不少，涉及正则表达式

示例：

<script type="text/javascript">

    
    var txt="hello中国";
    // document.write(txt.indexOf("worldr"));

    // var arr=txt.split("");//把字符串分割按什么标准

    // document.write(arr);


    //substring(start,length) 从start开始取，取出lenght个字符,若是不够取，则尽可能的取
        
   // var sub=txt.substr(0,3);//下标从0开始取，取出3个字符


    //stringObject.substring(start,stop) 从start开始取，取到stop-1
    //var sub=txt.substring(0,2);

    //charAt(index) 表示取出第几个字符
    //var sub=txt.charAt(3);

    //window.alert(sub);

    //练习 输入文件全路径 获取文件名和后缀?
    var file_path="c:/abc/abc北京/helo/广州.exe";

    //思路  找出 一个字符串最后出现的位置
    var last_index=file_path.lastIndexOf("/");

    window.alert(file_path.substr(last_index+1));
</script>

二、Array类

  1. concat() 链接两个或更多的数组，并返回结果。
  2. sort() 对数组的元素进行排序
  3. toString() 把数组转换为字符串，并返回结果
  4. pop() 删除并返回数组的最后一个元素
  5. push() 向数组的末尾添加一个或更多元素,并返回新的长度
  6. splice() 方法用于插入、删除或替换数组的元素
  7. length 属性

示例：

<script language="javascript">

    //数组的建立

  var arr=new Array();

  //静态设置数据
  arr[0]=23;

  arr[1]="小红";
  arr[2]="老王";

  /*
  // 动态的添加
  for(var i=0; i<3; i++){
    
    arr[i]=window.prompt("请输入第"+(i+1)+"数");
    document.write(arr);
  }
  */

  //如何删除数组的某个元素 

  //删除第2个元素->下标为1
   arr.splice(1,1); //第一个1 表示删除第几个元素, 第二个1表示删除1个
   document.write(arr);

  //修改第二个 "小红"-> "小明"
   arr.splice(1,1,"小明");//更新

  //把一个新的数据"北京"，添加到第1元素后面
  //arr.splice(1,0,"北京");

  //遍历数组
  document.write("***********<br/>");
  for(var key in arr){
    document.write(arr[key]+"<br/>");
  }

</script>

打印：

23,老王***********
23
小明

这里咱们须要注意: splice() 函数，他把 删除，修改，添加 均可以完成,根据传入的参数的个数和值，不一样来决定进行怎样的操做.

三、经常使用系统函数

js的函数间传递数据时候，按照什么来传递
基本数据类型： number boolean string 是按照值传递
数组和对象： 引用传递.

  1. eval() //能够把一个字符串当作脚原本运行,用处很大
  2. parseInt() //把字符串转成整数
  3. parseFloat() //把字符串转成小数
  4. isNaN() //判断某个值是否是数(该函数不是特别完美)
  5. typeof() // 变量类型
  6. encodeURI() // 编码某个编码的 URI
  7. decodeURI() // 解码

6、js事件 事件驱动机制

概述 : js是采用事件驱动(event-driven)的机制来响应用户操做的，也就是说当用户对某个html元素进行某个操做时，会产生一个事件,该事件会驱动某些函数来处理,
由鼠标或热键引起的一连串程序的动做，称之为事件驱动（Event-Driver）。
对事件进行处理程序或函数，咱们称之为事件处理程序（Event Handler）

快速入门案例:

<script type="text/javascript">

    //事件处理函数
    function test1(event){
        window.alert("ok");
        window.alert(event.clientX);//横坐标的信息
    }


</script>

<input type="button" value="tesing" onclick="test1(event)"/>//事件源，时间发生的地方，附带产生事件对象event，它的做用是封装改事件的一些信息

事件源: 就是产生事件的地方(html元素)
事件: 点击/鼠标移动/键按下..
事件对象: 当某个事件发生时，可能会产生一个事件对象，这个事件对象会封装该事件的信息(好比点击的x,y. keycode),传递给事件处理程序
事件处理程序: 响应用户的事件.

clipboard.png

快速入门 ：
获取鼠标点击出的坐标

<html> 
<head> 
<script type="text/javascript"> 
function show_coords(event) { 
x=event.clientX;
y=event.clientY;
alert(event+"X coords: " + x + ", Y coords: " + y) 
} 
</script> 
</head> 
<!--body元素响应onmousedown事件 -->
<body onmousedown="show_coords(event)"> 
<p>Click in the document. An alert box will alert the x and y coordinates of the mouse pointer.</p> 
</body> 
</html>

clipboard.png

事件的分类

clipboard.png

一、如何绑定事件监听

  1. 直接在某个html控件上指定
  2. getElementById(‘’) 获取控件后，再绑定.
  3. 经过 addEventListener() 或者是 attachEvent() 来绑定
  4. 一个事件能够有多个事件监听者(函数)

给某个html元素(控件), 绑定事件的三种方法
一、 静态绑定

<input type="button" onclick="函数" vlaue="xx值"/>

二、动态绑定

// 获取某个对象再绑定
getElementById("htmlid").事件=方法

实例：

<script type="text/javascript">
    
    function test1(){
    
        window.alert("test1");
        //这句话的意思就是把but2 的onclick 和 test2函数绑定
        //document.getElementById('but2').onclick=test2;//  第一种方式
        //but2.onclick=test2;//第二种方式
        $('but2').onclick=test2;//第三种方式
        
    }
    
    function $(id){
        return document.getElementById(id);
    }

    function test2(){
        
        window.alert("test2");
    }
</script>

<input type="button" id="but1" onclick="test1()" value="测试">
<input type="button" id="but2" value="测试2">

<script language="javascript" type="text/javascript">
    //动态的建立一个新按钮
    function creNewButton(){
        var mybut=document.createElement("input");
        mybut.type="button";
        mybut.onclick=abc;//按钮产生后就会和这个事件动态绑定
    }

    function abc(){
        window.alert("ok");
    }
</script

点击按钮1后，会给but2绑定一个时间，若是再点击but2就会有信息弹出

三、经过 attachEvent 和 detachEvent 方法来（动态）绑定事件和（动态）解除事件绑定

<input type="button" id="but1"  value="投布什一票">
<script type="text/javascript">
    //动态绑定
    var but1 = document.getElementById("but1");

    // 第一个参数是事件名，也能够是其余事件,只有微软的IE浏览器支持该写法
    // but1.attachEvent("onclick",vote);

    // 第二种方式(火狐和其余浏览器)
    but1.addEventListener("click", vote, false);

    function vote(){
        
        window.alert("你投了布什一票，之后不能再投");

        //解除绑定
        but1.detachEvent("onclick",vote);
    }

</script>

7、js dom编程

咱们在前面把js的基础知识都了解完了，但是若是你认为js只 能作相似点击一个按钮，显示当前时间，那你就过小看js,实际上js更重要的做用是可让用户对网页元素进行交互操做，这才是学习js的精华之所在。

一、dom的介绍

DOM = Document Object Model(文档对象模型)，根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件dom的来源:

DOM的简单映射图：

clipboard.png

js把浏览器,网页文档和网页文档中的 html 元素都用相应的内置对象来表示，这些对象与对象间的层次关系构成dom模型,针对网页(html,jsp,php,aspx.net)的dom就是html dom。咱们这讲的就是html dom。

clipboard.png

这里有几个特别重要的概念要说清楚:
①上面说的内置对象就是dom 对象,准确的说是html dom对象。
②由于我目前讲的是 html dom 编程，因此我提到的dom 编程,dom 对象都是说的 html dom 编程 和 html dom对象，请你们不要犯迷糊。
③dom 编程时，会把html文档看作是一颗dom 树(首先要画出html dom图)
④dom 编程的核心就是各个dom 对象.

Dom 为一种模型，他的 思想是 能够把里边的任何东西看为对象。

二、dom树

在进行 html dom 编程时，咱们把html文件当作是一个dom树，该dom树在内存中有层级关系，经过操做dom树，就能够改变html页面的显示效果。

clipboard.png

从上图能够看出：从html dom的角度看，每一个html文件的元素都会被当作一个Node节点对象来看待，就可使用它的方法，同时对于html dom说，由于元素自己就多是img/button/form同时有当作 Button ImageForm,内置对象。

示例说明：
html文件

<img id=’myimg’ src=”a.jpg”/>
<script>
var myimg=document.getElementById(‘myimg’);
// myimg被当作是Node对象同时也能够当作img对象
</script>

myimg被当作是Node对象同时也能够当作img对象。

xml文件

<class>
<stu id=”mystu”>
恺易
</stu>
</class>

var mystu=document.getElementById(“mystu”);
这时mystu就是Node对象

clipboard.png

三、dom层次关系dom对象

bom
bom 的全称是浏览器对象模型 (bowser object model), 它规定全部的浏览器在设计时，要考虑支持 bom提出的规范,这样才能正常浏览网页。

dom 和 bom 的关系
bom 是一个纲领性，dom 就是具体的.( dom 对象、属性、方法.)

bom包括浏览器全部对象
dom 主要是 bom（document 对象的扩展）

dom的层级关系

clipboard.png

这里,我只列举了经常使用的dom对象。从左图咱们能够看出:
dom对象自己也有层次，好比document对象是window对象的一个成员属性，而body对象又是document对象的一个成员属性。

重要核心思想：
在进行dom编程时，每一个html的元素被当作一个Node节点(对象)。

clipboard.png

Dom的节点和属性

<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<head>
<title>文档标题 </title>
<script language="javascript" type="text/javascript">
    function test(obj){
        var div1=document.getElementById("div1");
        window.alert(div1.nodeName); //获取此元素的对象,node为一个对象,输出元素 div
    }
</script>
</head>
<body>
<a href="blank">my link</a>
<h1>my title</h1>
<div id="div1">乌龟</div>

<input type="button" value="test" onclick="test(this)"/>
</body>
</html>

四、window对象

Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript中，Window 对象是全局对象,要引用当前窗口根本不须要特殊的语法,能够把那个窗口的属性做为全局变量来用。

clipboard.png

4.1 window对象经常使用的函数和属性

  1. alert() 显示消息和一个确认按钮的警告框
  2. confirm() 显示消息以及确认按钮和取消按钮的对话框
  3. setInterval() 按照指定的周期(毫秒计)来循环调用函数或计算表达

② setInterval("函数名()",调用该函数的间隔时间) 定时器和 clearInterval定义和用法
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的参数。

  1. 简单时钟
<html>
<head>
<title>文档标题</title>

</head>
<body>
当前时间是, <!--读10秒自动中止,并弹出一句话"hello.wrold"-->
<span id="myspan">???</span>
</body>
<script type="text/javascript">

    var i=0;
    var myspan=document.getElementById("myspan");
    
    function abc(){
        
        //window.alert(++i);
        var mytime=new Date()    ;        
        //对象.innterText表示在该对象对应标签的中间放入文本
        myspan.innerText=mytime.toLocaleString();

        if(++i==10){
            window.clearInterval(mytime2);
            window.alert("hello,world,不走了");
        }
    }

    //作了一个定时器
var mytime2=window.setInterval("abc()",1000);    //每隔1秒调用一次abc函数

</script>
</html>

五、document对象

Document对象表明整个html文档,可用来访问页面中的全部元素,是最复杂的一个dom对象，能够说是学习好dom编程的关键所在。
Document对象是Window对象的一个成员属性,经过window.document来访问,固然也能够直接使用 document

clipboard.png

  1. write() 向文档写文本或HTML表达式或JavaScript 代码
  2. writeln() 等同于write()方法,不一样的是在每一个表达式以后写一个换行符
  3. open() 打开一个新文档,并删除当前文档内容
  4. close() 关闭open()文档流
  5. getElementById() 经过html控件的id 获得该控件.若是有相同的id则只取第一个,返回对拥有指定id的第一个对象的引用
  6. getElementsByName() 经过html控件的名字返回带有指定名称的对象集合
  7. getElementsByTagName() 经过html的标签名返回带有指定标签名的对象集合
  8. createElement() 建立一个指定标签名的元素[好比:动态建立超连接]
    （注：此处对象集合与数组是有区别的）

案例：

<script type="text/javascript">
    //经过id获取对象
    function test(){
        var a1=document.getElementById("a1");//把a1这个标签拿到，既获取了其全部内容
        //若是要取出某个属性
       //a1.innerText能够取到 链接到sina

        window.alert(a1.id+" "+a1.href+" "+a1.innerText);
//能够改变其内容
        a1.innerText="链接到百度";
        a1.href="http://www.baidu.com";
    }

    //经过name来获取.对象
    function test2(){
    
        //使用
        var hobbies=document.getElementsByName("hobby");
// window.hobbies(hobbies.length);//将四个hobby所有拿到，不能区分是否选了
        //遍历这个集合
        for(var i=0;i<hobbies.length;i++){
            
            //判断选中的为false 、true
            //window.alert(i+ " "+hobbies[i].checked);
            if(hobbies[i].checked){
                window.alert("你的爱好是"+hobbies[i].value);
            }
        }
    }

    //经过标签名
    function test3(){
        var inputs=document.getElementsByTagName("input");
        window.alert(inputs.length);
    }



</script>
<body>
<a id="a1" href="http://www.sina.com">链接到sina</a><br/>
<a id="a1" href="http://www.sohu.com">链接到sohu</a><br/>
<a id="a3" href="http://www.baidu.com">链接到baidu</a><br/>
<input type="button" value="测试" onclick="test()"/><br/>
请选择你的爱好:
<input type="checkbox" name="hobby" value="旅游">旅游
<input type="checkbox" name="hobby" value="音乐">音乐
<input type="checkbox" name="hobby" value="体育">体育
<input type="checkbox" name="hobby" value="电影">电影
<input type="button" value="看看你的爱好" onclick="test2()"/><br/>
<input type="button" value="经过tagname来获取元素" onclick="test3()"/><br/>
</body>

clipboard.png

咱们综合运用一下前面学习到的各类知识

动态的建立元素(节点)/添加元素(节点)/删除元素(节点)

<html>
<head>
<title>Dom 节点操做</title>
</head>
<script type="text/javascript">
function test1(){
     // 1.建立 a 元素，createElement(标签名);
     var myhref = document.createElement("a"); // <a></a>
     myhref.innerText = "链接到百度";
     myhref.href = "http://www.baidu.com";
     myhref.id = "myhref";

     // 将建立的元素挂载到document.body下
     // document.body.appendChild(myhref);

     // 挂载到 div1 节点下
     div1.appendChild(myhref)
 }

 // 删除节点
    function test2(){
        //document.getElementById('div1').removeChild(document.getElementById('myhref'));
        //上面的方法太笨，能够用下面的方法，直接对其操做
        var node=document.getElementById('myhref');

        // 删除单个节点
        node.parentNode.removeChild(node);   
      
    }

    // 删除所有a节点
    function test3(){
        //document.getElementById('div1').removeChild(document.getElementById('myhref'));
        //上面的方法太笨，能够用下面的方法，直接对其操做
        var node=document.getElementById('myhref');
        // var p = node.parentNode;

        // 删除单个节点
        // node.parentNode.removeChild(node);   
        // console.log(p);
       
        // 删除全部子节点
        var p = node.parentNode;
        var childs = p.childNodes; 
        console.log(childs);

        for(var i = childs.length - 1; i >= 0; i--)
        { 
            // alert(childs[i].nodeName); 
            p.removeChild(childs[i]); 
        }
    }

    // 删除全部option元素
    function delOption()
    {
          var selParent=document.getElementById('hobby');
          var childs = selParent.childNodes;
          console.log(childs);

          for(var i = childs.length - 1; i >= 0; i--)
        { 
            // alert(childs[i].nodeName); 
            if(i >= 3)
            {
                selParent.removeChild(childs[i]); 
            }
            
        }

         console.log(selParent);   // 打印：<select name="hobby" id="hobby"></select>
    }
    
    // 将上面的删除option 封装为一个函数
function delOptionFunc(eleId)
{
    var selParent=document.getElementById(eleId);
    var childs = selParent.childNodes;
    for(var i = childs.length - 1; i >= 0; i--)
    {
        // 这里暂写死
        if(i >= 3)
        {
            selParent.removeChild(childs[i]);
        }
    }
}


</script>

<body>
<input type="button" value="建立一个a标签" onclick="test1()"/><br/>
<input type="button" value="删除单个a标签" onclick="test2()"/><br/>
<input type="button" value="删除所有a标签" onclick="test3()"/><br/>
<input type="button" value="删除select 子元素" onclick="delOption()"/><br/>
<!--引入 css id  class  [dom如何去操做一个外表css]-->
<div id="div1" style="width:200px;height:200px;background-color:green">div1</div>

<select name="hobby" id="hobby">
 <option value=''>请选择</option>
 <option value='bas'>篮球</option>
 <option value="football">足球</option>
 <option value="pai">排球</option>
</select>
</body>

</html>

clipboard.png

为何添加的东西在原码中看不到呢？由于在 内存中，浏览器真正显示的东西不彻底是在原码，它第一次是看原码，后边就会看节点树，首先它先把原码加载到内存中，它会以树为标准。

六、body对象

body 对象表明文档的主体 (HTML body)。
body对象是document对象的一个成员属性,经过document.body来访问.

使用body对象，要求文档的主体建立后才能使用,也就是说不能再文档的body体尚未建立就去访问body,这个后面会举例说明.

body对象经常使用的函数和属性，其它的参考帮助文档：

clipboard.png

  1. appendChild() 添加元素
  2. removeChild() 删除元素
  3. getElementsByTagName() 经过html元素名称,获得对象数组.
  4. bgColor 文档背景色
  5. backgorund 文档背景图
  6. innerText 某个元素间的文本
  7. innerHtml 某个元素间的html代码
  8. onload事件 文档加载时触发
  9. onunload事件 文档关闭时触发
  10. onbeforeunload事件 文档关闭前触发
  11. onselectstart事件 用户选中文档body体的内容时触发
  12. onscroll事件 用户拉动滚动条时触发

七、style对象

style对象和document对象下的集合对象styleSheets有关系,styleSheets是文档中全部style对象的集合,这里讲解的重点是style对象,styleSheets不是重点。

style对象定义:即表示当前元素的样式设置

style对象不是针对某一个html元素,而是对全部的html元素而言的,也就是说,咱们能够经过 document.getElementById(“id”).style.property=“值” ,来控制网页文档的任何一个元素(对象)的样式,固然这个很重要的.

对象方法：

  1. backgroundRepeat 设置是否及如何重复背景图像
  2. border 在一行设置四个边框的全部属性
  3. display 设置元素显示方式
  4. width 设置元素的宽度
  5. height 设置元素的高度
  6. visibility 属性设置元素是否可见

实战：
仿搜狐广告栏：
clipboard.png

<!--特别说明 doctype html 4.0 或者不写都可，可是用 xhtml 1.0不行由于 document.body.clientHeight为0-->
<html >
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<head>

    <link href="my.css" type="text/css" rel="stylesheet"/>
    <title>无标题页6</title>
    <style>
body 
{
   font-size:12px;
    margin:0;/*把body的边距清零*/
}

.div1{
    width:132px;/*width:128px;*/
    height:160px;
    /*background-color:pink;*/
}
.navi{
    height:160px;
    width:22px;
    /*background-color:green;*/
    float:left;
}
.navi ul{
    padding:0px;
    margin-left:0px;
}
.navi ul li{
    height:50px;
    width:22px;
    background-color:#E8E8E8;
    float:left;
    list-style-type :none;
    margin-top:3px;
    text-align:center;
    padding-top:5px;
}
.content3,.content1,.content2{
    height:160px;
    width:104px;
    margin-left:2px;
    /*background-color:blue;*/
    
    float:left;
}
.content2 ul,.content3 ul,.content1 ul{
    padding:0px;
    margin-left:4px;
    margin-top:2px;
    /*background-color:green;*/
}
.content2 ul li,.content3 ul li,.content1 ul li{
    
    
    float:left;
    list-style-type :none;
    font-size:12px;
    line-height:20px;
    
}
.content2{
    display:none;
    
}
.content3{
display:none;
    
}


    </style>
    <script language="javascript" type="text/javascript">
    <!--
    function change(obj,obj2){
        //由于style在外边css,因此这样获取不到，可是设置后，就能够在本页获取了
        //window.alert(content1.style.display);
        //window.alert(obj.innerText.length+"="+"出国".length);
        //obj2表明你当前选择的这个li,设置背景为黄色
        obj2.style.backgroundColor="#FFC63D";
        if(obj=="zs"){
            //window.alert('招生');可选状态，另外两个位不可选
            content1.style.display="block";
            content2.style.display="none";
            content3.style.display="none";

        }else if(obj=="rz"){
            //window.alert('热招');
            content1.style.display="none";
            content2.style.display="block";
            content3.style.display="none";
        }else if(obj=="cg"){
            //window.alert('出国');
            content1.style.display="none";
            content2.style.display="none";
            content3.style.display="block";
            
        }
    }
    function change2(obj){
        
        obj.style.backgroundColor="#E8E8E8";
    }
    //-->
    </script>
</head>
<body>
    <div class="div1">
    <div class="navi">
    <ul>
    <li onmouseover="change('zs',this)" onmouseout="change2(this)">招生</li>
    <li onmouseover="change('rz',this)" onmouseout="change2(this)">热招</li>
    <li onmouseover="change('cg',this)" onmouseout="change2(this)">出国</li>
    </ul>
    </div>
    <div id="content2" class="content2">
    <ul>
        <li><a href='#'>热招热招热招月!</a></li>
        <li><a href='#'>热招热招热招月!</a></li>
        <li><a href='#'>热招热招热招月!</a></li>
        <li><a href='#'>热招热招热招月!</a></li>
        <li><a href='#'>热招热招热招月!</a></li>
        <li><a href='#'>热招热招热招月!</a></li>
        <li><a href='#'>热招热招热招月!</a></li>
        <li><a href='#'>热招热招热招月!</a></li>
    </ul>
    </div>
    <div id="content3" class="content3">
    <ul>
        <li><a href='#'>出国出国出国月!</a></li>
        <li><a href='#'>出国出国出国月!</a></li>
        <li><a href='#'>出国出国出国月!</a></li>
        <li><a href='#'>出国出国出国月!</a></li>
        <li><a href='#'>出国出国出国月!</a></li>
        <li><a href='#'>出国出国出国月!</a></li>
        <li><a href='#'>出国出国出国月!</a></li>
        <li><a href='#'>出国出国出国月!</a></li>
    </ul>
    </div>
    <div id="content1" class="content1">
    <ul>
        <li><a href='#'>澳洲留学高中月!</a></li>
        <li><a href='#'>澳洲留学高中月!</a></li>
        <li><a href='#'>澳洲留学高中月!</a></li>
        <li><a href='#'>澳洲留学高中月!</a></li>
        <li><a href='#'>澳洲留学高中月!</a></li>
        <li><a href='#'>澳洲留学高中月!</a></li>
        <li><a href='#'>澳洲留学高中月!</a></li>
        <li><a href='#'>澳洲留学高中月!</a></li>
    </ul>
    </div>
    </div>    
</body>
</html>

display 和 visiability 区别
这两个属性均可以用于设置某个区域或者控件，显示不显示, display 设置 none; 它不显示同时让出本身占用的空间 ；
visiability 这个属性设置成 hidden 就不显示, 可是它不让这个空间.

style对象的案例:

clipboard.png

<body>
<span id="myspan"  onclick="test(this);" style="border: 3px solid red;cursor:hand;
">+</span> 个人家庭
<ul id="myul" style="display:none">
<li>爸爸</li>
<li>妈妈</li>
<li>哥哥</li>
</ul>

</body>
<script type="text/javascript">
<!--

    function test(obj){
        //myspan
        if(obj.innerText=="+"){
            //显示成员
            myul.style.display="block";
            obj.innerText="-";
        }else if(obj.innerText=="-"){
        
            myul.style.display="none";
            obj.innerText="+";
        }
    }

//-->

</script>

八、form对象

forms经常使用的函数和属性
1.lenght 设置或获得集合大小。
2.item() 取第几个表单

<body>

<form action="a.php" method="post">
u:<input type="text" name="username" value="hello"/><br/>
p:<input type="password" name="password" value="xxx"/><br/>
<input type="submit" value="提交"/>

</form>


<form action="b.php" method="post">
u:<input type="text" name="username"/>
</form>

<input type="button" onclick="mysubmit()" value="提交"/>
</body>
<script type="text/javascript">

<!--
 //window.alert(document.forms.length);//能够获得表单的数量
    //window.alert(document.forms.item(1).action);//能够获得第一个表单的action下的值：a.php
  

    
    //取出第一个from
    function mysubmit(){

    var form1=document.forms.item(1);
    
    //window.alert(form1.username.value);//此方法能够得到表单里的任何属性和值
    //window.alert(form1.password.value);
    
    form1.submit();
    }

//-->

</script>

九、table对象

概述，table 对象表明一个 html 表格。 在HTML文档中<table>标签每出现一次，一个table对象就会被建立

table经常使用的属性:

  1. id 设置或获得该表格的id
  2. name 设置或获得该表格name
  3. border 设置或获得该表格的边框
  4. width 设置或获得该表格的宽度
  5. height 设置或获得该表格的高度
  6. cellpadding 设置或返回单元格内容和单元格边框之间的空白量
  7. cellspacing 设置或返回在表格中的单元格之间的空白量
  8. style 设置或获得该表格的style对象

咱们看看table经常使用的属性(对象集合):

  1. rows[] 表格中全部行的一个数组(针对表格)
  2. cells[] 表格中全部单元格的一个数组(针对一行)

table经常使用的方法 :
1．deleteRow() 删除一行
2．insertRow() 插入一行

tableRow和tableCell
TableRow 对象
TableRow 对象表明一个 HTML 表格行。
在 HTML 文档中 <tr> 标签每出现一次，一个 TableRow 对象就会被建立。

TableCell 对象
TableCell 对象表明一个 HTML 表格单元格。
在HTML 文档中 <td> 标签每出现一次，一个TableCell 对象就会被建立。
[其方法和属性参看文档]

table对象 中的集合对象有两个
rows[] 还有一个 cells[]

rows[] 表示全部行的一个集合
cells[] 表示一行的全部列

实例：

<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<head>
<title>梁山好汉108将</title>
<script language="javascript" type="text/javascript">
    
    function test(){
        //经过id获取宋江,在此若是不能用id，而要用table属性来获取
        //window.alert(document.getElementById("name").innerText);

        var mytable=document.getElementById("mytab");//mytable就是一个table对象
        // window.alert(mytable.rows[1].innerHTML);
        //上面的innerHTML代码取出所有一行HTML的东西：<td>1</td><td id="name">宋江</td><td>及时雨</td>
        //window.alert(mytable.rows[1].innerText);
        //而innerText取出的为一行文本里的东西：1宋江及时雨

        window.alert(mytable.rows[2].cells[2].innerHTML);//取出宋江  innerHTML=innerText二者均可以
        // innerHTML=innerText  一个是按html文件取，一个是按文本取
    }


    //添加一个英雄
    function addHero(){
        //建立一个
        //document.createElement("<tr>");//第一种方法  能够，可是太慢
        //第二种方法  添加一行
        var mytable=document.getElementById("mytab");
        //3表示添加到表格的第几行
        //tableRow表示一个新行，它的类型是TableRow
        var tableRow=mytable.insertRow(3);//拿到空的行<tr></tr>，可是没有<td></td>
        //经过tableRow添加新列,tableCell类型是TableCell 
        var tableCell=tableRow.insertCell(0);//至关于<tr><td></td></tr>
        tableCell.innerHTML="3";//<tr><td>3</td></tr>

        var tableCell=tableRow.insertCell(1);
        tableCell.innerHTML="吴用";//<tr><td>3</td><td>吴用</td></tr>

        var tableCell=tableRow.insertCell(2);
        tableCell.innerHTML="智多星";//<tr><td>3</td><td>吴用</td><td>智多星</td></tr>
    }

    //删除
    function deleteHero(){
        //删除一个英雄
        var mytable=document.getElementById("mytab");
        mytable.deleteRow(3);

    }

    //修改
    function updateHero(){
        //找到宋江的外号这个对象<td></td> TableCell
        var mytable=document.getElementById("mytab");
        mytable.rows[1].cells[2].innerText="黑三郎";

    }



</script>
</head>
<body>
<table id="mytab" border="1">
<tr><th>排名</th><th>姓名</th><th>外号</th></tr>
<tr><td>1</td><td id="name">宋江</td><td>及时雨</td></tr>
<tr><td>2</td><td>卢俊义</td><td>玉麒麟</td></tr>
</table>
<input type="button" value="testing" onclick="test()"/>
<input type="button" value="添加" onclick="addHero()"/>
<input type="button" value="删除" onclick="deleteHero()"/>
<input type="button" value="修改" onclick="updateHero()"/>
</body>
</html>

clipboard.png

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程