文章目錄
- Web前端入門學習
Web前端入門學習
HTML
一、基本語法格式
<!--聲明是html格式爲html 一般寫在首行-->
<!DOCTYPE html>
<!--html是固定格式表示html的開始和結束-->
<html>
<!-- 聲明html網頁信息-->
<head>
<!--編碼字符集-->
<meta charset="UTF-8">
<!-- 移動客戶端優先——>
<meta name="viewport" content="width=device-width,initial-sclle=1.0">
<!--標題-->
<title>HTML標題</title>
</head>
<!--和用戶交互的部分-->
<body>
</body>
</html>
注意：<title>標籤位於<head>標籤內，是<head>標籤中唯一要求包含的東西。
<meta>用來提供相關文檔信息
CSS，JS文件用<link>標籤引入 並且寫在<head>標籤中
二、常用的一些標籤
1、標籤 h1~h6
這是標籤h1
這是標籤h2
這是標籤h3
這是標籤h4
這是標籤h5
這是標籤h6
2、段落標籤p
<p></p>段落標籤前後有換行效果。
3、水平線標籤
<hr/> 水平線是一個自閉和標籤。
4、換行
<br/> 。
5、超鏈接
通過<a href="http://www.baidu.com"> <a/>標籤實現，使用超連接調用某個網頁前面必須要加http://。
6、div
<div></div>標籤可以理解爲是一個盒子，用於網頁的佈局
7、span
<span></span>標籤是一個不帶任何參數的標籤和在<from>表單中的<label>類似
8、表格標籤table
<table></table>
<!-- 表格標籤 屬性border=1 添加表格邊框粗細爲1 -->
<!-- cellspacing="0" 使邊框變只有一條線-->
<table border="1" cellspacing="0" >
<!--設置表格標題-->
<caption><h3>這是表格標題</h3></caption>
<!-- 定義行 -->
<tr >
<!---th定義列 一般寫在表格首行 內容會被加粗居中-->
<th style="width: 100px;">id</th>
<th style="width: 100px;">用戶名</th>
<th style="width: 100px;">年齡</th>
</tr>
<tr>
<!-- tb定義列 -->
<td>1</td>
<td>張三</td>
<td>18</td>
</tr>
<tr>
<caption>標籤用於設置表格標題 會自動在表格上方居中顯示
表格除了<table>標籤以外還需要<tr>來定義行，<th>、<tb>來定義列<th>一般用於表格首行有加粗居中效果。
9、列表標籤
<body>
<h3>水果</h3>
<!-- ul無序列表-->
<ul>
<li>西瓜</li>
<li>蘋果</li>
<li>獼猴桃</li>
</ul>
<h3>蔬菜</h3>
<!-- ol有序列表 start代表從幾開始-->
<ol start="50">
<li>西紅柿</li>
<li>黃瓜</li>
<li>東瓜</li>
</ol>
</body>
10、表單Form
含義：表單就是用來提交數據到後臺服務器的，比如QQ網頁上的登錄和註冊都是提交表單的一使用
<form action="http://www.baidu.com" method="GET">
action:數據發送的服務器地址，如上就是發送給了百度
method: 請求發送方式。常用的倆種方式爲： GET、POST
get：將數據追加在url末尾 ? key=value & key=value;
post：將數據寫在請求體中
在from表單中，提交數據的標籤必須要有 name和value 倆個屬性
表單專屬標籤<label>類似於<span>標籤 無默認樣式標籤
11、input
1、text代表文本框。還有一種超級文本框textrea用於輸入更多內容
1、<input type="password"/>密碼屬性會隱藏輸入內容
2、radio代表單選項，必須要有相同name屬性，纔可以使用組合使用單選項
<input type="radio" name="sex" value="0"/>男 <input type="radio" name="sex" value="1"/>女
3、checkbox代表多選。必須要有name屬性，多個name屬性的多選爲一組
<input type="checkbox" name="hobby" value="0"/>唱
<input type="checkbox" name="hobby" value="1"/>跳
4、submit提交表單數據
5、reset清空表單內容
12、下拉框select
注意：name屬性在select標籤；value屬性在option標籤
來 自
<select name="city" id="">
<option value="0">請選擇</option>
<option value="1">山東</option>
<option value="2">安徽</option>
<option value="3">江蘇</option>
</select>
13、具有實體意義的代碼
空格 :
©: ©
CSS
1、基本語法
1、行內式：<div style=" height: 200px;" ></div>
2、引入外部文件式:<link rel="stylesheet" href="css/text.css">
3、嵌入式:<style type="text/csss"> </style>
2、選擇器
一、通用選擇器 *
一般用於取消所有元素的內外邊距和一些標籤自帶的字體樣式
*{
padding: 0; /* 將所有元素的內間距設置爲0*/
margin: 0; /* 將所有元素的外間距設置爲0*/
text-decoration: none; /*通常用於去除a標籤的下劃線*/
}
二、類選擇器 .
/* 類選擇器
格式： 例：<a class="b"> <a/>
.class 修飾的類名稱{ .b{
屬性：值 屬性：值
屬性：值 屬性：值
} }
三、ID選擇器
/* 格式 例：<a id="c"></a>
#id修飾的名稱{ #c{
屬性：值 屬性：值
} }
四、分組選擇器
給不同名字標籤設置相同屬性
/*
.class,#id{
屬性：值
}
*/
五、後代選擇器
/*
div p{
屬性：值
}
p標籤是div中的子元素
3、常用屬性
1、背景: background
設置背景顏色、圖片背景的倆種方式
```css
body{
background: blue;
background-color: blue;
/* background: url(img/Da66niel_Wu.jpg); */
/* background-image: url(imgimg/Daniel_Wu.jpg) */
/* background-position-y: -5px; /* 設置背景圖片y軸上上移5px*/
/* background-repeat: repeat; */ 默認重複 從上至下 從左到右
/* background-repeat:repeat-x; */ 背景圖片在x軸上重複
/* background-repeat: repeat-y; */ 背景圖片在y軸上重複
/* background-repeat: no-repeat; */ 背景圖片不重複
/* 設置背景圖片，並不重複，一行代碼實現 */
/* background: url(imgimg/Daniel_Wu.jpg) no-repeat;
/*overflow: hidden;/* 超出標籤範圍內容隱藏 */
}
```
2、文本text
1、設置顏色有三種方式：
color:aqua; /* 通過顏色的英文單詞名稱設置*/
color: #7B68BB; /* 通過顏色代碼設置*/
color:rgb(244,164,96); /* 通過rgb顏色代碼設置*/
2、居中 text-align:center;
靠左text-align: left;默認靠左
靠右text-align: right;
3、文本修飾
text-decoration: none; /* 無任何線條修飾——去除超鏈接下劃線*/
text-decoration: underline;/*下劃線*/
text-decoration: overline;/*上劃線*/
text-decoration: line-through;/*中劃線*/
text-decoration-color: red; /*控制線條樣式 設置線條顏色爲紅色*/
text-indent:20px; /* 首行縮進 */
4、文本首行縮進
text-indent:20px;或text-indent:2em; em大約爲17px
3、字體
1、字體類型
font-family: '微軟雅黑','宋體','黑體';設置多個字體類型瀏覽器會按從左到右按支持的類型選擇
2、字體大小
font-size: 50px;
3、字體粗細
font-weight: 900;字體粗細取值範圍是100~900的整數 bold=700、normal=900
4、列表list
list-style: none;/* 無樣式*/
/* list-style: disc; 實心圓，默認樣式 */
/* list-style: circle; 空心圓 */
/* list-style: square; 實心方塊 */
/* list-style:decimal; 數字 */
/* list-style:decimal-leading-zero; 零開頭數字 */
/* list-style: lower-roman; 小寫羅馬 */
/* list-style: upper-roman; 大寫羅馬 */
/* list-style: lower-alpha; 小寫英文 */
list-style: lower-alpha; /* 大寫英文 */
5、對齊方式
居中：text-align:center;
靠左：text-align:left;
靠右：text-align:right
兩端對齊: text-align: justify;
1、兩端對齊只有一行文字時不生效
2、兩端對齊多行文字時最後一行不生效。 解決方法：使用僞元素在末尾添加空行
:after{
display:inline-block;/*將最後一行變爲行內狀元素*/
width: 100%;/*使用父元素的寬度*/
content: '';
}
6、display屬性(塊元素)
1、display定義了元素是否顯示
2、display:none;表示元素不顯示
3、display:block塊狀元素；比如div元素可以設置寬高的元素屬於塊狀元素但是會自動換行
4、display:inline;行內元素；無法設置元素的寬/高
5、 display:inline-block;行內塊元素 ，既能實現設置寬/高屬性，也不會自動換行
7、邊框屬性border
1、border: 1px solid black; 用一條語句表示：分別是設置 邊框粗細、邊框樣式、邊框顏色
/* border-width:5px; 粗細 */
/* border-style:solid; 實線樣式 */
/* border-style: none; 無樣式 */
/* border-style: dotted; 點狀 */
/* border-style: dashed; 虛線 */
/* border-style: double; 雙實線 */
/* border-color: black; 顏色 */
/* border-radius:8px; 邊框變圓角*/
8、內外間距
1、內邊距：padding 外邊距：margin
/*內外邊距同理*/
/* margin: 20px; 代表上下左右都是20px */
/* margin: 10px 30px; 代表上下10px 左右30px; */
/* margin: 2px 10px 20px 30px; 代表從左到右爲上右下左設置像素; */
/* 外間距如果只有倆個參數的情況下,第二個參數可以設置auto代表自動居中 */
/* margin: 5px auto; */
/* 上外邊距20px 左外邊距自動計算居中 下外邊距0px 右外邊距自動計算居中 */
margin: 20px auto 0 auto;
9、定位position
1、絕對定位：position:absolute
position: absolute;/*絕對定位*/
top: 100px;
left: 100px; /*設置倆個參數即可確定位置*/
2、相對定位：position:relative
讓子元素對父元素進行絕對定位的時候，父元素必須設置相對定位
3、固定定位：position:fixed
相對於瀏覽器窗口定位，不會因爲你下滑而改變位置
position: fixed;/* 相對於瀏覽器窗口定位*/
bottom: 50px;
right: 50px; /*設置倆個參數即可確定位置*/
10、鼠標變手勢
cursor: pointer;
11、樣式改變效果耗時
transition: all 0.5s;
12、行高
line-height：； 不允許使用負值
JavaScript
1、語法格式
1、行內式：<button onclick="alert('點擊後的彈出框')">彈出框</button>
2、嵌入式：
<script type="text/javascript" charset="utf-8">alert('這是一個彈出框');</script>
3、引入外部文件：
<script src="js/hello.js" type="text/javascript" charset="utf-8"></script>
2、基礎語法
1、var 來定義部分字符轉和整數、小數
2、不能義關鍵字用來命名，就是js語法已經徵用的單詞不可以使用，否則報錯
3、如何命名（標識符）：
一、支持 _ 和 & 特殊符號
二、區分大小寫
三、不要以數字開頭，但是支持數字
四、見名知意
五、使用駝峯或者下劃線分割
六、console.() 用於打印在控制檯
3、變量
變量，就是內存中用來存儲數據的一個小空間
變量名也要遵循 標識符 的規則
注意：
1、若只聲明而沒有賦值，則該變量的值爲 undefined
2、變量要有定義才能使用，若變量未聲明就使用，JavaScript會報錯
3、可以在同一條var命令中聲明多個變量
4、若使用var重新聲明一個已經存在的變量且賦值，則會覆蓋掉前面的值
5、js的語法不區分雙引號和單引號，但是如果出現了引號嵌套需要注意
4、數據類型
1、undefined 例： var num;聲明未賦值的變量都是undefined
2、null 例：var a=null; 空值
3、boolean 例 var a=true; 布爾類型 true/false
4、number 例var a=1,b=3.14 數值類型
5、字符串 例var a=‘張三’ 字符串類型
6、函數function
5、數據類型的轉換
一、轉整數 全局函數parseInt();
1、純數字的字符串轉整數：parselnt('495')=495
2、數字開頭加字符的字符串: parseInt('456abc')=456 只會保留數字部分丟棄其他字符
3、其他字符開頭加數字的字符串：parseInt('str123')=NaN
4、小數字字符串和小數都是隻保留整數部分: parseInt('3.14')=3
5、進制轉換：parseInt(0xa)=10 ；16進制的10，大小寫無所謂
二、轉小數 全局函數parseFloat()
1、字符串轉小數parseFloat("3.14")=3.14
2、數字開頭加字符的字符串parseFloat("1.52ad")=1.52 只會保留數字部分丟棄其他字符
3、其他字符開頭加數字的字符串：parseFloat('str123')=NaN
4、整數字符串，保留整肅部分不會自動加小數位
5、0開頭的整數或字符串 parseFloat(0360598)=360598 去掉開頭的0保留整肅，不會添加小數位
6、多位小數字符串parseFloat(1.23.35)=1.23 只會保留一個小數點後的有效數字
三、轉字符串
1、使用toString() 注意： undefined 和 null 不能直接使用該函數 否則會報錯
解決方法加 " " 或 ’ ’ 最簡單的方法就是所有變量加 " " 或者 ’ ’ 都可以轉爲字符串
6、運算符
一、算數運算符
除了 加減乘除（+ - * /） 需要注意的是還有 求餘數 %
自增和自減有兩種寫法
++在後： a++、a-- 表示先賦值後自增
++在前： ++a、–a 表示先自增後賦值
二、賦值運算符
x -= 1 等於 x=x-1；x * =1 等於 x = x * 1 ; x %=1 等於 x = x % 1
x +=1等於 x=x+1；x / = 1 等於 x = x / 1 ;
三、比較運算符
1、’==’ 會幫我們做簡單的自動類型轉換 5 == '5' true
2、’==='全等於 必須類型和值都相等纔是true
3、還有常見的 大於">"、小於"<"、大於等於">="、小於等於"<="、不等於 “!=”
四、邏輯運算符
1、"&&" 短路於 並且的意思
符號倆邊條件都達到的時爲：true 否則非false
2、"||" 短路或 或者
符號倆邊條件只要一個滿足或倆個都滿足時就爲：true 否則false
五、三目運算符
格式： 條件表達式 ？ ture的結果 ：fales的結果
var x = 2;
var y = 5;
// x大於y嗎？大於返回x，小於返回y
var result = x > y ? x : y; //接收返回值到result
console.log(result); // 在控制檯打印result
7、IF判斷語句
格式1 ：
if (條件表達式){ //如果條件表達式爲true 則執行語句在 執行後續語句
執行語句；
} //如果條件表達式爲false。執行後續語句
格式2 ：
if (條件表達式) {
true語句體;
} else {
false語句體;
}
後續代碼;
格式3 ：
if (條件表達式) {
} else if (條件表達式) {
} else if (條件表達式) {
}else{//後面這個slse塊可以跟具實際情況 可有可無
}
8、循環語句
格式：
/* for (初始表達式; 條件表達式; 操作初始表達式) {
語句體;
}
執行順序：
1. 初始表達式，例如：var i = 0;
2. 執行條件表達式，例如：i < 5;
3. 如果第二步爲true，執行第四步，如果第二步爲false，循環結束
4. 執行語句體，然後執行第五步
5. 操作表達式，例如：i++，然後執行第二步*/
例: for (var i = 1; i <= 5; i++) {
if（i==3){
continue //表示當i=3的時候跳出當次循環，繼續下次
// break 表示結束循環
}
}
9、數組
一、數組的定義
1、第一種：var 數組名 = [];定義一個空數組，未初始化值，如果要訪問會返回undefined
2、第二種：var 數組名 = [值1, 值2, 值3,...]; 定義一個長度爲5的數組，已初始化值
3、第三種：new Array(值1, 值2, 值3,...);定義一個長度爲3的數組，已初始化值
4、第四種：new Array(長度);定義一個長度爲5的數組，未初始化值，如果要訪問會返回undefined
注意：
1、 數組的獲取：格式 數組名[下標]；第一位：從0開始，最後一位：length-1
2、js的數組沒有越界的概念，js的數組可以隨意更改長度
二、數組的遍歷 即獲取數組中所有數據 使用for循環
var arr5 = [1, 3.14, true, null, "學習"];
for (var i = 0; i < arr5.length; i++) {
console.log("arr5[" + i + "] = " + arr5[i]);
}
10、函數
一、函數的定義
/*
格式1：
function 函數名([形參]){
語句體；
return 返回值；
}
格式2：
var 函數名=function([形參]){
語句體；
return 返回值；
if（ 條件表達式）{
return； //注意 在函數if中添加return當條件表達式爲flase時結束函數
}
}
調用：
函數名([實參]);
*/
11、內置對象String
var str='我是一個字符串';
一、charAt(idx):指定位置字符
str.charAt(1);// "是"
二、indexOf(chr)定字符串的位置
返回指定字符串的位置，從左到右。找不到返回-1
str.indexOf("我") //"0"
三、substr(m,n):
返回給頂字符串從m位置開始，取n個字符，如果參數n省略。則意味着取全部
str.substr(2,2);//“一個”
四、substring:
返回給定字符串中從2開始，到3位置結束但不包括第3位。如果參數n省略。則意味着取全部
substring(2,3);//“一”
五、tolowerCase():轉小寫
str='SHSXT' str.toLowerCase()；//“shsxt”
六、toUpperCase();轉大寫
str='shsxt' str.toUpperCase(); //“SHSXT”
七、replace(s1,s2): 替換
將s1替換爲s2 str='shsxt' str.replace('sh','bj'); //“bjsxt”
12、內置對象Math
1、隨機數
Math.random();生成隨機數，生成0到1的小數
2、上取整
`Math.ceil()` 向上取整 `Math.ceil(0.00001)`=1
3、下取整
Math.floor()向下取整 Math.floor(0.99999)=0
4、四捨五入
Math.round()四捨五入取整，只對小數點後一位進行四捨五入 Math.round(3.19)=3
例； 隨機產生0到26的數
Math.floor (Math.random()*27)
產生0~1的數乘以27在向下取整可達到產生隨機數0到26
13、內置對象Date
創建時間對象var date = new Date();
一、獲取年
date.getFullYear()
二、獲取月
date.getMonth() + 1
三、獲取日
date.getDate()
四、獲取星期
date.getDay()
五、獲取分
getMinutes()
六、獲取秒
getSeconds()
七、獲取本地時間
toLocaleString()
八、set更改時間
設置日期時間，設置時間爲2008奧運
date.setFullYear(2008);
date.setMonth(7);
date.setDate(8);
date.setHours(20);
date.setMinutes(8);
date.setSeconds(8);
console.log(date.toLocaleString());
14、BOM對象
一、系統對話框
1、消息框：
alert(123);
2、輸入框：
prompt(‘請輸入年齡’，20)；第二參數爲默認值 可有可
3、確認框：
confirm(‘確認要更改麼’)‘’
例子：
var result=confirm('確認要修改麼');
//如果點確認，修改div文本的顏色，否則給個警告
if(result){
var dv=document.getElementById('dv');
dv.style.color='blue';
}else{
alert('沒事別瞎點');
}
二、打開窗口
open('http://www.baidu.com', '_block') block：新窗口打開 默認值
三、時間函數
1、setTimeout
setTimeout(函數,時間毫秒) 多少秒後執行函數
// setTimeout 5s後打印 settimeout(函數,時間毫秒);
var num = 1;
var result1 = setTimeout(function () {
console.log("打印內容");
}, 5000);
2、setInterval
setInterval(函數,時間毫秒) 多少秒執行一次
//setInterval 每秒打印一次
var result2 = setInterval(function () {
console.log("打印內容");
}, 1000);
注意： 時間函數調用後會返回一個停止時間函數的數值
//時間函數調用後會返回一個停止時間函數的數值
function stopTime() {
clearTimeout(result1);
clearInterval(result2); //停止時間函數
}
練習：將當前時間獲取到設置div 並且爲整數時，修改顏色紅色
var dv1 = document.getElementById("dv1"); //通過dvi的id與他關聯
setInterval(function () {
//new Date().gerSeconds() 獲取當時秒數
if (new Date().getSeconds() % 10 == 0) {
dv1.innerHTML = "<h1 style='color:red;'>" + new Date().toLocaleString() + "</h1>";
} else {
dv1.innerHTML = "<h1>" + new Date().toLocaleString() + "</h1>";
}
}, 1000);
四、location
1、reload 刷新頁面 location.reload();
2、href 改變當前頁面網址 location.href="http://www.baidu.com";
15、事件on
一、onload 頁面加載
// 第一種，使用匿名函數，默認加載body
// onload =function(){
// document.getElementById('dv').style.color='blue';
// }
//第二種 使用具體函數
function init(){
var dv=document.getElementById('dv');
console.log(dv);
dv.style.color='red';
}
// <body οnlοad="init();">
二、onClick點擊
三、焦點事件
1、獲取焦點：onfocus
2、失去焦點：onblur
四、鼠標事件
1、鼠標移入：onmouseover
2、鼠標移出: onmouseout
3、鼠標在範圍內移動：onmousemove
五、鍵盤事件
1、鍵盤按下：onkeyup
2、鍵盤擡起：onkeydown
六、改變域內容事件
onchange 例如下拉框的選擇
七、事件處理方式
HTML事件處理方式 / DOM事件處理方式
DOM事件處理方式，動態的方式綁定，方便代碼的維護
16、DOM對象
一、獲取節點
1、根據id獲取，返回單個對象 document.getElementById( );
2、根據name獲取，返回多個對象 數組 document.getElementsByName();
3、根據標籤名獲取，返回多個對象 數組document.getElementsByTagName();
4、根據class獲取元素document.getElementsByClassName();
二、對象屬性操作
<button type="button" id="btn">測試按鈕</button><br />
<input type="text" value="加油，勝利就在眼前" id="txt" class="test" />
<br />
性別：
<input type="radio" checked="true" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br />
<img src="img/timg.jpg" style="width: 200px;" id="sxtimg" title="sxt" />
1、獲取文本
var txt = document.getElementById('txt');
// 根據屬性獲取文本
console.log(txt.value);
// 根據函數獲取文本
console.log(txt.getAttribute('value'));
--------------------------------------------------------------------------------------
//設置文本
// 根據屬性設置文本
txt.value = '我是新文本';
// 根據函數設置文本
txt.setAttribute('value', '我是第二次設置的新文本');
2、獲取屬性
var txt = document.getElementById('txt');
// 根據屬性獲取
// 獲取id屬性
console.log(txt.id);
// 獲取class屬性
console.log(txt.className);
// 獲取type屬性
console.log(txt.type);
// 根據函數獲取
console.log(txt.getAttribute('id'));
console.log(txt.getAttribute('class'));
console.log(txt.getAttribute('type'));
--------------------------------------------------------------------------------------
// 根據屬性設置
//txt.id = 'newId';
//txt.className = 'newClass';
//txt.type = 'password';
// 根據函數設置
txt.setAttribute('id', 'newId2');
txt.setAttribute('class', 'newClass2');
txt.setAttribute('type', 'password');
3、獲取是否選中*
console.log(sex.checked);// 返回true false
console.log(sex.getAttribute('checked'));// 有，返回具體的值或者沒有，返回null
---------------------------------------------------------------------------------------
// 根據屬性設置
//sex.checked = true;
// 根據函數設置
sex.setAttribute('checked', 'true');
4、獲取樣式
function getStyle() {
var sxtimg = document.getElementById('sxtimg');
// 根據屬性獲取
console.log(sxtimg.style.width);
// 根據函數獲取
console.log(sxtimg.getAttribute('style'));
// 根據屬性設置，設置的是其中一個樣式，屬於樣式的添加，建議使用屬性操作
//sxtimg.style.cursor = 'pointer';
// 根據函數設置，設置的是全部樣式，屬於樣式的覆蓋
sxtimg.setAttribute('style', 'cursor: pointer');
}
// 將自定義函數綁定至按鈕
document.getElementById('btn').onclick = getStyle;
三、元素的創建和插入
//添加段落//
//函數的方式創建
function testCreateElementByFunc() {
var p = document.createElement('p')
var txt = document.createTextNode('我是一個p元素');
var vd = document.getElementById('dv');
p.appendChild(txt);
dv.appendChild(p);
}
//屬性的方式創建
function testCrerteElenentByAttr() {
var dv = document.getElementById('dv');
dv.innerHTML = '<p>屬性添加的p元素</p>'
}
---------------------------------------------------------------------------------------
// 添加圖片//
//函數的方式創建
function testCreateImgByFunc() {
var myImg = document.createElement('img');
var dv = document.getElementById('dv');
dv.appendChild(myImg);
//myImg.setAttribute("src",'img/Daniel_Wu.jpg');
myImg.src = 'img/Daniel_Wu.jpg';
}
//屬性的方式創建
function testCreateImgByAttr() {
var dv = document.getElementById('dv');
dv.innerHTML = '<img src="img/Daniel_Wu.jpg" style="width:300px;"/>';
}
---------------------------------------------------------------------------------------
// 文本框//
//函數的方式添加
function testCrerteElementByFunc() {
var inp = document.createElement('input');
inp.setAttribute('value', '我是一個文本框');
inp.setAttribute('type', 'password');
var div = document.getElementById('dv');
dv.appendChild(inp);
}
//屬性的方式添加
function testCreateElementAyAttr(){
var div=document.getElementById('dv');
dv.innerHTML='<input value="我是一個文本框" type="password"/>';
}
---------------------------------------------------------------------------------------
// 選項框//
//函數的方式添加
function testCreateElementByFunc(){
var opt=document.createElement('option');
var txt=document.createTextNode('南山南');
var sel=document.getElementById('mySelect');
opt.appendChild(txt);
opt.setAttribute('value','3');
//第二種方法
sel.options.add(opt);
}
//屬性的方式創建
function testCreateElementByAttr(){
//獲取select
var sel=document.getElementById('maSelect');
/*
sel.innerHtML='<optinon value="0">------請選擇----</option>' +
'<option value="1">喜歡你</option>' +
'<option value="2">飄向北方</option>' +
'<option value="3">南山南</option>';
*/
sel.innerHTML +='<option value="3">南山南</opyion>';
}
四、間接查找節點
1、childNodes；子查詢節點集合 返回子節點爲數組 格式：父節點.childNodes
2、parentNode; 返回元素的父節點 格式: 元素.parentNode
2、firsthChild;返回元素的第一個子節點 格式:父節點.firstChild
3、lastChild; 返回元素的最後一個子節點 格式： 元素.lastChild
4、previousSiblinl;返回上一個兄弟節點 格式：元素.previousSiblinl
5、nextSibling；返回下一個兄弟節點 格式: 元素.nextSibling
五、節點刪除
<div id="dv">
<span id="cxy">程序猿|程序媛|攻城獅</span>
<a href="javascript:void(0)" onclick="delNode();">刪除</a>
</div>
注：href="javascript:void(0)" 使a標籤失去跳轉功能
方法1：父節點.removeChild.子節點
var dv=document.getElementById('dv');
var cxy=document.getElementById('cxy');
dv.removeChild(cxy);
方法2：cxy.parentNode.removeChild(cxy)
var cxy=document.getElementById('cxy');
cxy.parentNode.removeChild(cxy);
alue=“0”>------請選擇----’ +
‘喜歡你’ +
‘飄向北方’ +
‘南山南’;
*/
sel.innerHTML +=‘南山南’;
}
##### 四、間接查找節點
1、`childNodes；`子查詢節點集合 返回子節點爲數組 格式：`父節點.childNodes`
2、`parentNode;` 返回元素的父節點 格式: `元素.parentNode`
2、`firsthChild; `返回元素的第一個子節點 格式:` 父節點.firstChild`
3、`lastChild;` 返回元素的最後一個子節點 格式： `元素.lastChild`
4、`previousSiblinl; `返回上一個兄弟節點 格式：`元素.previousSiblinl`
5、`nextSibling；`返回下一個兄弟節點 格式: `元素.nextSibling`
##### 五、節點刪除
```html
<div id="dv">
<span id="cxy">程序猿|程序媛|攻城獅</span>
<a href="javascript:void(0)" onclick="delNode();">刪除</a>
</div>
注：href="javascript:void(0)" 使a標籤失去跳轉功能
方法1：父節點.removeChild.子節點
var dv=document.getElementById('dv');
var cxy=document.getElementById('cxy');
dv.removeChild(cxy);
方法2：cxy.parentNode.removeChild(cxy)
var cxy=document.getElementById('cxy');
cxy.parentNode.removeChild(cxy);