JavaScript（ES5）入门

01-简介

1)JavaScript 发展史

[1] 1995年,navigator(导航者),netscape(网景);用户体验性特别好

[2] 表单验证难题,表单验证都是在后台处理.当时处在网速特别慢的时代,发送一个请求,接收响应

需要5分钟左右的时候提高表单验证的速度,想开发一种语言在前端进行表单验证.

[3] 1995年java大行其道, write once , run anywhere; 网景就想开发一种语言像极了java,但是

比java简单.叫做LiveScript

[4] 招了"布兰登-艾奇",不懂java;入职之后让它开发liveScript像极了java,但是比java简单; 赶工

+怄气花费了10天时间开发LiveScript 雏形.

[5] 96年,sun公司想进入js市场,就和网景公司合作; 为了市场推广将 LiveScript 改名

为 JavaScript

[6] 96年,Microsoft 进入js市场,收购一家开发浏览器的公司(望远镜),就是现在的ie; 开发了

jScript

[7] 将JavaScript 交给一个组织 ECMA(欧洲计算机联盟); 出台一个标准: ECMAScript 语法标准

[8] 开始了长度8年的浏览器大战,直到2004年网景公司破产而结束

ECMAScript 和 JavaScript 区别?

ECMAScript (简称es) 是语法标准,相当于使用说明书

JavaScript 是实现了 ECMAScript的编程语言

2)JavaScript 特点

解释性语言：JavaScript代码可以直接在浏览器中运行，无需编译。
动态类型：变量可以随时更改其数据类型。
面向对象：支持对象和继承。
事件驱动：响应用户操作，如点击、输入等事件。
跨平台：可以在不同的操作系统和设备上运行。

3)JavaScript 应用场景

网页交互：如表单验证、动态内容更新、动画效果等。
服务器端开发：如Node.js。
移动应用开发：如React Native、Ionic。
桌面应用开发：如Electron。

02-js第一个程序

1)什么是JavaScript?

JavaScript 是嵌入在HTML中,基于对象和事件驱动的脚本语言

[1] 在前端, JavaScript 不能单独运行,必须要依赖于HTML

[2] 基于对象: javascript 是面向对象的语言

[3] 事件驱动: 当通过输入设备(鼠标,键盘)对html页面的元素进行操作时,都可以实现一些功能效

果. window 操作系统就是基于事件驱动的系统

[4] 脚本语言: 无需编译直接运行的语言

2)第一个程序

[1] 在网页中添加 script 标签

[2] 在script标签中编写js代码

<script type="text/javascript">

alert("你好,JavaScript");

</script>

3)细节

[1] script 标签是JavaScript代码容器,负责执行js代码

[2] script 标签可以有多个,并且可以写在网页的任何地方; 建议写在head中或者body的最后

[3] 属性

type : 可以不加,代码类型

src : js文件的资源路径, 可以定义单独的js文件(后缀为js),通过这个属性引入到HTML中,好处

就是可以做到js代码和html代码分离



<script type="text/javascript" src="test.js"></script>

注意: 使用src属性,那么在script中就不能写任何js代码

[4] alert(字符串) 警示框

4)常用方法

alert("字符串") : 警示框

confirm("字符串") : 确认框

prompt("字符串") : 用户提示输入框, 类似于 Scanner

console.log(字符串) : 往控制台打印内容

F12或 Fn+F12 ----> console

document.write("html代码"); 往网页中输出内容

03-js语法基础

主要学习和java不同的语法

1)变量

1.什么是变量?

在程序运行中,值可以不断改变的量; 变量在程序中存储数据的容器.

2.定义变量

关键字: var (variable 缩写)

var 变量名称;

比如:

var a; // 定义变量a

注意：变量只定义没有赋值，那么默认值：undefined

3.给变量赋值

赋值运算 : = , 将=右边的值赋值左边的变量 , 将变量看做一个容器,那么就是将值放入容器中

变量名称 = 值;

4.变量定义并赋值

var 变量名称 = 值;

var c=999;

var b=888;

//在js中可以重复定义

//后边定义的变量可以替换前边定义的变量

5.变量特点

JavaScript 是弱类型语言,变量的数据类型由所赋值决定,并不由变量本身决定

java 是强类型语言,变量的数据类型由变量本身决定

验证:

typeof 变量名称 ; 获取变量的数据类型

var aa=1;

console.log(typeof aa);

2)关键字和保留字

关键字: 在程序中具有特殊含义的单词,一般就是系统提供好的单词

保留字: 在程序中具有特殊含义的单词,只是还没有在程序中使用, 以后可能会变成关键字

店/公司: 储备干部, 储备店长

3)标识符命名规范

[1] 标识符由字母,数字,下划线和$构成

[2] 首字母不能为数字,可以为$

[3] 不能是关键字和保留字

注意: 变量名name,尽量不要用

[4] 严格区分大小写 : A, a 2个不同的变量

[5] 见名知意,驼峰式命名,下划线命名,中划线命名

驼峰式命名 : java 命名

下划线命名: 数据库, c / c++

中划线命名: html,css

4)数据类型

数据类型:

Number : 数字类型, 整数和小数都是Number类型

Boolean : 布尔类型, 布尔类型只有2个值 true / false

String : 字符串类型

Undefined : 未定义类型

Arr : 数组

Object : 对象

Null : 空值

let num = 100;    // 数字

let str = "Hello";    // 字符串

let isTrue = true;     // 布尔值

let arr = [1, 2, 3]; // 数组

let obj = {a: 1, b: 2};    // 对象

let undef;                     // 未定义

let nul = null; // 空值

注意：字符串类型，用单引号或双引号括起的数据。

var s='字符串';

var f="字符串";

var d='""';

var d="''";

//单双引号嵌套：外部使用单引号，内部使用双引号；外部使用双引号，内部使用单引号。

特殊值:

"" : 空字符串,占据内存空间,只是空间没值

null : 空对象,没有内存空间

NaN : Not a Number , 是数字中的特殊值, 运算结果无法转换为数字时,结果就是NaN

5)数据类型转换

数字字符串: 由数字构成的字符串

字符串转换为数字:

[1] 隐式类型转换

系统内部自动转换: 数字字符串和数字做算术运算(除了+),可以自动将其转换为数字

var s="123";

console.log("s="+s+"; type="+typeof s);

//将字符串转换为数字

s=s-0;

s=s*1;

s=s/1;

console.log("s="+s+"; type="+typeof s);//结果为123 类型是number

[2] 显式类型转换

parseInt(x) : 若x无法转换为数字,返回值NaN

1.将字符串x转换为整数

2.若x为小数,那么可以做取整运算

var ss="444";

//将字符串转换为数字

ss=parseInt(ss);

console.log("ss="+ss+"; type="+typeof ss);//结果为444 类型是number

var x=2.343123;

//取整

x=parseInt(x);

console.log("x="+x);//结果为2 类型是number

      parseFloat(x): 将字符串转换为小数

var ss="12.3212";

//将字符串转换为小数

ss=parseFloat(ss);

console.log("ss="+ss+"; type="+typeof ss);//结果为12.3212 类型是number

       若x无法转换为数字,返回值NaN

var ss="dsad";

//将字符串转换为小数

ss=parseFloat(ss);

console.log("ss="+ss+"; type="+typeof ss);//结果为NaN

数字转字符串

[1] 隐式类型转换

      字符串和任何其他类型做拼接运算,结果都是字符串

      2 + "";

var n=2;

//数字转换为字符串

n=n+"";

console.log("n="+n+"; type="+typeof n);//结果为2 类型是String

[2] 显式类型转换

      调用数字的toString方法

var n=2;

//数字转换为字符串

n=n.toString();

console.log("n="+n+"; type="+typeof n);//结果为2 类型是String

//在js里面所有的东西都是对象，包括这个数字也是对象

6)运算符

算术运算: + - * / %

拼接运算: +

赋值运算: =

关系运算: > >= < <= !=

== : 相等,只比较大小,不比较类型

=== : 恒相等,既比较大小也比较类型

!== : 不恒等于

逻辑运算:

A && B && C && D: 逻辑与,有假则为假, 又称为短路与

A || B || C || D: 逻辑或,有真则为真, 又称为短路或

! : 逻辑非

复合型运算:

++ : 自增1运算, (b=a++,b=++a区别)

-- : 自减1运算, (b=a--,b=--a区别)

a += b ==> a = a + b;

a -= b ==> a = a - b;

a *= b ==> a = a * b;

a /= b ==> a = a / b;

