當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript快速基础入门

發布時間：2023/12/10 javascript 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript快速基础入门小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

- 1、什么是JavaScript
- 2、快速入門
- - 2.1、引入JavaScript
  - - 1.內部標簽
    - 2.外部引入
    - 3.helloworld
  - 2.2、基本語法入門
  - 2.3、數據類型
  - 2.4、嚴格檢查格式
- 3、數據類型
- - 3.1、字符串
  - 3.2、數組
  - 3.3、對象
  - 3.4、流程控制
  - 3.5、Map和Set集合
  - 3.6、 iterator
- 4、函數
- - 4.1、定義函數
  - 4.2、調用函數
  - 4.3、變量的作用域
  - 4.4、方法
- 5、對象
- - 5.1、Date
  - 5.2、JSON
- 6、面向對象編程
- - 6.1、什么是面向對象
  - 6.2、class繼承
- 7.操作BOM對象(重點)
- 8、操作DOM對象（重點）
- 9、操作表單（驗證）
- 10、jQuery

##前言
前端基礎的博客主要分為HTML（結構層）、CSS（表現層）和JavaScript（行為層）,本類博客主要用于記錄博主的學習過程和分享學習經驗，由于博主學識淺薄，經驗不足，難免會出現錯誤，歡迎大家提出問題。

注：前端基礎的文章參考于b站up主遇見狂神說的前端視頻，文章中的源碼筆記等資源放在百度網盤了，有需要的小伙伴可以自取啊
鏈接：https://pan.baidu.com/s/1NWIs14JmAvD3UUqNX01CYg
提取碼：13tr
祝大家都學有所成，下面我們進入正題！

##JavaScript基礎學習總結

JavaScript的一些核心內容都在這張思維導圖中了，接下來我們來具體的了解一下JavaScript！

1、什么是JavaScript

JavaScript是一門世界上最流行的腳本語言
JavaScript 是屬于 HTML 和 Web 的編程語言
ECMAScript可以理解為是JavaScript的一個標準

2、快速入門

2.1、引入JavaScript

1.內部標簽

<script>alert("hello,world");</script>

2.外部引入

(1)qjd.js

alert("hello,world");

(2)html

<script src="js/qjd.js"></script>

3.helloworld

<html lang="en"> <head><meta charset="UTF-8"><title>Title</title> <script>alert("hello,world");</script><script src="js/qjd.js"></script><script type="text/javascript"></script></head> <body> </body> </html>

2.2、基本語法入門

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script>// 1.定義變量變量類型變量名 = 變量值;var num = 1;var name = "ikun";var a = 67// alert(name);// 2.條件控制if(a>60 && a<70){alert("60~70");}else if (a>70 && a<80){alert("70~80");}else {alert("other");}/***console.log(a) 在瀏覽器的控制臺打印變量相當于System.out.println();*/</script> </head> <body></body> </html>

2.3、數據類型

數值，文本，圖形，音頻，視頻

變量

var a=1; //不能以數字開頭（ var 5a=1;）

number

js不區分小數和整數

123 //整數 123.1 //浮點數 1.1e2 //科學技術法 -99 //負數 NaN //noy a number Infinity//表示無限大

字符串

‘abc’ “abc”

布爾值

true flase

邏輯運算

&& 兩個都為真，結果為真|| 一個為真，結果為真! 真即假，假即真

比較運算符

= 賦值 == 等于（類型不一樣，值一樣，也會判斷為true） === 絕對等于（類型一樣，值一樣，結果為true）（這里與java不一樣）

注：

NaN與所有的數值都不相等，包括自己(NaN===NaN,結果為false)
只能通過isNaN(NaN)來判斷這個數是否是NaN

浮點數問題：

console.log( (1/3)===(1-2/3))

結果為false，我們要盡量避免用浮點數進行運算，存在精度問題

a=Math.abs(1/3-(1-2/3))<0.0000000001; console.log(a);

結果為true

null和undefined

null是空的意思
undefined是未定義

數組

Java數組中的數值必須是相同類型的對象，JS中不需要這樣

