文章目錄

• 一、自定義對象
• • 1.1、添加屬性
  • 1.2、讀取屬性
  • 1.3、修改屬性
  • 1.4、刪除屬性
  • 1.5、補充
• 二、函數(shù)對象
• • 2.1、函數(shù)創(chuàng)建
  • 2.2、注意事項
  • 2.3、內(nèi)置對象
• 三、數(shù)組對象
• • 3.1、數(shù)組創(chuàng)建
  • 3.2、數(shù)組方法
  • 3.3、注意事項
• 四、日期對象
• • 4.1、創(chuàng)建 Date 對象
  • 4.2、日期輸入格式
  • 4.3、日期獲取方法
  • 4.3、設置日期方法
• 五、DOM 對象
• • 5.1、查找 HTML 元素
  • 5.2、改變 HTML 元素(了解)
  • 5.3、添加和刪除元素(了解)
  • 5.4、添加事件處理程序
  • 5.5、使用DOM操作CSS樣式
  • • 5.5.1、改變 HTML 樣式
    • 5.5.2、讀取元素樣式

一、自定義對象

對象的創(chuàng)建方式有 3 種：

var 變量名 = new Object();

var 變量名 = {};

var 變量名 = {屬性名1:屬性值,屬性名2:屬性值};

接下來我們分別來看看對象的創(chuàng)建方式

1.1、添加屬性

語法：對象.屬性名 = 屬性值

示例：

var obj = new Object();//或者 var obj = {}; obj.name = "w"; //在obj中添加name屬性 obj.age= "22"; //在obj中添加age屬性 console.log(obj); 查看obj對象 //或者 var obj = {name:"w",age:"22"}

---

1.2、讀取屬性

語法：對象.屬性名

注意：如果讀取對象中沒有的屬性，不會報錯，而是返回一個undefined

示例：

console.log(obj.name); //查看obj的name屬性 結(jié)果：w console.log(obj.sex); //obj中沒有的sex屬性,返回undefined

---

1.3、修改屬性

語法：對象.屬性名 = 新值
有則改無則增

示例：

obj.name = "Q"; console.log(obj.name);

---

1.4、刪除屬性

語法：delete 對象.屬性名

示例：

delete obj.name; console.log(obj);

---

1.5、補充

屬性名沒有太多強制性要求，需要和取名規(guī)范一致。但如果需要使用特殊的屬性名(比如：數(shù)字開頭)，不能直接用來操作，而是需要換另外一種方式。

語法：對象["屬性名"] = 屬性值

示例：

obj["123"] = "hello"; console.log(obj["123"]);

注意：屬性值可以是任意的數(shù)據(jù)類型還可以是對象，如：

var obj2 = new Object(); obj2.ob = obj //obj 指上面例題定義的對象 console.log(obj2.ob)------結(jié)果---------- {name: "w", age: 12}age: 12name: "w" __proto__: Object

---

二、函數(shù)對象

2.1、函數(shù)創(chuàng)建

函數(shù)對象有 3 種創(chuàng)建方式：

① var fun = new Function(形參，函數(shù)體);

示例：

var fun = Function("a","b","alert(a)"); fun(10,20);

注意：函數(shù)調(diào)用方式：函數(shù)名稱(參數(shù)列表)

②function 函數(shù)名(形參列表){函數(shù)體}

示例：

function fun2(a,b){return a+b;} var count=fun2(10,20); alert(count);

③var 函數(shù)名 = function(形參列表){函數(shù)體}

示例：

var fun3 = function(a,b){alert(a+b) } fun3(10,20)

---

2.2、注意事項

①當一個函數(shù)有多定義時，調(diào)用此函數(shù)，從上往下只會調(diào)用距離調(diào)用最近的那個。

示例：

