Web前端入門 JavaScript基礎

阿新 • • 發佈：2020-12-09

1、初識JavaScript

1.1、JavaScript是什麼？

HTML(骨架，元素，結構)
CSS(表現，效果，狀態)
JS(響應行為，互動，複雜操作)

JS是一種基於原型、動態型別、解釋型、弱型別、的指令碼語言

傳統語言： OOL 基於類/物件=>例項
Javascript：基於原型，物件(萬物皆物件)，原型可以指定，方法可靈活使用
指令碼語言：依賴環境(宿主環境)執行，瀏覽器可以使用DOM/BOM等，還有nodeJS(服務端)
弱型別/動態型別：變數宣告不需要規定型別，並且可以相互轉換
解釋型：沒有編譯過程，不生成其他可執行檔案，完成語法分析後逐行解析執行(暫時這麼理解)

1.2、JavaScript在客戶端的三大組成

ECMAScript es5 6 7 語法，使用規則(等同於html裡的<>和css裡的{})
ES是JS的標準 JS是ES的實現
BOM BrowserObjectModel 瀏覽器物件模型，瀏覽器提供的工具箱，我們可以直接使用
DOM DocumentObjectModel 文件物件模型，頁面元素和方法的整合工具箱，我們可以直接使用

前端體系

廖雪峰

jQuery

2、快速入門

2.1、引入JavaScript

內部標籤

<script>
    // script標籤內，編寫JS程式碼
    alert("hello,world!" 
);
</script>

外部引入

// 注：script必須成對出現
<script src="./js/hello.js"></script>

2.2、基本語法

/*JavaScaipt嚴格區分大小寫*/
<script>
    //宣告變數 變數名 = 值
    let num = 30;   //ES6(區域性變數)
    let a = 10, b = 20, c = 30;
    var text = 66;  //ES5(全域性變數)
    if (num > 20 && num < 50) {
        console. 
log("true");	//在控制檯列印變數
    } else {
        console.log("false");
    }
    alert(text);
    console.log(a + "\t" + b + "\t" + c);
</script>

2.3、資料型別

JS分為二大資料型別

基本資料型別：數值型別、字串型別、布林型別、undefined型別、null型別

複雜資料型別：物件型別

number

js中不區分小數和整數

123 		//整數
123.1		//浮點數123.1
1.123e3		//科學計數法
- 99		//負數
NaN			//not a number  (NaN === NaN  //false)
Infinity 	//正無窮大
- Infinity 	//負無窮大
/*
    1.不會改變的量是常量		（常量必須給初始值）
    2.不能改變的量是常量	一旦嘗試修改，將會報錯
*/
const k = 6;

字串

‘abc’

“hello,world!”

boolean

true,false

邏輯運算

&& 兩個都為真，結果為真

|| 一個為真，，結果為真

! 真即假，假即真

比較運算子

= 賦值

== 等於（型別不一樣，值一樣，也會判斷為true）

=== 絕對等於（型別一樣，值一樣，結果為true）

注：

NaN===NaN,這個與所有的數值都不相等，包括它本身
只能通過isNaN(NaN)來判斷這個數是否是NaN

浮點數問題：

console.log(1/3===3/2);		//false

儘量避免使用浮點數運算，存在精度問題！

console.log(Math.abs(1/3)<3/2);	//true

undefined

/*
  1.宣告變數未賦值就是undefined
  2.undefined === undefined 	//true
  3.千萬不要從undefined //身上讀取任何屬性，否則會報錯
  4. 物件中訪問不存在的屬性，返回undefined
  */
console.log(s);		//不明確的 未定義

null

表示空（指標物件，指向一個不存在的區域）
typeof(null) //返回object型別

陣列

//保證程式碼的可讀性
let arr = [66,77,88,'hello',null,true];		//arr[2] 88

取陣列下標：如果越界了，就會undefined

物件

物件是大括號{},陣列是中括號[]~

每個屬性之間使用逗號隔開，最後一個不需要新增

// Person person = new Person(1,2,3,4,5);
let person = {
    name:'張三',
    age:18,
    tags:['Java','C++','WEB']
}

取物件的值：person.屬性

2.4、嚴格檢查格式

// 'use strict'; //嚴格檢查模式，預防js的隨意性導致產生的一些問題
// 建議放在第一行
//區域性變數建議使用let去定義
let i = 3;

3、資料型別

3.1、字串

正常字串使用單引號，或者雙引號包裹
這是需要進行轉義字元 \

常見轉義

\n 換行

\t 製表位(tab)

1、多行字串編寫

let text = `hello world 你好啊！`;
console.log(text);		//hello world 你好啊！

