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