Web前端：JS

 

JavaScript概述：

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。

 

JavaScript的组成：

 

• 核心（ECMAScript） ：描述了该语言的语法和基本对象
  
• 文档对象模型（DOM） Document object model：描述处理网页内容的方法和接口。 (整合js，css，html)
• 浏览器对象模型（BOM） Broswer object model：描述与浏览器进行交互的方法和接口（整合js和浏览器）
• Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的.

 

 

JavaScript的引入方式：

<!--1、直接编写 -->
    <script>
        alert(111)
    </script>


<!--2、导入js文件 -->
<script src="test.js"></script>

 

JavaScript的变量定义及赋值：

//变量定义及赋值
        //var x;                            //定义变量x
        //x=12;                             //x赋值
        //alert(x);                         //对话框弹出x的值

        //var y=22;                         //定义变量y且赋值
        //console.log(y);                   //服务台显示y的值

 

JavaScript的数据类型：

数字类型(Number)

最基本的数据类型
不区分整型数值和浮点型数值
所有数字都采用64位浮点格式存储，相当于Java和C语言中的double格式
能表示的最大值是±1.7976931348623157 x 10308 
能表示的最小值是±5 x 10 -324 

字符串(String)

是由Unicode字符、数字、标点符号组成的序列
字符串常量首尾由单引号或双引号括起
JavaScript中没有字符类型
常用特殊字符在字符串中的表达
字符串中部分特殊字符必须加上右划线\
常用的转义字符 \n:换行  \\':单引号   \":双引号  \\:右划线

布尔型(Boolean)

Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0
布尔值也可以看作on/off、yes/no、1/0对应true/false

Null & Undefined

Undefined 类型

Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。

当函数无明确返回值时，返回的也是值 "undefined";

Null 类型

另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。

尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。

var person=new Person()

var person=null

数据类型转换

JavaScript属于松散类型的程序语言
变量在声明的时候并不需要指定数据类型
变量只有在赋值的时候才会确定数据类型
表达式中包含不同类型数据则在计算过程中会强制进行类别转换

数字 + 字符串：数字转换为字符串

数字 + 布尔值：true转换为1，false转换为0

字符串 + 布尔值：布尔值转换为字符串true或false

//布尔值的数字运算
        // console.log(1+true);             //2,true在数字加减时，值为1
        // console.log(1+false);            //1,false在数字加减时，值为0

        // var x;
        // console.log(x)                   //undefined
        
        // function f() {                   //函数定义
        //     document.write("<h1>hello yuan!</h1>")//浏览器窗口输出hello yuan！（粗体）
        // }
        // f();                             //函数调用
        // console.log(f());                //undefined;    先执行函数f（），没有返回值

        // var person=null;


//字符串的运算
        // console.log("hello"+2);          //hello2
        // console.log("hello"+true);       //hellotrue
        // console.log(parseInt(6.5));      //6

布尔值的运算

 

强制类型转换函数