2、模板字串（允許換行）

let name = '張三';
let text = `hello world 你好啊！${name}`;
console.log(text);	//hello world 你好啊！張三

3、字串

let student = 'hello,world';
console.log(student.length);	//11

student.toUpperCase();	//轉換大寫	HELLO,WORLD
student.toLowerCase()；	//轉換小寫	hello,world

console.log(student.charAt(1));		//返回在指定位置的字元	e
console.log(student.indexOf('w'));	//查詢某個字串首次出現的索引位置	6
console.log(student.substring(1));	//從第一個字串擷取到最後一個字串	ello,world

console.log(student.substring(1,5));	//包含前不包含後	ello

console.log(student.split());	//分割為陣列

3.2、陣列

Array可以包含任意型別的陣列（js）

let arr = [1,2,3,4,5,'null'];	//通過下標賦值和取值
arr[2];			//取值
arr[5] = 99;	//賦值

1、長度

arr.length

注：如果給arr.length賦值，陣列大小就會發生變化~，如果賦值過小，元素就會丟失

2、indexOf,通過元素下標獲得索引

let arr = [1,2,3,4,5,'1','1'];
arr.indexOf(1);		//0
arr.indexOf('1');	//5
//字串‘1’和數字1是不同的

3、**slice() **擷取Array的一部分，返回一個新陣列，型別與String中substring

4、push()，pop() 尾部

push: 壓入到尾部
pop:彈出尾部的一個元素

5、unshift()，shift()頭部

unshift:壓入到頭部

shift:彈出頭部的一個元素

6、排序：sort()

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

7、元素反轉：reverse()

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

8、拼接：concat()

arr.concat(1,2,3);
 ["C", "B", "A", 1, 2, 3]

注：concat()並沒有修改陣列，只是會返回一個新的陣列

9、連線符：join

使用拼接陣列，使用特定的字串連線

arr.join('-');
"C-B-A"

10、多維陣列

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

陣列：儲存資料（如何存，如何取）

3.3、物件

若干個鍵值對

let 物件名 = {
    屬性名：屬性值,
    屬性名：屬性值,
    屬性名：屬性值
}

//定義person物件，它具有四個屬性
let person = {
    name:'小林',
    age:18,
    email:'@qqcom',
    score:88
};

js中物件，{……}表示一個物件，鍵值對描述屬性xxxx:xxxx,多個屬性使用逗號隔開，最後一個屬性不加逗號

JavaScript中的所有的鍵都是字串，值是任意物件

1、物件賦值

person.score = 99;
99
person.score
99

2、訪問一個不存在的物件屬性，不會報錯！返回undefined

person.aa
undefined

3、動態的刪、減屬性，通過delete刪除物件的屬性

delete person.score
true
person
{name: "小趙", age: 18, email: "@com"}

4、動態的新增

person.score = 99;
99
person
{name: "小趙", age: 18, email: "@com", score: 99}

5、判斷屬性值是否在這個物件中！

'age' in person
true
//繼承
'toString' in person
true

6、判斷一個屬性是否是這個物件自身擁有的hasOwnProperty()

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

3.4、流程控制

if判斷

let score = 99;
if(score > 90){
    alert("不錯");
}else if(score < 90){
    alert("繼續努力");
}else{
    alert('放學別走');
}

while迴圈，避免程式死迴圈

let i = 0;
while(i<=100){
    i++;
    console.log(i);
}

var k = 0;
do{
    k++;
    console.log(k);
}while(k<6);

for迴圈

for(let i = 0;i < 100;i++){
    console.log(i);
}

foreach迴圈

ES5.1引入

let arr = ['小趙',22,null,true,undefined];
arr.forEach(function (val) {
    console.log(val);
});

for…in

let arr = ['小趙',22,null,true,undefined];
for (var key in arr) {
    if (arr.hasOwnProperty(key)) {
        console.log('存在');
        console.log(arr[key]);
    }
}

3.5、Map和Set

ES6的新特性~

Map：

// 學生的姓名    學生的成績
// let names = ['tom', 'jack', 'lida'];
// let score = [88, 99, 100];

let map = new Map([['tom', 88], ['jack', 99], ['lida', 100]]);
let name = map.get('lida');  //通過key獲取value
console.log(name);
map.set('admin', 666);   //新增或修改
map.delete('jack');     //刪除

Set：無序不重複的集合

let set = new Set([3, 6, 9, 6, 9, 5, 5, 8]); //Set可以去重
set.add(66);    //新增
set.delete(6);  //刪除
console.log(set.has(66));   //是否包含該值	true
console.log(Array.from(set));       //輸入set裡面所有元素