a %= b ==> a = a % b;

三目运算符(三元运算符,问号表达式)

表达式1 ? 表达式2 : 表达式3

若表达式1为true,那么返回表达式2的结果

若表达式1为false,那么返回表达式3的结果

比如 : a , b , c 最大值

var max = a > b ? a : b;

max = max > c ? max : c;

04-流程控制

1)流程控制的分类

[1] 顺序执行结构

[2] 选择执行结构

[3] 循环执行结构

2)顺序执行结构

所有的程序首先是一个顺序执行结构,所有的程序都是从程序入口开始逐行执行

3)选择执行结构

根据不同的情况,执行不同的代码

1.if结构

[1] 单分支结构

            if(条件) {

                // 代码块

            }

若满足条件,那么执行if中的代码块

[2] 双分支

            if(条件) {

                // if 代码块

            } else {

                // else 代码块

            }

若满足条件,那么执行if代码块;否则执行else代码块

[3] 多分支

            if(条件1) { // 代码块1 }

            else if(条件2) { //代码块2 }

            else if(条件3) { //代码块3 }

            ...

            else if(条件n) { //代码块n }

            else {}

注意: else 可以省略

结论: 多分支结构中只要有一个分支满足条件执行,那么就退出多分支结构

2.switch结构

适合于有限情况的等值判断

        switch(变量) {

            case 情况:

            break;

            case 情况:

            break;

            case 情况:

            break;

            ...

            default:

            break;

        }

break : 退出switch结构

若没有break,会出现case穿透现象

<script type="text/javascript">var day = 1;

switch (day) {

    case 0 :

        document.write('星期日');

        break;

    case 1 :

        document.write('星期一');

        break;

    case 2 :

        document.write('星期二');

        break;

    case 3 :

        document.write('星期三');

        break;

    case 4 :

        document.write('星期四');

        break;

    case 5 :

        document.write('星期五');

        break;

    case 6 :

        document.write('星期六');

        break;

    default:

        document.write('数字不满足要求');

}</script>

4)循环结构

1.for循环

适合for循环情况: 适合有步长的循环

    for(循环变量初始化 1;循环条件 2 ;循环变量改变 3) {

        循环体 4

    }

执行顺序:

2.while循环

适合于非步长循环

    循环变量初始化 1;

    while(循环条件 2) {

        循环体 3

        循环变量改变 4

    }

执行顺序:

<script type="text/javascript">

    //求1--100的和

    var sum = 0;

    var i = 1;

    while (i <= 100) {

        sum += i;

        i++;

    }

    document.write("1--100的和是" + sum + "

    ");

    document.write("i是" + i);

</script>

3.do-while循环

循环变量初始化;

do {

      循环体;

      循环变量的改变;

   } while(循环条件);

do-while 循环和while循环区别?

      do - while 先执行再判断,至少执行一次

      while 先判断再执行

<script type="text/javascript">

    //求1--100的和

    var sum = 0;

    var i = 1;

    do {

        sum += i;

        i++;

    } while (i <= 100)

    document.write("1--100的和是" + sum + "

    ");

    document.write("i是" + i);

</script>

4.退出循环结构

break; 退出整个循环

continue : 退出本次循环,继续下一次循环

05-错误处理

1)错误分类

[1] 语法性错误

[2] 业务性错误

2)语法性错误

打开控制台查看错误信息

建议: 只要写js代码,将控制台打开

3)业务性错误 - 使用debug调试

[1] 打开source窗口

[2] 点击行号,添加断点

[3] 刷新页面,程序停止在断点的位置

[4] 通过按钮控制程序的执行

[5] 查看变量值,分析逻辑中的错误

06-函数和数组

1)函数

1.什么是函数?

函数是一个存储代码的容器,可以将代码保存在函数中,也可以从容器获取代码来执行; 函数这个容器存放代码都是一些通用性特别强的代码,只需要在调用位置获取这些代码即可,能提高程序的可用性.

2.定义函数

function 关键字, 含义: 功能 , 一个函数就是一个功能.

语法:

        function 函数名称(参数1,参数2,...,参数n) {

            // 函数体

            return 值;

        }

3.定义无参无返回值

       // 定义无参无返回值的函数 add

       // 定义: 在堆空间开辟了一块内存,存储相关的代码

       // 注意: function 和函数名称之间没有任何关键字

       function add() {

           // 求1-100的和

           var s = 0;

           for (var i = 1; i <= 100; i++) {

               s = s + i;

           }

           console.log(s);

       }



       //调用: 将堆中的代码获取出来,放到栈空间中执行

       // 函数名称(); () : 含义就是调用

add();

4.定义有参函数

       // 定义有参函数

       // 注意: 参数直接写参数名,不需要任何关键字修饰

       // 形式参数: 简称形参,只有含义没有值

       // a 和 b 就是形参,代表加法开始和结束

       function add2( a, b) {

           var s = 0;

           for (var i = a; i <= b; i++) {

               s = s + i;

           }

           console.log("s = " + s);

       }



       // 调用函数: 函数名称(值,值,...,值);

       // 实参: 实际参数

       // 参数传递: 调用时会将实参的值传递给形参,然后形参就有实际的值,然后开始执行函数中代码

       add2(1,50);

5.返回值

return 关键字

[1] 将函数内部的结果返回给外部的调用者

[2] 函数结束

       // 定义有返回值的函数

       function add3(a , b) {

           var s = 0;

           // 代表程序的结束; 可以用在函数执行的规则性验证

           // a 和 b 必须都是数字

           if(typeof a != "number" || typeof  b != "number") {

               return ; // 程序结束,默认返回  undefined

           }

           // a 一定比 b 小

           if(a > b) {

               return ;// 程序结束,默认返回  undefined

           }

           for (var i = a; i <= b; i++) {

               s = s + i;

           }

           return s;// 将s的值返回给调用者

       }



       // 调用函数: var 变量 = 函数名称(值,值,...,值);

       var ret = add3(1,2);

       alert("ret = " + ret);

2)全局变量和局部变量

