【筆記】【JavaScript】狂神說-JavaScript學習筆記

本文轉載自查看原文 2022-03-22 10:21 882 【JavaScript】學習筆記/ JavaScript/ 學習筆記

JavaScript學習筆記

前言

學習視頻：【狂神說Java】JavaScript最新教程通俗易懂

感謝狂神！！！

此筆記用於記錄本人在學習中還有不懂以及值得注意的地方。以方便日后的工作與學習。

筆記中有些個人理解后整理的筆記，可能有所偏差，也懇請讀者幫忙指出，謝謝。

部分內容不完整，請讀者結合視頻觀看效果更佳。

注意

此筆記並非完整筆記

需要完整筆記的同學可以移步到【狂神說Java】JavaScript學習筆記

再次感謝狂神！！！

跟對人，做對事。——狂神說

快速入門

console

console.log()相當於Java中的System.out.println();

number

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

比較運算符

== 等於（類型不一樣，值一樣，也會判斷為true）
=== 絕對等於（類型一樣，值一樣，結果為true）

這是一個JS的缺陷，堅持不要使用 == 比較
須知：

NaN === NaN，這個與所有的數值都不相等，包括自己
只能通過isNaN（NaN）來判斷這個數是否是NaN

浮點數問題

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

Math.abs(1/3-(1-2/3))<0.00000001

Math.abs求絕對值

null 和 undefined

null 空
undefined 未定義

數組

Java的數組必須是相同類型的對象~，JS中不需要這樣

//保證代碼的可讀性，盡量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
//第二種定義方法
new Array(1,2,3,4,5,'hello');

取數字下標：如果越界了，就會報undefined

undefined

對象

對象是大括號，數組是中括號

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

//示例
// Person person = new Person(1,2,3,4,5);
var person = {
	name:'Tom',
	age:3,
	tags:['js','java','web','...']
}

取對象值

//控制台操作
person.name
> "Tom"
person.age
> 3

嚴格檢查格式

為什么（要引入嚴格檢查格式）？

var i =1;

默認為全局變量，一個html文件會引用多個script，直接使用var定義變量可能會與其他同名變量產生覆蓋或沖突。

怎么（引入嚴格檢查格式）？

1、需要設置支持ES6語法

（以IDEA編譯器為例）

2、寫入'use strict';

'use strict';必須寫在JavaScript的第一行！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    前提：IDEA需要設置支持ES6語法
        'use strict';嚴格檢查模式，預防JavaScript的隨意性導致產生的一些問題
        必須寫在JavaScript的第一行！
        局部變量建議都使用let去定義~
    -->
    <script>
        'use strict';
        //全局變量
         let i=1
        //ES6 let
    </script>
</head>
<body>

</body>
</html>

3、將var i =1; 改為 let i =1;

可能出現的bug!!!

1、

在這里插入圖片描述

原因：

未設置支持ES6語法

2、

//示例
<script>
    //全局變量
    i=1	//出錯點
    'use strict';
</script>

但Console（控制台）無報錯

原因：

'use strict';未放在JavaScript的第一行！

3、

//示例
<script>
    'use strict';
    //全局變量
    i=1
    //ES6 let
</script>

結果

在這里插入圖片描述

原因：

變量定義不符合嚴格檢查格式

解決辦法：

將i =1; 改為 let i =1; 變量前加上let

數據類型

1、字符串

==注意轉義字符 \ ==

\u4e2d    \u##### Unicode字符

\x41	Ascall字符

多行字符串編寫

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

模板字符串

//tab 上面 esc下面
let name = 'Tom';
let age = 3;
var msg = `你好，${name}`

字符串的可變性，不可變

大小寫轉換

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

student.indexof(‘t’)

輸出含‘t’字符的下標

substring，從0開始

[)	//包含左邊不包含右邊
student.substring(1)//從第一個字符串截取到最后一個字符串
student.substring(1,3)//[1,3)

2、數組

1、arr.length

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

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

arr.indexOf(下標)