//為了保證數組的可讀性盡量使用[]的方式var arr = [1,2,3,4,5,'hello',null,true];new Array(1,2,3,4,5,'hello',null,true);

取數組下標如果越界就會undefined

對象

對象是大括號，數組是中括號

每個屬性之間用逗號隔開，最后一個不需要添加

//Person person = new Person(1,2,3,4,5); var person = {name:"ikun",age:3,tages:['html','css','javascript'] }

在瀏覽器取對象的值

2.4、嚴格檢查格式

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script> 'use strict';//全局變量r=1;//ES6 let來定義局部變量let i = 2;</script></head> <body></body> </html>

3、數據類型

3.1、字符串

1.正常的字符串我們使用單引號，或者雙引號包裹

2.注意轉移字符 \

\' \n \t \u4e2d //u#### unicode字符 \x41 //ASCLL字符

3.多行字符串編寫

//esc鍵下邊的那個鍵 var msg = `helloworld你好 `

4.模板字符串

let name = "kunkun"; let age = 3; let msg = `我是${name}`

5.字符串長度

console.log(name.length);

6.字符串的可變性

不可變

7.大小寫轉換

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

其他方法

方法描述

charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	連接兩個或多個字符串，返回連接后的字符串
fromCharCode()	將 Unicode 轉換為字符串
indexOf()	返回字符串中檢索指定字符第一次出現的位置
lastIndexOf()	返回字符串中檢索指定字符最后一次出現的位置
localeCompare()	用本地特定的順序來比較兩個字符串
match()	找到一個或多個正則表達式的匹配
replace()	替換與正則表達式匹配的子串
search()	檢索與正則表達式相匹配的值
slice()	提取字符串的片斷，并在新的字符串中返回被提取的部分
split()	把字符串分割為子字符串數組
substr()	從起始索引號提取字符串中指定數目的字符
substring()	提取字符串中兩個指定的索引號之間的字符（包頭不包尾）
toLocaleLowerCase()	根據主機的語言環境把字符串轉換為小寫，只有幾種語言（如土耳其語）具有地方特有的大小寫映射
toLocaleUpperCase()	根據主機的語言環境把字符串轉換為大寫，只有幾種語言（如土耳其語）具有地方特有的大小寫映射
toLowerCase()	把字符串轉換為小寫
toString()	返回字符串對象值
toUpperCase()	把字符串轉換為大寫
trim()	移除字符串首尾空白
valueOf()	返回某個字符串對象的原始值

3.2、數組

Array可以包含任意數據類型

var arr=[1,2,3,4,5]; //通過下標取值和賦值 arr[0] arr[3]=9

1.長度

arr.length;

注：加入給arr.length賦值，數組大小就會發生變化（過小元素丟失，過大加空）

2.indexOf,通過元素獲得下標索引

arr.indexOf(3); 2

字符串的"1"和數字1是不同的

3.slice（）

截取數組的一部分返回一個新數組

var arr=[1,2,3,4,5]; arr.slice(1,3) //類似于subString,包頭不包尾 2,3

4.push pop

push: 壓入到尾部
pop：尾部的一個元素彈出

5.unshift() shift()

unshift(): 壓入到頭部
shift(): 頭部的一個元素彈出

6.排序sort（）

7.元素反轉reverse（）

8.拼接concat（）

注：contact（）并沒有修改數組，只是會返回一個新的數組

9.連接符 join

打印拼接數組，使用特定的字符串連接

10.多維數組

3.3、對象

若干個鍵值對

//定義了一個person對象他有四個屬性 var person = {name : "qq",age : 18,emali : "cjsioevcmsp",score : 60}

js中的對象，{…}表示一個對象，鍵值對描述屬性xxx:xxxx,多個屬性之間用逗號隔開，最后一個不用逗號

js中所有的鍵都是字符串，值是任意對象

1.對象賦值

2.使用一個不存在的對象屬性不會報錯 undefined

3.動態的刪減屬性，通過delete刪除對象的屬性

4.動態的添加，直接給新的屬性添加值

