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)題。
- 上一篇: 跳棋必胜的十个技巧 跳棋必胜窍门介绍
- 下一篇: 什么是水平衡 水平衡是啥