3.6、iterator迭代器

ES6新特性

//通過for of   / for in 下標
let arr = [66,77,88];
for(let x of arr){		//in遍歷下標  of遍歷值
    console.log(x);
}

遍歷map

let map = new Map([['tom',99],['jack',65],['lida',100]]);
for(let x of map){
    console.log(x);
}

遍歷set

let set = new Set([99,66,55]);
for(let x of set){
    console.log(x);
}

4、函式及面向物件

4.1、函式定義及變數作用域

函式：對函式內部的程式碼段進行封裝。目的：複用

定義方式一

絕對值函式

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

一旦執行到return代表函式結束，返回結果！

如果沒有執行return，函式執行完也會返回結果，該結果預設就是undefined

定義方式二

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

function(x){……}這是一個匿名函式，但是可以把結果賦值給abs,通過abs就可以呼叫函式

方式一和方式二等價！

呼叫函式

abs(10) //10

abs(-10) //10

引數問題：js可以傳任意個引數，也可以不傳遞引數~

引數進來是否存在？假設不存在引數，如何規避

let abc = function(y) {
    if(typeof y!=='number'){
        throw 'Not a number';
    }  
    if(y>0){
        return y;
    }else{
        return -y;
    }
}

arguments

arguments是js免費贈送的關鍵字；代表傳遞進來的所有引數，是一個數組！

function pp(a,b){
    if(arguments.length>2){
        for(let i = 0;i<arguments.length;i++){
            console.log(arguments[i]);
        }
    }
}

問題：arguments，包含所有的引數，我們有時候想使用多餘的引數來進行附加操作，需要排除已有的引數~

rest，獲取除了已經定義的引數之外的所有引數~ ES6新特性

function kk(a, b,...rest) {
    console.log('a=>' + a);
    console.log('b=>' + b);
    console.log(rest);
}

注：rest引數只能寫在最後面，必須用…標識

4.2、變數的作用域

在Javascript中，var定義變數實際是有作用域的

假設在函式體中宣告，則在函式體外不可以使用~（閉包）

function method() {
    var x = 6;
    x += 4;
    console.log(x);
}
x += 6;  //Uncaught ReferenceError: x is not defined

如果兩個函式使用了相同的變數名，只要在函式內部，就不衝突

function method() {
    var x = 6;
    x += 4;
    console.log(x);
}

function method1() {
    var x = 10;
    x += 6
    console.log(x);
}

內部函式可以訪問外部函式的成員，反之則不行

function method() {
    let x = 6;
    //內部函式可以訪問外部函式的成員，反之則不行
    function method1() {
        var y = x += 6
        console.log(x);
    }
    let z = y + 5;  //Uncaught ReferenceError: y is not defined
}

假設，內部函式變數和外部函式的變數重名！

function fun(){
    let p = 6;
    function fun1(){
        let p = 'A';
        console.log('inner=>'+p);
    }
    console.log('outer=>'+p);
    fun1();
}

假設在JavaScript中函式查詢變數從自身函式開始~，由內向外查詢，假設外部存在這個同名的函式變數，則內部函式會遮蔽外部函式的變數

提升變數的作用域

function method() {
    var x = 'x' + y;
    console.log(x);
    var y = 'y';
}
method();

結果：xundefined

說明：js執行引擎，自動提升了y的宣告，但是不會提升變數y的賦值~

function method1() {
    let y;
    let x = 'x' + y;
    console.log(x);
    y = 'y';
}

method1();

這個是在js建立之初就存在的特性，養成規範：所有的變數定義在函式的頭部，不要亂放，便於程式碼維護

function method2(){
    var x = 1,
        y = 5,
        z,i,a;  //undefined
}
//之後隨意用

全域性函式

//全域性變數
var l=9;
function a(){
    console.log(l);
}
a();
console.log(l);

全域性物件：window

var k = '666'
    alert(k);
    alert(window.k);  //預設所有的全域性變數，都會自動繫結在window物件下

alter()這個函式本身也是一個window變數

規範

由於我們所有的全域性變數都會繫結到我們的window上，如果不同的js檔案，使用了相同的全域性變數，衝突–>如何能夠減少衝突？

//唯一全域性變數
var tamallApp = {};

//定義全域性變數
tamallApp.name = 'taobao';

tamallApp.add = function(a,b){
    return a + b;
}

把自己的程式碼全部放入自己定義的唯一名稱空間名字中，減低全域性衝突的問題~

jQuery

區域性作用域 let

function doSomething(){
    for(var i = 1;i<=100;i++){
        console.log(i);
    }
    console.log(i+1);    //問題 i 出了這個作用域還可以使用
}
doSomething();

