JavaScript

JavaScript 介绍

JavaScript 是弱类型脚本语言，平常用来执行页面的脚本，例如点击登录。JavaScript 和 Java 没得关系，完全是因为当时 java 出名，他蹭热度改名字叫 JavaScript。

JS 是弱类型，Java 是强类型语言【弱类型就是类型可变，强类型就是变量类型确定并且不可变】

交互性（它可以做的就是信息的动态交互）
安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）

HelloJavaScript

方式一（嵌入式）：直接使用 script 标签【只需要在 head 标签中，或者在 body 标签中，使用 script 标签来书写 JavaScript 代码】

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript">
      // alert是javascript语言提供的一个警告框函数，可以接受任意类型的参数，将其提示出来
      alert('hello javaScript!')
    </script>
  </head>
  <body></body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13

alert 是 javascript 语言提供的一个警告框函数，可以接受任意类型的参数，将其提示出来

方式二：外部引入标签

使用 script 标签引入单独的 JavaScript 代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <!--
现在需要使用script 引入外部的js 文件来执行
src 属性专门用来引入js 文件路径（可以是相对路径，也可以是绝对路径）
script 标签可以用来定义js 代码，也可以用来引入js 文件
但是，两个功能二选一使用。不能同时使用两个功能
-->
    <script type="text/javascript" src="01-HelloJS.js"></script>
    <script type="text/javascript">
      alert('国哥现在可以帅了')
    </script>
  </head>
  <body></body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

常用于测试的两个方法:

alert(内容) 弹出警告框，显示内容

console.log(内容) 在浏览器的控制台记录内容

在浏览器中按 F12 进入开发者模式的 console 就是控制台

JS 变量和数据类型

JS 数据的类型:

undefined (所有 js 变量未赋于初始值的时候，默认值都是 undefined.)
null
string （字符串）
number(整数，小数，NaN（非数字），infinity（正无穷），-infinity（负无穷）)
boolean（布尔类型）
object（对象）

五种：null 属于 object

<script type="text/javascript">
  var i
  console.log(i) //undefined,只声明未初始化的i是undefined
  i = 12 //此时i的类型是number
  console.log(typeof i) //typeof()是js语言提供的一个行数用来查看数据类型
  i = 'abc'
  console.log(typeof i) //此时i的类型是string
  var a = 12
  var b = 'abc'
  console.log(a * b) //打印a * b 的值是NaN 非数字非数值 但是是number类型
  console.log(typeof (a * b))
</script>

1
2
3
4
5
6
7
8
9
10
11
12

查看数据类型可以使用 typeof()

JS 的数据类型自动转化

转化成字符串 String(内容)

传什么出来什么的字符串格式，类似于 java 的对象.toString(),变量+"",String.valueOf(内容)

转化成布尔 Boolean(内容)

只有六种情况转化成布尔是 false，六种: undefined null "" 0 NaN false

转化成数字 Number(内容)

undefined -->NaN
null --> 0
"123" --> 123
"00123" --> 123
123abc --> NaN
true --> 1
false -->0

<script type="text/javascript">
  var a = 12
  String(a) //传什么出来什么的字符串格式，类似于java的对象.toString(),变量+"",String.valueOf(内容)
  console.log(typeof a) //string
  //转化成布尔
  console.log(Boolean(undefined)) //转化undefined 是false
  console.log(Boolean(null)) //转化null是false
  console.log(Boolean('')) //转化""是false
  console.log(Boolean(0)) //转化数字0是false
  console.log(Boolean(NaN)) //转化NaN是false
  console.log(Boolean(false)) //转化false是false
  //除了以上6个是false其他都是true
  // 转化成数字
  console.log(Number(undefined)) //转化undefined NaN
  console.log(Number(null)) //转化null是0
  console.log(Number('123')) //转化"123"是123
  console.log(Number('00123')) //转化"00123"是123
  console.log(Number('123abc')) //转化"123abc"是NaN
  console.log(Number(true)) //转化true是1
  console.log(Number(false)) //转化false是0
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