5.判斷屬性值是否在這個對象中（toString是繼承的）

6.判斷一個屬性是否是自身所擁有的

3.4、流程控制

if判斷

let age = 5; if(age>3){alert("haha~"); }else{alert("kuwa~") }

循環,注意避免死循環

while

while (age<10){age = age+1;console.log(age); }

for

for (let i = 0; i <10 ; i++) {console.log(i); }

數組遍歷

var list = [1,2,43,4,,5,6,76,7]; list.forEach(function (value){console.log(value); })

3.5、Map和Set集合

ES6的新特性

Map

'use strict';//統計學生的成績和學生的名字// var names = ['tom','jack','rose'];// var score = [100,99,88];var map = new Map([['tom',100],['jack',99],['rose',88]]);let tom = map.get('tom');//通過key獲得valuemap.set('rock',66);//添加新的鍵值對map.delete("rock");//刪除console.log(tom)

Set:無序不重復的集合

//set 可以去重 var set = new Set([2,3,,4,45,5,6,3,2]); set.add(9); set.delete(2); console.log(set.has(3));//是否包含

3.6、 iterator

使用iterator來遍歷迭代我們的Map，Set

ES6的新特性

遍歷數組

'use strict'; var arr = [3,4,5]; // in 打印下標 for(var x in arr){console.log(x); } // of 打印值 for(var x of arr){console.log(x); }

遍歷map

var map = new Map([['tom',100],['jack',99],['rose',88]]); for(let x of map){console.log(x); }

遍歷set

