2.Javaweb-javascript

mliu222~~發表於2020-10-08
WebJavaScript

javascript回顧

運算子

  1. ==：型別不一樣，值一樣，返回true

    ===：型別一樣，值一樣，返回true（絕對等於）

資料型別

  1. NaN：屬於“number”型別，但它與所有的數值都不相等，包括自己

    NaN === NaN; //false
isNaN(NaN);  //true

  2. null：表示定義了，但沒有賦值

    undefined：未定義

  3. 陣列

    js中陣列的定義

    var arr = [1, 23, 4, "js", true, 22.4, null];

    java中陣列的定義

    int[] a = {1, 2, 34};

  4. 陣列相關的操作

    let arr = [1, 2, 33, "richard", true];
arr[1] = "js";
console.log(arr); //(5) [1, "js", 33, "richard", true]

// slice()：擷取Array的一部分，返回一個新的陣列，類似java中String的substring操作
// push()：將資料壓入陣列的尾部；
// pop()：彈出尾部的一個元素；
// unshift()：將資料壓入陣列的頭部；
// shift()：彈出頭部的一個元素；
// sort()：對陣列中的元素進行排序；
// reverse()：元素反轉；
// cancat()：將兩個陣列進行拼接（不修改原有陣列，會返回一個拼接的新陣列）；
// join():將陣列的元素通過給定的符號進行連線，返回連線的字串
arr.jion("-");  //"1-js-33-richard-true"

  5. 物件

    var person = {
    name: "richard",
    age: 3,
    tags: ["js", "java", "web", true]  
};

"age" in person;  //true, 物件中的所有鍵都屬於字串，值可以是任意資料型別
"toString" in person;  //true, toString屬於person物件的原型具有的屬性
person.hasOwnProperty("toString");  //false, hasOwnProperty指person物件自身擁有的屬性

  6. 字串

    let a = "student";
a[0] = "w";
console.log(a);  //student, 可以對字元陣列的單個賦值，但不會改變原有變數的值；

  7. map

    var map1 = new Map([["tom", 100], ["jack", 90], ["haha", 80]]);
map1.get("tom");  //100
map1.set("admin", 123456); //Map(4) {"tom" => 100, "jack" => 90, "haha" => 80, "admin" => 123456}
map1.delete("jack");  //Map(3) {"tom" => 100, "haha" => 80, "admin" => 123456}

  8. set：可以去重（無序、不重複的集合）

    var set1 = new Set([2, 1, 3, 22, 1, 33, 3]);  //Set(5) {2, 1, 3, 22, 33}
set1.add(100);  //Set(6) {2, 1, 3, 22, 33, 100}
set1.has(33);  //true

控制迴圈

  1. forin / forof

    let arr = [1, 2, 33, "richard", true];

for (let index in arr) {
    console.log(index);
}  // 列印了 0,1,2,3,4（即列印了陣列的下標）

for (let index in arr) {
    console.log(arr[index]);
}  // 列印了 1,2,33,"richard",true

for (let value of arr) {
    console.log(value);
}  // 列印了 1,2,33,"richard",true

for (let number of set1) {
    console.log(number);
}  // 見下圖

for (let map1Element of map1) {
    console.log(map1Element);
}  // 見下圖

在這裡插入圖片描述

函式

  1. 函式的定義：arguments陣列引數

    var abs = function (x) {
    console.log("x => " + x);
    for (let i = 0; i < arguments.length; i++) {
        // js會有一個預設的arguments陣列，用來接收函式的引數；
        console.log("arguments[" + i + "] => " + arguments[i]);
    }
};

abs(1, 23, "richard", true, 222);

在這裡插入圖片描述

  1. ES6新特性：rest

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

abs1(1, 23, "richard", true, 222);

在這裡插入圖片描述

  1. apply的使用：方法.apply(物件, 引數陣列)

    function getAge(){
    var now = new Date().getFullYear();
    return now - this.birth;
};

var richard = {
    name: "richard",
    birth: 2000,
    age: getAge
};

console.log(getAge.apply(richard, []));  // 20， 即使用richard物件去呼叫getAge()方法，getAge()方法中的this.birth指的是richard物件中的                                                  birth屬性

變數的作用域

  1. let：定義區域性變數的關鍵字；const：定義常量的關鍵字

  2. 預設所有的全域性變數都繫結在window物件上

    var x = "hello, javascript";
alert(window.x);  //彈出“hello, javascript”
window.alert(x);  //彈出“hello, javascript”

  3. js實際上只有一個全域性作用域，任何變數（函式也可以視為變數），如果在函式的作用域內找不到，就會向外查詢；

  4. 由於所有的全域性變數都會繫結到window物件上，如果不同的js檔案使用了相同的全域性變數，就會引起衝突，如何避免？ – 一般是自己定義個獨有的全域性變數物件，將自己的全域性變數繫結到該物件上

    var App = {};
App.name = "richard";
App.add = function (a, b) {
    return a + b;
};

