精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

1、基礎(chǔ)語(yǔ)法

• <script></script>標(biāo)簽一定是圍堵標(biāo)簽，不能是自閉和標(biāo)簽

• JavaScript嚴(yán)格區(qū)分大小寫(xiě)

• console.log(); 在控制臺(tái)打印變量，相當(dāng)于System.out.println();

• Infinity：無(wú)窮大

typeof(Infinity)> "number"

• NaN六親不認(rèn)，任何與NaN進(jìn)行的判斷都為false，只能通過(guò)isNaN();來(lái)進(jìn)行判斷是否為NaN;

• ==：類(lèi)型不同，值相同，為true(類(lèi)型不一致，會(huì)先進(jìn)行類(lèi)型轉(zhuǎn)換，在判斷值)

• ===：類(lèi)型相同，值相同，為true

NaN === NaN> falseisNaN(NaN)> true1 == "1"> true1 === "1"> false

• 浮點(diǎn)數(shù)問(wèn)題

盡量避免使用浮點(diǎn)數(shù)進(jìn)行運(yùn)算，存在精度問(wèn)題！

console.log((1/3) === (1-2/3))> falseconsole.log((1/3) - (1-2/3) < 0.00000001)> trueconsole.log(1/3)> 0.3333333333333333console.log(1 - (2/3))> 0.33333333333333337

• js中數(shù)組下標(biāo)越界了，不會(huì)報(bào)異常，是：undefined

• 數(shù)組用：[]

• 對(duì)象用：{}

原始數(shù)據(jù)類(lèi)型：

• number：浮點(diǎn)數(shù)、整數(shù)、NaN

• string

• null

• boolean：true、false

• undefined

引用數(shù)據(jù)類(lèi)型：對(duì)象

2、嚴(yán)格檢查模式

/*【前提】：IDEA需要支持 ES6 語(yǔ)法     'use strict'：嚴(yán)格檢查模式，預(yù)防JavaScript的隨意性產(chǎn)生的一些問(wèn)題     局部變量建議都使用 let 去定義~ */<script>    'use strict'; //  必須寫(xiě)在第一行，否則瀏覽器不會(huì)報(bào)錯(cuò)！        let i = 1;        // 對(duì)象的定義    var person = {        "name": "sunzhongjie",        "age": 21,        "tags": ['java', '前端', '運(yùn)維', 'js']    }</script>

3、字符串 string

• 正常字符我們使用單雙引都可以

• 注意轉(zhuǎn)義字符

/'/n/tconsole.log("\u4e2d") // Unicode字符> 中undefinedconsole.log("\x41") // ASCII字符> A

• 多行字符串編寫(xiě)（Tab上面的鍵）

var msg = `nihao HEllo world!你好！`

• 模板字符串 ${} (ES6的新特性)

'use strict';let name = "sunzhongjie";let age = 21;let msg = `你好，世界，我叫${name}，我今年${age}`;console.log(msg);// 你好，世界，我叫sunzhongjie，我今年21

• 字符串長(zhǎng)度

str.length

• string的不可變性

方法：

• substring()：[begin, end)

• charAt(index)

• indexOf(char)

• toUpperCase()

• toLowerCase()

4、數(shù)組

Array可以包含任意的數(shù)據(jù)類(lèi)型

• indexOf()：獲取指定元素的索引

• slice()：通過(guò)下標(biāo)對(duì)數(shù)組進(jìn)行截取

var arr = [1, 2, null, "abc", true];arr.slice(2);> [null, "abc", true]arr.slice(3);> ["abc", true]arr.slice(2, 5);> [null, "abc", true]arr.indexOf(null);> 2

• push()：壓入到尾部

• pop():彈出尾部的一個(gè)元素

arr.push("123", 12.2);> 7arr> [1, 2, null, "abc", true, "123", 12.2]arr.pop();> 12.2arr> [1, 2, null, "abc", true, "123"]

• unshift()：壓入到頭部

• shift()：彈出頭部的一個(gè)元素

arr> [1, 2, null, "abc", true, "123"]arr.unshift(undefined, NaN);> 8arr> [undefined, NaN, 1, 2, null, "abc", true, "123"]arr.shift();> undefinedarr> [NaN, 1, 2, null, "abc", true, "123"]

• reverse()

• sort()

arr = new Array("A", "B", "C");> ["A", "B", "C"]arr.reverse();> ["C", "B", "A"]arr.sort();> ["A", "B", "C"]