var fun3 = function(a,b){alert(a+b) } var fun3 = function(a,b){alert(a) //這里如果改為 alert(b) 還是用下面的調(diào)用方式則結(jié)果為：undefined } fun3(10) //執(zhí)行結(jié)果為：10 fun3() //執(zhí)行結(jié)果為：undefined fun3(10，20) //執(zhí)行結(jié)果還是為：10

---

2.3、內(nèi)置對象

arguments (數(shù)組)：封裝了所有的實參

示例(求任意數(shù)的和)：
（注意：要求和的個數(shù)未知）

function fun4(){//alert(arguments[0]) 第0個參數(shù)var sum = 0;for(var i=0;i<arguments.length;i++){sum+=arguments[i];}return sum; } var sum=fun4(1,2,3,4,5); alert(sum); //結(jié)果：15

---

三、數(shù)組對象

3.1、數(shù)組創(chuàng)建

函數(shù)對象也有 3 種創(chuàng)建方式：

①var arr = new Array(元素列表);

示例：

var arr1 = new Array(1,2,3); console.log(arr1);

②var arr = new Array(默認長度);

示例：

var arr2 = new Array(5); console.log(arr2);

③var arr = [元素列表]

示例：

var arr3 = [1,2,3,4]; console.log(arr3);

---

3.2、數(shù)組方法

方法描述

length	長度（最常用）
[ ]	下標（最常用）
push()	追加
unshift()	添加
pop()	后刪
shift()	前刪
indexOf()	指定元素查找(返回索引位置)
slice()	切片
splice()	替換
join()	拼接
sort()	排序
reverse()	反向
concat()	合并（連接）數(shù)組
toString()	字符串
toFixed()	小數(shù)字符串
isNaN()	判斷NaN
isArray()	判斷數(shù)組
parseInt()	整數(shù)
parseFloat()	浮點數(shù)
Number()	數(shù)字

示例：

//創(chuàng)建數(shù)組 var arr=["python","java","c","PHP"]; //length console.log(arr.length); //4 //增 push unshift arr.push("css","javascript"); console.log(arr); //["python","java","c","PHP","css","javascript"] arr.unshift("C#"); console.log(arr);//["C#","python","java","c","PHP","css","javascript"] //刪 pop shift arr.pop(); console.log('pop',arr);//["C#", "python", "java", "c", "PHP", "css"] arr.shift(); console.log('shift',arr);//["python", "java", "c", "PHP", "css"] //查 [] console.log('arr[1]',arr[1]);//python console.log('indexOf',arr.indexOf("python")); //0 //改 arr[0]="HTML"; console.log(arr);//["HTML", "java", "c", "PHP", "css"]//slice var arr2=arr.slice(1,-1); console.log(arr2);//["java", "c", "PHP"] //splice var arr1 = ["HTML", "java", "c", "PHP", "css"] var arr3=arr1.splice(1,1); console.log(arr3); //java console.log(arr1); //["HTML", "c", "PHP", "css"] arr1.splice(1,1,'C++'); console.log(arr1); // ["HTML", "C++", "PHP", "css"] //join var str = arr1.join(); console.log(str); //HTML,C++,PHP,css var str1=arr1.join(' '); console.log(str1); //HTML C++ PHP css //sort arr1 = [1,4,2,0]; arr1.sort(); console.log(arr1); // [0, 1, 2, 4] //reverse var arr4=arr1.reverse(); console.log(arr4); //[4, 2, 1, 0] //concat var arr5=[5,6,7,8]; var arr6=arr1.concat(arr5); console.log(arr6); //[4, 2, 1, 0, 5, 6, 7, 8]-----補充---- var num=100.13; console.log(num.toString()); //100.13 ==>string console.log(num.toFixed(1)); //100.13 ==>string var str='1223,.1123 341px'; var str1='1000'; console.log(parseInt(str)); //1223 ==>number console.log(parseFloat(str));//1223 ==>number console.log(Number(str)); //NaN ==>number console.log(Number(str1)); // 1000 ==>true var arr=[1,2,3]; console.log(typeof arr); //object console.log(Array.isArray(arr)); //true console.log(Array.isArray(str)); //false console.log(Array.isArray([1,2])); //true

---

3.3、注意事項

① 數(shù)組元素類型是可變的

示例：

var arr3 = [1,2,3,4]; arr3 = ["w",true] console.log(arr3); //結(jié)果："w", true

② 取出數(shù)組數(shù)據(jù)要使用索引

示例：

var arr1 = [1,2,3,4]; console.log(arr1[2]); //結(jié)果：3

③ 數(shù)組的長度可變

示例：

var arr1 = [1,2]; console.log(arr1[4]); //結(jié)果：undefined

④ 可以給數(shù)組是元素直接賦值

示例：

var arr1 = [1,2]; arr1[2] = 3 console.log(arr1); //結(jié)果：1, 2, 3

---

四、日期對象

4.1、創(chuàng)建 Date 對象

Date 對象由新的 Date() 構(gòu)造函數(shù)創(chuàng)建。

有 4 種方法創(chuàng)建新的日期對象：

① new Date() 用當前日期和時間創(chuàng)建新的日期對象

示例：

var d = new Date(); console.log(d);

注意：日期對象是靜態(tài)的。計算機時間正在滴答作響，但日期對象不會。

② new Date(year, month, day, hours, minutes, seconds, milliseconds) 用指定日期和時間創(chuàng)建新的日期對象

示例：

var d = new Date(2018, 11, 24, 10, 33, 30);

注意：
a、7個數(shù)字分別指定年、月、日、小時、分鐘、秒和毫秒（按此順序）；
b、從 0 到 11 計算月份，一月是 0，十二月是11；
c、如果只提供一個參數(shù)，則將其視為毫秒。如：var d = new Date(2018)

③ new Date(dateString) 從日期字符串創(chuàng)建一個新的日期對象

示例：

var d = new Date("October 13, 2014 11:13:00"); console.log(d);

④ new Date(milliseconds) 創(chuàng)建一個零時加毫秒的新日期對象

示例：

//1970年 1 月 1 日加上100 000 000 000毫秒，大約是 1973 年 3 月 3 日： var d = new Date(100000000000);

---

4.2、日期輸入格式

有四種 JavaScript 日期輸入格式：

類型實例

ISO 日期	“2018-02-19” （國際標準）
短日期	“02/19/2018” 或者 “2018/02/19”
長日期	“Feb 19 2018” 或者 “19 Feb 2019”
完整日期	“Monday February 25 2015”

ISO 格式遵守 JavaScript 中的嚴格標準。

其他格式不太明確，可能是瀏覽器特定的。

無論輸入格式如何，JavaScript 默認將輸出全文本字符串格式

---

4.3、日期獲取方法

獲取方法用于獲取日期的某個部分（來自日期對象的信息）。下面是最常用的方法（以字母順序排序）：

方法描述

getDate()	以數(shù)值返回天（1-31）
getDay()	以數(shù)值獲取周名（0-6）
getFullYear()	獲取四位的年（yyyy）
getHours()	獲取小時（0-23）
getMilliseconds()	獲取毫秒（0-999）
getMinutes()	獲取分（0-59）
getMonth()	獲取月（0-11）
getSeconds()	獲取秒（0-59）
getTime()	獲取時間（從 1970 年 1 月 1 日至今的秒數(shù)）

示例：

var d = new Date(); console.log(d.getTime()); //1621564173634 console.log(d.getDate()); //21 console.log(d.getFullYear()); //2021 console.log(d.getMilliseconds()); //634 console.log(d.getMinutes()); //29 console.log(d.getMonth()); //4 console.log(d.getSeconds()); //33

---

4.3、設置日期方法

設置方法用于設置日期的某個部分。下面是最常用的方法（按照字母順序排序）：

方法描述

setDate()	以數(shù)值（1-31）設置日
setFullYear()	設置年（可選月和日）
setHours()	設置小時（0-23）
setMilliseconds()	設置毫秒（0-999）
setMinutes()	設置分（0-59）
setMonth()	設置月（0-11）
setSeconds()	設置秒（0-59）
setTime()	設置時間（從 1970 年 1 月 1 日至今的毫秒數(shù)）

示例：

var d = new Date(); d.setDate(15); d.setFullYear(2020); d.setHours(22); d.setMilliseconds(30); d.setMinutes(30); d.setMonth(11); console.log(d.toLocaleString()); // 2020/12/15下午10:30:35

---

五、DOM 對象

當網(wǎng)頁被加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型（Document Object Model）。

HTML DOM 模型被結(jié)構(gòu)化為對象樹：

對象的 HTML DOM 樹

通過這個對象模型，JavaScript 獲得創(chuàng)建動態(tài) HTML 的所有力量:

• JavaScript 能改變頁面中的所有 HTML 元素
• JavaScript 能改變頁面中的所有 HTML 屬性
• JavaScript 能改變頁面中的所有 CSS 樣式
• JavaScript 能刪除已有的 HTML 元素和屬性
• JavaScript 能添加新的 HTML 元素和屬性
• JavaScript 能對頁面中所有已有的 HTML 事件作出反應
• JavaScript 能在頁面中創(chuàng)建新的 HTML 事件

---

5.1、查找 HTML 元素

方法描述

document.getElementById(“id”)	通過元素 id 來查找元素
document.getElementsByTagName(“標簽名”)	通過標簽名來查找元素
document.getElementsByClassName(“類名”)	通過類名來查找元素
document.getElementsByName(name)	通過 name的屬性獲取元素，一般用于input

注意：除了getElementById，其他 3 個函數(shù)返回多個，通過下標去獲取具體的值

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JavaScript(二)</title> </head> <body><p id="p1" class="p2">Hello World!</p><p class="p2">Hello!</p><script>var x1 = document.getElementById("p1");var x2 = document.getElementsByTagName("p");// console.log(ps);for(var o=0;o<x2.length;o++){console.log(x2[o].innerHTML);// innerHTML 用于獲取元素內(nèi)部的html代碼}var x3 = document.getElementsByClassName("p2");</script> </body> </html>

補充：
對于單標簽，用獲取id、類名、標簽名的方式 屬性是獲取不到的。如果想要獲取元素節(jié)點的屬性，可以直接使用元素.屬性名，如果要獲取 class 值，則要使用 className。如：

<body><input type="text" value="輸入框" id="inp" class="inpclass"><script>var inp = document.getElementById("inp");console.log(inp.type);console.log(inp.className); //獲取class的值</script> </body>

---

5.2、改變 HTML 元素(了解)

方法描述

element.innerHTML = new html content	改變元素的 inner HTML
element.attribute = new value	改變 HTML 元素的屬性值
element.setAttribute(attribute, value)	改變 HTML 元素的屬性值
element.style.property = new style	改變 HTML 元素的樣式

示例：

<body><p id="p1" class="p2">Hello World!</p><script>var x1 = document.getElementById("p1").innerHTML = "hello kitty!";</script> </body>

---

5.3、添加和刪除元素(了解)

方法描述

document.createElement(element)	創(chuàng)建 HTML 元素
document.removeChild(element)	刪除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替換 HTML 元素
document.write(text)	寫入 HTML 輸出流

---

5.4、添加事件處理程序

事件: 用戶和瀏覽器之間的交互行為: 點擊按鈕，鼠標移動…

對于按鈕的事件有兩種添加方式：

① 直接在按鈕內(nèi)部添加 onclick 樣式，但在代碼量大且復雜時不易于修改，因此不是很提倡。

② 給按鈕綁定事件，并給出處理函數(shù)

格式：

document.getElementById(id).onclick = function(){code}

示例：
(這里我只寫了一部分代碼)

<body><button id="btn">點我</button><script>var btn = document.getElementById("btn");btn.onclick = function(){btn.innerHTML = "我被點了";}</script> </body>

---

5.5、使用DOM操作CSS樣式

5.5.1、改變 HTML 樣式

語法：

元素.style.樣式名 = 樣式值

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JavaScript(二)</title><style>div{width: 100px;height: 100px;background-color: #00BFFF;}</style> </head> <body><div id="box"></div><button id="btn">點我</button><script>var btn = document.getElementById("btn");var box = document.getElementById("box");btn.onclick = function(){box.style.width="50px";box.style.height="50px";}</script> </body> </html>

注意：
① 通過 style 屬性設置的樣式都是內(nèi)聯(lián)樣式，優(yōu)先級較高，通過 js 修改的樣式會立即顯示。

②如果 css 的樣式名中含有- ，這種在 js 中不合法。應該將樣式名改為駝峰命名法：去掉-并將其后面的字母大寫。
如：

//在上個示例上改 btn.onclick = function(){box.style.width="150px";box.style.height="150px";box.style.backgroundColor="red"; }

---

5.5.2、讀取元素樣式

方式一
語法：

元素.style.樣式名

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JavaScript(二)</title><style>div{width: 100px;height: 100px;background-color: #00BFFF;}</style> </head> <body><div id="box"></div><button id="btn">點我</button><button id="btn1">獲取</button><script>var btn = document.getElementById("btn");var box = document.getElementById("box");var btn1 = document.getElementById("btn1")btn.onclick = function(){box.style.width="150px";box.style.height="150px";box.style.backgroundColor="red";}//注意：只有點擊btn后再點擊btn1才能獲取樣式btn1.onclick = function(){ console.log(box.style.width);console.log(box.style.height);}</script> </body> </html>

注意：通過 style 屬性設置和讀取的都是內(nèi)聯(lián)樣式，無法讀取 style 標簽的樣式 。

方式二
語法：

var data = getComputedStyle(要獲取樣式的元素,偽元素) //偽元素我們不知道，就寫null返回：當前元素對應樣式對象(所有的對象都返回了)

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JavaScript(二)</title><style>div{width: 100px;height: 100px;background-color: #00BFFF;}</style> </head> <body><div id="box"></div><button id="btn">點我獲取樣式</button><script>var btn = document.getElementById("btn");var box = document.getElementById("box");btn.onclick = function(){var st = getComputedStyle(box,null);console.log(st.backgroundColor);console.log(st.width);console.log(st.height);}</script> </body> </html>

注意：getComputedStyle 既可以獲取內(nèi)聯(lián)樣式也可以獲取外聯(lián)樣式，哪個生效就獲取哪個。

有想學習 JavaScript 基本運用的可以看看我這幾篇博客：
學習筆記（六）——JavaScript（三）
學習筆記（四）——JavaScript（一）

總結(jié)

以上是生活随笔為你收集整理的学习笔记（五）——JavaScript（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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