ES6 let關鍵字，解決區域性作用域衝突的問題

function doSomething(){
    for(let i = 1;i<=100;i++){
        console.log(i);
    }
    console.log(i+1);    //Uncaught ReferenceError: i is not defined
}
doSomething();

建議使用let去定義區域性作用域的變數

常量 const

在ES6之前，怎樣定義常量：只要用全部大寫字母命名的變數就是常量：建議不要修改這樣的值~

var PI = '3.14';
console.log(PI);

PI = '886';  //可以改變這個值
console.log(PI);

在ES6引入了常量關鍵字const

//常量必須給初始值	Uncaught SyntaxError: Unexpected token ';'
const PI = '3.14';   //只讀變數
console.log(PI);
PI = '886';  //不可改變，如果強行更改，則報錯
console.log(PI); //Uncaught TypeError: Assignment to constant variable

4.3、方法

定義方法

方法就是把函式放在物件的裡面，物件只有兩個東西：屬性和方法

var person = {
    name:'小趙',
    birth:2003,
    //方法
    age:function(){
        //今年 - 出生的年
        var now = new Date().getFullYear();
        return now - this.birth;
    }
}
//屬性
person.name
//方法,一定要帶()
person.age();

this代表什麼？

function getAge() {
    var now = new Date().getFullYear();
    return now - this.birth;
}
var person = {
    name: '小趙',
    birth: 2003,
    //方法
    age: getAge
}

//person.getAge();  ok
//getAge()  NaN	window

this是無法指向的，是預設指向呼叫它的那個物件

apply 在js中可以控制this指向

getAge.apply(person,[]);    //this指向了person這個物件，引數為空

4.4、箭頭函式（新特性）

普通函式：fcuntion () {}

箭頭函式: () => {}

區別：寫法簡潔了。

當函式內部有且僅有一條語句時，並且這條資料是return 語句。可以改寫

function fn () {
    return a + b
}
//可以改寫為：
() => a + b

注：當箭頭函式有且僅有一形參時，形參的括號可以省略，如果沒有形參或者有多個形參，則括號不能省略

5、內部物件

標準物件

typeof 123
"number"
typeof '123'
"string"
typeof null
"object"
typeof true
"boolean"
typeof []
"object"
typeof {}
"object"
typeof NaN
"number"
typeof Math.random
"function"
typeof undefined
"undefined"

5.1、Date

基本使用

var now = new Date();    //Sat Dec 05 2020 11:41:08 GMT+0800 (中國標準時間) {}
now.getFullYear();   //年
now.getMonth();      //月    0~11 代表月
now.getDate();   //日
now.getDay();    //星期幾
now.getHours();  //時
now.getMinutes();    //分
now.getSeconds();    //秒

now.getTime();       //時間戳    全世界統一 1970 1~1 0:00:00 毫秒數
console.log(new Date(1607139796425));    //時間戳轉為時間

轉換

now.toDateString();     //年月日(顯示不同)
"Sat Dec 05 2020"
now.toLocaleDateString();   //年月日
"2020/12/5"
now.toTimeString()  //時分秒
"14:43:47 GMT+0800 (中國標準時間)"
now.toLocaleString();   //年月日時分秒
"2020/12/5 下午2:43:47"
now.toGMTString();      //GMT標準時間
"Sat, 05 Dec 2020 06:43:47 GMT"		//注：呼叫的是一個方法，不是一個屬性！

5.2、JSON

json是什麼

早期，所有資料傳輸習慣使用XML檔案！

JSON(JavaScript Object Notation, JS 物件簡譜) 是一種輕量級的資料交換格式
簡潔和清晰的層次結構使得JSON 成為理想的資料交換語言
易於人閱讀和編寫，同時也易於機器解析和生成，並有效地提升網路傳輸效率

在JavaScript一切皆為物件、任何js支援的型別都可以用JSON來表示；number,string……

格式：

物件：{}
陣列：[]
所有的鍵值對：key:value

JSON字串和JS物件的轉化

var user = {
    name: '張三',
    age: 18,
    sex: '男'
}

//物件轉換為json字串 "{"name":"張三","age":18,"sex":"男"}"
var jsonUser = JSON.stringify(user);

//json字串轉換為物件  引數為json字串
var obj = JSON.parse('{"name":"張三","age":18,"sex":"男"}');

JSON和JS物件的區別

var obj = {a:'hello',b:'world'};
var json = {"a":'hello',"b":'world'};

6、面向物件程式設計

6.1、什麼是面向物件？

JavaScript、Java、C#、……面向物件：Js有些區別！

類是物件的型別
物件是類的例項

6.2、原型物件