补充：类型自动转化

js 关系（比较）运算

== 等值符,类型相同直接比较值，类型不同转化成相同类型再比较值。

<script type="text/javascript">
  console.log(12 == '12') //true
  console.log(12 == '13') //false 值不相等
  console.log(12 === '12') //false 等同符类型不相等，值相等也不相等
  console.log(true == 'true') //如果是数字，布尔，字符串三者进行比较，转化成数字进行比较，所以是false
  console.log(NaN == NaN) //NaN和所有包括自己都是不相等的
</script>

1
2
3
4
5
6
7

如果是数字，布尔，字符串三者进行比较，转化成数字进行比较。
如果出现了 null 或者 undefined，则不进行类型的转化，null 和 undefined 除了和自己相等就彼此相等。

=== 等同符，类型相同比较值，类型不同直接 false。

注意：

true=="true"//如果是数字，布尔，字符串三者进行比较，转化成数字进行比较，所以是 false

NaN==NaN//NaN 和所有包括自己都是不相等的**

补充**：document.write(内容); 往页面输出内容**

逻辑运算

&&与运算

当表达式全为真。返回最后一个表达式的值
当表达式有一个为真。返回第一个为假的表达式的值

||或运算

当表达式全为假时，返回最后个表达式的值
当只有一个表达式为真。就返回第一个为真的表达式的值

&& 和 || 运算有短路，如果第一个表达式已经得到结果。后面的表达式就不在执行了

<script type="text/javascript">
  //在js语言中，所有的变量都可以作为一个boolean类型的变量去使用
  // undefined  null  ""   0   NaN   false 这六个是false其他都是true
  var a = 'abc'
  var b = true
  var c = null
  var d = false
  /*&&与运算
    1. 当表达式全为真。返回最后一个表达式的值
    2. 当表达式有一个为真。返回第一个为假的表达式的值*/
  console.log(a && b) //全为真 true
  console.log(a && d) //第一个表达式为真 false
  console.log(d && a) //第二个表达式为真 false
  console.log(c && d) //全为假 null
  /*||或运算
    1. 当表达式全为假时，返回最后个表达式的值
    2. 当只有一个表达式为真。就返回第一个为真的表达式的值
    */
  console.log(a || b) //全为真 "abc"
  console.log(a || d) //第一个表达式为真 "abc"
  console.log(d || a) //第二个表达式为真 "abc"
  console.log(c || d) //全为假 false
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

JS 的语句

if-else 语句

var a = true
//if-else分支语句
if (a) {
  console.log('a为真')
} else {
  console.log('a为假')
}

1
2
3
4
5
6
7

switch 语句

//switch语句，不写break会下穿
var b = 1
switch (b) {
  case 0:
    console.log('b为0')
    break
  case 1:
    console.log('b为1')
    break
  default:
    console.log('b为默认值')
    break
}

1
2
3
4
5
6
7
8
9
10
11
12
13

普通 for 循环

//普通for循环
var c = [0, 1, 2, 3]
var d = { key1: 'value1', key2: 'value2', key3: 'value3' }
//数组
for (let i = 0; i < c.length; i++) {
  console.log(c[i])
}

1
2
3
4
5
6
7

增强 for 循环

//增强for循环
for (var i in c) {
  console.log(i)
}
for (var i in d) {
  console.log(i)
}

1
2
3
4
5
6
7

JavaScript 语法

JS 数组

第一种

var arr = new Array(ele1, ele2, ele3)

第二种

var arr = new Array(数组长度)

第三种

var arr = [ele1, ele2, ele3]

var a = new Array(0, 'a', null, true)
console.log(a.length) //4
var b = new Array(5)
console.log(b.length) //5
var c = [0, 'a', null, false]
console.log(c[3]) //第四个元素是false，索引是3

