js 的學習
day41javascript
學習連接：https://www.cnblogs.com/yuanchenqi/articles/5980312.htmlcss
知識結構：
BOM對象html
DOM對象（DHTML）java
一個完整的JavaScript的組成有如下三個不一樣部分組成：
一、ECMAScipt（語法規範）node
二、文檔對象模型（DOM） Document object model (整合js，css，html)python
三、瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）後端
- Javascript 在開發中絕大多數狀況是基於對象的.也是面向對象的.
簡單地說，ECMAScript 描述瞭如下內容：數組
- 語法
- 類型
- 語句
- 關鍵字
- 保留字
- 運算符
- 對象 (封裝 繼承 多態) 基於對象的語言.使用對象.
JavaScript的導入方式：瀏覽器
{#1 直接在body或者head內編寫(看我的習慣,我的習慣放在body內)#}app
<script>
alert(
'hello yuan'
)
<
/
script>
{
#2 head 導入文件#}
<script src
=
"hello.js"
><
/
script>
變量
注：每一個var後面要加一個分號，沒有分號會以換行符做爲每行的結束
一、聲明變量是不用聲明變量類型，所有使用var關鍵字
var name;
二、一行能夠聲明多個變量.而且能夠是不一樣類型,用逗號分隔
var name="yuan", age=20, job="lecturer";
3 (瞭解) 聲明變量時 能夠不用var. 若是不用var 那麼它是全局變量.
4 變量命名,首字符只能是字母,下劃線,$美圓符 三選一，且區分大小寫，x與X是兩個變量
5 變量還應遵照如下某條著名的命名規則：
Camel 標記法 首字母是小寫的，接下來的字母都以大寫字符開頭。例如： var myTestValue = 0, mySecondValue = "hi"; Pascal 標記法 首字母是大寫的，接下來的字母都以大寫字符開頭。例如： Var MyTestValue = 0, MySecondValue = "hi"; 匈牙利類型標記法 在以 Pascal 標記法命名的變量前附加一個小寫字母（或小寫字母序列），說明該變量的類型。例如，i 表示整數，s 表示字符串，以下所示「 Var iMyTestValue = 0, sMySecondValue = "hi";
規範：
1 每行結束能夠不加分號. 沒有分號會以換行符做爲每行的結束
2 註釋 支持多行註釋和單行註釋. /* */ //
3 使用{}來封裝代碼塊
數據類型：
基本數據類型：
數字類型(Number)
簡介 最基本的數據類型 不區分整型數值和浮點型數值 全部數字都採用64位浮點格式存儲，至關於Java和C語言中的double格式 能表示的最大值是±1.7976931348623157 x 10308 能表示的最小值是±5 x 10 -324
整數：
在JavaScript中10進制的整數由數字的序列組成
精確表達的範圍是
-9007199254740992 (-253) 到 9007199254740992 (253)
超出範圍的整數，精確度將受影響
浮點數：
使用小數點記錄數據
例如：3.4，5.6
使用指數記錄數據
例如：4.3e23 = 4.3 x 1023
16進制和8進制數的表達
16進制數據前面加上0x，八進制前面加0
16進制數是由0-9,A-F等16個字符組成
8進制數由0-7等8個數字組成
16進制和8進制與2進制的換算
# 2進制: 1111 0011 1101 0100 <-----> 16進制:0xF3D4 <-----> 10進制:62420 # 2進制: 1 111 001 111 010 100 <-----> 8進制:0171724
字符串(String)
簡介 是由Unicode字符、數字、標點符號組成的序列 字符串常量首尾由單引號或雙引號括起 JavaScript中沒有字符類型 經常使用特殊字符在字符串中的表達 字符串中部分特殊字符必須加上右劃線\ 經常使用的轉義字符 \n:換行 \':單引號 \":雙引號 \\:右劃線
String數據類型的使用
- 特殊字符的使用方法和效果
- Unicode的插入方法
|
1
2
3
4
|
<script>
var
str
=
"\u4f60\u597d\n歡迎來到\"JavaScript世界\""
;
alert(
str
);
<
/
script>
|
布爾型(Boolean)
簡介
Boolean類型僅有兩個值：true和false，也表明1和0，實際運算中true=1,false=0
布爾值也能夠看做on/off、yes/no、1/0對應true/false
Boolean值主要用於JavaScript的控制語句，例如
if (x==1){
y=y+1;
}else {
y=y-1;
}
Null & Undefined
Undefined 類型
Undefined 類型只有一個值，即 undefined。當聲明的變量未初始化時，該變量的默認值是 undefined。
當函數無明確返回值時，返回的也是值 "undefined";
Null 類型
另外一種只有一個值的類型是 Null，它只有一個專用值 null，即它的字面量。值 undefined 其實是從值 null 派生來的，所以 ECMAScript 把它們定義爲相等的。
儘管這兩個值相等，但它們的含義不一樣。undefined 是聲明瞭變量但未對其初始化時賦予該變量的值，null 則用於表示還沒有存在的對象（在討論 typeof 運算符時，簡單地介紹過這一點）。若是函數或方法要返回的是對象，那麼找不到該對象時，返回的一般是 null。
var person=new Person()
var person=null
數據類型轉換
JavaScript屬於鬆散類型的程序語言 變量在聲明的時候並不須要指定數據類型 變量只有在賦值的時候纔會肯定數據類型 表達式中包含不一樣類型數據則在計算過程當中會強制進行類別轉換
數字 + 字符串：數字轉換爲字符串
數字 + 布爾值：true轉換爲1，false轉換爲0
字符串 + 布爾值：布爾值轉換爲字符串true或false
強制類型轉換函數
函數parseInt： 強制轉換成整數 例如parseInt("6.12")=6 ; parseInt(「12a")=12 ; parseInt(「a12")=NaN ;parseInt(「1a2")=1
NaN: not a number
函數parseFloat： 強制轉換成浮點數 parseFloat("6.12")=6.12
函數eval： 將字符串強制轉換爲表達式並返回結果 eval("1+1")=2 ; eval("1<2")=true
類型查詢函數(typeof)
ECMAScript 提供了 typeof 運算符來判斷一個值是否在某種類型的範圍內。能夠用這種運算符判斷一個值是否表示一種原始類型：若是它是原始類型，還能夠判斷它表示哪一種原始類型。
函數typeof ：查詢數值當前類型 (string / number / boolean / object )
用來判斷數據類型
例如typeof("test"+3) "string" 例如typeof(null) "object " 例如typeof(true+1) "number" 例如typeof(true-false) "number"
ECMAScript 運算符：
算術運算符
NaN只要布爾值參與比較，那麼結果必定是false(var n=NaN，n!=NaN的結果是True，其餘都是false)
邏輯運算符
等性運算符
關係運算符
console.log(2==2) console.log(2=="2") 這兩個結果都是true,可是第二個會作類型轉換，因此也是true,可是咱們用 「徹底等」 console.log(2==="2")這樣的結果就是false
比較運算符兩側若是一個是數字類型,一個是其餘類型,會將其類型轉換成數字類型.
比較運算符兩側若是都是字符串類型,比較的是最高位的asc碼,若是最高位相等,繼續取第二位比較.
布爾運算符
if 控制語句：
if-else基本格式
if (表達式){
語句１;
......
}else{
語句２;
.....
}
功能說明
若是表達式的值爲true則執行語句1,
不然執行語句2
eg:
var name="bigbao"
if (name=="baobao"){
alert('baobao')
}else if(name=="xueyuan"){
alert('xueyuan')
}
else {
alert("hello world")
document.write('not bigbao')
}
</script>
swith 選擇控制語句：
switch基本格式
switch (表達式) {
case 值1:語句1;break;
case 值2:語句2;break;
case 值3:語句3;break;
default:語句4;
}
eg:
var week='Monday';
switch (week) {
case "Monday":alert('星期一');break;
case "Tuesday":alert('星期二');break;
case "Wednesday":alert('星期三');break;
default:alert('byebye');
}
default 是在都不知足的時候，執行該語句
switch比else if結構更加簡潔清晰，使程序可讀性更強,效率更高。
首先要看一個問題，if 語句適用範圍比較廣，只要是 boolean 表達式均可以用 if 判斷；而 switch 只能對基本類型進行數值比較。二者的可比性就僅限在兩個基本類型比較的範圍內。
說到基本類型的數值比較，那固然要有兩個數。而後重點來了——
if 語句每一句都是獨立的，看下面的語句：
if (a == 1) ...
else if (a == 2) ...
這樣 a 要被讀入寄存器兩次，1 和 2 分別被讀入寄存器一次。因而你是否發現其實 a 讀兩次是有點多餘的，在你所有比較完以前只須要一次讀入寄存器就好了，其他都是額外開銷。可是 if 語句必須每次都把裏面的兩個數從內存拿出來讀到寄存器，它不知道你其實比較的是同一個 a。
因而 switch case 就出來了，把上面的改爲 switch case 版本：
switch (a) {
case 0:
break;
case 1:
}
總結:
1.switch用來根據一個整型值進行多路分支，而且編譯器能夠對多路分支進行優化
2.switch-case只將表達式計算一次,而後將表達式的值與每一個case的值比較,進而選
擇執行哪個case的語句塊
3.if..else 的判斷條件範圍較廣，每條語句基本上獨立的，每次判斷時都要條件加載
一次。
因此在多路分支時用switch比if..else if .. else結構要效率高。
for 循環控制語句******：
for循環基本格式
for (初始化;條件;增量){
語句1;
...
}
功能說明
實現條件循環，當條件成立時，執行語句1，不然跳出循環體
eg：
for (i=0;i<=10;i++){
document.write("hello world"+i+"<br>")
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<p>hello</p>
<p>world</p>
<p>bigbao</p>
<div>nihao</div>
</head>
<body>
<script>
var eles_p=document.getElementsByTagName("p");
for (var i=0;i<eles_p.length;i++){
console.log(eles_p[i])
}
</script>
</body>
</html>
While 循環控制語句：
while循環基本格式
while (條件){
語句1；
...
}
功能說明
運行功能和for相似，當條件成立循環執行語句花括號{}內的語句，不然跳出循環
eg:
var n=1;
var s=0;
while (n<=100){
s=s+n;
n++;
}
document.write(s)
異常處理：
try {
//這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
}
catch (e) {
// 若是try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。
//e是一個局部變量，用來指向Error對象或者其餘拋出的對象
}
finally {
//不管try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執行。
}
eg:
try {
console.log(123)
throw Error('Test Error')
}
catch(e){
console.log(e)
}
finally {
console.log('finally')
}
ECMA 對象：
11種內置對象
包括：
Array ,String , Date, Math, Boolean, Number Function, Global, Error, RegExp , Object
string 對象的方法：
大小寫轉換
獲取指定字符串
查詢字符串
字符串替換
字符串截取
分割字符串
鏈接字符串
數組Array對象
建立的三種方式：
var arr1=[1,2,3];
var arr2=new Array(3);
arr2[0]="hello";
arr2[1]="world";
arr2[2]="bigbao";
var arr3=new Array('hello',23,true);
Array對象的方法
一、鏈接數組的方法 join
//書寫格式 //x.join(bystr) //使用註解 // //x表明數組對象 //bystr做爲鏈接數組中元素的字符串 //返回鏈接後的字符串 //與字符串的split功能恰好相反
eg:
var arr1=["hello","world","bigbao"];
var str1=arr1.join("--")
document.write(str1)
二、鏈接數組 concat
//鏈接數組-concat方法 // //x.concat(value,...)
eg：
var arr1=["hello","world","bigbao"];
var str1=arr1.concat("xx1","xx2");
document.write(str1)
三、數組排序-reverse sort
//x.reverse()倒序 //x.sort() 正序
四、數組切片-slice
//x.slice(start, end) // //使用註解 // //x表明數組對象 //start表示開始位置索引 //end是結束位置下一數組元素索引編號 //第一個數組元素索引爲0 //start、end可爲負數，-1表明最後一個數組元素 //end省略則至關於從start位置截取之後全部數組元素
五、刪除子數組 splice
//x. splice(start, deleteCount, value, ...) // //使用註解 // //x表明數組對象 //splice的主要用途是對數組指定位置進行刪除和插入 //start表示開始位置索引 //deleteCount刪除數組元素的個數 //value表示在刪除位置插入的數組元素 //value參數能夠省略
Function 對象(重點)
格式：
function 函數名 (參數){
函數體;
return
返回值;
}
功能說明：
- 可使用變量、常量或表達式做爲函數調用的參數
- 函數由關鍵字function定義
- 函數名的定義規則與標識符一致，大小寫是敏感的
返回值必須使用return
Function 類能夠表示開發者定義的任何函數。
用 Function 類直接建立函數的語法以下：
function 函數名 (參數){
函數體;
return 返回值;
}
BOM對象
BOM（瀏覽器對象模型），能夠對瀏覽器窗口進行訪問和操做。使用 BOM，開發者能夠移動窗口、改變狀態欄中的文本以及執行其餘與頁面內容不直接相關的動做。
使 JavaScript 有能力與瀏覽器「對話」。
window（窗口）對象
全部瀏覽器都支持 window 對象。
概念上講.一個html文檔對應一個window對象.
功能上講: 控制瀏覽器窗口的.
使用上講: window對象不須要建立對象,直接使用便可.
window 對象的方法：
alert() 顯示帶有一段消息和一個確認按鈕的警告框。
confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。他是有一個返回值的。能夠用一個變量表示 var sel=confirm("hello world"),這個是和alert的區別
prompt() 顯示可提示用戶輸入的對話框。var inp=prompt("input your name") 輸入框輸入內容後，點擊肯定會把輸入值返回給inp
open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。open("http://www.baidu.com")
close() 關閉瀏覽器窗口。
setInterval() 按照指定的週期（以毫秒計）來調用函數或計算表達式。
clearInterval() 取消由 setInterval() 設置的 timeout。
setTimeout() 在指定的毫秒數後調用函數或計算表達式。
clearTimeout() 取消由 setTimeout() 方法設置的 timeout。
scrollTo() 把內容滾動到指定的座標。
setInterval 和 clearInterval
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="id1" type="text" onclick="begin()">
<button onclick="end()">中止</button>
<script>
function showTime(){
var current_time=new Date().toLocaleString();
var ele=document.getElementById("id1");
ele.value=current_time
}
var clock1;
function begin() {
if (clock1 == undefined) {
showTime();
clock1 = setInterval(showTime, 1000) 這裏的1000就是1s
}
}
function end() {
clearInterval(clock1);
clock1 = undefined;
}
</script>
</body>
</html>
History 對象
Location 對象
location.assign(URL) （用一個新的的頁面替換當前頁面，能夠後退） location.reload() 刷新頁面 location.replace(newURL)//注意與assign的區別（用一個新的頁面替換當前的頁面，不能夠後退）
DOM對象(DHTML)*****
7.1 什麼是 DOM？
DOM 是 W3C（萬維網聯盟）的標準。DOM 定義了訪問 HTML 和 XML 文檔的標準：
"W3C 文檔對象模型（DOM）是中立於平臺和語言的接口，它容許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。"
W3C DOM 標準被分爲 3 個不一樣的部分：
- 核心 DOM - 針對任何結構化文檔的標準模型
- XML DOM - 針對 XML 文檔的標準模型
- HTML DOM - 針對 HTML 文檔的標準模型
- 什麼是 XML DOM？ －－－－>XML DOM 定義了全部 XML 元素的對象和屬性，以及訪問它們的方法。
- 什麼是 HTML DOM？－－－－>HTML DOM 定義了全部 HTML 元素的對象和屬性，以及訪問它們的方法。
7.2 DOM 節點
根據 W3C 的 HTML DOM 標準，HTML 文檔中的全部內容都是節點(NODE)：
- 整個文檔是一個文檔節點(document對象) ***
- 每一個 HTML 元素是元素節點(element 對象) ***
- HTML 元素內的文本是文本節點(text對象)
- 每一個 HTML 屬性是屬性節點(attribute對象)
- 註釋是註釋節點(comment對象)
畫dom樹是爲了展現文檔中各個對象之間的關係，用於對象的導航。
節點(自身)屬性:
- attributes - 節點（元素）的屬性節點
- nodeType – 節點類型
- nodeValue – 節點值
- nodeName – 節點名稱
- innerHTML - 節點（元素）的文本值 (取指定標籤中的html 文本內容 )
導航屬性:
- parentNode - 節點（元素）的父節點 (推薦)
- firstChild – 節點下第一個子元素
- lastChild – 節點下最後一個子元素
- childNodes - 節點（元素）的子節點
咱們經常使用的導航屬性：
parentElement // 父節點標籤元素 children // 全部子標籤 firstElementChild // 第一個子標籤元素 lastElementChild // 最後一個子標籤元素 nextElementtSibling // 下一個兄弟標籤元素 previousElementSibling // 上一個兄弟標籤元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1">
<p class="p1">hello p1</p>
<div class="div2"> hello div2</div>
</div>
<script>
var ele=document.getElementsByClassName("p1")[0]; 這裏咱們拿到的相似是一個數組類型，因此這裏咱們拿第一個
var b_ele=ele.nextElementSibling;
console.log(b_ele.innerHTML);
</script>
</body>
</html>
節點樹中的節點彼此擁有層級關係。
父(parent),子(child)和同胞(sibling)等術語用於描述這些關係。父節點擁有子節點。同級的子節點被稱爲同胞（兄弟或姐妹）。
- 在節點樹中，頂端節點被稱爲根（root）
- 每一個節點都有父節點、除了根（它沒有父節點）
- 一個節點可擁有任意數量的子
- 同胞是擁有相同父節點的節點
下面的圖片展現了節點樹的一部分，以及節點之間的關係：
訪問 HTML 元素（節點）,訪問 HTML 元素等同於訪問節點,咱們可以以不一樣的方式來訪問 HTML 元素：
全局查找標籤的方法：
- 經過使用 getElementById() 方法 經過 id 來尋找，獲得的是一個惟一值
- 經過使用 getElementsByTagName() 方法 經過標籤名字尋，document.getElementsByTagName("span")
- 經過使用 getElementsByClassName() 方法 經過 class 來尋找，獲得的是是一個相似數組結構的
- 經過使用 getElementsByName() 方法 經過標籤的name屬性來查找，獲得的也是一個數組結構，因此得加上索引
局部（某一個標籤內）查找標籤不支持
getElementById
getElementsByName
7.3 HTML DOM Event(事件)
HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動做（action），好比當用戶點擊某個 HTML 元素時啓動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標籤來定義事件動做。
onclick 當用戶點擊某個對象時調用的事件句柄。 ondblclick 當用戶雙擊某個對象時調用的事件句柄。 onfocus 元素得到焦點。 //練習：輸入框 onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證.（鼠標離開輸入框，就是失去焦點） onchange 域的內容被改變。 應用場景：一般用於表單元素,當元素內容被改變時觸發.（三級聯動） onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交. onkeypress 某個鍵盤按鍵被按下並鬆開。 onkeyup 某個鍵盤按鍵被鬆開。 onload 一張頁面或一幅圖像完成加載。 onmousedown 鼠標按鈕被按下。（一直按着鼠標） onmousemove 鼠標被移動。 onmouseout 鼠標從某元素移開。 onmouseover 鼠標移到某元素之上。
onmouseleave 鼠標從元素離開，和 onmouseout 的區別在具體項目中說 onselect 文本被選中。 onsubmit 確認按鈕被點擊。
onfocus 和 onblur 的實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="search" type="text" onfocus="f1()" onblur="f2()" value="輸入用戶名">
<script>
var ele1=document.getElementById("search");
function f1() {
if (ele1.value=="輸入用戶名"){
ele1.value=""
}
}
function f2() {
if (!ele1.value.trim()) {
ele1.value = "輸入用戶名"
}
}
</script>
</body>
</html>
onload 綁定事件：
script 標籤能夠放在head內
而後
<body onload="fun1()"> <p id="ppp">hello p</p> </body>
onsubmit:（監聽一個submit事件）
是當表單在提交時觸發. 該屬性也只能給form元素使用.應用場景: 在表單提交前驗證用戶輸入是否正確.若是驗證失敗.在該方法中咱們應該阻止表單的提交.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onsubmit</title>
</head>
<body>
<form action="" id="form1">
<input type="text" name="username"> <!-- name和username構成鍵值對，當點擊submit的時候，鍵值對提交給後端-->
<input type="submit" value="提交按鈕">
</form>
<script>
var ele=document.getElementById("form1");
ele.onsubmit=function () {
// document.write("hello world")
return false
}
</script>
<!--這裏submit 有兩家事情要作，順序操做
一、執行綁定觸發事件 onsubmit，這裏咱們要是return false的時候就沒法執行下面的操做了
二、執行submit事件，把鍵值對傳給後端
-->
</body>
</html>
Event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onsubmit</title>
</head>
<body>
<form action="" id="form1">
<input type="text" name="username"> <!-- name和username構成鍵值對，當點擊submit的時候，鍵值對提交給後端-->
<input type="submit" value="提交按鈕">
</form>
<script>
var ele=document.getElementById("form1");
ele.onsubmit=function (event) {
event.preventDefault()
}
</script>
<!--
這裏咱們使用event的preventDefault來阻止表單提交
-->
</body>
</html>
事件傳播
<div id="abc_1" style="border:1px solid red;width:300px;height:300px;">
<div id="abc_2" style="border:1px solid red;width:200px;height:200px;">
</div>
</div>
<script type="text/javascript">
document.getElementById("abc_1").onclick=function(){
alert('111');
}
document.getElementById("abc_2").onclick=function(event){
alert('222');
event.stopPropagation(); //阻止事件向外層div傳播.
}
</script>
7.4 標籤節點的增刪改查
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1,.div2,.div3,.div4{
width: 300px;
height: 100px;
}
.div1{
background-color: blueviolet;
}
.div2{
background-color: yellow;
}
.div3{
background-color: #396bb3;
}
.div4{
background-color: rosybrown;
}
</style>
</head>
<body>
<div class="div1">div1
<button onclick="add()">add</button>
</div>
<div class="div2">div2
<button onclick="remove()">remove</button>
</div>
<div class="div3">div3
<p>hello world</p>
<button onload="update()">update</button>
</div>
<div class="div4">div4
<button onclick="select()">select</button>
</div>
<script>
function update() {
var img=document.createElement("img");
img.src="123.png";
var father=document.getElementsByClassName("div3")[0];
var son=document.getElementsByTagName("p")[0];
father.replaceChild(img,son)
}
function add() {
var ele1=document.createElement("p"); // <p></p>
ele1.innerHTML="hello p";
var ele=document.getElementsByClassName("div1")[0];
ele.appendChild(ele1);
}
function remove() {
var father=document.getElementsByClassName("div1")[0];
var sons_p=father.getElementsByTagName("p")[0];
father.removeChild(sons_p);
}
</script>
</body>
</html>
修改 HTML DOM
- 改變 HTML 內容
改變元素內容的最簡答的方法是使用 innerHTML ，innerText。
- 改變 CSS 樣式
|
1
2
|
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";<br> .style.fontSize=48px
|
- 改變 HTML 屬性
elementNode.setAttribute(name,value)
elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)
- 建立新的 HTML 元素
createElement(name)
- 刪除已有的 HTML 元素
elementNode.removeChild(node)
- 關於class的操做
elementNode.className
elementNode.classList.add
elementNode.classList.remove
遮罩層彈出框的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遮罩層</title>
<style>
.content{
height: 1800px;
background-color: white;
}
.shade{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: gray;
opacity: 0.2;
}
.module{
width: 400px;
height: 200px;
background-color: navajowhite;
position: absolute;
top: 50%;
left: 50%;
margin-left: -130px;
margin-top: -100px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="content">
<button onclick="show()">顯示遮罩層</button>
</div>
<div class="shade hide"></div>
<div class="module hide">
<button onclick="cancel()">x</button>
</div>
<script>
function show() {
var ele_shade=document.getElementsByClassName("shade")[0];
var ele_module=document.getElementsByClassName("module")[0];
ele_shade.classList.remove("hide");
ele_module.classList.remove("hide")
}
function cancel() {
var ele_shade=document.getElementsByClassName("shade")[0];
var ele_module=document.getElementsByClassName("module")[0];
ele_shade.classList.add("hide");
ele_module.classList.add("hide")
}
</script>
<!--
應用場景就是在咱們點擊一個按鈕的時候彈出一個頁面，這個頁面浮在當前頁面上方，背景變成淺灰色 注意這裏咱們是點擊按鈕以後出現遮罩層，因此沒有點擊的時候是不現實的，因此這裏咱們給遮罩層和彈出框加上display:none classList 顯示全部標籤 classList.remove 移除標籤 classList.add 添加標籤
-->
</body>
</html>
正反選練習：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正反選</title>
</head>
<body>
<button onclick="selectAll()">全選</button>
<button>取消</button>
<button>反選</button>
<table border="1px">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
</table>
<script>
function selectAll() {
var inputs=document.getElementsByTagName("input");
for (i=0;i<inputs.length;i++) {
var input=inputs[i];
input.checked=true;
}
}
</script>
</body>
</html>
改裝版；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正反選</title>
</head>
<body>
<button onclick="select('all')">全選</button>
<button onclick="select('cancel')">取消</button>
<button onclick="select('reverse')">反選</button>
<table border="1px">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
</table>
<script>
function select(choice) {
// var ele=document.getElementById("table");
var inputs=document.getElementsByTagName("input");
for (var i=0;i<inputs.length;i=i+1){
var ele2=inputs[i];
if (choice=="all"){
ele2.checked=true;
}else if(choice=="cancel"){
ele2.checked=false;
}
else if(choice=='reverse') {
if (ele2.checked){
ele2.checked=false;
}else {
ele2.checked=true;
}
}
}
}
</script>
</body>
</html>
二級浮動
- 1. js的學習（1）
- 2. 學習js的day3
- 3. [js學習] javaScript學習
- 4. 學習JS
- 5. js學習
- 6. 學習js
- 7. js學習8
- 8. JS學習（2）
- 9. js學習3
- 10. js學習---1
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • 適用於PHP初學者的學習線路和建議
- • Tomcat學習筆記（史上最全tomcat學習筆記）
-
每一个你不满意的现在，都有一个你没有努力的曾经。