JS超詳細學習筆記
阿新 • • 發佈：2021-02-09
技術標籤：前端基礎kk的小百科jsjavascriptweb
1.什麼是JavaScript
1.1概述
JavaScript一門世界上最流行指令碼語言。
一個合格的後端人員，必須精通JavaScript。
1.2歷史
ECMAscript它可以理解為JavaScript的一個標準，最新版本已經到es6版本，但是大部分瀏覽器還只停留在支援es5程式碼上！
開發環境—線上環境，版本不一致。
2.快速入門
2.1 引入JavaScript
1.內部標籤
<script>
//....
</script>
2.外部引入
abc.js
//...
test.html
< 2.2基本語法入門
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Javascript嚴格區分大小寫！-->
<script>
// 1.定義變數 變數型別 變數名=變數值；
var 瀏覽器必備知識：
2.3.資料型別
數值 文字 圖形 音訊 視訊…
變數(定義是不能以數字開頭)
var 王者榮耀="倔強青銅"
number
js不區分小數和整數 Number
123 //整數123
123.1 //浮點數123.1
1.123e3//科學計數法
-99 //負數
NaN //not a number
Infinity //表示無限大
字串
‘abc’ ‘‘abc’’
布林值
true , flase
邏輯運算
&&
||
！
比較運算子
= 賦值
== 等於（型別不一樣，值一樣，也會判斷為true）
=== 絕對等於（型別和值一樣）
須知：
- NaN與所有的數值都不想等，包括自己
- 只能通過isNaN(NaN)來判斷這個數是否為NaN
浮點數問題：
console.log((1/3)===(1-2/3))
儘量避免使用浮點數進行運算，存在精度問題！
Math.abs(1/3-(1-2/3))<0.00001
null和undefined
- null 空
- undefined 未定義
陣列
java的陣列必須是相同的型別，一系列相同型別的物件,js中不需要這樣！
// 保證程式碼可讀性，儘量使用[]
var arr=[1,2,3,4,5,'hello',null,true]
new Array(1,2,3,4,'hello')
去陣列下標，如果越界了，就會 undefined
物件
物件是大括號，陣列是中括號
，每個屬性之間使用逗號隔開，最後一個不要新增
//Person person=new person(1,2,3,4,5);
var person={
name:"kk",
age:18,
tags:['js','java','web']
}
取物件的值
person.name
"kk"
2.4嚴格檢查格式
（‘use strict’；）
<script>
//'use strict'; 嚴格檢查模式，預防JavaScript的隨意性導致產生的一些問題
//'use strict'; 必須寫在JavaScript第一行；
//區域性變數 建議都是用let去定義
'use strict';
//Es6 let定義區域性變數
let i=2;
</script>
3. 資料型別
3.1字串
- 正常字串我們使用’ ‘或者“ ”包裹
- 注意轉義字元 \
\'
\n
\t
\u4e2d unicode字元
\x41 Ascll字元
- 多行字串編寫
//tab上面的piao
var msg=`
world
你好
kk
`
- 模板字串
//tab上面的piao
let name ='kk';
let agr=18;
let msg=`
你好呀,
${name}
`
- 字串長度
str.length
- 字串的可變性，不可變
student[0]=1
1
console.log(student)
VM361:1 student
- 大小寫轉換
//注意：這裡是方法，不是屬性
console.log(student.toLocaleUpperCase())
console.log(student.toLocaleLowerCase())
- student.indexOf(‘u’)
console.log(student.indexOf('u'))
//字串中u的位置
- substring
console.log(student.substring(1,3))
tu
//字串中2.3的內容
3.2陣列
Array可以包含任意資料型別
var arr =[1,2,3,4,5,6] //通過下標取值和賦值
arr[0]
arr[0]=1;
- 長度
arr.length
注意：假如給arr,length賦值，陣列大小會發生變化~如果賦值過小，元素會丟失
- indexOf,通過元素獲得下標索引
arr.indexOf(2)
1
字串的1和數字1是不同的！
- slice（）擷取Array的一部分，返回一個新的陣列
arr=[1,2,3,4,5,6,"1","2"]
(8) [1, 2, 3, 4, 5, 6, "1", "2"]
arr.slice(3)
(5) [4, 5, 6, "1", "2"]
- push和pop(壓入尾部和彈出尾部)
arr
(8) [1, 2, 3, 4, 5, 6, "1", "2"]
arr.push('a','b')
10
arr
(10) [1, 2, 3, 4, 5, 6, "1", "2", "a", "b"]
arr.pop()
"b"
arr
(9) [1, 2, 3, 4, 5, 6, "1", "2", "a"]
-
unshift(),shift()(壓入頭部和彈出頭部)（同4）
-
排序 sort()
(5) [1, 2, 3, 4, 5]
arr.unshift(6)
6
arr.sort()
(6) [1, 2, 3, 4, 5, 6]
- 元素反轉
arr.reverse()
(6) [6, 5, 4, 3, 2, 1]
- conat()
arr.concat(["a","b","c"])
(9) [6, 5, 4, 3, 2, 1, "a", "b", "c"]
arr
(6) [6, 5, 4, 3, 2, 1]
注意：concat（）並沒有修改陣列，只是返回一個新的陣列
- 連線符join
arr
(6) [6, 5, 4, 3, 2, 1]
arr.join('-')
"6-5-4-3-2-1"
列印拼接陣列，使用特定的字串連線
- 多維陣列
array=[[1,2],[3,4],["5","6"]];
array [1][1]
4
陣列：儲存資料（如何存，如何取，方法都可以實現）
3.3物件
若干個鍵值對，
var 物件名={
屬性名：屬性值,
屬性名：屬性值,
屬性名：屬性值
}
var person={
name:"kk",
age: 3,
email:"[email protected]",
score:0
}
JS中物件，{…}表示一個物件，鍵值對描述屬性xxxx:xxxx,多個屬性之間使用逗號隔開，最後一個屬性不加逗號。
JavaScript中所有的鍵都是字串，值是任意物件！
- 物件賦值
person.age=16
16
- 使用一個不存在的物件屬性，不會報錯！ undefined
person.sss
undefined
- 動態的刪除屬性，通過delete刪除物件的屬性
delete person.name
true
- 動態的新增
person.haha="haha"
"haha"
- 判斷屬性值是否在物件中！ xxx in xxx
'age' in person
true
//繼承
'toString' in person
true
- 判斷一個屬性是否是這個物件自身擁有的hasOwnProperty()
person.hasOwnProperty('toSting')
false
person.hasOwnProperty('age')
true
3.4流程控制
if判斷
var age =4;
if(age>3){ //第一個判斷
alert("haha");
}else if(age<3){ //第二個判斷
alert("kuwa");
}else{
alert("www");
}
while迴圈，避免程式死迴圈
var age =3;
while(age<100){
age=age+1;
console.log(age)
}
do{
age=age+1;
console.log(age)
}while(age<100)
for迴圈
var age =3;
for (let i = 0; i < 100; i++) {
console.log(i)
}
forEach迴圈
var age =[12,3,4,13,22,11,123,33];
age.forEach(function (value){
console.log(value)
})
3.5Map和Set
ES6的新特性
//Es6 Map
//學生的成績；學生的名字
// var names=["a","b","c"];
//var scores=[100,90,80];
var map=new Map([['a',100],['b',90],['c',80]]);
var name = map.get('a');//通過key獲得value
map.set('admin',123456); //新增或修改
map.delete('a');//刪除一個元素
//Set 無序不重複集合
var set= new Set([3,1,1,1,1]);//set可以去重
set.add(2);//新增
set.delete(1);//刪除
console.log(set.has(3));//是否包含某個元素
3.6iterable迭代
//通過for of /for in下標
var arr=[3,4,5];
for(var x of arr) {
console.log(x);
}
遍歷map
var map=new Map([["a",100],["b",90],["c",80]]);
for(let x of map) {
console.log(x);
}
遍歷set
var set=new Set([5,6,7]);
for (let x of set)
console.log(x);
遍歷下標
for(let x in arr)
{
console.log(x)
}
4.函式
4.1 定義函式
絕對值函式
定義方式一
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
一旦執行到return，代表函式結束，返回結果！
如果沒有執行return,函式執行完也會返回結果，結果就是undefined.
定義方式二
var abs =function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
function(x){…}這是一個匿名函式，但是可以把結果賦值給abs，通過abs就可以呼叫函式！
呼叫函式
abs(10) //10
abs(-10) //10
引數問題：javascript可以傳任意個引數，也可以不傳遞引數。
引數進來是否存在的問題？假設不存在引數，如何迴避
var abs =function(x){
//手動丟擲異常來判斷
if(typeof x!=='number'){
throw 'Not a number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
arguments
argument是一個JS免費贈送的關鍵字；
代表，傳遞進來的所有的引數，是一個數組。
var abs =function(x){
console.log("x=>"+x);
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
if(x>=0){
return x;
}else{
return -x;
}
}
問題：arguments包含所有的引數，我麼有時候想使用多餘的引數來進行附加操作，需要排除有的引數。
rest
以前
if (arguments.length>2){
for (let i = 2; i < arguments.length; i++) {
}
}
Es6引入新特性，獲取除了已經定義的函式之外的所有函式~ …
function aaa(a,b,...rest) {
console.log("a=>" + a);
console.log("b=>" + b);
console.log(rest);
}
rest引數只能寫在後面必須用 …標記。
4.2變數的作用域
在javascript中，var定義變數實際是有作用域的。
假設在函式體中宣告，則在函式體外不可以使用~(閉包)
function qj(){
var x=1;
x=x+1;
}
x=x+2； // Uncaught ReferenceError: x is not defined
如果兩個函式使用了相同的變數名，只要在函式內部，就不衝突
function qj(){
var x=1;
x=x+1;
}
function qj2(){
var x=1;
x=x+1;
}
內部函式可以訪問外部函式成員，反之則不行
function qj() {
var x = 1;
//內部函式可以訪問外部函式成員，反之不行。
function qj2() {
var y= x+1;//
}
var z=y+1;//
}
假設，內部函式變數和外部函式變數的重名！
function qj() {
var x = 1;
//內部函式可以訪問外部函式成員，反之不行。
function qj2() {
var x= 'A';//
console.log('inner'+x)
}
console.log('outer'+x)
qj2();
}
qj();
假設在JavaScript從函式查詢變數從自身函式開始~，由內向外查詢！假設外部存在這個同名的函式變數，則內部函式變數會遮蔽外部函式變數
提升變數的作用域
function qj(){
var x="x"+y;
console.log(x);
var y='y';
}
qj();
結果：xundefined
說明：js執行引擎，自動提升了y的宣告，但是不會提升變數y的賦值；
function qj2(){
var y;
var x="x"+y;
console.log(x);
y='y';
}
這個是在JavaScript建立之初就存在的特性，養成規範；所有的變數定義都放在函式頭部，不要亂放，便於程式碼維護
function qj2(){
var x=1,
y=x+1,
z,i,a;//undefined
//之後隨意用
}
全域性函式
//全域性變數
var x =1;
function f(){
console.log(x);
}
f();
console.log(x)
全域性物件window
var x ='xxx';
alert(x);
alert(window.x);
alert本身也是一個window的變數；
//全域性變數
var x ='xxx';
window.alert(x);
var old_alert=window.alert;
// old_alert(x);
window.alert=function (){
}
//發現alert（）失效了
window.alert(123);
//恢復
window.alert=old_alert;
window.alert(456);
javascript實際上只有一個全域性作用域，任何變數（函式也可以視為變數），假設沒有在函式作用範圍內找到，就會向外查詢，如果在全域性作用域都沒有找到，報錯ReferenceError
規範
由於我們所有的全域性變數都會繫結到windows上，如果不同的js檔案使用了相同的全域性變數，衝突~ -》》》》如何能夠減少衝突？
//唯一全域性變數
var kkapp={};
//定義全域性變數
kkapp.name='kk';
kkapp.add=function (a,b){
return a+b;
}
把自己的程式碼全部放入自己定義的唯一空間名字中，降低全域性命名衝突的問題~
jQuery===￥
區域性作用域
function aaa(){
for (var i = 0; i < 100; i++) {
console.log(i)
}
console.log(i+1)//問題? i出了作用域還可以用
}
全域性作用域
function aaa(){
for (let i = 0; i < 100; i++) {
console.log(i)
}
console.log(i+1)//問題? i出了作用域還可以用
}
Es6 關鍵字，解決區域性作用域衝突問題！
function aaa(){
for (let i = 0; i < 100; i++) {
console.log(i)
}
console.log(i+1)// Uncaught ReferenceError: i is not defined
建議都是用let去定義區域性作用域~
常量 const
在Es6之前定義常量，只要用全部大寫字母命名的變數就是常量;建議不要修改這樣的值。
在ES6引入了常量關鍵字 const
const PI='3.14' //只讀變數
console.log(PI)
PI='123';//此處不可以修改Uncaught TypeError: Assignment to constant variable
4.3 方法
定義方法
var kk = {
name:'lxh',
bitrh:2000,
//方法
age:function (){
var now=new Date().getFullYear();
return now-this.bitrh;
}
//今年-出生年
}
//屬性
kk.name
//方法
kk.age()
this代表什麼？
function getAge(){
var now=new Date().getFullYear();
return now-this.bitrh;
}
var kk = {
name:'lxh',
bitrh:2000,
age:getAge()
}
//kk.age() ok
//getAge() NaN Windows物件
this是無法指向的，是預設指向呼叫它的那個物件
apple
在js中可以控制this指向
function getAge(){
var now=new Date().getFullYear();
return now-this.bitrh;
}
var kk = {
name:'lxh',
bitrh:2000,
age:getAge()
};
var xm = {
name:'hxl',
bitrh:2001,
age:getAge()
};
//kk.age() ok
//getAge() NaN Windows物件
getAge.apply(kk,[]);//this指向了kk這個物件，引數為空
getAge.apply(xm,[]);
5.內部物件
標準物件
typeof 123
"number"
typeof true
"boolean"
typeof '123'
"string"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
5.1Date
基本使用
var now = new Date();//Mon Jan 18 2021 08:50:54 GMT+0800 (中國標準時間)
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期幾
now.getHours();//時
now.getTime();//時間戳，全世界統一 1970.1.1 0：00：00到現在的毫秒數
轉換
console.log(new Date(1610931054576))
VM182:1 Mon Jan 18 2021 08:50:54 GMT+0800 (中國標準時間)
undefined
now.toLocaleDateString
ƒ toLocaleDateString() { [native code] }//注意：呼叫的是方法！！！
now.toLocaleDateString()
"2021/1/18"
now.toGMTString
ƒ toUTCString() { [native code] }
now.toGMTString()
"Mon, 18 Jan 2021 00:50:54 GMT"
5.2 JSON
JSON是什麼
-
一種輕量級交換格式。
-
簡潔和清晰的層次結構。
JavaScript中一切皆為物件，任何js支援的型別都可以用json來表示；numbei,string…
格式：
- 物件都用大括號{}
- 陣列都用中括號[]
- 所有的鍵值對都使用key:value
var user ={
name:"kk",
age:3,
sex:'男'
}
//物件轉化為json字串{"name":"kk","age":3,"sex":"男"}
var jsonuser= JSON.stringify(user)
//json字串轉化為物件m引數為json字串{name: "kk", age: 3, sex: "男"}
var obj=JSON.parse('{"name":"kk","age":3,"sex":"男"}')
很多人搞不清楚json和js物件的區別
var obj ={a:'hello',b:'hellob'}
var josn ='{"a":"hello","b":"hellob"}'
6.面向物件程式設計
原型物件
JavaScript，Java，c# 面向物件：JavaScript有些區別
-
類：模板
-
物件：具體例項
在JavaScript這個需要大家換一下思維方式！
原型：
var Student ={
name:"kk",
age:3,
run:function (){
console.log(this.name+"run...");
}
};
var xiaoming={
name:"xiaoming"
};
//小明的原型時 Student
xiaoming.__proto__=Student;
//xiaoming.run()
//xiaomingrun...
class繼承
class關鍵字是在Es6引入的。
1.定義一個類,屬性，方法
//定義一個學生的類
class Student{
constructor(name) {
this.name=name;
}
hello(){
alert('hello')
}
}
var kk=new Student("kk");
var kk1=new Student("kk1");
//kk.hello()
//kk.name
//"kk"
//kk1.name
//"kk1"
2.繼承
//定義一個學生的類
class Student{
constructor(name) {
this.name=name;
}
hello(){
alert('hello')
}
}
class xxs extends Student{
constructor(name,grade) {
super(name);
this.grade=grade;
}
mygrade(){
alert("我是一名小學生");
}
}
var kk1=new xxs("kk1",1)
本質：檢視物件原型
原型鏈
__ proto __
7.操作BOM物件（重點）
瀏覽器介紹
JavaScript和瀏覽器關係？
JavaScript誕生就是為了能讓他在瀏覽器中執行！
BOM：瀏覽器物件模型
- IE
- Chrome
- Safari
- FireFox
第三方瀏覽器
- qq瀏覽器
- 360瀏覽器
Windows(重要)
Windows代表 瀏覽器視窗
window.alert(1)
undefined
window.innerHeight
1105
window.innerWidth
225
window.outerHeight
825
window.outerWidth
886
Navigator
navigator，封裝了瀏覽器資訊
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36"
navigator.platform
"Win32"
大多數時候，我們不會使用navigator物件，因為會被認為修改！
不建議使用這些屬性來判斷和編寫程式碼
screen
代表螢幕尺寸
screen.width
1680
screen.height
1050
loction(重要)
location代表當前頁面的URL資訊
location.host: "localhost:63342" //主機
location.hostname: "localhost" //姓名
location.protocol: "http:" //協議
location.reload: ƒ reload() //重新整理網頁
location.https://blog.csdn.net/Barry_kk?spm=1000.2115.3001.5343 //定位
document
document代表當前頁面，HTML DOM文件數
document.title
"Title"
document.title='kk'
"kk"
獲取具體的文件樹節點
<dl id="app">
<dt>java</dt>
<dd>javase</dd>
<dd>javaee</dd>
</dl>
<script>
var dl= document.getElementById('app');
</script>
獲取cookie
document.cookie
//
劫持cookie原理
www.taobao.com
<script src="aa.js"></script>
<!--惡意人員獲得cookie-->
伺服器端可以設定cookie :httpOnly
history
history代表瀏覽器的歷史記錄
history.forward //前進
hisrory.back //後退
8.操作DOM物件（重點）
核心
瀏覽器網頁就是一個DOM樹形結構！（文件物件模型）
- 更新：更新Dom節點
- 遍歷DOM節點：得到Dom節點
- 刪除：刪除一個Dom節點
- 新增：新增一個新的節點
要操作一個dom節點，就必須先獲得這個dom節點！
獲得dom節點
// 對應css選擇器
var h1=document.getElementsByTagName('h1');//標籤選擇器獲得節點
var p1=document.getElementById('p1');//id選擇器獲得節點
var p2=document.getElementsByClassName('h1');
var father=document.getElementById('father');
var childrens=father.children;//獲取父節點下的所有子節點
// father.firstChild 第一個節點
// father.lastChild 上一個節點
//father.nestChile 下一個節點
原生程式碼，之後儘量使用jquery
更新dom節點
<div id="id1">
</div>
<script>
var id1=document.getElementById('id1');
</script>
操作文字
- **id1.innerText=‘123’**修改文字的值 ///“123”
- id1.innerHTML=’< strong> 123 </ strong>’ //可以解析HTML文字標籤
操作JS style
id1.style.color='red';//屬性使用字串 包裹
"red"
id1.style.fontSize='20px';//- 轉駝峰命名問題
"20px"
id1.style.padding='2em';
"2em"
刪除節點
刪除節點的步驟：先獲取父節點然後再通過父節點刪除自己！
<div id="father">
<h1>標題一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//標準刪除案例
void self=document.getElementById('p1');
var father=p1.parentElement;
father.removeChild(self);
//刪除是一個動態的過程 console.log()
father.removeChild(father.children[0])//cw
father.removeChild(father.children[0])//錯誤
father.removeChild(father.children[0])//cw
</script>
注意：刪除多個節點是，children是在時刻變化的，一定要注意
插入節點
我們獲得了某個dom節點，假設dom節點是空的，我們通過innerHTML增加一個元素，但是這個DOM節點已經存在元素了，我們就不能這麼幹了 ！會產生覆蓋
<body>
<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');
</script>
</body>
控制檯中 list.appendChild(js) -》可以追加節點
- 建立一個新的標籤實現插入
<body>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
//通過JS建立一個新節點
var newP=document.createElement('p');
newP.id='newP';
newP.innerText='hello,kk';
list.appendChild(newP);
</script>
</body>
- 插入到固定順序位置
<body>
<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 ee=document.getElementById('ee');
var js=document.getElementById('js');
var list=document.getElementById('list')
list.insertBefore(js,ee);
</script>
9.操作表單（驗證）
表單是什麼
- 文字框 text
- 下拉框
- 單選框 radio
- 隱藏域 checkbox
- 密碼框 password
- …
表單目的：提交資訊
獲得要提交的資訊
<body>
<form action="post">
<p><span>使用者名稱</span> <input type="text" id="username"></p>
<!-- 多選框的值，就是定義好的value值-->
<p><soan>性別</soan>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="women" id="girl">女</p>
</form>
<script>
var input_text=document.getElementById('username');
var boy_radio=document.getElementById('boy')
var girl_radio=document.getElementById('girl')
//111111對於單選多選框等等固定的值
// 控制檯中 boy_radio.checked
// 控制檯中 boy_radio.checked=true
//222222得到輸入框的值
// 控制檯中 input_text.value
//修改輸入框的值
//控制檯中 input_text.value='111'
</script>
</body>
提交表單
<body>
<form action="#" method="get">
<p><span>使用者名稱：</span> <input type="text" id="username" name="username"></p>
<p><span>密碼：</span> <input type="text" id="password" name="password"></p>
<!--繫結事件-->
<button type="button" onclick="aaa()">提交</button>
</form>
<script>
function aaa(){
var uname=document.getElementById('username');
var pwd=document.getElementById('password');
console.log(uname.value); //value就是內容
console.log(pwd.value); //value就是內容
pwd.value='*********';
}
</script>
</body>
10.jQuery
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
javascript和jQuery：工具類
jQuery庫，裡面存在大量的JavaScript函式
選擇器
<script>
//原生js，選擇器少，麻煩不好記
//標籤
document.getElementsByTagName();
//id
document.getElementById();
//類
document.getElementsByClassName();
//jquery css中選擇器全可用
$(’p‘).click() //標籤選擇器
$(’#id1‘).click() //id選擇器
$(’.class‘).click() //class選擇器
</script>
jQuery事件
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 3px solid red;
}
</style>
</head>
<body>
<!--獲取滑鼠當前的座標-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
點這裡移動滑鼠試試
</div>
<script>
//當網頁元素載入完畢之後，響應事件
$(function aaa() {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
})
});
</script>
操作dom元素
//節點文字操作
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul id="test-ul">
<li class="jsq">javascript</li>
<li name="python">python</li>
</ul>
<script>
//document.getElementById()
$('#test-ul').text(); //獲得值
// $('#test-ul').text(’設定值‘); //設定值
$('#test-ul').html(); //獲得值
$('#test-ul[name=python]').show();
$('#test-ul[name=python]').hide();
$('#test-ul').css({'color':'red'})
</script>
</body>
11.如何鞏固js
-
看框架原始碼 jQuery
-
看遊戲原始碼 原始碼之家
-
鞏固html css （拔網站，對應修改看效果）
12.常用工具相應
- element
- ant design
- docsify