c.push('123') //push可以添加多个元素 ， 尾部添加
console.log(c[4]) //"123"
var i = c.pop() //pop移除最后一个元素并返回
console.log(i) //"123"
var d = c.unshift('abc') //往数组的前面添加一个或多个元素，并且返回新数组的长度
console.log(d) //新数组长度为5
var e = c.shift() //移除数组的第一个元素并且返回该元素
console.log(e) //"abc"
var aa = [0, 1, 2, 3]
console.log(String(aa))
aa.splice(1, 1, 'aaa', 'bbb') //在索引为1的地方开始删除1个元素，在删除后加上2个元素
console.log(String(aa)) // aa = [0, "aaa", "bbb", 2, 3]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

JS 数组特点

可以存放任意类型数据
长度可以任意改变

常用 api

push() 往数组的尾部添加一个或多个元素，并且返回新数组的长度
pop() 移除数组的最后一个元素并且返回该元素
unshift() 往数组的前面添加一个或多个元素，并且返回新数组的长度
shift() 移除数组的第一个元素并且返回该元素
splice(start, deleteCount, value...) 插入、删除或替换数组的元素 start 开始插入或者删除的数组元素下标 deletecount 表示删除的个数 value 要插入的数据，一个或者多个

JS 函数

第一种定义方式：function 函数名 (形参列表){函数体}

function fun1(p) {
  console.log('第一种方式定义的形参是：' + p)
}
fun1('函数1')

1
2
3
4

第二种定义方式：var 函数名=function(形参列表){函数体}

var fun2 = function (p) {
  console.log('第二种方式定义的形参是：' + p)
}
fun2('函数2')

1
2
3
4

第三种定义方式：var 函数名=new Function(形参列表，函数体);

注意参数全部必须用字符串格式。

var fun3 = new Function('p', "console.log('第三种方式定义的形参是：' + p)")
fun3('函数3')

1
2

三种方式的共同点，都可以声明一个函数。

三种方式的区别在于加载的时机不同，第一种会具备优先级，第二三种是顺序加载。第一种无论代码在哪写直接就提到最前面加载了，第二种第三种是代码执行到声明时候才会加载

//测试重载覆盖和加载顺序
var testSame = function () {
  console.log('我使用第二种定义函数的方式定义在前面')
}
function testSame() {
  console.log('我使用第一种定义函数的方式定义在后面')
}
testSame() //我使用第二种定义函数的方式定义在前面

1
2
3
4
5
6
7
8

隐形参数 arguments

//隐形参数 arguments
function testArg() {
  console.log(arguments.length)
  for (let i = 0; i < arguments.length; i++) {
    console.log(arguments[i])
  }
}
testArg(1, 'aa', false)

1
2
3
4
5
6
7
8

特点

js 的函数没有重载的概念，直接覆盖上一次的函数定义
写相同的函数名会按照加载的顺序进行覆盖，如果第一种定义方式和第二种第三种混用，第一种第一方式的函数一定会被覆盖掉
形参的个数和实参的个数没有关系

补充：匿名自调用函数

//匿名自调用函数
;(function (p) {
  console.log('匿名自调用函数:' + p)
})(1)

1
2
3
4

语法：(function(形参列表){函数体})(实参列表)
特点：加载完成之后立即会自己调用自己一次，并且只能调用一次
作用：可以用来初始化一些参数或者是配置

JS 对象

object 形式的自定义对象

//对象的定义
var obj = new Object() //对象实例(空对象)
obj.name = '张三' //给对象定义一个name的属性并赋值为"张三"
obj.fun = function () {
  console.log('obj的姓名是：' + this.name)
}
//调用
obj.fun()

1
2
3
4
5
6
7
8

对象的特性:

动态的添加属性：对象.属性名=值
动态的添加函数：对象.函数名=function(){}
动态的删除属性或者函数
- delete 对象.函数名
- delete 对象.属性名

json 对象形式定义对象

// {}形式定义对象
var person = { name: '李四' }
person.age = 18
person.fun = function () {
  console.log('person的姓名是：' + this.name)
  console.log('person的年龄是：' + this.age)
}
person.fun()