var student = {
    name: '小趙',
    age: 22,
    run: function () {
        console.log(this.name + "run……");
    }
};
var xiaoming = {
    name: 'xiaoming',

};
//小明的原型 是student
xiaoming.__proto__ = student;
xiaoming.run();	//小明具有跑的方法

6.3、class物件（ES6新特性）

function student(name) {
    this.name = name;
}

//給studnet新增一個方法
student.prototype.hello = function () {
    alert('hello');
};

class關鍵字，是在ES6引入的

定義一個類,屬性、方法

//定義一個學生的類
class student {
    constructor(name) {
        this.name = name;
    }
    hello(){
        alert('hello');
    }
}

var xiaoming = new student('xiaoming');
var xiaoli = new student('xiaoli');
xiaoming.hello();

2.繼承

//定義一個學生的類
class student {
    constructor(name) {
        this.name = name;
    }
    hello() {
        alert('hello');
    }
}

class pupil extends student {
    constructor(name, grade) {
        super(name);
        this.grade = grade;
    }

    myScore(){
        alert('我是一名小學生！');
    }
}

var xiaoming = new student('xiaoming');
var xixi = new pupil('李四',3);

本質：檢視物件原型

proto: student

原型鏈__proto__

原型鏈

7、操作Bom元素

7.1、瀏覽器介紹

JavaScript和瀏覽器的關係？

JavaScript誕生就是為了能夠讓它在瀏覽器中執行！

BOM:瀏覽器物件模型

IE6~11
Chrome
Safari
FireFox
Opera
……

第三方

QQ瀏覽器
360瀏覽器
搜狗瀏覽器
……

7.2、window物件

window 代表瀏覽器視窗

window.innerHeight
150
window.innerWidth
829
window.alert('666');

7.3、navigator

navigator 封裝了瀏覽器資訊

navigator.platform
"Win32"
//不常使用navigator物件，因為會被人為修改！

7.4、screen

screen 代表螢幕尺寸

screen.width;
1920
screen.height;
1080

7.5、location

location 代表當前頁面的url資訊

location.reload();	//重新整理網頁
location.host:"127.0.0.1:5500"	//主機
location.protocol:"http:"		//協議
location.href:"https://ai.taobao.com/?pid=mm_124190590_30248727_109212350230"	//當前指向位置
//設定新的地址
location.assign('https://blog.csdn.net/zhang_0202/article/details/110393657');

7.6、document

document當前的頁面 HTML,DOM文件樹

document.title
"百度一下，你就知道"
document.title='666';
"開啟探索之旅"

獲取具體的文件樹節點

<dl id="app">
    <dt>
    <dd>JAVA</dd>
    <dd>PHP</dd>
    <dd>Python</dd>
    </dt>
</dl>

<script>
    var text = document.getElementById('app');
</script>

獲取cookie

document.cookie

伺服器端可以設定cookie：httpOnly

7.7、history

history 代表瀏覽器的歷史記錄(不建議使用)

history.forward();	//前進
history.back();		//後退

8、操作DOM物件

DOM：文件物件模型（核心）

瀏覽器網頁就是一個DOM樹型結構！

更新：更新Dom節點
遍歷dom節點：得到Dom節點
刪除：刪除一個Dom節點
新增：新增一個新的節點
前提條件：要操作一個Dom節點，就必須要先獲得這個Dom節點

8.1、獲得DOM節點

//對應css選擇器
let h1 = document.getElementsByTagName('h1');	//標籤
let p1 = document.getElementById('page');	//id
let a1 = document.getElementsByClassName('hr');	//類
let father = document.getElementById('box');

let childrens = father.children[index];  //獲取父節點下的所有子節點

// father.firstChild
// father.lastChild

//querySelector() 方法 返回文件中匹配指定 CSS 選擇器的一個元素。
let k = document.querySelector('h1');
let k1 = document.querySelector('#page');
let k2 = document.querySelector('.hr');

8.2、更新Dom

<div id="box">

</div>
<script>
    //獲得節點元素
    let box = document.getElementById('box');
    //對節點元素進行操作
    box.innerText = '666';
    box.innerHTML = `<em>${999}</em>`;
    box.style.width = '300px';
    box.style.height = '300px';	//屬性使用 字串 包裹
    box.style.backgroundColor = 'red';	//轉 駝峰命名
    box.style.textAlign = 'center';
    box.style.lineHeight = '300px';
    box.style.fontSize = '30px';
</script>

操作文字：

box.innerText = ‘666’; 修改文字的值
box.innerHTML = <em>${999}</em>; 可以解析HTML文字標籤

8.3、刪除Dom