局部变量 : 在函数内部定义的变量

全局变量 : 在函数外部定义的变量

建议: 开发时遵循java对全局变量和局部变量的定义方式, 遵循块级作用域的方式,在哪个块级作用域中定义,在这个作用域中使用

块级作用域: {} 作用开始以及结束范围

if , switch , class , static , for , while 块级作用域

3)数组

1.什么是数组?

数组为了解决存储多个数据的位置, 数组由一块连续的内存空间构成, 可以在这个内存空间中存储多个数据.

2.数组的语法

[1] var 数组名称 = new Array(值,值,值,...,值);

[2] var 数组名称 = [值,值,值,...,值];

var arr =new Array(12,23,123,2,3);

console.log(arr);

var arr=[12,23,123,2,3];

console.log(arr);

var arr=[];//空数组

3.使用下标给数组中的元素赋值和取值

数组名称[index] = 值;

// 数组的长度可变

arr[0]=111;

arr[1]=12;

//通过下标取值

var r=arr[10];

console.log("r="+r);

4.数组长度

数组名称.length

        // 获取数组长度

       console.log("数组长度 = " + arr.length);

       // 数组遍历: 使用索引从0开始,到数组长度-1结束

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

           console.log(arr[i]);

       }

5.特点

[1] 长度可变

[2] 类型任意

[3] 数组就是对象

在 js 中,数组也称为集合

6.方法

push(e) : 将元素e添加到数组末尾

indexOf(e) : 查找元素e在数组中首次出现的位置,若不存在返回-1

lastIndexOf(e) : 查找元素e在数组中最后次出现的位置,若不存在返回-1

join(s) : 通过字符串s,将数组中的元素拼接为字符串

07-对象

1)string对象

length : 获取字符串的长度

charAt(index) : 获取指定位置的字符

indexOf(s) : 查找字串s首次出现的位置,若不存在那么返回-1

lastIndexOf(s) : 查找字串s最后一次出现的位置,若不存在那么返回-1

split(s) : 将字符串切割为数组

substring(start) : 截取从start开始截到最后的字符串

substring(start,end) : 截取从start开始到end结束的字符串

<script type="text/javascript">

       var s="hello javascript";

       //长度

       console.log(s.length);

       //获取指定位置的字符

       console.log(s.charAt(6));

       //查询字符

       console.log(s.indexOf("a"));

       //查询字符串a最后出现的位置

       console.log(s.lastIndexOf("a"));

       //切割字符串

       console.log(s.split(" "));

       //截取

       console.log(s.substring(6));

       console.log(s.substring(6,9));

