开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript -> 正文阅读

[JavaScript知识库]JavaScript

JavaScript

文章目录

JavaScript

1、格式

行内写法

<script> 
	//注释
</script>

外部导入

<script src="JS文件路径"></script>

<!--
	type不用显式定义，默认也是JavaScript
	script标签需要成对出现
-->
<script type="text/javascript">
</script>

2、数据类型

变量定义

//在ES6中推荐使用let定义局部变量
var 变量名 = 变量值;
let 变量名 = 变量值;

基本数据类型

number：数值型，不区分整数和小数。

NaN //not a number
Infinity //表示无限大

字符型：“字符”，‘字符’
布尔值：true，false

比较运算符：

== //等于：类型不同，值相同，会判定为true，"1" 和 1会判定为true
===	//绝对等于：类型相同，值相同，才会判定为true

数组：JS数组不需要数组中的数据为相同类型

//保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
//第二种定义方法
new Array(1,2,3,4,5,'hello');

对象：对象使用大括号表示

/*
对应于Java中的 Person person = new Person();
大括号中的采用键值对的方式创建属性并赋值
类同于Java中在类中定义完属性之后，在创建对象的时候给属性赋值
*/
var person = {
    name: "tian",
    age: 1,
    sex: "男"
}

须知：
- NaN === NaN，这个与所有的数值都不相等，包括自己。
- 只能通过isNaN（NaN）来判断这个数是否是NaN。

2.1、严格检查模式

前提Idea需要设置支持ES6语法，在设置中进行设置。
"use strict"：严格检查模式，预防JS随意性导致的一些问题。
该语句必须写在JS的第一行

<script>
    "use strict"

	//在ES6标准中局部变量推荐使用let
	let i = 1;
</script>

2.2、字符串

基本字符串使用''或者""包裹

多行字符串编写：使用**``**进行包裹

//tab 上面 esc下面
var msg =`
	hello
	world
	你好呀
	nihao
	`

模板字符串：可以对字符串进行拼接

//模板字符串, 要使用 ` `进行包裹，用 ${} 进行取值
let name = "tian";
let msg = `你好, ${name}`;

字符串的可变性，不可变。
- 对已经定义好的字符串不可再进行修改

大小写转换

let student = "abcdDDDFG";

//注意，这里是方法，不是属性了
student.toUpperCase();
student.toLowerCase();

字符串截取

student.substring(1)	//从第一个字符串截取到最后一个字符串
student.substring(1,3)	//[1,3)

索引：显示该字符在字符串中第一次出现的位置
```
student.indexof('a')
```

2.3、数组

定义：

let arr = [1,2,3,4,5,6];//通过下标取值和赋值

长度：
```
arr.length
```
- 假如给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失。
indexOf：通过元素获得下标索引
```
arr.indexOf(2)
1
```
- 字符串的"1"和数字 1 是不同的
slice()：截取Array的一部分，返回的一个新数组，类似于String中substring

push()、pop()：在尾部加入和取出数据

//push：压入到尾部
//pop：弹出尾部的一个元素

unshift()、shift()：在头部加入和取出数据

//unshift：压入到头部
//shift：弹出头部的一个元素

排序：sort()

["B","C","A"]
arr.sort();
["A","B","C"]

反转：reverse()

["A","B","C"]
arr.reverse();
["C","B","A"]

数组拼接：concat()
```
["B","C","A"]
arr.concat([1,2,3]);
["B","C","A",1,2,3]
```
- 注意：concat()不会修改原数组，会返回一个新的数组。
连接符：join
```
["A","B","C"]
arr.join("-");
"A-B-C"
```

多维数组

let arr = [[1,12,2], ["a",1,1],["2",1,"a"]];

2.4、对象

定义：

var 对象名 = {
	属性名：属性值，
	属性名：属性值，
	属性名：属性值
}
//定义了一个person对象，它有四个属性
var person = {
	name:"Tom",
	age:3,
	email:"123456798@QQ.com",
	score:66
}

多个属性之间用逗号隔开，最后一个属性不加逗号。
JavaScript中的所有的键都是字符串，值是任意对象。
使用一个不存在的对象属性，不会报错！undefined。

删除属性：delete
```
delete person.name
```
添加属性：直接给新属性添加值
```
person.sex = "男";
```

判断属性值是否在这个对象中

`age` in person //true

`toString` in peroson	//true，继承