函数parseInt：   强制转换成整数   例如parseInt("6.12")=6  ; parseInt(“12a")=12 ; parseInt(“a12")=NaN  ;parseInt(“1a2")=1

函数parseFloat： 强制转换成浮点数  parseFloat("6.12")=6.12

函数eval：       将字符串强制转换为表达式并返回结果 eval("1+1")=2 ; eval("1<2")=true

// console.log(parseInt(6.5));      //6

 

类型查询函数(typeof)

//typeof  区分基本数据类型

        //console.log(typeof 111);              //number
        // console.log(typeof "hello");         //string
        // console.log(typeof true);            //boolean
        // console.log(typeof null);            //object
        // console.log(typeof undefined);       //undefined

        // console.log(typeof [12,3,4]);        //object
        // console.log(typeof {"name":"alex"})  //object


        // var c="10";
        // alert(typeof (c));       //string
        // c=+c;
        // alert(typeof (c))        //number

        // var d="yuan";            //string
        // d=+d;
        // alert(d);//NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据
        // alert(typeof(d));//Number

 

 

 

ECMA(欧洲计算机制造协会)定义了Script的规范，该规范是JS的核心

 

ECMAScript 运算符：

 

1、算数运算符：加(＋)、 减(－)、 乘(*) 、除(/) 、余数(% ) 加、减、乘、除、余数和数学中的运算方法一样

递增(＋＋) 、递减(－－)

var i=1;
console.log(i++);     //1
console.log(++i);     //3
console.log(i--);     //3
console.log(--i);     //1

一元加减法

　　　　  // var d="yuan";            //string
        // d=+d;
        // alert(d);//NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据
        // alert(typeof(d));//Number

        // var n=NaN;

        // alert(n>3);             //false
        // alert(n<3);             //false
        // alert(n==3);            //false
        // alert(n==NaN);          //false

        // alert(n!=NaN);       //NaN参与的所有的运算都是false,除了!=

 

2、ECMAScript 逻辑运算符

等于 ( == )  、不等于( != ) 、 大于( > ) 、 小于( < ) 
大于等于(>=) 、小于等于(<=)
与 (&&) 、或(||) 、非(!)
1 && 1 = 1  1 || 1 = 1
1 && 0 = 0  1 || 0 = 1
0 && 0 = 0  0 || 0 = 0

!0=1
!1=0

逻辑 AND 运算符(&&)

逻辑 AND 运算的运算数可以是任何类型的，不止是 Boolean 值。

如果某个运算数不是原始的 Boolean 型值，逻辑 AND 运算并不一定返回 Boolean 值：

如果某个运算数是 null，返回 null。 
如果某个运算数是 NaN，返回 NaN。 
如果某个运算数是 undefined，返回undefined。 

逻辑 OR 运算符(||)

与逻辑 AND 运算符相似，如果某个运算数不是 Boolean 值，逻辑 OR 运算并不一定返回 Boolean 值

 

3、ECMAScript 赋值运算符

赋值 = 
JavaScript中=代表赋值，两个等号==表示判断是否相等
例如，x=1表示给x赋值为1
if (x==1){...}程序表示当x与1相等时
if(x==“on”){…}程序表示当x与“on”相等时
 配合其他运算符形成的简化表达式
例如i+=1相当于i=i+1，x&=y相当于x=x&y

 

4、ECMAScript等性运算符

执行类型转换的规则如下：

• 如果一个运算数是 Boolean 值，在检查相等性之前，把它转换成数字值。false 转换成 0，true 为 1。 
• 如果一个运算数是字符串，另一个是数字，在检查相等性之前，要尝试把字符串转换成数字。 
• 如果一个运算数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串。 
• 如果一个运算数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字。 

在比较时，该运算符还遵守下列规则：

• 值 null 和 undefined 相等。 
• 在检查相等性时，不能把 null 和 undefined 转换成其他值。 
• 如果某个运算数是 NaN，等号将返回 false，非等号将返回 true。 
• 如果两个运算数都是对象，那么比较的是它们的引用值。如果两个运算数指向同一对象，那么等号返回 true，否则两个运算数不等。 

 

 

 

 

 

5、ECMAScript 关系运算符(重要)

//比较数字和字符串

       // var bResult = "25" < "3";
       // alert(bResult); //输出 "true"
　　　 //上面这段代码比较的是字符串 "25" 和 "3"。两个运算数都是字符串，所以比较的是它们的字符代码（"2" 的字符代码是 50，"3" 的字符代码是 51）    

       //var bResult = "25" < 3;
       //alert(bResult); //输出 "false"
　　　　//这里，字符串 "25" 将被转换成数字 25，然后与数字 3 进行比较

//比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.

　　　　  // console.log(2==2);      //true,判断是否等于
        // console.log(2=="2");    //true，字符串的2会自动转换，判断是否等于，故返回ture
        // console.log(2==="2");   //false，判断是否完全等于，即不转换

//比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续取第二位比较.

　　　　  // console.log(3>20);      //false
        // console.log(3>"20");    //false
        // console.log("3">"20");  //true

 

控制语句：

//if else控制语句

    var name="alex";
    if (name=="lijie")
    {
        alert("俗气")
    }
    else if (name=="zhichao")
    {
        alert("洋气")
    }
    else
    {
        alert("This is ALEX!")
    }

if判断控制语句

//switch控制语句

var week="Monday";
switch (week) {
    case "Monday":alert("星期一");break;
    case "Tuesday":alert("星期二");break;
    case 3:alert("星期三");break;
    case 4:alert("星期四");break;
    case 5:alert("星期五");break;
    case 6:alert("星期六");break;
    case 7:alert("星期天");break;
    default:alert("nothing");
}
*/

switch选择控制语句

//for循环
/*
//循环方法一：
for (var i=0;i<10;i++)
{
    document.write("welcome"+i+"<br>")
}

var attr=[111,222,333];
for (var i=0;i<attr.length;i++)
{
    document.write(i);
    document.write("<br>");
    document.write(attr[i]);
    document.write("<br>")
}
//循环方法二：无bug情况
for (var i in attr)
    {
    document.write(i);
    document.write("<br>");
    document.write(attr[i]);
    document.write("<br>")
    }


//循环方法二：有bug情况
var elem_p=document.getElementsByTagName("p");
console.log(elem_p);

//有bug情况，尽量少用
// for (var i in elem_p)
// {
//     console.log(i);
// }

//无bug情况，推荐使用
    for (var i=0;i<elem_p.length;i++)
    {
        console.log(i);
        console.log(elem_p[i]);
    }
*/

for循环控制语句

//while循环求1+2+...+100;
    var sum=0;
    var i=1;
    while (i<=100)
    {
        sum+=i;
        i++;
    }
    console.log(sum);

while循环控制语句

//异常
    try{
        console.log(123);
        throw Error("define error");
    }
    catch (e) {
        console.log(e)
    }
    finally {
        console.log("Finally")
    }

异常处理

 

ECMA对象：

11种内置对象,包括：

Array ,String , Date, Math, Boolean, Number  Function, Global, Error, RegExp , Object

 

1.字符串对象

/*************************字符串对象String**************************/

    //1.创建字符串对象的两种方式,都是字符串，只是类型不同
    // var str1="hello1";
    // var str2= new String("hello2");
    //
    // console.log(typeof (str1));//基本数据类型string的字符串
    // console.log(typeof (str2));//字符串对象object


    //var str1="hello";


    //2.字符串的属性:
    //console.log(str1.length);

/*****字符串的方法*****/
/*
    //1、格式编排方法，编排方法--->添加标签
    console.log(str1.italics()); //   <i>hello</i>
    console.log(str1.bold());    //   <b>hello</b>
    console.log(str1.anchor());  //   <a name="undefined">hello</a>

    //2、大小写转换
    var str1="Hello World";
    var str2=str1.toUpperCase();
    var str3=str2.toLowerCase();
    console.log(str2);
    console.log(str3)

    //3、获取指定字符
    var str1="Hello World 麟";
    var str2=str1.charAt(2);    //获取str1中第二个字符
    var str3=str1.charCodeAt(2);//获取str1中第二个字符的unicode编码

    console.log(str2);  //  l
    console.log(str3);  //  108


    //4、查询字符串索引

    var str1="welcome to the world of JS!";

    var str2=str1.indexOf("l");     //查询首次出现l的下标位置
    var str3=str1.lastIndexOf("l"); //查询最后一次出现l的下标位置

    console.log(str2);  //2
    console.log(str3);  //18


    //截取子字符串
    var str1="hello";
    console.log(str1.substr(2,3));      //llo，从下标为2的字符开始截取三个字符
    console.log(str1.substring(1,3));   //el，从下标为1的字符开始截取，截取到下标为3的字符,下标为3的字符截不到

    //切片截取子字符串
    var str1="hello";
    console.log(str1.slice(1,4));       //ell,从下标为1的字符开始截取，截取到下标为3的字符,下标为3的字符截不到
    console.log(str1.slice(-3,-1));     //ll,从后面开始截取


    //字符串替换
    var str1="hello lhf";
    console.log(str1.replace("lhf","hcl")); //hello hcl


    //分割字符串
    var str1="1,2,3,4,5,6";
    console.log(str1.split(","))    //["1", "2", "3", "4", "5", "6"];


    //连接字符串
    var str1="abcd";
    console.log(str1.concat("efg")) //abcdefg

字符串对象的方法

 

2.数组对象

/*************************数组对象Array**************************/

//1.创建方式：
    var arr1=[123,"hello",[1,2],{"name":"yuan"}];//直接创建

    var arr2=new Array();       //不指定数组的大小
    var arr3=new Array(6);      //指定数组的大小为6

    var arr4=new Array(1,"hello",[1,2,3],true);//直接创建


    console.log(typeof arr1);
    console.log(typeof arr2);
    console.log(typeof arr3);
    console.log(typeof arr4);



//2.数组的属性
    var arr1=[1,2,"hello",[1,2,3]];
    console.log(arr1.length);       //4

//数组的方法
    //1.    数组元素连接 .join方法
    var arr1=[1,2,"hello",[1,2,3]];
    var ret=arr1.join("***");
    console.log(ret);           //1***2***hello***1,2,3
    console.log(typeof ret);    //String

    //2.    数组转字符串类型 toString方法
    console.log(arr1.toString());           //1,2,hello,1,2,3
    console.log(typeof arr1.toString());    //String

    //3.    数组元素追加 concat方法
    var arr4=[1,2,3];
    var ret1=arr4.concat([5,6]);

    console.log(ret1);          //[1, 2, 3, 5, 6]
    console.log(typeof ret1);   //object

    //4.    反转 reverse
    var arr5=[12,23,32,21,88,100,999];
    console.log(arr5.reverse());    //[999, 100, 88, 21, 32, 23, 12]

    //5.    排序 sort 默认按照最高位进行排序
    console.log(arr5.sort());       //[100, 12, 21, 23, 32, 88, 999]

    function f(a,b) //自定义排序规则
    {
        if (a>b)
        {
            return 1;
        }
        else if (a<b)
        {
            return -1;
        }
        else
        {
            return 0;
        }
    }
    console.log(arr5.sort(f));       //[12, 21, 23, 32, 88, 100, 999]

    function f2(a,b){return a-b;}   //自定义排序规则的简写
    console.log(arr5.sort(f2));     //[12, 21, 23, 32, 88, 100, 999] (7)

    //6.    数组切片 x.slice(start,end)

    var arr1=[\'a\',\'b\',\'c\',\'d\',\'e\',\'f\',\'g\',\'h\'];
    var arr2=arr1.slice(2,4);   //从下标为2开始，到下标为4停止，下标为4的元素不在切片内
    var arr3=arr1.slice(4);     //从下标为4开始，切片全部
    var arr4=arr1.slice(2,-1);  //从下标为2开始，切到倒数第一个，倒数第一个不在切片内

    console.log(arr2);          //["c", "d"]
    console.log(arr3);          //["e", "f", "g", "h"]
    console.log(arr4);          //["c", "d", "e", "f", "g"]

    //7.    删除子数组
    var a = [1,2,3,4,5,6,7,8];
    a.splice(1,2);       //从下标为1的元素开始删除，个数为2
    console.log(a);      //a变为 [1,4,5,6,7,8]
    a.splice(1,1);       //从下标为1的元素开始删除，个数为1
    console.log(a);      //a变为[1,5,6,7,8]
    a.splice(1,0,2,3);   //从下标为1的元素开始删除，个数为0，从该位置插入元素值"2" "3"
    console.log(a);      //a变为[1,2,3,5,6,7,8]


    //数组的进出栈操作1、 push pop shift unshift

    //push,从末尾入栈
    var arr1=[1,2,3];
    arr1.push([7,8,0]);
    arr1.push("hello",5);
    console.log(arr1);
    console.log(arr1.length);

    //pop,从末尾出栈
    console.log(arr1.pop());
    console.log(arr1.length);
*/

    //数组的进出栈操作2、 shift unshift

    //unshift,从首部入栈
    var arr1=[1,2,3];
    arr1.unshift([4,5,6]);
    arr1.unshift(true,"yes");
    console.log(arr1);          //[true, "yes", [4, 5, 6], 1, 2, 3]
    console.log(arr1.length);   //6

    //shift,从首部出栈
    arr1.shift();
    console.log(arr1);          //["yes", [4, 5, 6], 1, 2, 3]
    console.log(arr1.length);   //5

数组对象的方法

 

3.函数对象

/*************************函数对象**************************/
    //函数的创建方式一
    function f(x,y) {
        alert(123);
        return x+y;
    }
    console.log(f(23,5678));

    //函数的创建方式一
    function f1(name) {
        console.log("hello"+name);
    }
    f1("lhf");
    console.log(f1.length);//   1   length-->参数的个数

    var obj=new Function("name","console.log(\"hello\"+name)");
    obj("alex");

    //函数的调用
    function add(x,y,z) {
        return x+y+z;
    }
    console.log(add(1,2,3,4,5,6));   //  6   多了的不管
    console.log(add(1,2));           //  NaN 不是一个数，此时return=1+2+undefined,转数字失败，故返回NaN
    console.log(add("hello","world"))// helloworldundefined



    //arguments实现无限加法
    function ADD() {
        console.log(arguments);
        var sum=0;
        for (var i=0;i<arguments.length;i++)
        {
            sum+=arguments[i];
        }
        return sum;

    }
    console.log(ADD(1,2,3,123,56,8))
 */
    //正常函数
    f("正常函数");  //正常运行，正常函数会预先加载，可以先使用后定义
    function f(args) {
        alert(args);
    }




    //匿名函数一:
    //func("aaaaaa");   //会报错，匿名函数不会预先加载，只能先定义，后使用
    var func=function (args) {
        alert(args);

    };
    func("匿名函数一");

    //匿名函数二:
(function (args) {
        alert(args)
    })("匿名函数二")

函数对象的方法

 

4.Date对象

//1.Date对象的创建

//方法1：不指定参数
var nowd1=new Date();
alert(nowd1.toLocaleString( ));
//方法2：参数为日期字符串
var nowd2=new Date("2004/3/20 11:12");
alert(nowd2.toLocaleString( ));
var nowd3=new Date("04/03/20 11:12");
alert(nowd3.toLocaleString( ));
//方法3：参数为毫秒数
var nowd3=new Date(5000);
alert(nowd3.toLocaleString( ));
alert(nowd3.toUTCString());

//方法4：参数为年月日小时分钟秒毫秒
var nowd4=new Date(2004,2,20,11,12,0,300);
alert(nowd4.toLocaleString( ));
//毫秒并不直接显示

获取日期和时间
getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月（0-11）
getFullYear ()            获取完整年份
getYear ()                获取年
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒
getTime ()                返回累计毫秒数(从1970/1/1午夜)

Date的获取get

//设置日期和时间
//setDate(day_of_month)       设置日
//setMonth (month)                 设置月
//setFullYear (year)               设置年
//setHours (hour)         设置小时
//setMinutes (minute)     设置分钟
//setSeconds (second)     设置秒
//setMillliseconds (ms)       设置毫秒(0-999)
//setTime (allms)     设置累计毫秒(从1970/1/1午夜)
    
var x=new Date();
x.setFullYear (1997);    //设置年1997
x.setMonth(7);        //设置月7
x.setDate(1);        //设置日1
x.setHours(5);        //设置小时5
x.setMinutes(12);    //设置分钟12
x.setSeconds(54);    //设置秒54
x.setMilliseconds(230);        //设置毫秒230
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日5点12分54秒

x.setTime(870409430000); //设置累计毫秒数
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日12点23分50秒  

Date的设置set

 

函数的作用域链和闭包：

/*
    if (1){
        var x=10;
    }
    console.log(x); //10,说明if没有作用域

    function f() {
        var y=12;
    }
    console.log(y);//没找到y，说明函数有自己的作用域

    //函数嵌套的作用域1:
    var city = \'beijing\';

    function func(){
        var city = \'shanghai\';
        function inner(){
            var city = \'shenzhen\';
            console.log(city);
        }
        inner();
    }
    func();

    //函数的嵌套作用域2
    var city = \'beijing\';
    function Bar(){
        console.log(city);
    }
    function func(){

        var city = \'shanghai\';
        return Bar;
    }
    var ret = func();
    ret();    //beijing

作用域知识

//闭包
    var city = \'beijing\';

    function func(){
        var city = "shanghai";
        function inner(){
            // var city = "langfang";
            console.log(city);
        }
        return inner;
    }
    var ret = func();
    ret();

闭包知识

 

 

BOM对象：

BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。

使 JavaScript 有能力与浏览器“对话”。 

1.window对象（窗口对象）

window对象
    所有浏览器都支持 window 对象。
    概念上讲.一个html文档对应一个window对象.
    功能上讲: 控制浏览器窗口的.
    使用上讲: window对象不需要创建对象,直接使用即可.

alert()            显示带有一段消息和一个确认按钮的警告框。
confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。

open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。
setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。

window对象的方法

/********************Window对象的方法*********************/
/*
    //1.alert方法:提醒
    window.alert("hello");

    //2.confirm方法:提醒+选择
    var ret=window.confirm("hello world");
    console.log(ret);

    //3.prompt方法:提醒+文本输入框+选择
    var ret2=window.prompt("hello ....");
    console.log(ret2)


    //4.open方法:打开一个新的浏览器窗口或查找一个已命名的窗口。
    window.open("http://www.baidu.com");

    //5.close方法:关闭一个浏览器窗口
    window.close()


    //6.setInterval方法:按照指定的周期（以毫秒计）来调用函数或计算表达式。

    window.setInterval(f,1000);//间隔1000毫秒执行函数f

    function f() {
        console.log("hello");
    }

window对象方法的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #id1{
            width: 200px;
            height: 50px;
        }
    </style>

</head>
<body>

<input type="text" id="id1" onclick="begin()">
<button onclick="end()">停止</button>

<script>

    function showTime() {
           var curren_time=new Date().toLocaleString();
           var ele=document.getElementById("id1");
           ele.value=curren_time;
    }

    var click1;

    function begin() {
        if (click1==undefined){

        showTime();
        click1=setInterval(showTime,1000)

        }

    }

    function end() {
        clearInterval(click1);
        click1=undefined;
    }




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

定时器的创建与清除：setInterval clearInterval

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    function f() {
        console.log("hello...");
    }
    var c=setTimeout(f,1000);//只调用一次
    // clearTimeout(c);
</script>
</body>
</html>

setTimeout:只调用一次对应函数

 

2.History 对象

History 对象属性

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

属性length：返回浏览器历史列表中的 URL 数量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<a href="5.JS_history对象2.html">click</a>

<!--<button onclick="history.forward()"> >>>>>>> </button>-->
<button onclick="history.go(1)"> >>>>>>> </button>
</body>
</html>

history的对象的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<button onclick="history.back()">back</button>-->
<button onclick="history.go(-1)">back</button>
</body>
</html>

5.JS_history对象2.html

 

3.Location 对象

Location 对象包含有关当前 URL 的信息。

Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="f()">click</button>

<script>

    function f(){
        // location.assign("http://www.baidu.com");//跳转页面,url链接，可以返回上一个页面
        // location.reload()       //刷新页面
        location.replace("http://www.baidu.com");//页面代替，直接覆盖，无法返回上一个页面
    }

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

Location 对象方法

 

 

DOM对象(DHTML)：

1.DOM简介：

DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：

"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"

W3C DOM 标准被分为 3 个不同的部分：

• 核心 DOM - 针对任何结构化文档的标准模型
• XML DOM - 针对 XML 文档的标准模型
• HTML DOM - 针对 HTML 文档的标准模型

 

• 什么是 XML DOM？  －－－－>XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
• 什么是 HTML DOM？－－－－>HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

 

2.DOM节点：

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：

 

常用的两个节点元素

• 整个文档是一个文档节点(document对象)
• 每个 HTML 元素是元素节点(element 对象)

不常用的节点元素

• HTML 元素内的文本是文本节点(text对象)
• 每个 HTML 属性是属性节点(attribute对象)
• 注释是注释节点(comment对象)

 

 

 

 

节点(自身)属性:

• attributes - 节点（元素）的属性节点
• nodeType – 节点类型
• nodeValue – 节点值
• nodeName – 节点名称
• innerHTML - 节点（元素）的文本值

导航属性:

• parentNode - 节点（元素）的父节点 (推荐)
• firstChild – 节点下第一个子元素
• lastChild – 节点下最后一个子元素
• childNodes - 节点（元素）的子节点 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1">
    <div id="div2"></div>
    <p>hello yuan</p>
</div>

<script>
    var div=document.getElementById("div2");

    console.log(div.nextSibling.nodeName);  //思考:为什么不是P?，而是#text

                                            //标签后面默认会有一个换行符号，该符号的节点名为text
</script>

</body>
</html>

注意点

推荐导航属性：

parentElement              // 父节点标签元素

children                        // 所有子标签
  
firstElementChild          // 第一个子标签元素

lastElementChild           // 最后一个子标签元素

nextElementtSibling       // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素

节点树中的节点彼此拥有层级关系。

父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

• 在节点树中，顶端节点被称为根（root）
• 每个节点都有父节点、除了根（它没有父节点）
• 一个节点可拥有任意数量的子
• 同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分，以及节点之间的关系：

 

 

 

 

 

访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素：

页面查找：

• 通过使用 getElementById() 方法 
• 通过使用 getElementsByTagName() 方法 
• 通过使用 getElementsByClassName() 方法 
• 通过使用 getElementsByName() 方法 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="div1">
    <p name="littleP" class="p1">hello p</p>
    <div class="div2">hello div2
        <div>hello div3</div>
        <a href="">click</a>
    </div>
    <span>span</span>
</div>
 <span>spanspanspanspan</span>
<div>hhhh</div>

<script>
    /*
    var ele=document.getElementsByClassName("p1")[0];
    console.log(ele);//p标签对应的属性及值-->    <p class="p1">hello p</p>
    console.log(ele.nodeName);//标签名-->       P
    console.log(ele.nodeType);//标签类型-->     1
    console.log(ele.value);//标签值-->          null
    console.log(ele.innerHTML);//中间文本-->    hello p

    var p_ele=ele.parentNode;//ele(p)标签的父节点
    console.log(p_ele.nodeName);//ele(p)标签的父节点的标签名

    var b_ele=ele.nextSibling;
    console.log(b_ele.nodeName);//#text

    var b_ele2=ele.nextElementSibling;
    console.log(b_ele2.nodeName);//DIV
    console.log(b_ele2.innerHTML);//hello div2

    var ele3=document.getElementsByClassName("div1")[0];
    console.log(ele3.children);//寻找div1的所有孩子+文本内容

    var ele4=document.getElementsByName("littleP")[0];//获取name=littleP的标签元素，并命名为ele4
    var ele5=ele4.nextElementSibling;//获取ele4的兄弟标签,并命名为ele5
    console.log(ele5.innerHTML);//获取ele5内的所有内容
    console.log(ele5.innerText);//获取ele5内的文本内容
*/

    // console.log(ele5);
    /* 原先的ele5的属性值:
        <div class="div2"> "hello div2"
            <div>hello div3</div>
            <a href>click</a>
        </div>
    */

    //修改ele5的文本内容:innerText(不包含标签)
    // ele5.innerText="<h1>YUAN</h1>";
    // console.log(ele5);//"<h1>YUAN</h1>"

    /*  <div class="div2"><h1>YUAN</h1></div> */

    //修改ele5的html内容:innerHTML(包含标签)
    // ele5.innerHTML="<h1>lin</h1>";
    // console.log(ele5);//lin     (粗体)
    /*
    <div class="div2">
        <h1>lin</h1>
    </div>


    //局部查找
    var ele6=document.getElementsByClassName("div1")[0];
    var ele7=ele6.getElementsByTagName("span");
    console.log(ele7[0]);
    console.log(ele7[0].innerHTML);
 */


/*
innerHTML跟innerText的区别：
innerText的value中不会有标签属性，只会有文本
innerHTML中不仅有文本，还有标签
*/
</script>
</body>
</html>

节点的使用实例

 

局部查找：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="div1">

    <div class="div2">i am div2</div>
    <div name="yuan">i am div2</div>
    <div id="div3">i am div2</div>
    <p>hello p</p>
    <p>hello p</p>
</div>

<script>

   var div1=document.getElementById("div1");//进入局部作用域

////支持;
//   var ele= div1.getElementsByTagName("p");//通过标签名查询
//   alert(ele.length);//2,找到p标签了，数量为2
////支持
//   var ele2=div1.getElementsByClassName("div2");//通过类名查询
//   alert(ele2.length);//1,找到类名为div2的标签，数量为1


////不支持
//   var ele3=div1.getElementById("div3");
//   alert(ele3.length);
////不支持
//   var ele4=div1.getElementsByName("yuan");
//   alert(ele4.length)

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

View Code

 

3.DOM Event(事件)

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               //练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开

onselect      文本被选中。
onsubmit      确认按钮被点击。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="search" value="请输入用户名" onfocus="f1()" onblur="f2()">

<script>
    var ele=document.getElementById("search");
    function f1() {
        if (ele.value=="请输入用户名"){
            ele.value="";
        }

    }
     function f2() {
        if (!ele.value.trim())
        {ele.value="请输入用户名";}
    }

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

实例一：搜索框-->onfocus、onblur

onload 属性开发中 只给 body元素加.
这个属性的触发 标志着 页面内容被加载完成.
应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // window.onload = function () {
        // var ele=document.getElementsByClassName("div1")[0];
        // console.log(ele.innerHTML)
        // }

        function f() {
        var ele=document.getElementsByClassName("div1")[0];
        console.log(ele.innerHTML)
        }

    </script>

</head>
<body onload="f()">


<div class="div1">hello div1</div>



</body>
</html>

实例二：onload事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="v1">
    <div class="v2" onclick="f()">vvvvvv</div>
    <div class="v2">vvvvvv</div>
    <div class="v2">vvvvvv</div>
    <div class="v2">vvvvvv</div>
    <div class="v2">vvvvvv</div>
    <p id="p1" onclick="func(this)">pppp</p>
</div>


<script>
    // var ele=document.getElementById("p1");
    // ele.onclick=function () {
    //     alert(111)
    // };
    // var ele2=document.getElementsByClassName("v2")[0];
    // ele2.onclick=function () {
    //     alert(666)
    // }

    function func(that) {
        console.log(that);//获得某个标签(p1)
        console.log(that.previousElementSibling);//上一个兄弟标签
        console.log(that.parentNode);//父标签
    }
</script>
</body>
</html>

实例三：事件绑定

onsubmit:

是当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" id="form1">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>
<script>
    var ele=document.getElementById("form1");
    ele.onsubmit=function (e) {
        alert("hello");

        //事件拦截方式一
        // return false;//拦截表单提交

        //事件拦截方式二
        e.preventDefault();//阻止默认事件
    }
</script>
</body>
</html>

实例四：onsubmit拦截

 

事件传播：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style >
        .outer{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }

        .inner{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
<div class="outer" onclick="func2()">
    <div class="inner"></div>
</div>

<script>
    var ele=document.getElementsByClassName("inner")[0];
    ele.onclick=function (e) {
        alert("I am inner");
        e.stopPropagation();
        //阻止事件向外传播，及outer包含inner，两者都有onclick事件
        //在inner中使用e.stopPropagation()可以使得只触发inner的onclick事件，不触发outer的onclock事件
    };

    function func2(){
        alert("I am outer")
    }
</script>
</body>
</html>

事件传播

 

节点node的增删改查演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1,.div2,.div3,.div4{
            width: 300px;
            height: 100px;
        }
        .div1{
            background-color: green;
         }
        .div2{
            background-color: yellow;
         }
        .div3{
            background-color: rebeccapurple;
         }
        .div4{
            background-color: pink;
         }
    </style>
</head>

<body>
<div class="div1" id="id1">                 <!--添加标签-->
    <button onclick="add()">add</button>
    hello div1
</div>
<div class="div2">                          <!--删除标签-->
    <button onclick="del()">delete</button>
    hello div2</div>
<div class="div3">                          <!--修改标签-->
    <button onclick="change()">change</button>
    <p>hello div3</p>

</div>
<div class="div4">hello div4</div>

<script>
    //获取HTML的属性值
    // var x=document.getElementsByClassName("div1")[0];
    // z=x.getAttribute("id");
    // alert(z);

    function add() {
    var ele=document.createElement("p");                  //创建子标签<p></p>
    ele.innerHTML="<h1>hello p</h1>";                    //子标签添加文本<p>hello p</p>
    // ele.innerText="<h1>hello p</h1>";                    //子标签添加文本<p>hello p</p>
    ele.style.color="red";
    ele.style.fontSize="10px";
    var father=document.getElementsByClassName("div1")[0];//获取需要添加子标签的父标签
    father.appendChild(ele);                    //在父标签class="div1"的标签下添加子标签<p>hello p</p>
    }

    function del() {
    var father=document.getElementsByClassName("div1")[0];//获取需要删除子标签的父标签
    var son=father.getElementsByTagName("p")[0];  //获取需要删除的子标签
    father.removeChild(son);//移除子标签
    }

    function change() {
        var img=document.createElement("img");
        img.setAttribute("src","图片.png");//DOM语法修改
        // img.src="图片.png";//HTML语法修改，推荐使用

        var ele=document.getElementsByTagName("p")[0];
        var father=document.getElementsByClassName("div3")[0];
        father.replaceChild(img,ele);

    }

</script>

</body>
</html>

View Code

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="div1 div2">hello div</div>

<script>
    var ele=document.getElementsByTagName("div")[0];
    console.log(ele.className);//类的名字，有多个则全部显示
    console.log(ele.classList[0]);//类的第一个名字
    console.log(ele.classList[1]);//类的第二个名字
    ele.classList.add("hide");//给类添加新的name
    console.log(ele.className);

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

class属性

 

 

总结实例练习：

<input id="ID1" type="text" value="请输入用户名" onblur="Blurs()" onfocus="Focus()">


<script>

function Focus(){

    var input=document.getElementById("ID1");
    if (input.value=="请输入用户名"){
        input.value="";
    }

};

function Blurs(){

    var ele=document.getElementById("ID1");
    var val=ele.value;
    if(!val.trim()){

        ele.value="请输入用户名";
    }
}

</script>

练习一：搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            height: 1800px;
            background-color: white;
        }

        .shade{
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: gray;
            opacity: 0.7;
        }

        .model{
            width: 200px;
            height: 200px;
            background-color: bisque;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
        }

        .hide{
            display: none;
        }
    </style>
</head>
<body>

<div class="content">
    <button onclick="show()">show</button>
    hellohellohellohellohellohello hellohellohellohellohellohello hellohellohellohellohellohello
</div>

<div class="shade hide"></div>

<div class="model hide">
     <button onclick="cancel()">cancel</button>
</div>

<script>
    function show() {
        var ele_shade=document.getElementsByClassName("shade")[0];
        var ele_model=document.getElementsByClassName("model")[0];

        ele_shade.classList.remove("hide");
        ele_model.classList.remove("hide");
    }

    function cancel() {
        var ele_shade=document.getElementsByClassName("shade")[0];
        var ele_model=document.getElementsByClassName("model")[0];

        ele_shade.classList.add("hide");
        ele_model.classList.add("hide");
    }
    
</script>

</body>
</html>

练习二：模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button onclick="selectAll()">全选</button>
<button onclick="Cancel()">取消</button>
<button onclick="reverse()">反选</button>
<hr>
<table border="1px">
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>333</td>
        <td>333</td>
        <td>333</td>
    </tr>
</table>

<script>
    function selectAll() {
        var inputs=document.getElementsByTagName("input");
        for (var i=0;i<inputs.length;i++){
            var input=inputs[i];
            input.checked=true;
        }
    }

    function Cancel() {
        var inputs=document.getElementsByTagName("input");
        for (var i=0;i<inputs.length;i++){
            var input=inputs[i];
            input.checked=false;
        }
    }

    function reverse() {
        var inputs=document.getElementsByTagName("input");
        for (var i=0;i<inputs.length;i++){
            var input=inputs[i];

            // input.checked=!input.checked;

            if(input.checked){
                input.checked=false;
            }
            else{
                input.checked=true;
            }
        }
    }


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

练习三：正反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<select id="provinces">
    <option>请选择省份</option>
</select>
<select id="citys">
    <option>请选择城市</option>
</select>

<script>
    // a={name:"alex"};
    // b={"name":"alex"};
    // console.log(a.name);
    // console.log(b["name"]);


    // console.log(data);
    // console.log(typeof data);
    // console.log(data["河北省"]);
    // console.log(data.河北省);
    //
    // for (var i in data){
    //     console.log(i)
    // }

    data={"河北省":["石家庄","廊坊"],"山西省":["晋城","大同"],"陕西省":["西安","延安"]};//省市数据信息

//对省级标签的操作
    var pro_ele=document.getElementById("provinces");//获取省级的select标签

    for (var i in data){//循环添加省级标签信息
        var ele=document.createElement("option");//创建省级子标签option
        ele.innerHTML=i;                        //省级子标签option赋值
        pro_ele.appendChild(ele);               //省级子标签添加到省级select标签中
    }

//对城市级标签的操作
    var city_ele=document.getElementById("citys");//获取城市的select标签

    pro_ele.onchange=function () {//当省级标签的option发生改变时触发此函数

        console.log(this);//this==pro_ele ==>   省级标签select
        console.log(this.selectedIndex);//获取选取的option的下标---》河北省--1    山西省--2 ...
        console.log(this.options);//获取省级标签select内的所有option标签
        console.log(this.options[this.selectedIndex]);//获取省级select标签下的某个特定的option标签

        city_ele.options.length=1;//对城市级<select>标签下的option标签进行清空

       var citys=data[this.options[this.selectedIndex].innerHTML];//==>data["xx省"]，获取城市信息
        for (var i=0;i<citys.length;i++){//循环获得某个省份下的城市
            var ele=document.createElement("option");//创建城市级子标签option
            ele.innerHTML=citys[i];//城市级子标签option赋值
            city_ele.appendChild(ele);//城市级子标签添加到城市级select标签中
        }
    }


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

练习四：两级联动

<div id="box1">
    <select multiple="multiple" size="10" id="left">
        <option>book</option>
        <option>book2</option>
        <option>book3</option>
        <option>book4</option>
        <option>book5</option>
        <option>book6</option>
    </select>
</div>


<div id="choice">
    <input class="add"     type="button" value="--->" onclick="add()"><br>
    <input class="remove"  type="button" value="<---" onclick="remove();"><br>
    <input class="add-all" type="button" value="====>" onclick="ADDall()"><br>
    <input class="remove-all" type="button" value="<===" onclick="remall()">
</div>


<div>
    <select multiple="multiple" size="10" id="right">
        <option>book9</option>
    </select>
</div>

<script>

     function add(){
         var right=document.getElementById("right");
         var options=document.getElementById("left").getElementsByTagName("option");

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

             var option=options[i];

             if(option.selected==true){
                   right.appendChild(option);
                 i--;
             }

         }

     }

     function remove(){
         var left=document.getElementById("left");
         var options=document.getElementById("right").getElementsByTagName("option");

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

             var option=options[i];

             if(option.selected==true){
                   left.appendChild(option);
                 i--;
             }

         }

     }

    function ADDall(){
         var right=document.getElementById("right");
         var options=document.getElementById("left").getElementsByTagName("option");
         for (var i=0; i<options.length;i++){
             var option=options[i];
             right.appendChild(option);
             i--;

         }

     }

     function remall(){
         var left=document.getElementById("left");
         var options=document.getElementById("right").getElementsByTagName("option");
         for (var i=0; i<options.length;i++){
             var option=options[i];
             left.appendChild(option);
             i--;

         }

     }

</script>

练习五：左右移动