1
2
3
4
5
6
7
8

json 对象取值：

通过.的方式取值 json 对象.x 找 json 的 x 键所对应的值
通过中括号的方式取值 json 对象[x] 注意中括号中如果没有加引号，则 x 代表变量，如果带上引号则代表的是键

console.log(person.name) //通过.的方式取值
console.log(person['age']) //**通过中括号的方式取值

1
2

添加删除值：

// 添加值:
person.sex = '男'
person['address'] = '成都'
// 删除值:
delete person.sex
delete person['age']

1
2
3
4
5
6

json 对象.属性名=值
json 对象[属性名]=值
delete json 对象.属性名
delete json 对象[属性名]

遍历 json 都对象：

for(var 变量名 in json 对象){}

变量名代表键

json 对象[变量名] 代表值

for (var i in person) {
  console.log('key:' + i + ', value:' + person[i])
}

1
2
3

对象机制：

Object 是 js 对象的祖先，所有定义在 Object 里面的方式、属性、特点其他对象都可以使用。

prototype 原型

可以给已经写好的模板添加自定义的属性或者是函数。

JS 的内置函数和对话框

eval(字符串形式的 js 代码)：作用以 js 的方式解析字符串，可以简单的理解成去掉字符串的首尾引号。常见用法: eval("var 变量名="+字符串格式的 js 对象);

**parseInt(字符串) **：作用将传入的字符串转化成整数，特殊用法: parseInt("100abc")-->100 可以用来操作像素 px。

//eval(字符串形式的js代码)：
eval("var a = {name: 'zzz', age: 18}")
console.log('a的姓名：' + a.name + 'a的年龄：' + a.age)
//parseInt(字符串) parseInt("100px")-->100 可以用来操作像素px
console.log(parseInt('123'))
console.log(parseInt('123px'))

1
2
3
4
5
6

parseFloat(字符串)

//parseFloat(字符串)
console.log(parseFloat('10.2'))

1
2

**isNaN() **：判断是否是 NaN

//isNaN
console.log('123是NaN:' + isNaN('123')) //false
console.log('123abc是NaN:' + isNaN('123abc')) //true

1
2
3

isFinite ()：判断是否有限

//isFinite
console.log(isFinite('123')) //true
var c = 1 / 0
console.log(isFinite(c)) //false

1
2
3
4

对话框

alert(内容) 警告框，弹出警告框显示内容

alert('这是警告框')

prompt(内容) 询问框，弹出询问框点击确定返回用户输入的内容，点击取消返回 null

prompt('这是询问框')

confirm(内容) 确认框，弹出确认框显示内容，点击确定返回 true,点击取消返回 false

//confirm(内容)
confirm('这是内容框')

1
2

JavaScript 事件

事件就是用来与页面进行交互的，例如点击登录按钮进行登录就有点击事件。

常用事件

onload    页面加载完成
onclick   单击事件
ondblclick 双击事件
onfocus   成为焦点
onblur    失去焦点
onchange  改变值并且失去焦点
onkeydown 键盘按键
onmousemove 鼠标移动
onmouseover 鼠标移入
onmouseout  鼠标移出
onsubmit    表单提交的时候触发
onmousedown 鼠标按键

1
2
3
4
5
6
7
8
9
10
11
12

事件的注册（绑定）

就是当事件响应后要执行哪些代码，叫做事件的注册或绑定。

静态绑定事件

通过 html 的标签的事件属性字节赋予事件响应后的代码，这种叫静态绑定。例如 onload

动态绑定事件

先通过 js 代码得到标签的 dom 对象，然后再通过dom对象.事件名 = function(){}这种形式赋予事件响应后的代码，叫动态注册。动态注册基本步骤：

获取标签对象
标签对象.事件名 = function(){}