var set = new Set([2,3,,4,45,5,6,3,2]); for(let x of set){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就可以調用函數

4.2、調用函數

abs(10) //10 abs(-10) //10

js可以傳遞任意個參數，也可以不傳遞參數

假設不存在參數，如何規避？

var abs = function (x){//手動拋出異常來判斷if(typeof x !== 'number'){throw 'Not a Number';}if(x<=0){return -x;}else{return x;} }

arguments是JS免費贈送的關鍵詞，利用他我們可以得到所有的參數

代表所有傳遞進來的參數是一個數組

function abs(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

以前

function ac(a,b){console.log("a=>"+a);console.log("b=>"+b);if(arguments.length>2){for (let i = 2; i <arguments.length ; i++) {console.log(arguments[i]);}} }

現在

function ac(a,b,...rest){console.log("a=>"+a);console.log("b=>"+b);console.log(rest); }

rest參數只能寫在最后面，必須用…標識

4.3、變量的作用域

在js中，var定義變量實際是有作用域的

假設在函數體中聲明，則在函數體外不能使用（如果要想使用需要使用閉包）

function qjd(){var x = 1;x = x+1; }x = x+2;//Uncaught ReferenceError: x is not defined

如果兩個函數使用了相同的變量名，只要造函數內部就不沖突

function qjd(){var x = 1;x = x+1; } function qjd2(){var x = 1;x = x+1; }

函數嵌套使用的話，內部函數可以訪問外部函數的成員，反之則不行
假設內部函數變量與外部函數變量重名
function qjd(){var x = 1; function qjd2(){var x = 2;console.log('inner'+x);//outer1 }console.log('outer'+x);//inner2qjd2();} qjd();

假設在js中函數查找變量從自身函數開始，由內向外查找，假設外部存在這個同名的函數變量，則內部函數會屏蔽外部函數的變量

所有的變量定義放在代碼頭部,便于理解與維護
全局函數
全局對象window
var x = 1; alert(x); //alert()這個函數本身也是一個window變量 alert(window.x); //默認所有的全局變量都會自動化綁定在window對象下

js實際上只有一個全局作用域，任何變量（函數也可以視為變量），假設沒有在函數作用范圍內找到，就會向外查找，如果在全局作用域沒有找到，就會報錯

規范：降低全局命名沖突問題

//唯一全局變量 var Q = {}; //定義全局變量 Q.name = 'qjd'; Q.add = function (a,b){return a+b; }

局部作用域let(建議使用let去定義局部變量)
常量const

const PI = '3.14';

4.4、方法

定義方法

方法就是把函數放在對象里面，對象里面只有兩個東西：屬性和方法
var qiao = {name : 'qid',birth : 2001,//方法age:function () {let year = new Date().getFullYear();return year - this.birth;} } //屬性 qiao.name //方法,一定要帶（） qjd.age()
拆開上邊的代碼
function getAge() {let year = new Date().getFullYear();return year - this.birth; }var qiao = {name : 'qid',birth : 2001,age:getAge } // qiao.age() // 21// getAge() // NaN window對象
this是無法指向的，是默認指向調用他的那個函數
apply

在js中可以控制this指向
//this指向了qiao這個對象，參數為空 getAge().apply(qiao,[]);// getAge.apply(qiao,[]); // 21

5、對象

標準對象：

typeof 123 'number' typeof 'dgd' 'string' typeof true 'boolean' typeof NaN 'number' typeof [] 'object' typeof {} 'object' typeof Math.abs 'function'

5.1、Date

基本使用

var date = new Date();//Sat Jul 02 2022 20:34:01 GMT+0800 (GMT+08:00) date.getFullYear();//年 2022 date.getMonth();//月注意這里0到11代表月份 date.getDate();//日 date.getDay()//星期幾 date.getHours();//時 date.getMinutes();//分 date.getSeconds();//秒 //全世界統一時間從1970.1.1 0:00:00 開始算的毫秒數 date.getTime();//時間戳 1656765442368 //時間戳轉為時間 console.log(new Date(1656765442368)) // VM261:1 Sat Jul 02 2022 20:37:22 GMT+0800 (GMT+08:00)

轉換

date.toLocaleString() '2022/7/2 20:37:22' date.toGMTString() 'Sat, 02 Jul 2022 12:37:22 GMT' date.toDateString() 'Sat Jul 02 2022'

5.2、JSON

JSON是什么？

JSON（JavaScript Object Notation, JS對象簡譜）是一種輕量級的數據交換格式。
它基于 ECMAScript（European Computer Manufacturers Association, 歐洲計算機協會制定的js規范）的一個子集，采用完全獨立于編程語言的文本格式來存儲和表示數據。
簡潔和清晰的層次結構使得 JSON 成為理想的數據交換語言。
易于人閱讀和編寫，同時也易于機器解析和生成，并有效地提升網絡傳輸效率。

在js中一切皆為對象，任何js支持的類型都可以用JSON來表示：

對象都用{}
數組都用[]
所有的鍵值對都用key:value

JSON和JS對象的轉化

例子

測試

console.log(user) VM218:1 {name: 'qiao', age: 15, sex: '男'}age: 15name: "qiao"sex: "男"[[Prototype]]: Object undefined console.log(jsUser) VM266:1 {"name":"qiao","age":15,"sex":"男"}console.log(obj) {name: 'qiao', age: 15, sex: '男'}

json與js對象的區別

var js = {a:'helloa', b:'hellob'} var json = '{'a':'helloa','b':'hellob'}'

6、面向對象編程

6.1、什么是面向對象

js,java,c#…面向對象；js有一些區別

類：模板原型對象原型鏈

對象：具體的實例

JavaScript:

原型：

6.2、class繼承

1.定義一個類，屬性，方法

//es6之后的方法,重點記這個 //定義一個學生的類 class student{constructor(name) {this.name = name;}hello(){alert('hello')} }var xiaoming = new student("xiaoming");var xiaoming3 = new student("xiaoming3");xiaoming.hello()

2.繼承

class student{constructor(name) {this.name = name;}hello(){alert('hello')}}class pupil extends student{constructor(name,grade) {super(name);this.grade = grade;}myGrade(){alert('pupil')}}var xiaoming = new student("xiaoming");var xiaoming3 = new pupil("xiaoming3",1);</script>

本質：查看對象原型

原型鏈：原型鏈：通過隱式原型把一些構造函數層層的串起來，因為所有的對象都是繼承自Object。

原型鏈： https://www.cnblogs.com/liumcb/p/13667117.html

7.操作BOM對象(重點)

瀏覽器介紹

JS和瀏覽器關系？

JS誕生就是為了讓它能夠在瀏覽器中運行

BOM:瀏覽器對象模型

內核：

IE6~11
Chrom
Safari
FireFox

第三方：

QQ瀏覽器
360瀏覽器
搜狗瀏覽器

window

window代表瀏覽器窗口

window.innerHeight 722 window.innerWidth 555 window.outerHeight 824 window.outerWidth 1536 //可以調整瀏覽器窗口進行測試

Navigator

Navigator,封裝了瀏覽器的信息

navigator.appName 'Netscape' navigator.appVersion '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36' navigator.userAgent 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36' navigator.platform 'Win32'

大多數時候，我們不會navigator對象，因為會被人為修改

screen

screen代表屏幕尺寸screen.width 1536 screen.height 864

location

location代表當前頁面的URL信息

doucument

doucument代表當前的頁面，HTML,DOM文檔樹

document.title '百度一下，你就知道'

獲取集體的文檔樹節點

<body><dl id="app"><dt>Java</dt><dd>JavaSE</dd><dd>JavaEE</dd></dl><script>var byId = document.getElementById('app');</script></body>

獲取cookie

document.cookie

劫持cookie原理

假設登錄淘寶

服務器端可以設置cookie：httpOnly防止讀取cookie信息

history

history代表瀏覽的歷史記錄

后退到上一個網頁

history.back()

前進到下一個網頁

history.forward()

8、操作DOM對象（重點）

DOM:文檔對象模型

DOM樹形結構

核心

瀏覽器網頁就是一個DOM樹形結構

更新:更新DOM節點
遍歷DOM節點:得到DOM節點
刪除：刪除一個DOM節點
添加：添加一個新的節點

要操作一個新的DOM節點，就必須要先獲得這個DOM節點

獲得DOM節點

<html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="father"><h1>標題一</h1><p id="p1">p1</p><p class="p2">p2</p> </div><script>//對應css選擇器,h1{} #id{} .classname{}var h1= document.getElementsByTagName('h1')var p1= document.getElementById('p1')var p2= document.getElementsByClassName("p2")var father= document.getElementById('father')//獲取父節點下所有的子節點var children = father.children[index];// father.firstChild// father.lastChild</script></body> </html>

這是原生代碼，之后盡量使用jQuery

更新節點

<body><div id="id1"></div><script>var id1 = document.getElementById("id1");id1.innerText='abc';</script></body>

操作文本

id1.innerText=‘123’ 修改文本的值
id1.innerHTML=‘456’ 可以解析html標簽

操作css

id1.style.color = ‘red’ //屬性用字符串包裹
id1.style.fontSize = ‘50px’ // - 轉駝峰命名問題
id1.style.padding = ‘2em’

刪除節點

刪除節點步驟：

先獲取父節點

再通過父節點刪除自己

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="father"><h1>標題一</h1><p id="p1">p1</p><p class="p2">p2</p> </div><script>var self= document.getElementById('p1');var father = p1.parentElement;father.removeChild(p1)//刪除是一個動態的過程father.replaceChild(father.children[0]);father.replaceChild(father.children[1]);</script></body> </html>

注意：刪除多個節點的時候，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");list.appendChild(js);追加到后面</script></body>

創建一個新的標簽實現插入

//通過js創建一個新的節點 // <p id="newP">HelloQJD</p> var newP = document.createElement('p');//創建一個p標簽 newP.id = 'newP'; newP.innerText = 'HelloQJD'; list.appendChild(newP);//創建一個標簽節點,通過這個屬性可以設置任意的值 //<script type="text/javascript" src=""> var myScript = document.createElement("script"); myScript.setAttribute('type','text/javascript');//key value 鍵值對萬能方式 list.appendChild(myScript);

創建style標簽

insert

var ee = document.getElementById('ee'); var js = document.getElementById('js'); var list = document.getElementById('list'); //js插入到ee之前 list.insertBefore(js,ee);

9、操作表單（驗證）

表單：form DOM樹

文本框text
下拉框select
單選框radio
多選框check
密碼框password
隱藏域hidden
…

表單的目的：提交信息

獲得要提交的信息

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <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="women" 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='123'//對于單選框，多選框等等固定的值， boy_radio.value只能取到當前的值，不能取到選中的值// boy_radio.valueboy_radio.checked;//查看選擇的結果是否為true，是則被選中girl_radio.checked = true;//賦值 </script></body> </html>

提交表單，MD5加密密碼，表單優化

<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="#" method="post" onsubmit="return aaa()"><p><span>用戶名:</span><input type="text" id="username" name="username" required></p><p><span>密碼:</span><input type="password" id="input-password"></p><input type="hidden" id="md5-password" name="password"><button type="submit" >提交</button></form><script>function aaa() {var uname = document.getElementById('username');var pwd = document.getElementById('password');var md5pwd = document.getElementById('md5-password');md5pwd.value = md5(pwd.value);//可以檢驗判斷表單內容，true就是通過提交，false就是阻止提交return true;} </script></body> </html>

結果：密碼被隱藏

10、jQuery

JavaScript

jQuery庫，里面存在大量的JavaScript函數

公式：$(selector).action()

獲取jQuery

引入在線的cdn

<!DOCTYPE html> <html lang="en" xmlns:http="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title><script src="http://code.jquery.com/jquery-2.1.1.min.js"></script><script src="lib/jquery-3.6.0.js"></script> </head> <body></body> </html>

使用jQuery

<!DOCTYPE html> <html lang="en" xmlns:http="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script></head> <body> <a href="" id="test-jquery"> 點擊</a><script>// var id = document.getElementById('test-jquery');// id.click(function () {// alert('hello')// })//選擇器就是css的選擇器,下面等價于上邊注釋的代碼$('#test-jquery').click(function () {alert('hello')}) </script></body> </html>

選擇器

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script>//原生的js,選擇器少//標簽選擇器document.getElementsByTagName()//id選擇器document.getElementById()//類選擇器document.getElementsByClassName()//jQuery css中選擇器它全部都能用$('p').click() //標簽選擇器$('#id1').click() //id選擇器$('.p2').click() //class選擇器//其他的css選擇器https://jquery.cuishifeng.cn/ </script></body> </html>

文檔工具站:https://jquery.cuishifeng.cn/

事件

鼠標事件，鍵盤事件，其他事件

鼠標事件：

獲取鼠標當前的一個坐標：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>#divMove{width: 500px;height: 400px;border: 1px solid red;}</style><script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> </head> <body> mouse:<span id="mouseMove"></span> <div id="divMove">在這里移動鼠標 </div><script> $(function () {$('#divMove').mousemove(function (e) {$('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)})} )</script></body> </html>

操作DOM

<ul id="test_ul"><li class="js">JavaScript</li><li id="py">Python</li> </ul>

節點文本操作：

$('#py').text(); //獲得值 'Python'$('#py').text("c++"); //設置值 jQuery.fn.init [li#py]$('#py').text(); 'c++'$('#test-ul').html() //獲得值 $('#test-ul').html('<strong>123456</strong>') //設置值

css操作：

$('.js').css({ "color": "#ff0011", "background": "blue" })//鍵值對

元素的顯示和隱藏：

本質是css中 display = none;

$('.js').show()//顯示$('.js').hide()//隱藏

其他

學習技巧👏

鞏固js(看jQuery源碼，看游戲源碼)
鞏固HTML,CSS(扒網站，對應刪減看效果)

好啦，JavaScript基礎的學習到這里就結束了，這里推薦一個項目鞏固JavaScriptJavaScript基礎，希望大家都有所收獲！
JavaScript30天30個練習

https://github.com/wesbos/JavaScript30

大家覺得文章還可以的話可以幫忙點個推薦啊

總結

以上是生活随笔為你收集整理的JavaScript快速基础入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： go语言代码连接mysql_【mysql
下一篇：你还不会手写SpringBoot启动器吗