3、slice()，截取Array的一部分，返回的一個新數組，類似於String中substring

4、push()，pop()尾部

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

疑問1：是否可以push()，pop()具體某個數值?

這兩個方法只能遵循“后進先出”原則

注意：

pop一次只能出一個

push一次可推多個

5、unshift(),shift() 頭部

unshift：壓入到頭部
shift：彈出頭部的一個元素

6、元素反轉reverse()

7、concat()

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

8、連接符join

9、多維數組

arr = [[1,2],[3,4],["5","6"]]	\\創建多維數組
arr[1][1]	\\取多維數組元素
>4

數組其他方法參考文檔

3、對象

若干個鍵值對

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

Js中對象，{…}表示一個對象，建制對描述屬性xxx：xxx，多個屬性之間用逗號隔開，最后一個屬性不加逗號！

= =JavaScript中的所有的鍵都是字符串，值是任意對象！==

1、對象賦值

2、使用一個不存在的對象屬性，不會報錯！undefined

3、動態的刪減屬性，通過delete刪除對象的屬性

格式：

delete 對象名.屬性名

示例：

4、動態的添加，直接給新的屬性添加值即可

格式：

對象名.新屬性名 = 新屬性值

示例：

5、判斷屬性值是否在這個對象中！xxx in xxx

示例：

4、流程控制

if...else語句、while循環、do...while循環、for循環語法就不多贅述了

注意：

1、while死循環只能關閉瀏覽器解決

2、for循環控制變量定義用let

forEach循環

ES5.1特性

for …in方法

for...in用法文檔

5、Map和Set

ES6的新特性~

Map 形式為[key，value]的數組。

//構造示例
var map = new Map(['tom',100],['jack',90],['haha',80]]);

//通過key獲得value
var name = map.get('tom');

//新增或修改
map.set('admin',123456);

//刪除
map.delete("tom");

Set：無序不重復的集合（Set中的元素只會出現一次，即 Set 中的元素是唯一的。）

//添加
set.add(2);

//刪除
set.delete(1);

//是否包含某個元素
console.log(set.has(3));

6、iterator

for···in與for···of的區別

//for...in示例
var arr = [3,4,5]
for(var x in arr){
    console.log(x)
}

//控制台輸出下標

0,1,2

//for...of示例
var arr = [3,4,5]
for(var x in arr){
    console.log(x)
}

//控制台輸出數據

3,4,5

遍歷Map

示例：

遍歷set

示例：

函數

函數與對象的區別

兩個一樣，只是放的位置不同

1、定義函數

定義方式一

示例:

//絕對值函數
function abs(x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

如果沒有執行return，函數執行完也會返回結果，結果就是undefined

定義方式二

示例：

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

function(x){…}這是一個匿名函數。但是可以吧結果賦值給abs，通過abs就可以調用函數！
方式一和方式二等價！

參數問題：javaScript可以傳任意個參數，也可以不傳遞參數~

疑問2：參數進來是否存在問題？假設不存在參數，如何規避？

var abs = function(x){
    //手動拋出異常來判斷參數是否存在
    if(typeof x!=='number'){
        throw 'Not a Number';
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

arguments \來規避不存在參數問題

arguments代表，傳遞進來的所有參數，是一個數組！

var abs = function(x){
    
    console.log("x=>"+x);
    
    for(var i=0;i<arguments.length;i++){
        console.log(arguments[i]);
    }
    
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

疑問3：arguments包含所有的參數，如何排除已有參數，使用多余的參數來進行附加操作？

rest

以前：

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

rest參數只能寫在最后面，必須用…標識。

2、變量的作用域

在javascript中，var定義變量實際是有作用域的。

只要理解了方法調用在棧內存與堆內存的原理就能理解下面這幾個問題

函數體重聲明，則在函數體外不可以使用

案例：

function qj(){
    var x = 1;
    x = x + 1;
}
x = x+2;	//bug：Uncaught ReferenceError: x is not defined=

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

示例：

function qj(){
    var x = 1;
    x = x + 1;
}

function qj2(){
    var x = 'A';
    x = x + 1;
}

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

示例：

function qj(){
    var x = 1;
    
    //內部函數可以訪問外部函數的成員，反之則不行
    function qj2(){
        var y = x + 1;
    }
    
    var z = y +1;// bug:Uncaught ReferenceError: y is not defined
}

假設:內部函數變量和外部函數變量，重名！

function qj() {
    var x = 1;

    function qj2() {
        var x = 'A';
        console.log('inner' + x);
    }

    console.log('outer' + x);
    qj2();
}

輸出結果：

在這里插入圖片描述

假設：在JavaScript中，函數查找變量從自身函數開始~，由“內”向“外”查找，假設：外部存在這個同名的函數變量，則內部函數會屏蔽外部函數的變量。

什么是提升變量的作用域？

function qj() {
    var x = "x"+y;//y雖然沒有被聲明就被調用了，但是JS會自動聲明，只是沒有值
    console.log(x);
    var y = 'y';
}

輸出結果：

在這里插入圖片描述

function qj()等價於

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

== 說明：js執行引擎，自動提升了y的聲明，但是不會提升變量y的賦值；==

PS：這個是在javascript建立之初就存在的特性。

== 養成規范：所有的變量定義都放在函數的頭部，不要亂放，便於代碼維護；==

全局變量

全局對象window

//證明
var x ='xxx';
alert(x);
alert(window.x);//默認所有的全局變量，都會自動綁定在window對象下；

alert() 這個函數本身也是一個window的變量；

//證明
var x ='xxx';
window.alert(x);	//二者輸出結果一樣
alert(x);

alert()系統方法可以被自定義方法給覆蓋掉

//證明
var x ='xxx';

window.alert(x);

var old_alert = window.alert;	//保存alert方法

window.alert = function (){	//創建的新方法將原先的alert方法覆蓋掉了

};
//發現alert（）失效了
window.alert(123);

//恢復
window.alert = old_alert;
window.alert(456);

說明：

javascript實際上只有一個全局作用域，任何變量（函數也可以視為變量），假設沒有在函數作用范圍內找到，就會向外查找，如果在全局作用域都沒有找到，就會報錯 RefrenceError

規范

為什么要有規范？

由於我們的所有變量都會綁定到window上。如果不同的js文件，使用了相同的全局變量，就會產生沖突

如何減少沖突？

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

示例：

JQuery就是用來干這個的。

局部作用域

什么是局部作用域沖突？

示例：

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

輸出結果：

在這里插入圖片描述

怎么解決局部作用域沖突問題？

ES6的let關鍵字，解決了局部作用域沖突的問題！

示例：

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

建議用let去定義局部作用域的變量；

常量

在ES6之前，怎么定義常量?

只有用全部大寫字母命名的變量就是常量；建議不要修改這樣的值。

為什么建議不要修改這樣的值。？

原本不能變的常量，可以隨便改變

示例：

ES6之后，怎么定義常量?

引入了常量關鍵字 const

示例：

3、方法

定義方法

方法就是把函數放在對象的里面，對象只有兩個東西：屬性和方法

示例：

var kuangshen = {
    name : '秦疆',
    bitrh: 2000,
    //方法
    age:function(){
        //今年-出生的年
        var now = new Date().getFullYear();
        return now-this.bitrh;
    }
}

控制台輸入

//調用屬性
kuangshen.name
//調用方法，一定要帶（）
kuangshen.age()

this代表什么？

this是無法指向的，是默認指向調用它的那個對象的；

解釋：

將上述代碼中的age:function()拆解：

funtion getAge(){
    //今年-出生的年
    var now = new Date().getFullYear();
    return now-this.bitrh;
}

var kuangshen = {
    name : '秦疆',
    bitrh: 2000,
    age:getAge
}

控制台輸入(>表示輸出)：

kuangshen.age()	
>22
getAge()
>NaN	//由於此時this沒有指明具體指向哪個對象，所以輸出NaN

apply

apply用來干什么？

可以直接給this指明對象，控制this指向

示例

funtion getAge(){
    //今年-出生的年
    var now = new Date().getFullYear();
    return now-this.bitrh;
}

var kuangshen = {
    name : '秦疆',
    bitrh: 2000,
    age:getAge
};

var xiaoming ={
    name:'小明',
    bitrh:2000,
    age: getAge
}

控制台輸入(>表示輸出)：

getAge.apply(xiaoming,[]);//this指向xiaoming，參數為空
>22

內部對象

標准對象

控制台輸入（>輸出）

typeof 123
'number'
typeof `123`
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof []	//數組
'object'
typeof {}	//對象
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'

1、Date

基本使用

var now = new Date();
now.getFullYear();	//年
now.getMonth();		//月	0~11 0代表1月
now.getDate();		//日
now.getDay();		//星期幾
now.getHours();		//時
now.getMinutes();	//分
now.getSeconds();	//秒

now.getTime();	//時間戳 全世界統一從1970 1.1 0：00：00 毫秒數

時間戳轉換

示例：

var now = new Date(1646875961559);

控制台輸入（>輸出）

now.toLocaleString()	//轉換本地時區
>'2022/3/10 09:32:41'
now.toGMTString()		//轉換GMT時區
>'Thu, 10 Mar 2022 01:32:41 GMT'

2、JSON

JSON是什么？

JSON是一種輕量級的數據交換格式
理想的數據交換語言

我的理解：JSON能把對象和對象中的屬性轉換成字符，便與傳輸處理。同時也可以將字符轉換成對象，還原成想要的數據。

為什么用JSON？

易於人閱讀和編寫，同時也易於機器解析和生成，並有效地提升網絡傳輸效率。

在javascript中，一切皆為對象，任何js支持的類型都可以用JSON表示

JSON表示格式：

對象都用
數組都用[ ]
所有的鍵值對都是用key:value

JSON字符串和JS對象轉化

示例：

var user = {
    name:"qinjiang",
    age:3,
    sex:'男'
}

//對象轉化為json字符串{"name":"qinjiang","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);

//json 字符串轉化為對象 參數為json字符串
var obj = JSON.parse('{"name":"qinjiang","age":3,"sex":"男"}');

JSON和JS對象有什么區別？

個人理解：前者是字符串，后者是對象。

示例：

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

3、AJAX

原生的js寫法 xhr異步請求
jQuery封裝好的方法$(#name).ajax("")
axios請求

面向對象編程

1、什么是面向對象編程

我認為這篇博客解釋的很清楚，什么是面向對象。

在談面向對象編程，首先需要了解什么是面向過程編程

什么是面向過程編程?

把需求按照步驟分解實現。

個人理解：

打個比方你想吃一碗面，以面向過程解決這個需求有以下步驟

1、准備面粉

2、和面

3、煮面

4、吃面

什么是面向對象編程？

類：模板

對象：具體實例

個人理解：

還是以吃一碗面為例，以面向對象思維就是

1、下館子

2、吃

面向對象的底層還是面向過程，但是別人以及把過程抽象成類，而我們只需要會用，即在輪子的基礎上造車，而不是花費時間去造輪子。

Javascript的特別之處

原型對象

就是父類，__ proto __可以將對象隨意指向另一個對象。

示例：

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

var xiaoming ={
    name:"xiaoming"
};

//原型對象
xiaoming.__proto__ = Student;

var Bird = {
    fly: function(){
        console.log(this.name +"fly....");
    }
};

//小明 指向 Bird
xiaoming.__proto__ = Bird;

ES6前是如何定義一個類？

示例：

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

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

class繼承

class關鍵字，是在ES6引入的

ES6之后如何定義一個類、屬性、方法？

示例：

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

//創建對象
var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");

//調用對象方法
xiaoming.hello();

如何繼承？

示例：

class Student{
    constructor(name){
        this.name = name;
    }
    hello(){
        alert('hello');
    }
}

//XiaoStudent 繼承 Student
class XiaoStudent extends Student{
    constructor(name,grade){
        super(name);
        this.grade = grade;
    }
    myGrade(){
        alert('我是一名小學生');
    }
}

var xiaoming = new Student("xiaoming");
var xiaohong = new XiaoStudent("xiaohong",1);

控制台輸出（>輸入）:

在這里插入圖片描述

說明：類的本質是對象原型

原型鏈

_ proto _與原型鏈到底是什么？

這篇博客javascript——原型與原型鏈能更好地幫助理解。

操作BOM對象

瀏覽器介紹

這就不詳細介紹了。

什么是BOM？

瀏覽器對象模型

B：Browser 瀏覽器

O：Object 對象

M：Mode 模型

常見的BOM對象

window (瀏覽器窗口)

控制台輸入（>輸出）

//頁面彈窗
window.alert(1)
>undefined
//頁面內高
window.innerHeight
>458
//頁面內寬
window.innerWidth
>867
window.outerHeight
>917
window.outerWidth
>884
//隨瀏覽器窗口大小而改變

Navigator (封裝了瀏覽器的信息) (不建議使用)

控制台輸入（>輸出）

//名
navigator.appName
>'Netscape'
//版本
navigator.appVersion
>'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36'
//代理
navigator.userAgent
>'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36'
//平台
navigator.platform
>'Win32'

大多數時候，我們不會使用navigator對象，因為會被人為修改!
不建議使用這些屬性來判斷和編寫代碼

screen (屏幕尺寸)

screen.height
>943
screen.width
>1676

location (當前頁面的URL信息) （重要）

控制台輸入（>輸出）

location
>......
//主機
>host: "cn.bing.com"
//當前指向的位置
>href: "https://cn.bing.com/"
//協議
>protocol: "https:"
//刷新網頁
>reload: ƒ reload()
//設置新的地址
location.assign('新地址名')

document （當前的頁面，HTML DOM文檔樹）（內容DOM）

控制台輸入（>輸出）

//顯示文檔標題
document.title
>'必應'
//修改文檔標題
'Lao'

在這里插入圖片描述

獲取具體的文檔樹節點

示例:

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

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

獲取cookie

控制台輸入（>輸出）

document.cookie
>'MUID=28E2A9356FF266B63B13B...'

劫持cookie原理

可以看看這篇博客Web安全之Cookie劫持

history （不建議使用）

history.back()	//后退
history.forward()	//前進

操作DOM對象

DOM：文檔對象模型

核心

瀏覽器網頁就是一個Dom樹形結構！

常見操作：

更新：更新Dom節點
遍歷Dom節點：得到Dom節點
刪除：刪除一個Dom節點
添加：添加一個新的節點

PS:要操作一個Dom節點，就必須要先獲得這個Dom節點

獲得Dom節點

控制台輸入（>輸出）

PS:前提首先自己寫一個Dom樹

//跟Css選擇器一樣
document.getElementsByTagName('標簽名')
document.getElementsById('Id名')
document.getElementsByClassName('類名')
var father = document.getElementsById('father')

var childrens = father.children;	//獲取父節點下的所有子節點
father.firstChild	//第一個子節點
father.lastChild	//最后一個子節點

更新節點

首先還是要獲取節點才能對節點進行操作。

操作文本：

.innerText='value'修改文本的值
.innerHTML='<strong>value</strong>'可以解析超文本標簽

操作css：

.style.coler = 'yellow';	//屬性使用 字符串 包裹
.style.fontSize = '20px';	// css中的- 轉 駝峰命名法
.style.padding = '2em'

刪除節點

如何刪除節點？

1、獲取父節點

2、通過父節點刪除自己

示例：

<div id ="father">
    <h1>h1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    //獲取父節點
    var self = document.getElementById('p1')；
    var father = p1.parentElement;
    //通過父節點刪除自己
    father.removeChild(self)
</script>

疑問：能否用father.removeChild(father.children[index])刪掉剩下的子節點？

不能，刪除多個節點的時候，children是在時刻變化的，刪除節點的時候一定要注意。

<div id ="father">
    <h1>h1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    //獲取父節點
    var self = document.getElementById('p1')；
    var father = p1.parentElement;
    
    /*
    刪除是一個動態的過程
    刪除第一個子節點后，后續的子節點下標也隨之改變
    */
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);
</script>

插入節點

注意：

獲得了某個Dom節點后：

若dom節點是空，通過innerHTML就可以增加一個元素；

若Dom節點已經存在元素，則會產生覆蓋。

追加

移動標簽

示例：將“JavaScript”移動到后面

<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>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js);
</script>

效果：

在這里插入圖片描述

創建一個新的標簽

document.createElement('標簽');

示例1：在文本后面添加一個新的< P >標簽

<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>
    var list = document.getElementById('list');
    //通過JS創建一個新的節點
    var newP = document.createElement('p');
    newP.id = 'newP';
  	// 給它一些內容
    newP.innerText = "Hello,Lao";
	// 添加文本節點 到這個list 元素
    list.append(newP);
</script>

效果：

在這里插入圖片描述

示例2：創建一個標簽節點

//創建節點
var myScript = document.creatElement('script');
//修改節點
myScript.setAttribute('type','text/javascript');

示例2：創建一個style標簽,修改背景顏色

//獲取節點
var head = document.getElementsByTagName('head')[0];
var myStyle = document.createElement('style');
//設置節點內容
myStyle.setAttribute('type','text/css');
myStyle.innerHTML='body{background-color:red;}'
//添加節點
head.appendChild(myStyle);

效果：

在這里插入圖片描述

疑問：為什么示例2中var head = document.getElementsByTagName('head')[0]；要加[0]才生效，不加不生效?

這個問題我還在考慮，有懂的小伙伴在下面的評論區告訴我，大家一起討論唄。

insertBefore

insertBefore(newNode,targetNode)

示例：將新的節點插入到目標節點的前面

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//要包含的節點.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);

效果：

在這里插入圖片描述

操作表單（驗證）

表單是什么？

form標簽構建的DOM樹

各種框，我就不贅述了。

表單的目的提交信息

獲得要提交的信息

示例：

<form action = "post">
    <p>
        <span>用戶名：</span><input type="text" id = "username" />
    </p>
    <!--多選框的值就是定義好的value-->
    <p>
        <span>性別：</span>
        <input type = "radio" name = "sex" value = "man" id = "boy"/>男
        <input type = "radio" name = "sex" value = "woman" id = "girl"/>女
    </p>
</form>

<script>
    var input_text = document.getElementById("username");
    var boy_radio = document.getElementById("boy");
    var girl_radio = document.getElementById("girl");
    //得到輸入框的值
    input_text.value
    //修改輸入框的值
    input_text.value  = "value";

    //對於單選框，多選框等等固定的值，boy_radio.value只能取到當前的值
    boy_radio.checked;//查看返回的結果，是否為true，如果為true，則被選中。
    girl_radio.checked = true;//賦值

</script>

提交表單。md5加密密碼，表單優化

1、初級驗證

required和placeholder

2、高級驗證

示例：通過一個函數來傳遞輸入值

<!--模擬表單-->
<form action = "post" >
    <p>
        <span>用戶名：</span><input type="text" id = "username" />
    </p>
    <p>
        <span>密碼：</span><input type="password" id = "password" />
    </p>

    <!--綁定事件 onclick 被點擊-->
    <button type = "button" onclick="aaa()">提交</button>

</form>

<script>
    function aaa(){
        var uname = document.getElementById('username');
        var  pwd = document.getElementById('password');
        console.log(uname.value);
        console.log(pwd.value);
    }
</script>

效果：

在這里插入圖片描述

如何用MD5實現表單加密？

引入MD5加密工具類

<head>
    <meta charset = "UTF-8">
    <title>Title</title>
    <!--MD5加密工具類-->
    <script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>

未加密版

示例：按鍵綁定事件

未作加密前的代碼

<form action = "#" method="post">
    <p>
        <span>用戶名：</span><input type="text" id = "username" name="username"/>
    </p>
    <p>
        <span>密碼：</span><input type="password" id = "password" name="password" />
    </p>

    <!--綁定事件 onclick 被點擊-->
    <button type = "submit" onclick="aaa()">提交</button>

</form>

<script>
    function aaa(){
        var uname = document.getElementById('username');
        var  pwd = document.getElementById('password');
        console.log(uname.value);
        console.log(pwd.value);
    }
</script>

效果：

在這里插入圖片描述

存在不足：

密碼太直觀的暴露。

注意：

<span>用戶名：</span><input type="text" id = "username" name="username"/>
<span>密碼：</span><input type="password" id = "password" name="password" />

這兩句代碼必須有name屬性才能被抓到這個值

加密但不美觀版

未作加密后的代碼

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>
    <!--MD5加密工具類-->
    <script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action = "#" method="post">
    <p>
        <span>用戶名：</span><input type="text" id = "username" name="username"/>
    </p>
    <p>
        <span>密碼：</span><input type="password" id = "password" name="password" />
    </p>

    <!--綁定事件 onclick 被點擊-->
    <button type = "submit" onclick="aaa()">提交</button>

</form>

<script>
    function aaa(){
        var uname = document.getElementById('username');
        var  pwd = document.getElementById('password');
        console.log(uname.value);
        console.log(pwd.value);
        //MD5算法
        pwd.value= md5(pwd.value);
        console.log(pwd.value);
    }
</script>

</body>
</html>

效果：

在這里插入圖片描述

存在不足：

點擊提交的瞬間，密碼欄的密碼變長了，影響美觀
依舊可以通過name屬性獲得密碼，存在安全問題

相對完美版

示例：表單綁定事件

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>
    <!--MD5加密工具類-->
    <script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--表達綁定提交事件
    οnsubmit= 綁定一個提交檢測的函數，true，false
    將這個結果返回給表單，使用onsubmit接收
-->
<form action = "https://www.baidu.com" method = "post" onsubmit = "return aaa()">
    <p>
        <span>用戶名：</span><input type="text" id = "username" name = "username"/>
    </p>
    <p>
        <span>密碼：</span><input type="password" id = "password" />
    </p>
    <input type = "hidden" id = "md5-password" name = "password">

    <!--綁定事件 onclick 被點擊-->
    <button type = "submit">提交</button>

</form>

<script>
    function aaa(){
        alert(1);
        var username = document.getElementById("username");
        var pwd = document.getElementById("password");
        var md5pwd = document.getElementById("md5-password");
        //pwd.value = md5(pwd,value);
        md5pwd.value = mad5(pwd.value);
        //可以校驗判斷表單內容，true就是通過提交，false就是阻止提交
        return true;

    }
</script>

</body>

</html>

jQuery

javaScript和jQuery有什么關系？

jQuery庫，里面存在大量的JavaScript函數

獲取jQuery

注意：

筆記中記錄只是粗略步驟，具體操作看【狂神說Java】初識jQuery及公式

第一種：本地導入

1、下載，jQuery官網下載地址

2、將下載文件導入項目文件中

3、在head標簽內，用外鏈式引入到html文件中

第二種：在線導入

1、尋找在線資源，jQuery cdn加速

2、在head標簽內，用外鏈式引入到html文件中

使用jQuery

公式:

$(selector).action()

示例：

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script></head>
<body>
<a href="" id = "test-jquery">點我</a>
<script>
    //選擇器就是css選擇器
    $('#test-jquery').click(function(){
        alert('hello,jQuery!');
    });
</script>
</body>
</html>

選擇器

//原生js，選擇器少，麻煩不好記
//標簽
document.getElementByTagName();
//id
document.getElementById();
//class
document.getElementByClassName();

//jQuery css中的選擇器它全部都能用！
$('p').click();//標簽選擇器
$('#id1').click();//id選擇器
$('.class1').click;//class選擇器

文檔工具站

事件

鼠標事件、鍵盤事件，其他事件，這些就不贅述了

示例：

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script></head>
    <style>
        #divMove{
            width:500px;
            height:500px;
            border:1px solid red;
        }
    </style>
</head>
<body>
<!--要求：獲取鼠標當前的一個坐標-->
mouse：<span id = "mouseMove"></span>
<div id = "divMove">
    在這里移動鼠標試試
</div>
<script>
    //當網頁元素加載完畢之后，響應事件
    //$(document).ready(function(){})
    $(function(){
        $('#divMove').mousemove(function(e){
            $('#mouseMove').text('x:'+e.pageX+"y:"+e.pageY)
        })
    });
</script>
</body>
</html>

操作DOM

節點文本操作

$('#test-ul li[name=python]').text();//獲得值
$('#test-ul li[name=python]').text('設置值');//設置值
$('#test-ul').html();//獲得值
$('#test-ul').html('<strong>123</strong>');//設置值

CSS的操作

$('#test-ul li[name=python]').css({"color","red"});

元素的顯示和隱藏

本質display:none

$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();

未來ajax()

$('#form').ajax()

$.ajax({url:"test.html",context:document.body,success:function(){
	$(this).addClass("done");
}})

總結

1、多看源碼，推薦網站源碼之家

2、多扒網站，按F12審查元素，按delete鍵刪掉非關鍵元素（注意：CSS不能隨意抄別人的可能會侵權）

總結

1、多看源碼，推薦網站源碼之家

2、多扒網站，按F12審查元素，按delete鍵刪掉非關鍵元素（注意：CSS不能隨意抄別人的可能會侵權）

【筆記】【JavaScript】狂神說-JavaScript學習筆記

JavaScript學習筆記

前言

注意

快速入門

嚴格檢查格式

數據類型

1、字符串

2、數組

疑問1：是否可以push()，pop()具體某個數值?

3、對象

4、流程控制

5、Map和Set

6、iterator

函數

1、定義函數

疑問2：參數進來是否存在問題？假設不存在參數，如何規避？

疑問3：arguments包含所有的參數，如何排除已有參數，使用多余的參數來進行附加操作？

2、變量的作用域

為什么要有規范？

如何減少沖突？

什么是局部作用域沖突？

怎么解決局部作用域沖突問題？

在ES6之前，怎么定義常量?

為什么建議不要修改這樣的值。？

ES6之后，怎么定義常量?

3、方法

this代表什么？

apply用來干什么？

內部對象

1、Date

2、JSON

JSON是什么？

為什么用JSON？

JSON表示格式：

JSON字符串和JS對象轉化

JSON和JS對象有什么區別？

3、AJAX

面向對象編程

1、什么是面向對象編程

什么是面向過程編程?

什么是面向對象編程？

Javascript的特別之處

ES6前是如何定義一個類？

ES6之后如何定義一個類、屬性、方法？

如何繼承？

_ proto _與原型鏈到底是什么？

操作BOM對象

什么是BOM？

常見的BOM對象

劫持cookie原理

操作DOM對象

如何刪除節點？

疑問：能否用father.removeChild(father.children[index])刪掉剩下的子節點？

追加

疑問：為什么示例2中var head = document.getElementsByTagName('head')[0]；要加[0]才生效，不加不生效?

操作表單（驗證）

1、初級驗證

2、高級驗證

如何用MD5實現表單加密？

未加密版

加密但不美觀版

相對完美版

jQuery

javaScript和jQuery有什么關系？

公式:

節點文本操作

CSS的操作

元素的顯示和隱藏

未來ajax()

總結

推薦網站

節點文本操作

CSS的操作

元素的顯示和隱藏

未來ajax()

總結

推薦網站

免責聲明！