刪除節點的步驟：先獲取父節點，在通過父節點刪除自己

<div id="box">
    <h1>標題一</h1>
    <p id="page">p1</p>
    <a href="#" class="hr">a標籤</a>
</div>

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

    let h = document.querySelector('h1');

    let father = p.parentElement; //通過子節點獲取父元素

    father.removeChild(h);	//移除子節點
    
    //刪除是一個動態的過程
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);
</script>

注：刪除多個節點的時候，children是在時刻發生變化的，刪除節點的時候要注意！

8.4、插入DOM

我們獲得了某個DOM節點，假設這個dom節點是空的，我們通過innerHtml就可以增加一個元素了，但是這個DOM節點已經存在元素了，我們就不能這麼做了！因為會產生覆蓋

A.appendChild( B) （把B節點追加至A節點的末尾）

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

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

    list.appendChild(js);   //追加到後面
</script>

建立一個新的標籤，實現插入

<script>
    let js = document.getElementById('js');     //已存在的節點
    list = document.getElementById('list');
    //通過JS 建立一個新的節點
    let newP = document.createElement('p'); //建立一個p標籤
    newP.id = 'newP';	//起名字
    newP.innerText = 'hello,world!';
    list.appendChild(newP);

    //建立一個標籤節點 (通過這個屬性可以設定任意的值)
    let myScript = document.createElement('script');
    myScript.setAttribute('type','text/javaScript');    //鍵值

    let myStyle = document.createElement('style');  //建立一個空style標籤
    myStyle.setAttribute('type','text/css');    
    myStyle.innerHTML = 'body{background-color: antiquewhite;}';  //設定標籤內容  

    let head = document.getElementsByTagName('head')[0].appendChild(myStyle);

</script>

insertBefore( A,B ) （把A節點插入到B節點之前）

let ee = document.getElementById('ee');
let js = document.getElementById('js');
let list = document.getElementById('list');

//要包含的節點  insertBefore(newNode,targetNode)
list.insertBefore(js,ee);

9、操作表單（驗證）

9.1、表單是什麼？

表單主要用來製作動態網頁，方便和使用者進行互動

form DOM樹

文字框 text
下拉框
單選框 radio
單選框 checked
隱藏域 hidden
密碼框 password
……

表單的目的：提交資訊

獲得提交的資訊

<form action="">
    <p>
        <label for="userName">使用者名稱:</label>
        <input type="text" name="text" id="userName">
    </p>
    <!--多選框的值，就是定義好的value-->
    <p>
        <label>性別：</label>
        <label for="boy">男</label>
        <input type="radio" name="gender" id="boy" value="boy">
        <label for="girl">女</label>
        <input type="radio" name="gender" id="girl" value="girl">
    </p>
</form>

<script>
    let userName = document.getElementsByTagName('input')[0]
    let boy = document.getElementsByTagName('input')[1];
    let gril = document.getElementsByTagName('input')[2];

    let input_text = document.getElementById('userName');
    //得到輸入框的值
    input_text.value;
    //修改輸入框的值
    input_text.value = '888888';

    //對應單選框，多選框等固定的值,gril.value只能取到當前的value值
    boy.checked; //檢視返回結果是否為true，如果為true,則被選擇~
    boy.checked=true;   //賦值
</script>

9.2、提交表單（md5加密）

方式一：

<!-- 匯入md5工具類 -->
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>
<form action="https:www.baidu.com" method="POST">
   <p>
       <label for="userName">使用者名稱:</label>
       <input type="text" name="uName" id="uName" placeholder="請輸入使用者名稱">
   </p>
   <p>
       <label for="pwd">密碼:</label>
       <input type="password" name="pwd" id="pwd">
   </p>
   <button type="submit" onclick="check()">提交</button>
</form>

<script>
   function check() {
       let uName = document.querySelector('#uName');
       let pwd = document.querySelector('#pwd');
       console.log(uName.value);
       console.log(pwd.value);
       
       pwd.value = md5(pwd.value);
   }
</script>

方式二：（常用）

<!-- 匯入md5工具類 -->
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.min.js"></script>
<!-- 
表單繫結提交事件 
onsubmit 繫結一個提交檢測的函式：true false
將這個結果返回給表單,使用submit接收！
οnsubmit="return check()"  
-->
<form action="https://www.baidu.com/" method="POST" onsubmit="return check()">
    <p>
        <label for="userName">使用者名稱:</label>
        <input type="text" name="uName" id="uName" placeholder="請輸入使用者名稱">
    </p>
    <p>
        <label for="pwd">密碼:</label>
        <input type="password" name="pwd" id="input-pwd">
    </p>

    <input type="hidden" name="password" id="md5-pwd">

    <button type="submit">提交</button>