onload 事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript">
      //onload事件调用的方法
      function onloadfun(a, b) {
        let c = a + b
        alert('静态注册onload事件,a+b=' + c)
      }
    </script>
  </head>
  <!-- 静态注册onload事件
    onload事件是浏览器解析完页面之后就会自动触发的事件 -->
  <body onload="onloadfun(1,2)"></body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

onclick 点击事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script type="text/javascript">
      //onload事件调用的方法
      function fun1(a, b) {
        let c = a + b
        alert('静态注册onclick事件,a+b=' + c)
      }
      //动态注册onclick事件
      window.onload = function (a, b) {
        //1.获取标签对象,document是js提供的一个文档对象
        var btn2 = document.getElementById('btn2')
        //2.通过标签对象.事件名 = function(){}
        btn2.onclick = function () {
          alert('动态注册onclick事件,a+b=' + 123)
        }
      }
    </script>
  </head>
  <body>
    <!-- 静态注册 -->
    <button onclick="fun1(1, 2)">静态注册按钮</button>
    <button id="btn2">动态注册按钮</button>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

onblur 失去焦点

输入框由选中状态变成未选中状态。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script type="text/javascript">
      //onblur事件调用的方法
      function fun1() {
        alert('静态注册onblur事件')
      }
      //动态注册onblur事件
      window.onload = function (a, b) {
        //1.获取标签对象,document是js提供的一个文档对象
        var input1 = document.getElementById('input1')
        //2.通过标签对象.事件名 = function(){}
        input1.onblur = function () {
          alert('动态注册onblur事件')
        }
      }
    </script>
  </head>
  <body>
    用户名：
    <input type="text" onblur="fun1()" />
    <br />
    密码：
    <input type="text" id="input1" />
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

onchange 事件改变触发

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script type="text/javascript">
      //onchange事件调用的方法
      function fun1() {
        alert('静态注册onchange事件')
      }
      //动态注册onchange事件
      window.onload = function () {
        //1.获取标签对象,document是js提供的一个文档对象
        var select1 = document.getElementById('select1')
        //2.通过标签对象.事件名 = function(){}
        select1.onchange = function () {
          alert('动态注册onchange事件')
        }
      }
    </script>
  </head>
  <body>
    请选择省份：
    <!-- 静态注册onchange事件 -->
    <select onchange="fun1()">
      <option value="0">--请选择省份--</option>
      <option value="1">四川</option>
      <option value="2">安徽</option>
      <option value="3">江苏</option>
    </select>
    <br />

    <!-- 动态注册onchange事件 -->
    请选择城市：
    <select id="select1">
      <option value="0">--请选择城市--</option>
      <option value="1">成都</option>
      <option value="2">北京</option>
      <option value="3">上海</option>
    </select>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

onsubmit 事件表单提交

常用于表单提交验证。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script type="text/javascript">
      //onsubmit事件调用的方法
      function fun1(a) {
        if (a) {
          alert('静态注册onsubmit事件')
        } else {
          alert('静态注册onsubmit事件，发现问题')
          return false
        }
      }
      //动态注册onsubmit事件
      window.onload = function () {
        //1.获取标签对象,document是js提供的一个文档对象
        var form1 = document.getElementById('form1')
        //2.通过标签对象.事件名 = function(){}a
        form1.onsubmit = function () {
          alert('动态注册onsubmit事件，发现问题')
          return false
        }
      }
    </script>
  </head>
  <body>
    <!-- 静态注册 -->
    <form action="http://localhost:8080" method="GET" onsubmit="return fun1(false)">
      <input type="submit" value="静态注册" />
    </form>
    <!-- 动态注册 -->
    <form action="http://localhost:8080" method="GET" id="form1">
      <input type="submit" value="动态注册" />
    </form>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

BOM

概念

Browser Object Model 浏览器对象模型。将浏览器的各个组成部分封装成对象。

组成

Window：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象

Window：窗口对象

创建
方法
1. 与弹出框有关的方法： alert() 显示带有一段消息和一个确认按钮的警告框。 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
  - 如果用户点击确定按钮，则方法返回 true
  - 如果用户点击取消按钮，则方法返回 false
  prompt() 显示可提示用户输入的对话框。
  - 返回值：获取用户输入的值
