javascript
JavaScript(笔记)
UI框架
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-yYMMLanm-1608952213820)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20201225142522925.png)]
簡(jiǎn)介
javaScript是一門(mén)世界上最流行的腳本語(yǔ)言
Java，JavaScript
10天
一個(gè)合格的后端人員，必須精通JavaScript
ECMAScript它可以理解為JavaScript的一個(gè)標(biāo)準(zhǔn)
最新版本已經(jīng)到es6版本~
但是大部分瀏覽器還只停留在支持es5代碼上！
開(kāi)發(fā)環(huán)境–線上環(huán)境，版本不一致
快速入門(mén)
引入JavaScript
1、內(nèi)部標(biāo)簽
<script> //.... <script>2、外部引入
hj.js
test.html
<!--外部引入注意：script必須成對(duì)出現(xiàn)--><script src="js/hj.js"></script><!--不用顯示定義type，也默認(rèn)就是javaScript--><script type="text/javascript"></script> 1234567測(cè)試代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--script標(biāo)簽內(nèi)，寫(xiě)Javascript代碼--><!--<script>alert("hello,world");</script>--><!--外部引入注意：script必須成對(duì)出現(xiàn)--><script src="js/hj.js"></script><!--不用顯示定義type，也默認(rèn)就是javaScript--><script type="text/javascript"></script> </head> <body><!--這里也可以存放--> </body> </html>基本語(yǔ)法入門(mén)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--JavaScript嚴(yán)格區(qū)分大小寫(xiě)--><script>// 1. 定義變量 變量類(lèi)型 變量名 = 變量值var score = 1 ;//alert(num)// 2. 條件控制if (score > 60 && score < 70){alert("60~70");}else if(score > 70 && score < 80){alert("70~80");}else{alert("other")}</script> </head> <body></body> </html>瀏覽器必備調(diào)試須知：
打斷點(diǎn)調(diào)試
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-Usq2K9CK-1608952213823)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20201225151635829.png)]
數(shù)據(jù)類(lèi)型
數(shù)值，文本，圖形，音頻，視頻
變量
var anumber
js不區(qū)分小數(shù)和整數(shù)，Number
字符串
‘a(chǎn)bc’ “abc”
布爾值
true，false
邏輯運(yùn)算
&& 兩個(gè)都為真，結(jié)果為真|| 一個(gè)為真，結(jié)果為真! 真即假，假即真比較運(yùn)算符 ！！！重要！
= 1，"1" == 等于（類(lèi)型不一樣，值一樣，也會(huì)判斷為true） === 絕對(duì)等于（類(lèi)型一樣，值一樣，結(jié)果為true）這是一個(gè)JS的缺陷，堅(jiān)持不要使用 == 比較
須知：
- NaN === NaN，這個(gè)與所有的數(shù)值都不相等，包括自己
- 只能通過(guò)isNaN（NaN）來(lái)判斷這個(gè)數(shù)是否是NaN
浮點(diǎn)數(shù)問(wèn)題
console.log((1/3) === (1-2/3))盡量避免使用浮點(diǎn)數(shù)進(jìn)行運(yùn)算，存在精度問(wèn)題！
Math.abs(1/3-(1-2/3))<0.00000001null 和 undefined
- null 空
- undefined 未定義
數(shù)組
Java的數(shù)組必須是相同類(lèi)型的對(duì)象~，JS中不需要這樣
取數(shù)字下標(biāo)：如果越界了，就會(huì) 報(bào)undefined
undefined對(duì)象
對(duì)象是大括號(hào)，數(shù)組是中括號(hào)
每個(gè)屬性之間使用逗號(hào)隔開(kāi)，最后一個(gè)屬性不需要逗號(hào)
// Person person = new Person(1,2,3,4,5);var person = {name:'Tom',age:3,tags:['js','java','web','...'] }取對(duì)象值
person.name > "Tom" person.age > 3 1234嚴(yán)格檢查格式
use strict必須寫(xiě)在JavaScript的第一行！
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--前提：IDEA需要設(shè)置支持ES6語(yǔ)法'use strict';嚴(yán)格檢查模式，預(yù)防JavaScript的隨意性導(dǎo)致產(chǎn)生的一些問(wèn)題必須寫(xiě)在JavaScript的第一行！局部變量建議都使用let去定義~--><script>'use strict';//全局變量let i=1//ES6 let</script> </head> <body></body> </html>數(shù)據(jù)類(lèi)型
字符串
1、正常字符串我們使用 單引號(hào)，或者雙引號(hào)包裹
2、注意轉(zhuǎn)義字符 \
3、多行字符串編寫(xiě)
//tab 上面 esc下面var msg =`helloworld你好呀nihao`4、模板字符串·
//tab 上面 esc下面 let name = 'Tom'; let age = 3; var msg = `你好，${name}`5、字符串長(zhǎng)度
str.length6、字符串的可變性，不可變
7、大小寫(xiě)轉(zhuǎn)換
8、student.indexof(‘t’)
9、substring，從0開(kāi)始
數(shù)組
Array可以包含任意的數(shù)據(jù)類(lèi)型
var arr = [1,2,3,4,5,6];//通過(guò)下標(biāo)取值和賦值1、長(zhǎng)度
arr.length注意：假如給arr.lennth賦值，數(shù)組大小就會(huì)發(fā)生變化~，如果賦值過(guò)小，元素就會(huì)丟失
2、indexOf，通過(guò)元素獲得下標(biāo)索引
arr.indexOf(2)字符串的"1"和數(shù)字 1 是不同的
**3、slice（）**截取Array的一部分，返回的一個(gè)新數(shù)組，類(lèi)似于String中substring
4、push()，pop()尾部
5、unshift(),shift() 頭部
unshift：壓入到頭部 shift：彈出頭部的一個(gè)元素6、排序sort()
(3)["B","C","A"] arr.sort() (3)["A","B","C"]7、元素反轉(zhuǎn)reverse()
(3)["A","B","C"] arr.reverse() (3)["C","B","A"]8、concat()
注意：concat()并沒(méi)有修改數(shù)組，只是會(huì)返回一個(gè)新的數(shù)組
9、連接符join
打印拼接數(shù)組，使用特定的字符串連接
10、多維數(shù)組
數(shù)組：存儲(chǔ)數(shù)據(jù)（如何存，如何取，方法都可以自己實(shí)現(xiàn)！）
對(duì)象
最后一個(gè)屬性不加逗號(hào)！
若干個(gè)鍵值對(duì)
var 對(duì)象名 = {屬性名：屬性值，屬性名：屬性值，屬性名：屬性值 } //定義了一個(gè)person對(duì)象，它有四個(gè)屬性 var person = {name:"Tom",age:3,email:"123456798@QQ.com",score:66 }Js中對(duì)象，{…}表示一個(gè)對(duì)象，建制對(duì)描述屬性xxx：xxx，多個(gè)屬性之間用逗號(hào)隔開(kāi)，最后一個(gè)屬性不加逗號(hào)！
JavaScript中的所有的鍵都是字符串，值是任意對(duì)象！
1、對(duì)象賦值
2、使用一個(gè)不存在的對(duì)象屬性，不會(huì)報(bào)錯(cuò)！undefined
3、動(dòng)態(tài)的刪減屬性，通過(guò)delete刪除對(duì)象的屬性
4、動(dòng)態(tài)的添加，直接給新的屬性添加值即可
5、判斷屬性值是否在這個(gè)對(duì)象中！xxx in xxx
6、判斷一個(gè)屬性是否是這個(gè)對(duì)象自身?yè)碛械?hasOwnProperty()
流程控制
if判斷
while循環(huán)，避免程序死循環(huán)
for循環(huán)
forEach循環(huán)
ES5.1特性
for …in-------下標(biāo)
num就是一個(gè)索引
Map和Set
ES6的新特性~
Map
Set：無(wú)序不重復(fù)的集合
iterator
es6新特性
作業(yè)：使用iterator來(lái)遍歷迭代我們Map，Set！
遍歷數(shù)組
遍歷Map
遍歷set
函數(shù)
定義函數(shù)
定義方式一
絕對(duì)值函數(shù)
一旦執(zhí)行到return代表函數(shù)結(jié)束，返回結(jié)果！
如果沒(méi)有執(zhí)行return，函數(shù)執(zhí)行完也會(huì)返回結(jié)果，結(jié)果就是undefined
定義方式二
function(x){…}這是一個(gè)匿名函數(shù)。但是可以吧結(jié)果賦值給abs，通過(guò)abs就可以調(diào)用函數(shù)！
方式一和方式二等價(jià)！
調(diào)用函數(shù)
abs(10)//10 abs(-10) //10 12參數(shù)問(wèn)題：javaScript可以傳任意個(gè)參數(shù)，也可以不傳遞參數(shù)~
參數(shù)進(jìn)來(lái)是否存在問(wèn)題？
假設(shè)不存在參數(shù)，如何規(guī)避？
arguments
arguments是一個(gè)JS免費(fèi)贈(zèng)送的關(guān)鍵字；
代表，傳遞進(jìn)來(lái)的所有參數(shù)，是一個(gè)數(shù)組！
問(wèn)題：arguments包含所有的參數(shù)，我們有時(shí)候想使用多余的參數(shù)來(lái)進(jìn)行附加操作。需要排除已有參數(shù)~
rest
以前：
ES6引入的新特性，獲取除了已經(jīng)定義的參數(shù)之外的所有參數(shù)~…
rest參數(shù)只能寫(xiě)在最后面，必須用…標(biāo)識(shí)。
變量的作用域
在javascript中，var定義變量實(shí)際是有作用于的。
假設(shè)在函數(shù)體重聲明，則在函數(shù)體外不可以使用~（閉包）
如果兩個(gè)函數(shù)使用了相同的變量名，只要在函數(shù)內(nèi)部就不沖突
內(nèi)部函數(shù)可以訪問(wèn)外部函數(shù)的成員，反之則不行
假設(shè)，內(nèi)部函數(shù)變量和外部函數(shù)變量，重名！
假設(shè)在JavaScript中，函數(shù)查找變量從自身函數(shù)開(kāi)始~， 由“內(nèi)”向“外”查找，假設(shè)外部存在這個(gè)同名的函數(shù)變量，則內(nèi)部函數(shù)會(huì)屏蔽外部函數(shù)的變量。
提升變量的作用域
結(jié)果：x undefined
說(shuō)明：js執(zhí)行引擎，自動(dòng)提升了y的聲明，但是不會(huì)提升變量y的賦值；
這個(gè)是在javascript建立之初就存在的特性。 養(yǎng)成規(guī)范：所有 的變量定義都放在函數(shù)的頭部，不要亂放，便于代碼維護(hù)；
全局變量
全局對(duì)象window
alert() 這個(gè)函數(shù)本身也是一個(gè)window的變量；
javascript實(shí)際上只有一個(gè)全局作用域，任何變量（函數(shù)也可以視為變量），假設(shè)沒(méi)有在函數(shù)作用范圍內(nèi)找到，就會(huì)向外查找，如果在全局作用域都沒(méi)有找到，就會(huì)報(bào)錯(cuò) Refrence
規(guī)范
由于我們的所有變量都會(huì)綁定到window上，。如果不同的js文件，使用了相同的全局變量，就會(huì)產(chǎn)生沖突—>如何減少這樣的沖突？
把自己的代碼全部放入自己定義的唯一空間名字中，降低全局命名沖突問(wèn)題~
jQuery中就是使用的該方法：jQuery.name，簡(jiǎn)便寫(xiě)法：$()
局部作用域
ES6的let關(guān)鍵字，解決了局部作用域沖突的問(wèn)題！
建議大家都用let去定義局部作用域的變量；
常量
在ES6之前，怎么定義常量：只有用全部大寫(xiě)字母命名的變量就是常量；建議不要修改這樣的值。
在ES6引入了常量關(guān)鍵字 const
方法
定義方法
方法就是把函數(shù)放在對(duì)象的里面，對(duì)象只有兩個(gè)東西：屬性和方法
this
代表什么？拆開(kāi)上main的代碼看看
this是無(wú)法指向的，是默認(rèn)指向調(diào)用它的那個(gè)對(duì)象的；
apply
在js中可以控制this指向
內(nèi)部對(duì)象
標(biāo)準(zhǔn)對(duì)象
Date
基本使用
轉(zhuǎn)換
JSON
JSON是什么
在javascript中，一切皆為對(duì)象，任何js支持的類(lèi)型都可以用JSON表示
格式
- 對(duì)象都用{}
- 數(shù)組都用[]
- 所有的鍵值對(duì) 都是用key:value
JSON字符串和js對(duì)象轉(zhuǎn)化
很多人搞不清楚，JSON和JS對(duì)象的區(qū)別
AJAX
- 原生的js寫(xiě)法 xhr異步請(qǐng)求
- jQuery封裝好的方法$(#name).ajax("")
- axios請(qǐng)求
面向?qū)ο缶幊?/h1>
原型對(duì)象
javascript、java、c#------面向?qū)ο?#xff1b;但是javascript有些區(qū)別！
- 類(lèi)：模板
- 對(duì)象：具體實(shí)例
在javascript中，需要大家轉(zhuǎn)換一下思維方式！
原型：
class集繼承
class關(guān)鍵字，是在ES6引入的
1、定義一個(gè)類(lèi)、屬性、方法
2、繼承
本質(zhì)：查看對(duì)象原型
原型鏈
proto:
操作BOM對(duì)象（重點(diǎn)）
瀏覽器介紹
javascript和瀏覽器關(guān)系？
BOM：瀏覽器對(duì)象模型
- IE6~11
- Chrome
- Safari
- FireFox
- Opera
三方
- QQ瀏覽器
- 360瀏覽器
window
window代表瀏覽器窗口
Navigator（不建議使用）
Navigator封裝了瀏覽器的信息
大多數(shù)時(shí)候，我們不會(huì)使用navigator對(duì)象，因?yàn)闀?huì)被人為修改!
不建議使用這些屬性來(lái)判斷和編寫(xiě)代碼
screen
代表屏幕尺寸
location(重要)
location代表當(dāng)前頁(yè)面的URL信息
document（內(nèi)容DOM）
document代表當(dāng)前的頁(yè)面，HTML DOM文檔樹(shù)
獲取具體的文檔樹(shù)節(jié)點(diǎn)
獲取cookie
劫持cookie原理
www.taobao.com
服務(wù)器端可以設(shè)置cookie為httpOnly
history（不建議使用 ）
history代表瀏覽器的歷史記錄
操作DOM對(duì)象（重點(diǎn)）
DOM：文檔對(duì)象模型
核心
瀏覽器網(wǎng)頁(yè)就是一個(gè)Dom樹(shù)形結(jié)構(gòu)！
- 更新：更新Dom節(jié)點(diǎn)
- 遍歷Dom節(jié)點(diǎn)：得到Dom節(jié)點(diǎn)
- 刪除：刪除一個(gè)Dom節(jié)點(diǎn)
- 添加：添加一個(gè)新的節(jié)點(diǎn)
要操作一個(gè)Dom節(jié)點(diǎn)，就必須要先獲得這個(gè)Dom節(jié)點(diǎn)
獲得Dom節(jié)點(diǎn)
這是原生代碼，之后我們盡量都使用jQuery();
更新節(jié)點(diǎn)
操作文本
操作css
刪除節(jié)點(diǎn)
刪除節(jié)點(diǎn)的步驟：先獲取父節(jié)點(diǎn)，再通過(guò)父節(jié)點(diǎn)刪除自己
注意：刪除多個(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)生覆蓋
追加
創(chuàng)建一個(gè)新的標(biāo)簽
<script>var js = document.getElementById('js');//已經(jīng)存在的節(jié)點(diǎn)var list = document.getElementById('list');//通過(guò)JS創(chuàng)建一個(gè)新的節(jié)點(diǎn)var newP = document.creatElement('p');//創(chuàng)建一個(gè)p標(biāo)簽newP.id = 'newP';newP.innerText = 'Hello,Kuangshen';//創(chuàng)建一個(gè)標(biāo)簽節(jié)點(diǎn)var myScript = document.creatElement('script');myScript.setAttribute('type','text/javascript');//可以創(chuàng)建一個(gè)style標(biāo)簽var myStyle = document.creatElement('style');//創(chuàng)建了一個(gè)空style標(biāo)簽myStyle.setAttribute('type','text/css');myStyle.innerHTML = 'body{background-color:chartreuse;}';//設(shè)置標(biāo)簽內(nèi)容document.getElementByTagName('head')[0].appendChild(myStyle); </script>insertBefore
var ee = document.getElementById('ee'); var js = document.getElementById('js'); var list = document.getElementById('list'); //要包含的節(jié)點(diǎn).insertBefore(newNode,targetNode) list.insertBefore(js,ee);jQuery：https://jquery.cuishifeng.cn/
操作表單
表單是什么？form-----DOM樹(shù)
- 文本框----text
- 下拉框----select
- 單選框----radio
- 多選框----checkbox
- 隱藏域----hidden
- 密碼框----password
- …
表單的目的提交信息
獲得要提交的信息
<body><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";//對(duì)于單選框，多選框等等固定的值，boy_radio.value只能取到當(dāng)前的值boy_radio.checked;//查看返回的結(jié)果，是否為true，如果為true，則被選中。girl_radio.checked = true;//賦值</script> </body>提交表單
md5加密密碼，表單優(yōu)化
<!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><!--表達(dá)綁定提交事件οnsubmit= 綁定一個(gè)提交檢測(cè)的函數(shù)，true，false將這個(gè)結(jié)果返回給表單，使用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 被點(diǎn)擊--><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 = md5(pwd.value);//可以校驗(yàn)判斷表單內(nèi)容，true就是通過(guò)提交，false就是阻止提交return true;}</script></body> </html>jQuery
javaScript和jQuery的關(guān)系？
jQuery庫(kù)，里面存在大量的JavaScript函數(shù)
獲取jQuery
jQuery官網(wǎng)：
Ctrl加shift加減號(hào)
可以折成一行
公式：$(selector).action()
<!DOCTYPE html> <html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><script src="lib/jquery-3.4.1.js"></script></head><body><a href="" id = "test-jquery">點(diǎn)我</a><script>//選擇器就是css選擇器$('#test-jquery').click(function(){alert('hello,jQuery!');});</script></body> </html>選擇器
//原生js，選擇器少，麻煩不好記 //標(biāo)簽 document.getElementByTagName(); //id document.getElementById(); //class document.getElementByClassName();//jQuery css中的選擇器它全部都能用！ $('p').click();//標(biāo)簽選擇器 $('#id1').click();//id選擇器 $('.class1').click();//class選擇器文檔工具站：http://jquery.cuishifeng.cn/
事件
鼠標(biāo)事件、鍵盤(pán)事件，其他事件
mousedown()(jQuery)----按下 mouseenter()(jQuery) mouseleave()(jQuery) mousemove()(jQuery)----移動(dòng) mouseout()(jQuery) mouseover()(jQuery) mouseup()(jQuery) <!DOCTYPE html> <html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><script src="lib/jquery-3.4.1.js"></script><style>#divMove{width:500px;height:500px;border:1px solid red;}</style></head><body><!--要求：獲取鼠標(biāo)當(dāng)前的一個(gè)坐標(biāo)-->mouse：<span id = "mouseMove"></span><div id = "divMove">在這里移動(dòng)鼠標(biāo)試試</div><script>//當(dāng)網(wǎng)頁(yè)元素加載完畢之后，響應(yīng)事件//$(document).ready(function(){})$(function(){$('#divMove').mousemove(function(e){$('#mouseMove').text('x:'+e.pageX+"y:"+e.pageY)})});</script></body> </html>操作DOM
節(jié)點(diǎn)文本操作
$('#test-ul li[name=python]').text();//獲得值 $('#test-ul li[name=python]').text('設(shè)置值');//設(shè)置值 $('#test-ul').html();//獲得值 $('#test-ul').html('<strong>123</strong>');//設(shè)置值CSS的操作
$('#test-ul li[name=python]').css({"color","red"});元素的顯示和隱藏，：本質(zhì)display:none
$('#test-ul li[name=python]').show(); $('#test-ul li[name=python]').hide();娛樂(lè)測(cè)試
$(window).width() $(window).height() $('#test-ul li[name=python]').toggle();//進(jìn)行狀態(tài)切換未來(lái)ajax()；
$('#form').ajax()$.ajax({url:"test.html",context:document.body,success:function(){$(this).addClass("done"); }})小技巧
1、如何鞏固JS（看jQuery源碼，看游戲源碼！）
2、鞏固HTML、CSS（扒網(wǎng)站，全部down下來(lái)，然后對(duì)應(yīng)修改看效果~）
總結(jié)
以上是生活随笔為你收集整理的JavaScript(笔记)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 跳棋必胜的十个技巧 跳棋必胜窍门介绍
- 下一篇： 什么是水平衡 水平衡是啥