</script>

2)Math 对象

Math.floor(x) : 向下取整

Math.ceil(x) : 向上取整

Math.random() : 产生[0-1)的随机小数

Math.round(x) : 四舍五入

随机数

3)Date 对象

日期对象根据JDK1.1来实现的,JDK1.1 中的方法都是可以使用

[1] 创建对象

var date = new Date() : 当前时间

var date = new Date(毫秒数) : 通过毫秒数(自1970-1-1 00:00:00 到指定时间)创建日期

[2] 方法说明

getFullYear() : 获取四位数的年

getMonth() : 获取月 , 从0-11

getDate() : 获取日

getHours() : 获取小时

getMinutes() : 获取分钟

getSeconds() : 获取秒

getDay() : 获取周, 0-6

<script type="text/javascript">

   var d = new Date(); //系统当前时间

   console.log(d);

   console.log(d.getYear()+1900); //120+1900=2020

   console.log(d.getFullYear());//2020

   console.log(d.getMonth()+1);//2 +1 ===>3

   //年-月-日时:分:秒

   var d2 = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();

   console.log(d2);

   //1970----现在d时间总毫秒数

   var longTime = d.getTime();

   var d3 = new Date("2000-01-01 10:10:10");

   console.log(d3);

</script>

4)自定义对象

js 是面向对象的语言,所以js也提供了创建对象的方法

[1] 构造函数 - 创建对象

        // 参数作用: 初始化属性

        // this : 当前对象,指将要创建的对象

        function 构造函数名称(参数1,参数2,...,参数n) {

            // 添加属性

            this.属性名称 = 参数;

            this.属性名称 = 参数;

            ...

            // 添加方法

            this.方法名称 = function(参数列表) {

            }

            this.方法名称 = function(参数列表) {

            }

            ...

        }

对象 = new 构造函数(值,值,...,值);

注意：js的对象可以动态增加属性

[2] 简单对象方式

对象 = {}; // 空对象

// 添加属性

对象.属性 = 值;

// 添加方法

对象.方法 = function(参数列表) {}

创建有属性有方法的对象:

对象 = {

// 添加属性

属性名称:属性值,

...,

属性名称:属性值,

方法名称:function(参数列表) {},

...

方法名称:function(参数列表) {}

}

<script type="text/javascript">

       /* 定义构造函数: 可以理解为一类事物 */

       function Person(name,age,sex) {

           // 添加属性

           this.personName = name;

           this.age = age;

           this.sex = sex;

           // 添加方法

           this.eat = function(e) {

               alert(this.personName + "正在吃" + e);

           }

           this.play = function(p) {

               alert(this.personName + "正在玩" + p);

           }

       }

       // 通过构造函数创建对象

       var p1 = new Person("张三",23,"男");

       console.log(p1);

       // 使用属性: 对象.属性

       p1.personName = "张飒";// 设置属性

       console.log(p1.personName);// 获取属性

       // 使用方法: 对象.方法

       p1.eat("麻辣烫");



</script>

08-BOM

1)什么是BOM?

BOM : Browser Object Model 浏览器对象模型

提供了操作浏览器的对象以及方法

window : 浏览器窗口对象

history : 历史对象

document : 文档对象,操作网页

location : 地址对象

2)window对象

alert , confirm , prompt 都是window对象中的方法

全局变量和全局函数都是window对象中的方法

window 对象中的方法和属性,使用的时候可以省略window

方法:

setTimeout(fn,time) : 过time毫秒执行函数fn, 返回定时器的唯一性标识

clearTimeout(定时器唯一性标识) : 关闭定时器

setInterval(fn,time) : 每过time毫秒执行函数fn, 返回定时器唯一标识

clearInterval(定时器唯一性标识) : 关闭定时器

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Insert title here</title>

</head>

<body>

<h1>window.setTimeout,clearTimeout函数</h1>

<script type="text/javascript">

    var c=10;

    var t;

    function timedCount()

    {

        console.log("倒计时开始:"+c);

        t=setTimeout("timedCount()",1000);

        c--;

        if(c<1){

            console.log("倒计时结束");

            window.clearTimeout(t);

        }

    }

    //调用函数

    timedCount();

</script>

</body>

</html>

3)点击事件

