javascript
JavaScript
JavaScript
1、什么是JavaScript
1.1、概述
JavaScript 是一門世界上最流行的腳本語言
Java、JavaScript 10天~
一個合格的后端人員，必須精通 JavaScript
1.2、歷史
(https://blog.csdn.net/kese7952/article/details/79357868)
ECMAScript可以理解為是JavaScript的一個標準
開發環境—線上環境 ， 版本不一致
2、快速入門
2.1、引入Javascript
1、內部標簽
<script>// </script>2、外部標簽
<script src="path"></script> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!-- script標簽內，寫JavaScript代碼 --> <!-- <script>--> <!-- alert("hello,world")--> <!-- </script>--><!--外部引入--><!--注意：script標簽必須成對出現 --><script src="js/hpt.js"></script><!-- 不用顯示定義type，默認就是 javascript --><script type="text/javascript"></script></head> <body><!--這里也可以存放--> </body> </html>2.2、基本語法入門
<script>// 定義變量 變量類型 變量名 = 變量值var score = 80;// alert(num);// 2.條件控制if (score<80 && score > 70){alert("70~80")}else if(score>60 && score<70){alert("60~70")}else {alert("other")}// 注釋格式與java相同// 在瀏覽器的控制臺打印 可以理解為java中的 soutconsole.log(score) </script>瀏覽器必備調試須知：
2.3、數據類型瀏覽
變量
var 王者榮耀 = "倔強青銅";number
js 不區分小數和整數，Number
123 // 整數123 123.1 // 浮點數123.1 1.2132e1 // 科學計數法 -99 // 負數 NaN // not a number Infinity // 表示無限大字符串
'abc' "abc"布爾值
true,false邏輯運算
&& 全部為真才為真 || 一個為真就為真 ! 真為假，假為真比較運算符
= 賦值 == 等于（類型不一樣，值一樣，也會判斷為true） === 全等，絕對等于（類型一樣，值一樣，結果為true）堅持不要使用 == 比較
須知：
- NaN===NaN， 這個與所有的數值都不相等，包括自己
- 只能通過方法 isNaN(NaN) 來判斷這個數是否為NaN
浮點數問題
console.log((1/3)===(1-2/3));盡量避免使用浮點數進行計算，存在精度問題
console.log(Math.abs((1/3)-(1-2/3))<0.0000001);null 和 undefined
- null 空
- undefined 未定義
數組
一系列相同類型的對象，JS中不需要這樣
var arr = [1,"ass",false,true]取數組下標，如果越界了，就會 undefined
對象
對象是大括號，數組是中括號
var person = {name:"hot",age:3,tags:['js','java'] }每個屬性之間用逗號隔開，最后一個不需要
取對象的值
> person.age 3 > person.name 'hot'2.4、嚴格檢查模式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!-- 前提：idea 需要設置支持 ES6語法‘use strict’ 嚴格檢查模式，預防JavaScript的隨意性導致產生一些問題必須寫在JavaScript的第一行局部變量建議都使用 let 去定義--><script>'use strict'console.log(Math.abs((1/3)-(1-2/3))<0.0000001);var arr = [1,"ass",false,true]var person = {name:"hot",age:3,tags:['js','java']}var 王者榮耀 = "倔強青銅";</script> </head> <body></body> </html>3、數據類型
3.1、字符串
1、正常字符串我們使用的是 單引號，或者雙引號包裹
2、注意轉義字符 \
\' \n \t \u4e2d \u#### Unicode字符 \x41 Ascii 字符3、多行字符串編碼
// `` 使用這個字符 var msg = `javahello`4、模板字符串
let name = "fusu"; let age = 1;let msg = `你好啊，${name}`;5、字符串長度
str.length
6、字符串的不可變
7、大小寫轉換
// 這里是方法，不是屬性了 str.toUpperCase() str.toLowerCase()8、str.indexof(‘’)
9、subString
[) 含頭不含尾 str.substring(1) // 從第一個字符截到最后一個字符 str.substring(1,3) // 截取 1-3的字符串，不含尾部的字符3.2、數組
Array可以包含任意的數據類型
let arr = [0,2,3,"ss",false] arr[0] // 通過下標取值和賦值1、長度
arr.length
注意：假如給 arr.length 賦值，數組大小會發生變化，沒有值的地方會用undefined代替，如果賦值過小，元素就會丟失
2、indexof，通過元素獲得下標索引
arr.indexOf(2)
字符串中的“1”和1是不同的
3、slice() 截取Array()的一部分，返回一個數組，類似于String中的subString 也是含頭不含尾
4、push(),pop() 尾部
push() 壓入尾部
pop() 彈出尾部的一個元素
5、unshift()，shift() 頭部
unshift() 壓入頭部
shift() 彈出頭部的一個元素
6、排序 sort()
7、元素反轉 reverse()
8、拼接 concat()
注意：concat() 并沒有修改原數組，只是會返回一個新數組
9、連接符 join
打印并拼接數組，使用特定的字符串連接
arr.join('-') '7-5-0'10、多維數組
var arr1 = [1,[1,2],[2,3],[3,4]] arr1[1][1] 2數組：存儲數據，（如何存，如何取）
3.3、對象
若干個鍵值對
var 對象名 = {屬性名：屬性值，屬性名：屬性值，屬性名：屬性值 }var person = {name : "fusu",age : 13,email: "qwwqwqw@qq.com" }js 中對象，{…} 表示一對象，鍵值對描述屬性 xxx：xxxx ，多個屬性之間用逗號隔開，最后一個屬性不需要
JavaScript中的對象的所有鍵都是字符串，值可以是任意類型
1、對象賦值
person.age = 13 13 person.age 132、使用一個不存在的對象屬性，不會報錯，undefined
person.haha undefined3、動態的刪減屬性，通過delete 刪除對象的屬性
delete person.age true person {name: 'fusu', email: 'qwwqwqw@qq.com'}4、動態的添加屬性，直接給新的屬性添加值即可
person.haha = "haha" 'haha' person {name: 'fusu', email: 'qwwqwqw@qq.com', haha: 'haha'}5、判斷屬性值是否在這個對象中， xx in xxx
"haha" in person true "toString" in person true6、判斷一個屬性是否是這個對象自身擁有的
person.hasOwnProperty("haha") true person.hasOwnProperty("toString") false3.4、流程控制
if 分支
var age = 3; if (age>5){console.log("大于歲") }else if (age>3){console.log("大于三年") }else {console.log(age + "歲") }while ，do while 循環
while(age<100){console.log(age++) }do {console.log(age++) }while (age<100)for循環
for (let i = 0; i < 100; i++) {console.log(i) }forEach循環
let num = [123,1231,215,4578,55]// 函數 num.forEach(function (value) {console.log(value) })for … in 與 for … of
for (let number of num) {console.log(number) }for (let index in num) {console.log(num[index]) }3.5、Map 和 Set
Map：
// let name = ["tom","jerry"] // let score = [100,90,80]let map = new Map([["tom",100],["jerry",90]]) console.log(map.get(`tom`)); map.set("jerry",100); map.delete("tom");Set： 無序不重復的集合
// set 可以去重 let set = new Set([3,1,1,1]) set.add(2) set.delete(2) // has 判斷set中是否有此元素，返回bool值 console.log(set.has(1));3.6、iterator遍歷
數組 和 map 、set 都可以使用 for…of 遍歷
// 數組遍歷 let name = ["tom","jerry"] for (const value of name) {console.log(value) }// map 遍歷 let map = new Map([["tom",100],["jerry",90]]) for (const mapElement of map) {console.log(mapElement) }// set 遍歷 let set = new Set([3,1,1,1]) for (const number of set) {console.log(number) }4、函數
4.1、定義函數
定義方式一
絕對值函數
function abs(x) {if (x>=0){return x;}else {return -x;} }一旦執行到 return 代表函數結束，返回結果！
如果沒有執行return，函數執行完也會返回結果，結果就是NaN
定義方式二
let abs = function (x) {if (x>=0){return x;}else {return -x;} }這樣的函數是一個匿名函數，但是可以把結果賦值給abs，通過abs 就可以調用函數！
方式一 和 方式二 等價！
調用函數
abs(10) // 10 abs(-10) // 10參數問題：Javascript 可以傳遞任意參數，也可以不傳遞參數
參數進來是否存在問題？
假設不存在參數，如何規避？
let abs = function (x) {// 手動拋出異常if (typeof x!=='number'){throw 'not a Number'}if (x>=0){return x;}else {return -x;} }arguments
arguments 是一個js免費贈送的關鍵字
代表，傳遞進來的所有的參數，是一個數組
let 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
以前：
f (arguments.length>2){for (let i = 0; i < arguments.length; i++) {console.log(arguments[i])} }ES6 引入的新特性，獲取除了已經定義的參數之外的所有參數~ … 標識
function a(a,b,...rest){console.log("a=>" + a);console.log("b=>" + b);console.log(rest) }rest 參數只能寫在最后面，必須用 …標識
4.2、變量的作用域
在Javascript中，var 定義變量實際是有作用域的
假設在函數體中聲明，則在函數體外不可使用
function a() {var x = 1; } console.log(x) // ReferenceError如果倆個函數使用了相同的變量名，只要在函數內部，就不沖突
function a() {var x = 1;console.log(x) } function b() {var x = 2;console.log(x) }內部函數可以訪問外部函數的成員，反之則不行
function a() {var x = 1;console.log(x)function b() {var y = 1;console.log(x)}b()console.log(y) // ReferenceError } a()假設，內部函數變量和外部函數變量重名
function a() {var x = 1;console.log(x)function b() {var x = 2;console.log(x)}b() } a()在 JavaScript 中函數查找變量是從自身函數開始，由 內 向 外 查找，假設外部存在這個同名的函數變量，
則內部函數會屏蔽外部函數的變量
提升變量的作用域
function x() {var a = "x" + y;console.log(a) // xundefinedvar y = "y" }結果：xundefined
說明：js的執行引擎，自動提升了y的聲明，但是不會提升變量y的賦值
function x() {var y;var a = "x" + y;console.log(a) // xundefinedy = "y" }這個是在 js 建立之初就存在的特性，養成規范，所有的變量定義都放在JavaScript頭部，不要亂放，便于代碼維護
function x() {var y,a;y = "y"a = "x" + y;console.log(a) }全局變量
// 全局變量 l = 2;function f() {console.log(l) } f() console.log(l)全局對象 window
var f = "xxx"; alert(f) alert(window.f); // 默認所有的全局變量，都是自動綁定在 window 對象上alert() 這個函數本身也是一個 window 變量
var older_alter = window.alert; older_alter(f) window.alert = function (){} // 發現 alert() 失效了 window.alert()JavaScript 實際上只有一個全局作用域，任何變量（函數本身也可以視為變量），假設沒有在函數作用范圍內找到，
就會向外查找，如果在全局作用域中都沒有找到，報錯 ReferenceError
規范
由于我們所有的全部變量都會綁定到我們的 window 上，如果不同的js文件，使用了相同的全局變量，就會沖突，
如何減少沖突？（創建一個唯一全局變量）
// 唯一全局變量 var app = {};// 定義全局變量 app.name = 'fusu'; app.add = function (a,b){return a+b; }把自己的代碼全部放入一個自己定義的唯一空間名字中，降低全局命名沖突的問題
JQuery~
局部作用域 let
function aaa() {for (var i = 0; i < 10; i++) {console.log(i)}console.log(i+1);}ES6 關鍵字 let，解決局部作用域沖突的問題
function aaa() {for (let i = 0; i < 10; i++) {console.log(i)}console.log(i+1);}建議使用 let去定義局部作用域的變量
常量 const
在 ES6 之前，怎么定義變量：只要有用大寫字母命名的變量就是常量，建議不要去修改這樣的值
var PI = '3.14' console.log(PI) PI = "3.15" // 可以修改這個值 console.log(PI)在 ES6 引入了常量關鍵字 const
const PI = '3.14' console.log(PI) PI = "3.15" // TypeError console.log(PI)4.3、方法
定義方法
方法就是把函數放在對象的里面，對象只有屬性和方法
var app = {name:"fusu",birth:2003,age:function () {// 今年 - 出生的年var now = new Date().getFullYear()return now - this.birth;} }// 屬性 console.log(app.name); // 方法 一定要帶() console.log(app.age());this 代表什么？ 拆開代碼來看
function getAge(){// 今年 - 出生的年var now = new Date().getFullYear()return now - this.birth; }var app = {name:"fusu",birth:2003,age:getAge }// 屬性 console.log(app.name); // 方法 , 一定要帶() console.log(app.age()); console.log(getAge()); // NaN 這里面的this現在指向的是 windowthis 是無法指向的，是默認指向調用它的那個對象；
apply()
在js中可以控制 this 的指向
function getAge(){// 今年 - 出生的年var now = new Date().getFullYear()return now - this.birth; }var app = {name:"fusu",birth:2003,age:getAge }console.log(getAge.apply(app, [])); // this 指向的是app，參數為空5、內部對象
標準對象
typeof 1 'number' typeof "a" 'string' typeof true 'boolean' typeof Math.abs 'function' typeof [] 'object' typeof {} 'object' typeof undefined 'undefined' typeof NaN 'number'5.1、Date
var now = new Date() // Sun Apr 17 2022 19:28:43 GMT+0800 (中國標準時間) console.log(now.getFullYear()); // 年 console.log(now.getMonth()); // 月 0~11 代表月 console.log(now.getDate()); // 日 console.log(now.getDay()); // 星期幾 0~6 星期 console.log(now.getHours()); // 時 console.log(now.getMinutes()); // 分 console.log(now.getSeconds()); // 秒console.log(now.getTime()); // 時間戳 全世界同意 1970 1.1 00:00:00 毫秒數 console.log(new Date(1650195122600)); // 轉換時間戳 console.log(now.toLocaleString()); // 本地時間5.2、JSON
JSON是什么？
-
JSON 是基于 JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一個子集，是一種開放的、輕量級的數據交換格式
-
JSON 是一種純字符串形式的數據，它本身不提供任何方法（函數），非常適合在網絡中進行傳輸。
在JavaScript中一切皆對象，任何js支持的類型都可以用 JSON 來表示；number，string…
格式：
- 對象都用{}
- 數組都用[]
- 所有的鍵值對都是用 key:value
JSON 字符串和 JS 對象的對比
var str = { // {name: 'fusu', age: 12}name:'fusu',age: 12 } console.log(str)// 對象轉為 JSON 字符串 var json = JSON.stringify(str) console.log(json) // {"name":"fusu","age":12} // JSON 字符串轉為對象 ， 參數為json字符串 console.log(JSON.parse('{"name":"fusu","age":12}')); // {name: 'fusu', age: 12}很多人搞不清楚，JSON 和 對象的區別 JSON是字符串
var str = {name: 'fusu', age: 12} var json = '{"name":"fusu","age":12}'6、面向對象編程
6.1、什么是面向對象
Javascript，Java，C# … 面向對象，JavaScript有些區別
- 類：模板
- 對象：具體實例
在 JavaScript 中選喲換一下思維方式
原型： __proto__
var Student = {name:"fusu",age:13,run:function () {console.log(this.name + "run...")} }var XiaoMing = {name: "xiaoming" }// 原型對象 XiaoMing.__proto__ = Student; XiaoMing.run();var Bird = {fly:function () {console.log(this.name + "fly...")} }XiaoMing.__proto__ = Bird; XiaoMing.fly();class 繼承
class關鍵字，是在ES6中引入的
1、定義一個類，屬性，方法
// 定義一個學生類 class Student{// 構造方法constructor(name) {this.name = name;}hello(){console.log('hello')} }var student = new Student("xiaoming") console.log(student.name); student.hello()2、繼承 extends
// 定義一個學生類 class Student{// 構造器constructor(name) {this.name = name;}hello(){console.log('hello')} }var student = new Student("xiaoming") console.log(student.name); student.hello()class Pupil extends Student{constructor(name,grade) {super(name);this.grade = grade;}myGrade(){console.log('我是小學生')} }var pupil = new Pupil('xiaohong','1') console.log(pupil.name); console.log(pupil.grade); pupil.hello() pupil.myGrade()本質：查看對象原型
原型鏈
__ proto __
prototype
7、操作BOM對象（重點）
瀏覽器介紹
JavaScript 和 瀏覽器 的關系？
Javascript 誕生就是為了能夠讓它在瀏覽器中運行
BOM：瀏覽器對象模型
內核
- IE
- Chrome
- Safari
- FireFox
三方：
- QQ瀏覽器
- 360瀏覽器
window 對象 (重要)
window 代表 瀏覽器窗口
window.alert(1) window.innerHeight 150 window.innerWidth 1536 window.outerHeight 816 window.outerWidth 1536Navigator
Navigator ，封裝了瀏覽器的信息
navigator.appVersion '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36 Edg/100.0.1185.39' navigator.appName 'Netscape' navigator.userAgent 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36 Edg/100.0.1185.39' navigator.platform 'Win32'大多數時候，我們不會使用 navigator對象，因為會被人為修改
不建議使用這些屬性來判斷和編寫代碼
screen
代表屏幕尺寸
screen.width 1536 screen.height 864location (重要)
location 代表當前頁面的URL信息
host: "www.baidu.com" hostname: "www.baidu.com" href: "https://www.baidu.com/" origin: "https://www.baidu.com" pathname: "/" port: "" protocol: "https:" // 協議 reload: ? reload() // 刷新網頁location.assign('https://microsoftnews.msn.cn/') // 設置新的地址document
document 代表當前的頁面，HTML，DOM文檔樹
document.title = 'fusu' 'fusu'獲取具體的文檔書節點
<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
劫持 cookie上傳服務器
服務器端可以設置 cookie：httpOnly
history （不建議使用）
history 代表瀏覽器的歷史記錄
history.back() // 后退
history.forward() // 前進
8、操作DOM對象（重點）
DOM：文檔對象模型
核心
瀏覽器網頁就是一個DOM 樹形結構
- 更新：更新DOM節點
- 遍歷dom節點：得到DOM節點
- 刪除：刪除一個DOM節點
- 添加：添加一個新的節點
要操作一個Dom節點，就必須先獲得這個dom節點
獲得 DOM 節點
<div id="father"><h1 id="h1">h1</h1><p class="p1">p1</p><p>p2</p> </div><script>// 對應 css 選擇器var h1 = document.getElementById('h1')var p1 = document.getElementsByClassName('p1')var p2 = document.getElementsByTagName('p')var father = document.getElementById('father')var childrens = father.children // 獲取父節點下的所有子節點 [index]father.firstChildfather.lastChild </script>這是原生代碼，之后會盡量使用JQuery
更新節點
<div id="app"></div><script>var app = document.getElementById('app');app.innerText = '你好'; // 操作 文本(會產生覆蓋)app.innerHTML = '<em>Java</em>'; // 操作 html文本標簽app.style.backgroundColor = 'green'; // backgroundColor - 駝峰命名 </script>- app.innerText 操作文本(會產生覆蓋)
- app.innerHTML 操作文本標簽
- app.style.backgroundColor 操作樣式 - 駝峰命名
刪除節點
刪除節點的步驟：先獲取父節點，在通過父節點刪除自己
<div><p id="p1">p1</p><p>p2</p> </div><script>var p1 = document.getElementById('p1')var self = p1.parentElement // 獲取父節點self.removeChild(p1) // 刪除是一個動態的過程 </script>刪除前：
刪除后：
注意：刪除多個節點的時候，children 是 在時刻變化的，刪除節點的時候一定要注意
插入節點
我們獲得了某個Dom節點，假設這個Dom節點是空的，我們通過 innerHTML 就可以增加一個元素了，但是這個Dom節點
已經存在元素了，我們就不能這個干了！，會產生覆蓋
<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')list.append(js) // 追加元素 追加到后面 </script>運行結果：
創建一個新的標簽，實現插入
<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')list.append(js) // 追加元素 追加到后面var newP = document.createElement('p') // 創建一個 p標簽newP.id = 'newP'newP.innerText = 'C++'list.append(newP)// 創建一個標簽節點 scriptvar newScript = document.createElement('script')newScript.setAttribute('type','text/javascript')list.append(newScript) </script>運行結果：
// 創建一個style節點var newBody = document.getElementsByTagName('body') // 這里返回的是一個數組newBody[0].setAttribute('style','background:aqua')// var newStyle = document.createElement('style')// newStyle.setAttribute('type','text/css')// newStyle.innerText = 'body{background:aqua}'// newBody[0].append(newStyle)運行結果：
innerBefore 在前面插入一個節點
var ee = document.getElementById('ee') var js = document.getElementById('js') var list = document.getElementById('list') // 要包含的節點：insertBefore(newNode,targetNode) list.insertBefore(js,ee)(https://jquery.cuishifeng.cn/)
9、操作表單
表單是什么 form DOM樹
- 文本框 text
- 密碼框 password
- 隱藏域 hidden
- 下拉框 select
- 單選框 radio
- 多選框 checkbox
- …
表單的目的：提交信息
獲得要提交的信息
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><form action="" method="post"><p>// required 必須填寫<span>用戶名：</span><input type="text" name="username" id="username" required></p><p><span>密 碼：</span><input type="password" name="password" id="password"></p><p><!-- 多選框，單選框的值就是定好的value --><input type="radio" name="sex" value="man"> 男<input type="radio" name="sex" value="woman"> 女</p><p><input type="submit" name="submit"></p> </form><script>var username = document.getElementById('username')var password = document.getElementById('password')var manState = document.getElementsByName('sex')[0]var womanState = document.getElementsByName('sex')[1]// 獲取表單的值 username.value// 修改表單的值 username.value = 21312// 獲取單選框的狀態 manState.checked 返回一個bool值</script></body> </html>提交表單，md5加密密碼，表單優化
<!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><!-- 表單提交事件onsubmit = 綁定一個提交檢測的函數，true，false將這個結果返回給表單，使用 onsubmit 接收onsubmit = "return aa()"--> <!--綁定提價表單事件 onsubmit--> <form action="https://www.baidu.com" method="post" onsubmit="aa()"><p><span>用戶名：</span><input type="text" name="username" id="username"></p><p><span>密 碼：</span><input type="password" name="password" id="password"></p><input type="hidden" name="password" id="md5-password"><button type="submit">提交</button> </form><script>function aa(){var username = document.getElementById('username')var password = document.getElementById('password')var md5_password = document.getElementById('md5-password')md5_password.value = md5(password.value)password.value = '';console.log(username.value)console.log(password.value)console.log(md5_password)// 可以校驗判斷表單內容，true 就是通過提交，false，阻止提交return false;}</script></body> </html>10、JQuery
公式：$(selector(選擇器)).action()
selector(選擇器) 就是 CSS 選擇器
文檔工具站：(https://jquery.cuishifeng.cn/)
引入方式：
- cdn
- 官網下在引入 production 生產 development 開發
選擇器
選擇器就是CSS的各種選擇器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="lib/JQuery.js"></script> </head> <body><span id="text" class="text">你好</span><script>$('span').css('color','red')$('#text').css('color','green')$('.text').css('color','yellow') </script></body> </html>事件
例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="lib/JQuery.js"></script> </head> <body>mouse:<span></span> <div>在這里移動鼠標試試 </div><script>$(function (){$('div').css({"width":"500px","height":"500px","border":"1px red solid"})$('div').mousemove(function (e){$('span').text("x:" + e.pageX + "y:"+ e.pageY)})// $('span').show() // 顯示// $('span').hide() // 隱藏}) </script></body> </html>// 可以校驗判斷表單內容，true 就是通過提交，false，阻止提交
return false;
}
10、JQuery
公式：$(selector(選擇器)).action()
selector(選擇器) 就是 CSS 選擇器
文檔工具站：(https://jquery.cuishifeng.cn/)
引入方式：
- cdn
- 官網下在引入 production 生產 development 開發
選擇器
選擇器就是CSS的各種選擇器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="lib/JQuery.js"></script> </head> <body><span id="text" class="text">你好</span><script>$('span').css('color','red')$('#text').css('color','green')$('.text').css('color','yellow') </script></body> </html>事件
例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="lib/JQuery.js"></script> </head> <body>mouse:<span></span> <div>在這里移動鼠標試試 </div><script>$(function (){$('div').css({"width":"500px","height":"500px","border":"1px red solid"})$('div').mousemove(function (e){$('span').text("x:" + e.pageX + "y:"+ e.pageY)})// $('span').show() // 顯示// $('span').hide() // 隱藏}) </script></body> </html>總結
以上是生活随笔為你收集整理的JavaScript的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 60分钟快速入门 PyTorch
- 下一篇： JavaScript数组你都掰扯不明白，