• concat()：拼接數(shù)組，返回一個(gè)新的數(shù)組

注意：concat()并沒(méi)有修改數(shù)組，只是返回一個(gè)新的數(shù)組

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

• 連接符 join()：打印拼接數(shù)組，使用特定的字符串連接

arr> ["A", "B", "C"]arr.join('#');> "A#B#C"

5、對(duì)象

若干個(gè)鍵值對(duì)
對(duì)象中的鍵默認(rèn)都是 string類(lèi)型，值可以是任意類(lèi)型的對(duì)象

• 對(duì)象的定義（JSON）

'use strict';let person = {    "name":"sunzhongjie",    "age":21,    "gender":"true"}

• 動(dòng)態(tài)的刪除屬性 delete

delete person.gender;person> {name: "sunzhongjie", age: 21}

• 動(dòng)態(tài)的添加屬性，直接給新屬性添加值即可

person.gender = "男";> "男"person> {name: "sunzhongjie", age: 21, gender: "男"}

• 判斷這個(gè)屬性值是否在這個(gè)對(duì)象中 xxx in xxx

gender in personVM354:1 Uncaught ReferenceError: gender is not defined    at <anonymous>:1:1(anonymous) @ VM354:1"gender" in person> true"toString" in person> true

• 判斷一個(gè)屬性是否是這個(gè)對(duì)象自身?yè)碛械模篽asOwnProperty("參數(shù)")

person.hasOwnProperty("name");> trueperson.hasOwnProperty("toString");> false

6、流程控制

• 判斷

'use strict';let age = 3;if (age > 2) {    } else if (age < 4) {    } else {    }

• 循環(huán)

'use strict';let arr = [12, 21, 34, 45, 123, 9789, 12390];// 普通for循環(huán)for (let i = 0; i < arr.length; i  ) {    console.log(arr[i]);}// forEach循環(huán) （ES 5.1特性）arr.forEach(function (num) {    console.log(num);})// 增強(qiáng)for循環(huán)for (let index in arr) {    console.log(arr[index]);}

7、Map和Set

ES6的新特性~

var map = new Map([['tom', 20], ['jack', 19]]);console.log(map.get("tom"));map.set("admin", "123456");console.log(map);

var set = new Set([1,2,3,2,2]);console.log(set);set.add(5,4);set.delete(4);console.log(set);console.log(set.has(2));

8、Iterator

• 遍歷Set和Map

var map = new Map([['tom', 20], ['jack', 19]]);for (let value of map) {    console.log(value);}var set = new Set([1, 2, 3, 2, 2]);for (let value of set) {    console.log(value);}

9、可變長(zhǎng)參數(shù)

問(wèn)題：arguments 包含所有的參數(shù)，我們有時(shí)候想使用多余的參數(shù)來(lái)進(jìn)行附加操作。
需要排除已有的參數(shù)

ES6的新特性：rest
rest參數(shù)只能寫(xiě)在最后面，用 ... 標(biāo)識(shí)

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

10、變量的作用域

內(nèi)部函數(shù)可以訪問(wèn)外部函數(shù)，反之不行！

在JavaScript中，var定義的變量實(shí)際是有作用域的。

假設(shè)在函數(shù)體中聲明，則在函數(shù)體外不可以使用。

function test() {    var x = 1;    x = x   1;}x = x   1; // Uncaught ReferenceError: x is not defined

假設(shè)，內(nèi)部函數(shù)變量和外部函數(shù)變量，重名！

函數(shù)查找變量從自身函數(shù)開(kāi)始，由 “內(nèi)” 向 “外” 查找