点击事件: 当通过鼠标左键点击页面的元素中,可以调用一个函数来实现功能.

<标签 οnclick="函数名称(参数值,参数值,...)"></标签>



    

    

    <p οnclick="clickMe()">点我~~</p>

    <button οnclick="clickMe2()">点我~~</button>

    <script type="text/javascript">

       function clickMe() {

           alert("点我干嘛~~");

       }



       function clickMe2() {

           alert("就点你了~~");

       }

    </script>

4)location 地址对象

location.href = "地址" , 跳转页面

location.reload() : 刷新页面

5)history 历史对象

history.back();返回上一个历史记录

history.forward();跳转到下一个历史记录

09-DOM

1)什么是DOM?

DOM: Document Object Model 文档对象模型, 用来操作网页中的元素

查找元素, 修改元素, 删除元素, 添加元素

当网页加载到内存之后, 会在内存中根据标签的层级结构形成一棵倒立的树. (使用 tree 数据结构来存储)

DOM 树, 树上所有的元素都称为DOM节点, DOM对象; 就是标签对象

节点分类:

[1] 元素节点: 标签元素

[2] 属性节点: 标签中的属性

[3] 文本节点: 标签中的文本

2)查找元素(DOM对象, 标签元素)

document.getElementById(id值): 通过id属性查找元素, 返回一个DOM对象

document.getElementsByTagName(tag名称); 通过标签名称获取元素, 返回DOM对象的集合

document.getElementsByClassName(class属性): 通过class属性来获取元素, 返回DOM对象的集合

document.getElementsByName(name属性): 通过name属性来获取元素, 返回DOM对象的集合

e.parentNode : 获取DOM对象e的父元素

e.childNodes : 获取DOM对象e的子节点集合

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Insert title here</title>

</head>

<body>

<h1>DOM编程2</h1>

<div>

    <a id="a1" name="a1" class="c1" href="#">百度</a>

    <a id="a2" name="a1" class="c1" href="#">新浪</a>

    <a id="a3" name="a1" class="c1" href="#">京东</a>

    <a id="a4" name="a2" class="c2" href="#">淘宝</a>

</div>3)DOM对象的修改, 修改DOM对象中的属性

[1] innerHTML : 操作标签内部的HTML代码

DOM对象.innerHTML = html代码; 设置标签内部的HTML代码

var 变量 = DOM对象.innerHTML; 获取标签内部的HTML代码

[2] value : 操作表单元素(input,select)的value属性

<script type="text/javascript">

    //获取id="a1" 的元素 ----唯一查询（一个页面中，不允许重复的id元素）

    var a1 = document.getElementById("a1");

    console.log(a1);

    //根据标签名获取元素----返回多个-----HTMLCollection(4)

    var a2 = document.getElementsByTagName("a"); //获取本网页所有a标签

    console.log(a2);

    //根据name获取元素 ------>NodeList 节点对象集合

    var a3 = document.getElementsByName("a1");

    console.log(a3);

    //根据classname 样式名称获取元素------》所有样式名称为c1的元素节点

    var a4 = document.getElementsByClassName("c1");

    console.log(a4);

    //a1的父节点 div

    var p = a1.parentNode;

    console.log(p);

    //获得元素的子节点

    var pChildren = p.childNodes;

    console.log(pChildren);

</script>

</body>

</html>

3)DOM对象的修改, 修改DOM对象中的属性

[1] innerHTML : 操作标签内部的HTML代码

DOM对象.innerHTML = html代码; 设置标签内部的HTML代码

var 变量 = DOM对象.innerHTML; 获取标签内部的HTML代码

<script type="text/javascript">

//获取第2个h1的内部内容

var h1 = document.getElementsByTagName("h1");

console.log(h1[1].innerHTML);

//修改p段落内容

var p1 = document.getElementsByTagName("p")[0];

//修改内容

p1.innerHTML="p段落修改后的新内容";

</script>

[2] value : 操作表单元素(input,select,textarea)的value属性

DOM对象.value = 值; // 设置value属性值

var 变量 = DOM.value;// 获取value属性值

//获取name="name"的输入框的内容

var input1 = document.getElementsByName("name")[0];

console.log(input1.value); //获取value

//修改value

input1.value="张三";

[3] checked : 选中radio/checkbox | 获取radio/checkbox的选中状态