</form>

<script>
    function check() {
        alert(1)
        let uName = document.querySelector('#uName');

        let inputPwd = document.querySelector('#input-pwd');
        let md5Pwd = document.querySelector('#md5-pwd');

        md5Pwd.value = md5(inputPwd.value);
        //可以校驗判斷表單內容，true就是通過提交,false就是阻止提交
        return true;
        //pwd.value = md5(pwd.value);
    }
</script>

10、jQuery

JavaScript

jQuery庫，裡面存在大量的JavaScript函式

jQuery是目前最流行的JavaScript程式庫,它是對JavaScript物件和函式的封裝

設計思想是write less,do more(寫更少,做的更多)

10.1、初識jQuery

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- 語法：$(selector).action(函式) -->
    <a href="" id="test">點我</a>

<script>
        //選擇器就是css的選擇器
        $('#test').click(function (){
        alert('hello,jQuery');
    })
</script>

工廠函式$()：將DOM物件轉化為jQuery物件
選擇器 selector：獲取需要操作的DOM 元素
方法action()：jQuery中提供的方法，其中包括繫結事件處理的方法

10.2、選擇器

<script>
//原生js，選擇器少，麻煩不好記
//標籤   
document.getElementsByTagName();
//類
document.getElementsByClassName();
//id
document.getElementById();

//jQuery  css中的選擇器它都能用
$('p').click();     //標籤選擇器
$('#id1').click();  //id選擇器
$('.class1').click();   //class選擇器
</script>

文件工具站

10.3、事件

滑鼠事件、鍵盤事件、其他事件

click( )	觸發或將函式繫結到指定元素的click事件	單擊滑鼠時
mouseover( )	觸發或將函式繫結到指定元素的mouseover事件	滑鼠指標移過時
mouseout( )	觸發或將函式繫結到指定元素的mouseout事件	滑鼠指標移出時
mouseenter( )	觸發或將函式繫結到指定元素的mouseenter事件	滑鼠指標進入時
mouseleave( )	觸發或將函式繫結到指定元素的mouseleave事件	滑鼠指標離開時

mouse：<span id="mouseMove"></span>
<div id="box">
    在這裡移動滑鼠試試
</div>

<!-- 獲取滑鼠當前的一個座標 -->
<script>
    //當網頁載入完畢之後，響應事件
    $(function(){
        $('#box').mousemove(function (e){
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
        })
    })
</script>

10.4、操作DOM

$('#list li:nth-of-type(1)').text();	//獲得值
$('#list li:nth-of-type(1)').text('WEB');	//設定值
$('#list').html('<strong>666</strong>');


//css的操作
$('#list').css('backgroundColor','red');
$('#Java').css({'background-color':'skyblue','font-size':'60px'});

10.5、元素的顯示和隱藏

$('#Java').show();	//顯示
$('#Java').hide();	//隱藏
 $(window).width();		//寬度
 $(window).height();	//高度

Web前端入門 JavaScript基礎

技術標籤：前端HTMLwebdomjs 1、初識JavaScript 1.1、JavaScript是什麼？ HTML(骨架，元素，結構)CSS(表現，效果，狀態)JS(響應行為，互動，複雜操作)

Web前端之——JavaScript基礎

最近在一家公司工作了，本來面試的是後端開發，但是前端這一塊沒有專門的人去負責，要後端負責一部分，框架是用我們的Vue框架，不過我沒學過就是了，所以需要先從最基本的JavaScript先學習一遍吧~

Web前端入門必知——瀏覽器基礎知識

瀏覽器的主要功能：是將使用者選擇的web資源呈現出來，它需要從伺服器請求資源，並將其顯示在瀏覽器視窗中，資源的格式通常是HTML，也包括PDF、image及其他格式。使用者用URI（Uniform Resource Identifier統一資源

Web前端入門學習（1）——走進前端世界

前端基礎知識前端開發語言：HTML（Hypertext Markup Language）：超文字標記語言；CSS（Cascading Style Sheets）：層疊樣式表；JS（JavaScript）：指令碼語言。

學web前端入門必備知識

正文網際網路正在改變我們的生活，前端也成了很重要的崗位之一，許多人都往前端靠攏，可又無能為力，不知所措，首先我們說為什麼在程式設計裡，大家都傾向於往前端靠呢？原因很簡單，那就是，在程式設計師

web前端開發學習基礎知識介紹

前端開發市場仍然有著大量的需求。我們知道前端開發應用是很廣泛的，這些公司都有前端開發崗位，並且薪資也不低。除了網際網路公司，傳統公司想要連線網際網路，同樣離不開前端工程師。而隨著H5、微信小程式