2. 与打开关闭有关的方法： close() 关闭浏览器窗口。
  - 谁调用我，我关谁
  open() 打开一个新的浏览器窗口
```
* 返回新的Window对象
```
3. 与定时器有关的方式 setTimeout() 在指定的毫秒数后调用函数或计算表达式。 _ 参数： 1. js 代码或者方法对象 2. 毫秒值 _ 返回值：唯一标识，用于取消定时器，将其传给 clearTimeout() clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
  
  setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。 clearInterval() 取消由 setInterval() 设置的 timeout。
属性：
1. 获取其他 BOM 对象： history location Navigator Screen:
2. 获取 DOM 对象 document
特点
- Window 对象不需要创建可以直接使用 window 使用。 window.方法名();
- window 引用可以省略。方法名();

Location：地址栏对象

创建(获取)：
1. window.location
2. location
方法：
- reload() 重新加载当前文档。刷新
属性
- href 设置或返回完整的 URL。

History：历史记录对象

创建(获取)：
1. window.history
2. history
方法：
- back() 加载 history 列表中的前一个 URL。
- forward() 加载 history 列表中的下一个 URL。
- go(参数) 加载 history 列表中的某个具体页面。
  - 参数：
    - 正数：前进几个历史记录
    - 负数：后退几个历史记录
属性：
- length 返回当前窗口历史列表中的 URL 数量。

DOM 模型

DOM 模型全称是 Document Object Model 文档对象模型。就是把 html 文档的标签、属性、文本都转化成为对象。

理解: window 的层级结构，window 下面有 document,history,location,navigator。

Document 对象

document 对象的理解

Document 管理了所有的 HTML 文档内容
docment 他是一种树结构的文档，层级关系
可以将所有的标签对象化
我们可以通过 document 访问所有的标签对象

常用的方法

document.getElementById()根据标签 id 属性查找 dom 对象
document.getElementsByName() 根据标签 name 属性
document.getElementsByClassName() 根据标签 class 属性
document.getElementsByTagName("button") 根据标签名

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script type="text/javascript">
      function fun1() {
        var input1 = document.getElementById('input1')
        alert('getElementById, input1的值为' + input1.value)
      }
      function fun2() {
        var input2 = document.getElementsByName('input2')
        alert('getElementsByName, input2的值为' + input2[0].value)
      }
      function fun3() {
        var input3 = document.getElementsByClassName('input3')
        alert('getElementsByClassName, input3的值为' + input3[0].value)
      }
      function fun4() {
        var arr = document.getElementsByTagName('button') //获取所有的button
        alert('button个数为' + arr.length)
      }
    </script>
  </head>
  <body>
    用户名：
    <input type="text " id="input1" value="input1" />
    <button onclick="fun1()">校验getElementById</button>
    <hr />
    用户名：
    <input type="text " name="input2" value="input2" />
    <button onclick="fun2()">校验getElementsByName</button>
    <hr />
    用户名：
    <input type="text " class="input3" value="input3" />
    <button onclick="fun3()">校验getElementsByClassName</button>
    <hr />
    <button onclick="fun4()">校验getElementsByTagName</button>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

注意

document 对象几个查询方法优先使用 document.getElementById()
如果没有 id 属性，优先使用 document.getElementByName()查询或者 document.getElementByClassName()
如果 id 属性和 name 属性都没有最后按标签名差

节点常用属性和方法

节点就是标签对象，页面上的节点分为三种，元素节点，文本节点，属性节点。

直接获取节点方式

document.getElementById(id 值) 通过 id 获取元素节点、
document.getElementsByTagName(标签名) 通过标签名获取节点
document.getElementsByName(name 值) 通过 name 获取节点集合，注意低版本 ie 只认识表单及表单域元素的 name,其他元素找的是 id、
**document.getElementsByClassName(className) **

间接获取方式