DOM对象.checked = true ; 选中 DOM对象.checked = false; 取消选中

var 变量 = DOM对象.checked; // 获取选中状态

//单选按钮男选择

var sexes = document.getElementsByName("sex");

console.log(sexes[0].checked);

sexes[0].checked=true; //设置为选中

//复选框

var ck =document.getElementById("rememberMe");

ck.checked = true;//复选框选中

[4] style : 操作样式, 类型: 样式对象

DOM对象.style.样式属性 = 值; // 改变样式

var 变量 = DOM对象.style.样式属性; // 获取样式

<body>

<h1>DOM编程4</h1>

<div id="div1" style="width:200px;height:100px;background-color: red;

display:block ">

</div>

<input type="button" οnclick="fun()" value="隐藏">

<script type="text/javascript">

    //隐藏/显示 div id="div1"

    function fun(){

        //获取div1

        var div1 = document.getElementById("div1");

        //获取input button

        var bt = document.getElementsByTagName("input")[0];

        if(bt.value=='隐藏'){

            //div隐藏

            div1.style.display = "none";

            //将按钮的value值设置为显示

            bt.value ="显示";

        }else{

            //显示工作

            //div显示

            div1.style.display = "block";

            //将按钮的value值设置为隐藏

            bt.value ="隐藏";

        }

    }

</script>

</body>

4)事件处理

事件: 当通过输入设备对网页中的元素做操作时, 都可以执行函数来实现功能.

点击事件: 当通过鼠标左键点击元素时, 执行一个函数实现功能.

常用事件:

1)、点击事件

onclick：单击事件

ondblclick：双击事件

2)、焦点事件

onfocus：获取焦点事件

onblur：失去焦点事件

3)、加载事件

onload：一张页面或一幅图像完成加载

4)、鼠标事件

onmousedown：鼠标按钮被按下

onmouseup：鼠标按键被松开

onmousemove：鼠标被移动

onmouseover：鼠标移到某元素之上

onmouseout：鼠标从某元素移开

5)、键盘事件

onkeydown：某个键盘按键被按下

onkeyup：某个键盘按键松开

onkeypress：某个键盘按键被按下并松开

6)、选择和改变事件

onchange：内容改变事件

onselect：文本被选中

7)、表单事件

onsubmit：表单提交事件

onreset：重置按钮被点击

事件添加方式:

[1] 嵌入方式: 使用标签属性添加事件

<标签名称事件属性="函数(参数列表)"></标签名称>

优点: 简单好理解

[2] 脚本方式: 在script标签中使用js代码添加事件

DOM对象.事件属性 = function() { // 事件处理函数

}

优点: 便于代码的管理和维护

缺点: 难度比嵌入方式大

事件处理函数的this:

嵌入方式:

<input type="text" onfocus="testFocus(this)" name="username">

脚本方式:

事件处理函数都有一个this对象, 代表元素本身

        var input = document.getElementsByName("username")[0];

        input.onblur = function() {

            console.log(this); // 代表元素本身

            console.log("失去焦点事件执行")

        }

<form action="productDeletesServlet" method="post">

       <table border="1">

             <tr>

                    <th><input type="checkbox" name="ids"  οnclick="font(this)">
                        全选/全不选
                    </th>

                    <th>序号</th>

                    <th>商品名称</th>

                    <th>商品单价</th>

                    <th>折扣</th>

                    <th>折扣价格</th>

                    <th>商品类型</th>

                    <th>操作</th>

             </tr>

             <c:forEach items="${list }" var="product" varStatus="p">

                    <tr>

                           <td><input type="checkbox"
                                name="ids"  value="${product.product_id }"></td>

                           <td>${p.count}</td>

                           <td>${product.product_name }</td>

                           <td>${product.price }</td>

                           <td>${product.zhekou }</td>

                           <td>${product.zhekou_price }</td>

                           <td>${product.product_type_name }</td>

                           <td>
                                <a  href="productUpdateServlet?id=${product.product_id }">
                                        修改
                                </a>
</td>

                    </tr>

             </c:forEach>

       </table>

       <input type="submit" value="批量删除">

       </form>

       <a href="typeServlet">添加</a>

       <script type="text/javascript">

             var idsName=document.getElementsByName("ids");

             function font(e){

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

                           idsName[i].checked=e.checked;

                    }

             }

       </script>