json

  1. json中物件使用大括號{}

  2. json中陣列使用中括號[]

  3. 所有的鍵值對使用 key:value

  4. JSON.stringify(物件)：注意：轉成json字串後，所有的key都是字串

    var person = {
    name: "richard",
    age: 3,
    tags: ["js", "java", "web", true]
};
JSON.stringify(person);  //"{"name":"richard","age":3,"tags":["js","java","web",true]}"

  5. JSON.parse(json字串)：json字串中，最外層和裡面要用單引號和雙引號區分

    JSON.parse('{"name":"richard","age":3,"tags":["js","java","web",true]}')  //{name: "richard", age: 3, tags: Array(4)

ajax

  1. 原生的js方法：xhr非同步請求
  2. jQuery封裝的方法：$(選擇器).ajax()
  3. axios請求

原型

  1. 指定某個物件A的原型為物件B，型別java中的繼承（A為B的子類）

    var Student = {
    name: "richard",
    age: 3,
    run: function () {
        console.log(this.name + " is running...");
    }
};
var xiaoming = {
    name: "xiaoming"
};

xiaoming.__proto__ = Student;

xiaoming.run();  // xiaoming is running...

繼承

  1. ES6開始的新寫法

    class Person {
    constructor(name) {
        this.name = name;
    }
    hello() {
        alert(this.name + ", hello~");
    }
};

var xiaoming = new Person("xiaoming");
xiaoming.hello();  // 彈出 xiaoming，hello~

class LittleKid extends Person {
    constructor(name, grade) {
        super(name);
        this.grade = grade;
    }
    myGrade(){
        alert(this.name + "'s grade is " + this.grade);
    }
}
var xiaohong = new LittleKid("xiaohong", 5);
xiaohong.myGrade();  // 彈出 xiaohong's grade is 5

BOM

  1. navigator物件：代表瀏覽器
    在這裡插入圖片描述

  2. screen物件：代表螢幕
    在這裡插入圖片描述

  3. location物件：代表當前頁面的URL資訊

    location.assign("https://www.csdn.net/");  //代表從當前頁面設定新的url地址：https://www.csdn.net/

  4. document物件：代表當前頁面的HTML DOM樹

    document.cookie;  //獲取頁面的cookie
document.title;  //獲取網頁的title，比如百度的“百度一下，你就知道”
document.getElementById("id");  //根據id獲取文件物件

  5. history物件：代表瀏覽器的歷史記錄

    history.back;
history.forward;

DOM

  1. 瀏覽器網頁就是一個DOM樹形結構；

  2. 獲取dom元素；

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

<h4>dom節點</h4>
<li>
    <p id="se" class="aa">javase</p>
    <p id="ee">javaee</p>
    <p id="me">javame</p>
</li>

<script>
    document.getElementsByClassName("aa");  //HTMLCollection [p#se.aa, se: p#se.aa]
    document.getElementById("ee");  //<p id="ee">javaee</p>
    document.getElementsByTagName("p");  //HTMLCollection(3) [p#se.aa, p#ee, p#me, se: p#se.aa, ee: p#ee, me: p#me]
</script>
</body>
</html>

  3. 更新dom元素；

    element.innerHTML = new html content  //改變元素的 inner HTML
element.attribute = new value  //改變 HTML 元素的屬性值
element.setAttribute(attribute, value)  //改變 HTML 元素的屬性值，可以設定任意屬性和值
element.style.property = new style  //	改變 HTML 元素的樣式

  4. 刪除dom節點元素：①先獲取父節點，②然後再刪除自己；

    document.removeChild(element)  //刪除 HTML 元素

  5. 插入dom節點元素；

    document.createElement(element)  //建立 HTML 元素
document.appendChild(element)  //新增 HTML 元素
document.replaceChild(element)  //替換 HTML 元素
document.write(text)  //寫入 HTML 輸出流
document.getElementById(id).onclick = function(){code}  //向 onclick 事件新增事件處理程式

jQuery

  1. 公式：$(selector).action()

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.1.js" type="application/javascript"></script>
</head>
<body>

<h4>dom節點</h4>
<li>
    <p id="se" class="aa">javase</p>
    <p id="ee">javaee</p>
    <p id="me">javame</p>
    <a src="">a標籤</a><br/>
    <input type="button" id="submit" value="提交"/>
</li>

<script>
	// 通過#xx選擇id
    $("#submit").click(function () {
        alert("提交按鈕被點選了")
    });
    // 通過.xx選擇class
    $(".aa").click(function () {
        alert("javase 被點選了");
    });
    //通過tag名稱選擇tagName
    $("a").click(function () {
        alert("<a>標籤被點選了");
    });
</script>
</body>
</html>

  2. 可以通過jQuery修改dom，css，發起ajax請求等，可參考：https://jquery.cuishifeng.cn

好看的前端元件

  1. ElementUI
  2. Ant Design
  3. Layer彈窗元件