父节点.childNodes 获取该父节点下的子节点集合
父节点.firstChild 获取父节点的第一个子节点
父节点.lastChild 获取父节点的最后一个子节点
子节点.parentNode 获取该子节点所在的父节点
元素节点.nextSibling 获取下一个兄弟节点
元素节点.previousSibling 获取上一个兄弟节点

注意:除了获取父节点没有浏览器差异性问题，其他获取方式火狐会将文本节点当做节点获取。

节点过滤：

通过节点.nodeType 获取节点的类型元素节点 1 文本节点 3

操作文档对象模型

创建新的元素节点**：document.createElement(标签名)**
尾部追加新的子节点**：父节点.appendChild(新的子节点)**
插入新的子节点**：父节点.insertBefore(新的，在谁之前)**
替换子节点**：父节点.replaceChild(新的，旧的)**
删除子节点**：父节点.removeChild(子节点)**

注意**：如果追加、替换、插入的是已有的节点，则原来的节点会消失，解决方式可以使用克隆。**

克隆的语法:

元素节点.cloneNode(布尔)

true 深度克隆，克隆标签及其中间内容

false 浅层克隆，只克隆标签及其属性不克隆标签中间的内容

window 对象

设置轮询：

window.setInterval(函数|字符串,毫秒数);

返回该轮询唯一的 id

var id = setInterval(function () {
  alert('Hello')
}, 3000)
console.log(id)

1
2
3
4

每三秒弹一次警告框。

清除轮询:

window.clearInterval(轮询的 id)

window.clearInterval(1)

设置延时:

window.setTimeout(函数|字符串,毫秒数);

返回该延时唯一的 id

var id2 = window.setTimeout(function () {
  alert('Hello')
}, 3000)
console.log(id2)

1
2
3
4

3 秒（3000 毫秒）后弹出 "Hello"

清除延时:

window.clearTimeout(延时的 id)

window.clearTimeout(1)

其他对象

history 浏览器二点历史记录(前进后退)

语法:

history.go(整数)

history.go(-1)后退到上一个页面
history.go(1)前进到下一个页面

1
2

location 浏览器的地址栏:

语法:

window.location=新地址控制跳转

window.location = 'www.baidu.com'

navigator 获取浏览器的内核信息:

语法:

navigator.userAgent 可以用来解决浏览器的差异性问题

navigator.userAgent

table 对象

属性：

table 对象.rows 获取该表格下的行集合
tr 对象.cells 获取该行下的列集合
tr 对象.rowIndex 获取该行的索引

方法：

table 对象.insertRow(索引) 往该表格插入新的一行并且返回插入的这一个行元素，如果不写索引默认是尾部追加
table 对象.deleteRow(索引) 删除该表格的对应索引的行
tr 对象.insertCell(索引) 往该行插入新的一列并且返回插入的这一个列元素，如果不写索引默认是尾部追加

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script type="text/javascript">
      function fun1() {
        var table = document.getElementById('table')
        var rows = table.rows
        console.log('table对象的行的集合长度为' + rows.length)
        console.log('table对象的行的集合对象为' + rows)
        console.log('当前行对象索引为' + rows[0].rowIndex)
        var cells = rows[0].cells
        console.log('table对象的行的集合长度为' + cells.length)
        console.log('table对象的列的集合第一个对象的值为' + cells[0].innerHTML)
      }
      function fun2() {
        var table = document.getElementById('table')
        //插入一行，往该表格插入新的一行并且返回插入的这一个行元素，如果不写索引默认是尾部追加
        var newRow = table.insertRow(0)
        var newCell = newRow.insertCell() //插入一列
        newCell.innerHTML = '新插入的一行一列'
      }
    </script>
  </head>
  <body>
    <table id="table" border="1" width="300" height="300" align="center" cellspacing="0">
      <thead>
        <!--  thhead表示表头 -->
        <th>第1列</th>
        <th>第2列</th>
        <!--  th是字体加粗的td标签一般用在表头 -->
        <th>第3列</th>
      </thead>
      <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
      </tr>
      <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
      </tr>
      <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
      </tr>
    </table>
    <hr />
    <button onclick="fun1()">test属性</button>
    <button onclick="fun2()">test方法</button>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

