當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

JavaScript(笔记)

發(fā)布時(shí)間：2023/12/3 javascript 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript(笔记) 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

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)簽

2、外部引入
hj.js

alert("hello,world");

test.html

<script src="js/hj.js"></script><script type="text/javascript"></script> 1234567

測(cè)試代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="js/hj.js"></script><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><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 a

number
js不區(qū)分小數(shù)和整數(shù)，Number

123//整數(shù)123 123.1//浮點(diǎn)數(shù)123.1 1.123e3//科學(xué)計(jì)數(shù)法 -99//負(fù)數(shù) NaN //not a number Infinity // 表示無(wú)限大

字符串
‘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.00000001

null 和 undefined

null 空
undefined 未定義

數(shù)組
Java的數(shù)組必須是相同類(lèi)型的對(duì)象~，JS中不需要這樣

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

取數(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><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)義字符 \

\' \n \t \u4e2d \u##### Unicode字符\x41 Ascall字符

3、多行字符串編寫(xiě)

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

4、模板字符串·

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

5、字符串長(zhǎng)度

str.length

6、字符串的可變性，不可變

7、大小寫(xiě)轉(zhuǎn)換

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

8、student.indexof(‘t’)
9、substring，從0開(kāi)始

[) student.substring(1)//從第一個(gè)字符串截取到最后一個(gè)字符串 student.substring(1,3)//[1,3)

數(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()尾部

push：壓入到尾部 pop：彈出尾部的一個(gè)元素

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、繼承
<script>//ES6之后========================//定義一個(gè)學(xué)生的類(lèi)class Student{constructor(name){this.name = name;}hello(){alert('hello');} }class XiaoStudent extends Student{constructor(name,grade){super(name);this.grade = grade;}myGrade(){alert('我是一名小學(xué)生');}}var xiaoming = new Student("xiaoming");var xiaohong = new XiaoStudent("xiaohong",1); </script>
本質(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)簽

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><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><script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script></head><body><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"> <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>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)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：跳棋必胜的十个技巧跳棋必胜窍门介绍
下一篇：什么是水平衡水平衡是啥