function test() {    var x = 1;    function test2() {        var x = 'a';        console.log('inner:'   x);  // inner:a     }    test2();    console.log('outer:'   x);      // outer:1}test();

提升變量的作用域

function test() {    var x = '1'   y;    console.log(x);    var y = 'y';}test();

結(jié)果：1undefined

說(shuō)明：js執(zhí)行引擎，自動(dòng)提升了 y 的聲明，但是不會(huì)提升變量 y 的賦值，相當(dāng)于

function test() {    var y;    var x = '1'   y;    console.log(x);    y = 'y';}test();

這個(gè)是在JavaScript建立之初就存在的特性。

養(yǎng)成規(guī)范：所有的變量定義都放在函數(shù)的頭部，不要亂放，便于代碼維護(hù)；

全局對(duì)象：window

var str = "xxx";alert(str);window.alert(window.x);

alert()函數(shù)本身也是一個(gè) window 的變量

var x = 123;window.alert(x);var tmp_alert = alert;window.alert = function () {}window.alert('原先alert失效');alert = tmp_alert;window.alert('alert');

JavaScript 實(shí)際上只有一個(gè)全局作用域，任何變量（函數(shù)也可以視為變量），假設(shè)沒(méi)有在函數(shù)作用范圍內(nèi)找到，就會(huì)向外查找，如果在全局作用域都沒(méi)有找到，報(bào)錯(cuò)：ReferenceError

規(guī)范

由于我們所有的全局變量都會(huì)綁定到我們的 window 對(duì)象上，如果不同的js文件，使用了相同的全局變量，會(huì)造成沖突 --> 如何能減少?zèng)_突？

// 定義自己的唯一全局變量var RainSzj = {};// 賦值RainSzj.name = "sunzhongjie";RainSzj.add = function (a, b) {    return a   b;}

把自己的代碼全部放入自己定義的唯一空間名字中，降低全局命名沖突問(wèn)題。

局部作用域 let

function f() {    for (var i = 0; i < 10; i  ) {        console.log(i);    }    console.log(i); // 11}f();

ES6 let 關(guān)鍵字，解決局部作用域沖突問(wèn)題！

function f() {    for (let i = 0; i < 10; i  ) {        console.log(i);    }    console.log(i);     // Uncaught ReferenceError: i is not defined}f();

建議用 let 關(guān)鍵字去定義局部作用域的變量

常量 const

在ES6之前，怎么定義常量：只用用全部大寫(xiě)字母命名的變量就是常量；建議不要修改這樣的值。

var PI = 3.1415927;console.log(PI);PI = 123; // 但依舊可以修改console.log(PI);

在ES6中引入了常量關(guān)鍵字：const;

const PI = 3.1415927;console.log(PI);PI = 123; // Uncaught TypeError: Assignment to constant variable.console.log(PI);

11、方法

定義方法

方法就是把函數(shù)放在對(duì)象的里面，對(duì)象只有兩個(gè)東西：屬性和方法。

var obj = {    'name':'sunzhongjie',    'birth':1999,    'age': function () {        var today = new Date().getFullYear();        return today - this.birth;    }}// 調(diào)用屬性console.log(obj.name);// 調(diào)用方法，一定要加上括號(hào)console.log(obj.age());

this. 代表什么？ 拆開(kāi)上面的代碼

function getAge() {    var today = new Date().getFullYear();    return today - this.birth;}var obj = {    'name':'sunzhongjie',    'birth':1999,    'age': getAge // 這里不需要括號(hào)};

誰(shuí)調(diào)用它，誰(shuí)就是：this

> obj.name;< "sunzhongjie"> obj.age;< ? getAge() {        var today = new Date().getFullYear();        return today - this.birth;    }> obj.age();< 21getAge();< NaN // window

在 Java中，this是無(wú)法指向的，是默認(rèn)指向調(diào)用它的那個(gè)對(duì)象；

apply 函數(shù)

是所有的函數(shù)公有的

在js中可以控制 this 的指向

    function getAge() {        var today = new Date().getFullYear();        return today - this.birth;    }    var obj = {        'name': 'sunzhongjie',        'birth': 1999,        'age': getAge // 這里不需要括號(hào)    };    // this 指向了 obj，參數(shù)為空    getAge.apply(obj, []);

> getAge.apply(obj, []);< 21

12、Date對(duì)象

typeof 關(guān)鍵字

> typeof 123;< "number"> typeof 'adf';< "string"> typeof NaN;< "number"> typeof undefined;< "undefined"> typeof Math;< "object"> typeof Math.abs;< "function"> typeof {};< "object"> typeof [];< "object"> typeof Math.abs();< "number"

基本使用

var now = new Date(); // Mon Jan 20 2020 21:00:20 GMT 0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)now.getFullYear(); // 年now.getMonth();    // 月 0 ~ 11 月now.getDate();     // 日now.getDay();      // 星期幾now.getHours();    // 時(shí)now.getMinutes();  // 分now.getSeconds();  // 秒now.getTime();   // 時(shí)間戳 全世界統(tǒng)一，自 1970年1月1日 00:00:00 到現(xiàn)在的毫秒數(shù)console.log(new Date(new Date().getTime())); // 事件戳 轉(zhuǎn)為 時(shí)間

轉(zhuǎn)換

var time = new Date();undefinedtime;Mon Jan 20 2020 21:13:22 GMT 0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)time.toundefinedtime.toDateString();"Mon Jan 20 2020"time.toGMTString();"Mon, 20 Jan 2020 13:13:22 GMT"time.toISOString();"2020-01-20T13:13:22.165Z"time.toLocaleString();"2020/1/20 下午9:13:22"time.toLocaleTimeString();"下午9:13:22"time.toLocaleDateString();"2020/1/20"

13、JSON對(duì)象

JSON是什么？

• JSON(JavaScript Object Notation, JS 對(duì)象簡(jiǎn)譜) 是一種輕量級(jí)的數(shù)據(jù)交換格式。

• 簡(jiǎn)潔和清晰的層次結(jié)構(gòu)（鍵值對(duì)）使得 JSON 成為理想的數(shù)據(jù)交換語(yǔ)言。

• 易于人閱讀和編寫(xiě)，同時(shí)也易于機(jī)器解析和生成，并有效地提升網(wǎng)絡(luò)傳輸效率。

在JavaScript中，一切皆為對(duì)象，任何 js 支持的類(lèi)型都可以用 JSON來(lái)表示；

格式：

• 對(duì)象 和 Map用：{}

• 數(shù)組和List用：[]

• 所有的鍵值對(duì)，都用 key:value

JS對(duì)象與JSON字符串的轉(zhuǎn)換

let user = {    'name': 'sunzhongjie',    'age': 21,    'gender': 'male'}// 對(duì)象轉(zhuǎn)為JSON字符串// {"name":"sunzhongjie","age":21,"gender":"male"}let json_user = JSON.stringify(user);console.log(json_user);// JSON字符串轉(zhuǎn)為對(duì)象let obj = JSON.parse('{"name":"sunzhongjie","age":21,"gender":"male"}');console.log(obj);

14、面向?qū)ο缶幊?/h2>

類(lèi)：模板

對(duì)象：具體的實(shí)例

在JavaScript中，需要換一下思維！

原型

let student = {    name: "zhangsan",    age: 10,    study: function () {        console.log(this.name   ",study....");    }};let wu = {    name: "wangwu",};// 指定原型對(duì)象wu.__proto__ = student;

class繼承

ES6中引入的

1. 定義一個(gè)類(lèi)，屬性和方法

// 定義一個(gè)人類(lèi)class Person {    constructor(name) {        this.name = name;    }    eat() {        console.log(this.name   ",我正在吃飯...");    }}let person = new Person("張三");

1. 繼承

// 定義一個(gè)學(xué)生類(lèi)class Student extends Person{    constructor(name, id) {        super(name);        this.id = id;    }    getId() {        console.log(this.name   "的ID是："   this.id);    }}let student = new Student("李華", 100);

原型鏈，無(wú)上限

15、操作BOM對(duì)象（重點(diǎn)）

16、操作DOM對(duì)象（重點(diǎn)）

核心

瀏覽器網(wǎng)頁(yè)就是一個(gè)Dom樹(shù)形結(jié)構(gòu)！

• 更新節(jié)點(diǎn)

• 遍歷節(jié)點(diǎn)

• 刪除節(jié)點(diǎn)

• 添加節(jié)點(diǎn)

要操作一個(gè)Dom節(jié)點(diǎn)，就必須要先獲得這個(gè)Dom節(jié)點(diǎn)

獲得Dom節(jié)點(diǎn)

<div class="div">    <h2>h2~~~</h2>    <p id="p1">p1~</p>    <p class="p2">p2~</p></div>

// 對(duì)應(yīng)的CSS選擇器let p1 = document.getElementById("p1");let p2 = document.getElementsByClassName("p2");let h2 = document.getElementsByTagName("h2");// 獲取父節(jié)點(diǎn)下的所有子節(jié)點(diǎn)let divs = document.getElementsByClassName("div")[0];// divs.firstChild;// divs.lastChild;

這是原生代碼，之后我們都是用 jQuery

更新節(jié)點(diǎn)

• innerText：修改文本的值

• innerHTML：可以解析HTML文本標(biāo)簽

刪除節(jié)點(diǎn)

刪除節(jié)點(diǎn)的步驟：先獲取父節(jié)點(diǎn)，再通過(guò)父節(jié)點(diǎn)刪除自己

<div id="father">    <h2>二級(jí)標(biāo)題</h2>    <p id="p1">段落一</p>    <p class="p2">段落二</p></div><script>    // 刪除 段落一 結(jié)點(diǎn)    let self = document.getElementById("p1");    let father = p1.parentElement;    father.removeChild(self);	// 刪除是一個(gè)動(dòng)態(tài)的過(guò)程,以下不可取！    father.removeChild(father.children[0]);    father.removeChild(father.children[1]);    father.removeChild(father.children[2]);</script>

注意：刪除多個(gè)節(jié)點(diǎn)的時(shí)候，children 是在時(shí)刻變化的，刪除節(jié)點(diǎn)的時(shí)候一定要注意！

插入節(jié)點(diǎn)

我們獲得了某個(gè)DOM節(jié)點(diǎn)，假設(shè)這個(gè)DOM節(jié)點(diǎn)是空的，我們通過(guò) innerHTML 就可以增加一個(gè)元素，但是如果這個(gè)DOM節(jié)點(diǎn)已經(jīng)存在元素了，我們就不能這么干了！會(huì)產(chǎn)生覆蓋。

<p id="js">JavaScript</p><div id="list">    <p id="se">JavaSE</p>    <p id="ee">JavaEE</p>    <p id="me">JavaME</p></div><script>    // 標(biāo)簽的移動(dòng)    let list = document.getElementById('list');    let js = document.getElementById('js');    list.appendChild(js);    // 創(chuàng)建一個(gè)新的標(biāo)簽    let newP = document.createElement('p');    newP.setAttribute('id', 'Linux');    // newP.id = 'Linux';    newP.innerText = "Linux";    list.appendChild(newP);    // 改變 body 的 background-Color    let body = document.getElementsByTagName("body")[0];    // body.style.backgroundColor = "green";    body.setAttribute("style", "background-color: green;");</script>

17、操作表單（驗(yàn)證）

• 使用MD5算法進(jìn)行密碼加密，需引入

<!--MD5工具類(lèi)--><script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <!--MD5工具類(lèi)-->    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script></head><body><form action="#" method="post" onclick="return check();">    <span>用戶(hù)名：</span>    <input type="text" name="username" id="username">    <span>密碼</span>    <input type="password" id="input-password">	<!--如果不使用隱藏域，提交時(shí)，會(huì)回顯一長(zhǎng)串密碼-->    <input type="hidden" name="password" id="password">    <input type="submit"></form><script>    function check() {        let uname = document.getElementById('username');        let md5_pwd = document.getElementById('password');        let input_pwd = document.getElementById("input-password");        // pwd.value = md5(pwd.value);        // 提升用戶(hù)體驗(yàn)        md5_pwd.value = md5(input_pwd.value);        return true;    }</script></body></html>

18、jQuery

公式：$(selector).action()

jQuery操作事件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="lib/jquery-3.4.1.js"></script></head><style>    #divMove {        width: 500px;        height: 500px;        border: 1px solid red;    }</style><script>    // 等待頁(yè)面加載完成后，響應(yīng)事件    $(function () {        $('#divMove').mousemove(function (e) {            $('#mouseMove').text('X:'   e.pageX   ', Y:'   e.pageY);        });    });</script><body>mouse: <span id="mouseMove"></span><div id="divMove">移動(dòng)鼠標(biāo)試試！</div></body></html>

jQuery操作DOM

<!DOCTYPE html><html><head>    <meta charset="UTF-8"/>    <title>jQuery操作DOM</title>    <script src="lib/jquery-3.4.1.js"></script></head><body><ul id="test_ul">    <li id="js">JavaScript</li>    <li name="python">Python</li>    <li name="java">Java</li></ul><script>    // 屬性選擇器 獲取值    $('#test_ul li[name=python]').text();    // 設(shè)置值    $('#test_ul li[name=python]').text('人工智能');    $('#test_ul').html();    // $('#test_ul').html('<strong>123</strong>');    $('#test_ul li[name=python]').css('color', 'red');</script></body></html>

元素的顯示和隱藏：本質(zhì) display:none

$('#test_ul li[name=python]').hide();$('#test_ul li[name=python]').show();

小技巧

1. 如何鞏固JS（看jQuery的源碼，看游戲源碼）

2. 鞏固HTML、CSS（扒網(wǎng)站，全部down下來(lái)，然后對(duì)應(yīng)修改看效果）

好看的前端樣式

docsify

ant

友人c

layer：彈窗組件

Element-ui

vuepress