正则表达式对象

创建:

/正则表达式/flags
new RegExp("正则表达式","flags")

flags:

i 忽略大小写

g 全局匹配

ig 同时使用上面两种

方法:

test 查看是否匹配匹配则返回 true 不匹配返回 false

//表示要求字符串中是否包含字母e
var patt = new RegExp('e')
console.log(patt.test('abcde')) //true
console.log(patt.test('abcdE')) //flase
var patt2 = /e/ //等价于var patt = new RegExp("e")

// 表示要求字母a或者b或者c
var patt3 = /[abc]/
console.log(patt2.test('a123'))

//表示要求字符串是否包含小写字母
var patt4 = /[a-z]/
//表示字符串是否包含任意大写字母
var patt4 = /[A-Z]/
//表示字符串是否包含任意数字
var patt5 = /[0-9]/
//表示要求字符串是否包含字母数字下划线
var patt6 = /\w/
//表示要求字符串是否包含至少一个a
var patt7 = /a+/
//表示要求字符串是否包含0个或者多个a
var patt8 = /a*/
//表示要求字符串是否包含一个或者0个a
var patt9 = /a?/
//表示是否包含连续三个a
var patt10 = /a{3}/
//表示是否包含3-5个a
var patt11 = /a{3,5}/
//表示是否包含至少三个连续a
var patt12 = /a{3,}/
//表示必须以a开始
var patt13 = /^a/
//表示必须以a结束
var patt14 = /a$/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

其他补充

操作属性节点

第一种:

元素节点.属性名=值

元素节点.属性名

第二种：

元素节点.setAttribute(键，值)

元素节点.getAttribute(键)

一般的属性可以通过第一种方式操作，如果发现第一种操作不能获取到属性，通过第二种方式一定可以操作。

JS 操作 CSS

1)操作 css 的单个属性

元素节点.style.属性名=值

注意点:

1.属性名如果本身有-，则会将-去掉并且将后面的那个字母转为大写。例如: font-size background-color

2.如果属性没有设置则属性默认的值是空字符串

2)操作整个 style 属性

元素节点.style.cssText="属性:值;属性:值....."

3)操作 class 属性

1.元素节点.className="值"

2.元素节点.setAttribute("class","值")

表单

获取表单的专用方式:

document.formName

document.forms[id]

document.forms[idx]

document.forms[name]

表单的属性:

action

method

name

elements 获取该表单下的表单域元素集合

...

表单的方法:

form 对象.submit() 提交表单

form 对象.reset() 重置表单

表单的事件:

onsubmit 在表单提交的时候触发

onreset 在表单重置的时候触发

表单域元素:

获取表单域元素的专用方式:

form 对象.表单域 name

form 对象.elements[idx]

form 对象.elements[id]

form 对象.elements[name]

表单域的属性:

type

value

name

disabled 失效，灰掉值不可以修改，并且提交的时候不会提交

readonly 只读值不可以修改，但是提交的时候可以提交

form 获取该表单域元素所在的表单对象

表单域的方法:

表单域.focus() 使之成为焦点

表单域.blur() 使之失去焦点

文本域(text,password,textarea):

获取当前值:

value

获取默认值:

defaultValue

补充:

placeholder 文本域中灰色的默认字体

单选按钮:

获取单选按钮的值:

1)遍历单选按钮集合，查看 checked 属性，为 true 则为选中。

2)表单对象.单选按钮 name.value

下拉列表:

获取值:

1)遍历 option 集合，查看 selected 属性，为 true 则为选中。(获取 option 集合，1.通过 getChildNodes(select 对象) 2.select 对象.options)

2)直接通过 select 对象.value

#JavaWeb

上次更新: 2025/02/26, 08:57:57

← JSP Ajax→