web前端高階 - JavaScript常用工具類庫封裝

技術標籤：WEB前端高階教程類庫封裝公共類庫封裝深淺克隆深淺合併檢測純物件資料型別檢測

web前端之html基礎複習

------------恢復內容開始------------ web前端（網頁前端開發）主要由html超文字標記語言，css層疊樣式表，JavaScript指令碼語言組成

從零開始，學習web前端之HTML基礎

什麼是前端前端對於網站來說，通常是指，網站的前臺部分包括網站的表現層和結構層。因此前端技術一般分為前端設計和前端開發，前端設計一般可以理解為網站的視覺設計，前端開發則是網站的前臺程式碼實現，包括基本的

趕緊收藏，超詳細Web前端入門到精通必學的標籤及屬性大全

Web前端入門到精通必會的標籤及屬性，這是老師花時間總結了圖片上的內容，做成了網頁版，以便查詢使用，如果對你學習有幫助，記得收藏點贊評論關注支援哦

GitHub標星13.2k，JavaScript基礎知識之變數詳解，前端入門必看

一、字面量：數字和字串 “字面量”即常量，是固定值，不可改變。看見什麼，它就是什麼。

12前端javascript基礎

重複性焦慮 javascript 基礎 1. 資料型別 1.1 基本資料型別資料型別：undefined，null，boolean，number，string

web前端知識點（JavaScript篇）

call，apply，bind call，apply，bind這三者的區別，及內部實現原理，點這裡 promise promise函式的內部實現原理，點這裡

Web前端開發程式碼規範（基礎）

一、引言對於一個多人團隊來說，制定一個統一的規範是必要的，因為個性化的東西無法產生良好的聚合效果，規範化可以提高編碼工作效率，使程式碼保持統一的風格，以便於程式碼整合和後期維護。

WEB前端第八課——CSS基礎

1.CSS用於HTML文件中元素樣式的定義，實現了將內容與表現分離，提高了程式碼的可重用性和可維護性，檔案字尾是“.css”

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第2章HTML基礎知識

本教程案例線上演示有路網PC端有路網移動端免費配套視訊教程免費配套視訊教程

零基礎如何自學web前端開發?

我是怎麼走上前端開發這條路？首先，我是個文科生，大學裡只學過vb，覺得計算機程式設計這東西太玄乎，不是我玩得轉的。

JavaScript基礎鞏固系列——入門篇+資料型別

全手打原創，轉載請標明出處：https://www.cnblogs.com/dreamsqin/p/13686263.html，多謝，=。=~（如果對你有幫助的話請幫我點個贊啦）

入門Web前端時的一些困境，你遇見過幾個？

網際網路的快速發展和激烈競爭，使用者體驗成為一個重要的關注點，導致專業Web前端工程師成為熱門職業，各大公司對Web前端工程師的需求量都很大，要求也越來越高，優秀的Web前端工程師更是稀缺。很多人發現

零基礎該怎麼學Web前端都需要掌握哪些技能

　　零基礎該怎麼學Web前端？都需要掌握哪些技能？Web前端是近年來非常熱門的技術之一，人才需求大、薪資福利好，更重要的是入門簡單，是零基礎小白轉行IT開發的首選程式語言。為了快速入門Web前端，有人選

Web前端入門 JavaScript基礎

1、初識JavaScript

1.1、JavaScript是什麼？

1.2、JavaScript在客戶端的三大組成

2、快速入門

2.1、引入JavaScript

2.2、基本語法

2.3、資料型別

2.4、嚴格檢查格式

3、資料型別

3.1、字串

3.2、陣列

3.3、物件

3.4、流程控制

3.5、Map和Set

3.6、iterator迭代器

4、函式及面向物件

4.1、函式定義及變數作用域

4.2、變數的作用域

4.3、方法

4.4、箭頭函式（新特性）

5、內部物件

5.1、Date

5.2、JSON

6、面向物件程式設計

6.1、什麼是面向物件？

6.2、原型物件

6.3、class物件（ES6新特性）

7、操作Bom元素

7.1、瀏覽器介紹

7.2、window物件

7.3、navigator

7.4、screen

7.5、location

7.6、document

7.7、history

8、操作DOM物件

8.1、獲得DOM節點

8.2、更新Dom

8.3、刪除Dom

8.4、插入DOM

9、操作表單（驗證）

9.1、表單是什麼？

9.2、提交表單（md5加密）

10、jQuery

10.1、初識jQuery

10.2、選擇器

10.3、事件

10.4、操作DOM

10.5、元素的顯示和隱藏

相關推薦