判断一个属性是否是这个对象自身拥有的 hasOwnProperty()。

person.hasOwnProperty('toString')	//false
person.hasOwnProperty('age')	//true

2.5、iterator

ES6新特性

使用Iterator遍历数组、Map和Set集合

遍历集合

let arr = [1,2,3,5,4,6]

for (let x for arr) {
    console.log(x);
}

遍历Map

let map = new Map([["c",12],["h",84],["t",48]]);

for (let x for map) {
    console.log(x);
}

遍历Set

let set = new Set([1,2,57,8]);

for (let x for set) {
    console.log(x);
}

3、函数

函数定义

方式一

function test() {
    
}

方式二：匿名函数

let test2 = function() {
    
}

手动抛出异常，typeof：判断变量的类型

let test2 = function(x) {
    //手动抛出异常 typeof：判断变量的类型
    if (typeof x !== "number") {
        throw "not a number";
    }

    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

arguments

arguments是JS中的一个关键字，它包含传递进来的所有参数，是一个数组。

function test(a, b) {
    console.log("a：" + a);
    console.log("b：" + b);
    for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}

问题：arguments包含所有的参数，我们有时候只想使用多余的参数来进行附加操作。

rest：ES6新特性

...rest：固定写法，用于接收参数，只能写在最后面。

function test2(a, b, ...rest) {
    console.log("a：" + a);
    console.log("b：" + b);
    console.log(rest);
}

方法

方法定义：方法就是将函数放在对象中，在对象中只有两个：属性和方法。

let tian = {
    name: "cht",
    birth: 2000,
    //方法：方法就是将函数放在对象中
    age: function () {
        //获取当前的日期
        let now = new Date().getFullYear();
        return now - this.birth;
    }
}

4、面向对象编程

在JavaScript中：

类：模板
对象：具体实例

原型

定义：每一个javascript对象(除null外)创建的时候，都会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。
- 在JavaScript中每一个对象最终都会关联Object对象，也就是说Object是所有对象的原型（跟Java中相同，Object是所有类的父类）。
- 在JavaScript中，每个函数对象都有一个prototype属性，这个属性指向函数的原型对象。普通对象不存在这个属性
  - 通过prototype属性与原型进行关联
__proto__：每个对象都会有这个属性，这个属性会指向该对象的原型
- __proto__与prototype
  - __proto__是实例指向原型的属性
  - prototype是对象或者构造函数指向原型的属性
  - 所有对象（不包括Object.prototype）有__proto__属性，函数对象有prototype属性；
  - 生成对象时，对象的__proto__属性指向当前函数的prototype属性。

class继承

定义一个类：class关键字是在ES6中新引入的

//定义一个学生类，ES6新增
class Student{
    //构造器
    constructor(name) {
        this.name = name;
    }

    //定义方法
    f() {
        alert("hello");
    }
}

继承：extends

/继承
class Student1 extends Student{
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }

    //自定义方法
    f1() {
        alert("hh";
    }
}

5、操作BOM对象

BOM：浏览器对象模型（Browser Object Model）

window

代表浏览器窗口

//弹窗
window.alert(1);
//内窗口高度
window.innerHeight;
//内窗口宽度
window.innerWidth;
//外窗口高度
window.ouetrHeight;
//外窗口宽度
window.outerWidth;

screen

代表屏幕尺寸

screen.width;
screen.height;

location

代表当前页面的URL信息

6、操作DOM对象

DOM：文档对象模型（Document Object Model）

浏览器网页就是一个DOM树形结构

更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点

操作DOM节点

获得DOM节点

<div id='father'>
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p1</p>
</div>

操作：要将script块写在body中，不然又得值可能获取不到

<!--
获得三个节点，对应CSS的选择器
-->
<script>
    //标签选择器，通过标签获得节点
    let h1 = document.getElementsByTagName('h1');
    //id选择器
    let p1 = document.getElementById('p1');
    //类选择器
    let p2 = document.getElementsByClassName('p2');

    let father = document.getElementById('father');

    //获取父节点下的所有子节点
    let children = father.children;
</script>

更新DOM节点

<div id="id1">
</div>

操作

<script>
    let id1 = document.getElementById('id1');

    //修改节点文本的值
    id1.innerText = "123456";
    //解析HTML文本标签
    id1.innerHTML = '<strong>123</strong>'

    //修改样式，操作CSS
    id1.style.color = 'red';
    id1.style.fontSize = '20px';
</script>

删除DOM节点

<div id='father'>
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

操作

<script>
    //删除节点：先获取父节点，在删除自己
    let p1 = document.getElementById('p1');
    //获取父节点
    let father = p1.parentElement;

    father.removeChild(p1);
</script>

插入DOM节点

<p id="java">Java</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

移动节点：将id为java的节点移动到div中，已存在的节点。

//将id为java的标签移动到div中，已存在的节点
let js = document.getElementById('java');
let list = document.getElementById('list');
//追加一个节点到原节点后面
list.append(js);

创建新节点

//通过JS创建一个新的节点
let newP = document.createElement('p');    //创建一个p标签
//给新节点配置属性
newP.id = 'newP';
newP.innerText = 'hello';
//追加新的节点
list.append(newP);

创建一个标签节点

//创建一个标签节点
let scriptElement = document.createElement('script');
//对属性进行赋值，通过该方式可以对任意值进行赋值
scriptElement.setAttribute("type", "text/javascript");
list.append(scriptElement);

修改body节点

//创建一个style标签
let styleElement = document.createElement("style"); //创建一个空style标签
styleElement.setAttribute('type', 'text/css');  //设置标签的属性
styleElement.innerHTML = 'body{background-color: green}';   //设置标签的内容
//追加新的节点
document.getElementsByTagName('head')[0].appendChild(styleElement); //添加节点

7、操作表单

文本框----text
下拉框----select
单选框----radio
多选框----checkbox
隐藏域----hidden
密码框----password
…

操作表单

获得要提交的信息

<form action="post">
    <p>
        <span>用户名：</span> <input type="text" id="username">
    </p>

    <p>
        <span>性别：</span>
        <input type="radio" id="boy" name="sex" value="男"> 男
        <input type="radio" id="girl" name="sex" value="女"> 女
    </p>
</form>

操作

<script>
    let text = document.getElementById('username');
    //获取输入框的值：
    text.value
    //修改输入框的值
    text.value = 'user';

    //获取复选框的值
    let boy = document.getElementById('boy');
    let girl = document.getElementById('girl');
    //被选中则返回true
    boy.checked
</script>

提交表单

<!--
    表单绑定提交事件
    onsubmit = 绑定一个提交检测函数
    将这个结果返回给表单，使用onsubmit接收：οnclick="return chick()"
-->
<form action="https://www.baidu.com/" method="post" onclick="return chick()">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username">
    </p>

    <p>
        <span>密码：</span> <input type="password" id="input-password">

    </p>

    <input type="hidden" id="md5-password" name="password">
    <button type="submit">提交<\/button>
</form>

导入MD5加密工具类

<script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.js"></script>

具体操作

<script>
    function chick() {
        let uName = document.getElementById('username');
        let pwd = document.getElementById('input-password');
        let md5pwd = document.getElementById('md5-password');
        //使用MD5加密
        md5pwd.value = md5(pwd.value);
        //可以校验表单提交的内容，true为通过，false为不通过
        return true;
    }
</script>

8、jQuery

jQuery库，里面存在大量的JavaScript函数。

公式：$(选择器).action(事件函数)

<a href="" id="test">点击</a>

<script>
    //jQuery公式：$(选择器).action
    //选择器就是css选择器
    $('#test').click(function () {
        alert('hello jQuery');
    })
</script>

选择器
- id选择器：$('#id')
- class选择器：$('.class')
- 标签选择器：$('标签名')
- *选择器：$('*')

事件

mouse：<span id="mouseMove"></span>
<div id="divMove">
    鼠标移动
</div>


<script>
    //当网页元素加载完毕之后响应事件
    /*
        $(document).ready(function () {

        });
    */
    //简化之后
    $(function () {
        //参数e中包含了从mousemove事件中获取的鼠标坐标
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('X：' + e.pageX + 'Y：' + e.pageY);
        });
    });
</script>

操作DOM

<ul id="test_ul">
    <li class="Java">Java</li>
    <li name="JavaScript">JavaScript</li>
</ul>

<script>
    //获取第二个li标签的值，通过属性选择器获取标签
    $('#test_ul li[name=JavaScript]').text();
    //修改值
    // $('#test_ul li[name=JavaScript]').text('JS');
    //操作CSS
    $('#test_ul li[name=JavaScript]').css('color', 'red');
</script>