web前端入門JavaScript筆記之一

習大綱

1.JS概念

JS就是我們javascript ,他是被廣泛應用于瀏覽器的，一種解釋性腳本語言

解釋性：

整個代碼的執行過程中，他的編譯和執行是一起合成，不生成中間的編譯文件。

編譯性：

在代碼的執行過程中，會生成一個中間文件，編譯文件，最終執行的不是源代碼，而是編譯文件。

2.JS組成部分

ECMAScript:就是定義了JS的語言基礎，變量聲明、函數的定義等，語法規則

DOM: JS可以操作HTML網頁【標簽】

BOM: JS有能力操作瀏覽器

3.JS的作用

制作網頁特效：

例如：圖片輪播圖、Tab 選項卡

表單驗證【前端驗證】

例如：用戶登錄，用戶注冊驗證數據的完整性，準確性

二、Console對象-控制臺輸出

1.語法

Console.log(data);
Console.error(data);
Console.warn(data);

2.說明

Data:就是要輸出的數據

.Log:正常輸出數據

.error:錯誤輸出數據

.warn:警告輸出數據

Console 不是JS的操作對象，瀏覽器定義的操作對象，所有的瀏覽器都支持

3.作用

在開發的過程中，我們可以使用這個對象，來進行代碼調試

4.案例展示

<script>
   console.log('正常輸出!');
   console.error('正常輸出!');
   console.warn('正常輸出!');
</script>

? 思考：為什么不使用document.write或者alert

Document.write ：在頁面中輸出數據，就會影響頁面的美觀，不容易找到，不能輸出對象的結構【object】

Alert : 頁面彈出一個警告框，不支持復雜的數據結構的輸出

三、變量

1.概念

在生活中，存放一個東西我們把東西放在倉庫里面

在程序執行中，數據存放在數據庫中

在程序運行中，將數據儲存到內存中去，內存開辟一個臨時的空間來保存這個數據，這個時候保存的這個數據叫做變量

2.變量的聲明

? 語法

Var 變量名=變量值；

? 聲明類型

隱式聲明：

沒有使用var 來修飾就是隱式聲明

全局的變量

顯式聲明：

在定義變量的時候使用var 就叫做顯式聲明

局部變量

? 變量命名規則

變量的命名使用字母、數字、下劃線、$[首字母不能是數字]

變量嚴格區分大小寫

定義的變量不要使用系統關鍵字, if for switch

? 練習

//聲明一個為空的變量

Var name ;

//聲明一個變量并賦值

Var name = ‘小紅’;

//同時聲明多個變量 [多個變量的聲明使用,分隔開來]

Var name1,name2,name3;

//同時聲明多個變量并且賦值

Var name1=’小明’,name2=’小紅’,name3=”小王”;

四、變量數據類型

1.說明

JS是弱類型語言

弱類型：

在聲明變量的時候，并且給變量賦值，變量的類型取決于值的類型

強類型：

在聲明變量的時候要有修飾符[int string]，如果不聲明會報錯

2.基本類型（3種）

數據類型	描述	示例
數字類型	包含了整型和浮點型	Var num=1、Var num=1.1
字符串類型string	使用引號引起來的數據，是字符串類型	Var name=”小明”;
Bool 類型	是現實中的真和假，返回值只有2個 true ,false	Var bool = true;

顯著的特點：一個變量只能儲存一個值

3.復合類型（2種）

數據類型

描述

示例

數組

一系列有序數據的集合

Var arr = []

Var arr = new Array()

對象

等高級第三在講

數組的概念

一系列有序數據的集合

儲存

數組可以儲存多個數據，那么每個數據我們叫做數組的一個“元素”

獲取

數組可以通過一些數字或者字符串來獲取數組的值，那么這個數子或者字符串叫做數組的“下標/索引/鍵”

個數[length]

數組總的個數，我們把它叫做數組的長度，長度可以使用數組名.length 來獲取

下標

數組的下標是從0開始，數組的長度-1 就是數組的下標

創建數組

使用new方式關鍵詞和array()

Var arr = new Array(值1，值2...);

使用中括號[]來創建數組【推薦】

Var arr = [值1，值2...]

在聲明數組的時候要注意：關鍵字嚴格區分大小寫

數組的值沒有類型限制

? 操作數組

獲取元素

數組名[下標]

增加元素

數組名[增加下標]

修改元素

數組名[修改下標]

? 多維數組

在定義數組的時候數組的值，是一個數組類型，那么這個時候這個數組我們稱之為多維數組

Array(
Array(),
Array(),
)
二位數組
Array(
Array(
Array()
)
)

三維數組

數組的維度不是說有多少個數組元素，而是根據他的層次有多個層

? 操作多維數組

獲取元素

數組名[下標1][下標2]

增加元素

數組名[下標1][下標2]

Var arr = [
[1,2],
[3,4,[
]],
]
Arr[2]= 1;
Arr[1][2][0] = 值
// 修改元素
Var arr = [
[1,2],
[3,4],
]
Arr[1][1] = 值；

4.特殊類型（2種）

數據類型

描述

示例

null

空,變量里面沒有值

清空數據 Var name = 1;

Name = null;

undefine

未定義，在使用一個變量的沒有聲明這個時候就會出現undefine

Var name;

Console.log(name);

5.打印數據類型

語法：

Typeof(data)

Typeof data

說明：

Data :變量

Typeof 返回值是一個字符串，

Typeof :string\number\object\function object: 包含了數組，對象,null

五、JS變量的傳值方式

1.賦值傳值【拷貝傳值】

? 說明：

拷貝傳值，就是將變量重新復制一份出來，給另外一個變量，物理地址不同

? 舉例

2.引用傳值

? 思考代碼：

var arr1 = [100,38,2,250];
 var arr2 = arr1;
 console.log(arr2[0]); //100
 arr1[0] = 290;
 console.log(arr2[0]);// 290

? 說明：

數組，對象賦值的時候，是將物理地址傳遞給變量，實際的數據共用的是一個內存

所以當改變第一聲明的數據的時候，變量的值也會隨之更改

六、運算符

1.運算符和表達式的概念

運算符 - 是在代碼中對各種數據進行運算的符號。例如，有進行加、減、乘、除算術運算的運算符，有進行與、或、非、異或邏輯運算的運算符.

表達式 - 是由數字、算符、數字分組符號（括號）、變量等以能求得數值的有意義排列方法所得的組合

2.算數運算符

? 種類

+、-、*、/、% 、++、--

? 說明

++ 自增使用變量的時候i++ ++在前面，先自加本身然后在復制 ++在后面，先賦值，在自加 ;

-- 自減使用變量的時候i-- --在前面，先自減本身然后在復制 --在后面，先賦值，在自減 ;

? 課堂練習

1、（表達式，運算符）已知a，b，c，求如下情況下d的值：

var a, b, c, d;
a = 1;    b = 2.2;    c = 3.3;  d = a + b + c;        // d = 6.5
a = 1;    b = 2.2;    c = “3.3”;  d = a + b + c;     // d = 3.23.3
a = 1;    b = “2.2”;  c = 3.3;  d = a + b + c;     // d = 12.23.3
a = “1”;  b = 2.2;    c = 3.3;  d = a + b + c;     // d = 12.23.3
a = “1”;  b = 2.2;    c = 3.3;  d = a + (b + c);   // d = 15.5？
a = “1”;  b = 2.2;    c = 3.3;  d = (a + b) + c;    // d = 12.23.3
//2、（運算符）讀程序寫結果
var i = 10;  var j = i++;  alert(i + “,” + j);      // j = ？, i = ？
var i = 10;  var j = ++i;  alert(i + “,” + j);      // j = ？, i = ？
var i = 10;  var j = i++;  i=j++;  alert(i + “,” + j);      // j = ？, i = ？
var i = 10;  var j = ++i;  i=++j;  alert(i + “,” + j);          // j = ？, i = ？
var i = 10;  
var j = i++;  //j=10 //i=11
alert(i + “,” + j);
var i = 10;  
var j = ++i;  //j=11 i=11
alert(i + “,” + j);  
var i = 10;
 var j = i++;  //j=10 ,i=11
i=j++;  // j=11 ,i=10
alert(i + “,” + j);
var i = 10;  
var j = ++i;   //j=11 ,i=11
i=++j;  //j=12,i=12
alert(i + “,” + j);

3.賦值運算

? 種類：

= \ +=\-=\*=\/=\%=

? 說明：

= 直接賦值

+= : var a = a+1; var a+=1

4.字符串運算符

? 種類：

= +=

? 說明：

= 賦值

+= : 如果說是字符串，使用這個運算符代表著字符拼接

? 課堂練習

1.將 document.write("<img src=1.jpg/>"); 中src里的圖片地址替換為動態變量。

2.將數組的數據顯示在頁面中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>字符串運算符練習</title>
</head>
<body>
 <div>
   <ul id='ul'>
     
   </ul>
 </div>
</body>
<script type="text/javascript">
 var arr = [
   ' <li>離離原上草</li>',
       '<li>處處聞啼鳥</li>',
       '<li>欲窮千里目</li>',
       '<li>社會主義好</li>'
 ];
 
</script>
</html>
<script type="text/javascript">
 var arr = [
   ' <li>離離原上草</li>',
       '<li>處處聞啼鳥</li>',
       '<li>欲窮千里目</li>',
       '<li>社會主義好</li>'
 ];
   //循環遍歷數組
   var str=''; //定義一個變量
   for(i=0;i<arr.length;i++){
     
       str +=arr[i];
   }
   
   //將字符串寫入到ul容器中
   
 document.getElementById('ul').innerHTML = str;
</script>

5.比較運算符

? 種類：

>\<\>=\<= \ == \!=\===\!==

? 說明：

=== 三個等號，全等于，不僅數據的值相等，并且類型相等

!==

6.三元運算符【?】

? 語法：

表達式? 代碼段1:代碼段2

? 說明：

如果表達的是true ,則執行代碼段1

如果表達式返回的是false, 則執行代碼段2

7.邏輯運算符

? 種類：

邏輯與 && 并且兩個條件都成立，則執行

邏輯或 || 或者有一個條件成立，則執行

邏輯非 ! 取反

七、判斷

1.單分支【if】

If(條件表達式){

//代碼段

}

2.雙分支【if-else】

If(條件表達式){

//代碼段1

}else{

//代碼段2

}

3.多分支【if-else-if】

If(條件表達式){

//代碼段1

}else if(條件表達式2){

//代碼段2

}else if(條件表達式2){

//代碼段3

}

.....

Else{

}

4.多路選擇【switch-case】

Switch(bool){

Case 值1：

Break;

Case 值2：

Break;

Default:

}

腳下留心：在使用switch 的時候，括號里面的值必須是bool類型，要不然判斷體是不會執行的，前提條件case 里面不是一個固定值，而是表達式。

思考題：如何使用switch判斷學生成績？

90分及以上優秀

70分及以上良好

60分及以上及格

0分及以上不及格

其他未知狀態

<script>
   
   var num= -1;
   
   switch(true){
       case num>90:
           alert("優秀");
           break;
       case num>70:
           alert("良好");
           break;
            case num>60:
           alert("及格");
           break;
            case num>0:
           alert("不及格");
           break;
       default:
           alert("去吃飯吧!");
         
       }
   
</script>

八、循環

1.For

For(循環變量初始化,條件表達式,循環變量更新){

//代碼段

}

執行流程：

循環變量初始化->表達式的判斷【true】->先執行代碼段1->循環遍歷更新

2.While

//1.循環變量初始化

While(2.條件表達式){

//代碼段

//3.變量更新

}

3.do-while

//1.循環變量初始化

Do{

//指定代碼段

//變量更新

}while(條件表達式)

執行流程：

循環變量初始化->條件表達式的判斷->執行代碼段->變量更新

循環變量初始化->執行代碼段->變量更新->表達式的判斷

4.For/while/do-while 的區別

? 什么時候使用for 或者while ?

For 已知循環次數使用

While 未知循環次數使用

? While 和do-while的區別

? 循環流程

While 先進性表達式的判斷然后執行代碼段

Do-while 先執行代碼段在進行表達式的判斷

? 循環次數

While 循環次數根據條件表達式來

Do-while 不管表達式是否正確，都會執行代碼一次

5.for-in

? 概念：

循環數組和對象，我們可以使用for ,已知下標循環使用，

如果一個數組或者對象的下標我們不知道，可以使用for-in 來循環

? 語法：

For(變量 in 數組/對象){

//代碼段

}

說明：

變量：如果循環的是一個數組，那么這個變量就是數組的下標

變量：如果循環的是對象，那么這個變量就是對象里面的操作方法名稱

? 練習

循環輸出數組

循環輸出對象的方法

九、函數

1.函數的概念

就是將一些經常用到的代碼進行一個封裝，多出都用到同一個代碼。

一次封裝，終身使用

2.函數的定義

function 函數名(參數1，參數2，...){

//封裝的代碼

}

說明：

聲明函數的時候 function 系統關鍵字，嚴格區分大小寫

函數傳遞的參數如果是多個，我們使用,號分隔開發

定義函數的時候我們把參數叫做形參，調用函數的時候傳遞的這個參數是實參

思考：形參和實參的個數不一樣會怎么樣？

? 如果實參的數量小于形參

? 如果實參的數量大于形參

開發注意事項

腳下留心：在定義變量的時候，不要和函數重名，如果重名就會覆蓋原來的

3.匿名函數

? 概念

匿名函數，就是沒有名字的函數

? 語法

Var fun = function(){

}

必須要有變量來儲存函數

? 調用匿名函數

調用方法：變量名稱+()

匿名函數自調用

調用使用fun(),

演變過程一：

Function(){alert(‘1’);}()

語法不允許這樣寫

演變過程二、

4.Return 的作用

程序終止返回

終止程序并且返回數據

腳下留心：

5.變量的種類和生命周期

? 種類

全局變量：在整個代碼段中，都能獲取到這個變量直接寫變量名稱

局部變量：作用范圍只能是在函數體內來使用如果說在函數內部使用var 代表變量是局部變量

? 生命周期

全局變量：整個代碼執行完畢然后程序自動銷毀該變量

局部變量：在函數調用完成后，程序自動銷毀該變量

6.【新】arguments對象的使用

? 描述

它是函數的一個內置對象，里面包含了調用函數是的實參

思考：下面的代碼如何優化

如果說在增加參數進行數字統計

? 實例

<script>
   //如果在增加參數進行數據統計，我們要修改很多地方不方便
//    function sum(a,b,c,d,e){
//        
//        return a+b+c+d+e;
//    }
   
   
   //arguments
   function sum(){
      num = 0
       for(i=0;i<arguments.length;i++){
           num +=arguments[i];
       }
       return num;
   }
   
   console.log(sum(1,2));
</script>

十、Script的執行過程

1.函數的預加載

說明：

函數的調用，只要是在同一個代碼段中，不管是先聲明在調用還是先調用在聲明，都可以調用。首先整個代碼的執行先將變量的定義，函數先加載到內存中去，所有說我們在調用的時候就沒有順序限制了。

問題：函數的調用能不能再聲明之前？

2.Script語句執行的流程

? 說明：

用戶打開網頁

首先讀取第一個代碼段【script】

對代碼進行解析【語法檢測，變量的聲明，函數的加載】

Var i ;

執行代碼；

Var i=1;

結束當前代碼段

? 舉例：

3.錯誤類型：

? 思考下述代碼直接結果

代碼一：執行錯誤

var num1 = 111;
alert(num1);  //
alert(num2);  //
代碼二：解析錯誤
alert(1);   //
alert(;     //
alert(2);   //

? 錯誤類型：

執行錯誤：程序運行的時候出現的錯誤

解析錯誤：程序進行解析編譯的時候出現的語法錯誤

? 總結

執行錯誤：會影響當前代碼段的代碼的執行，如果出現執行錯誤，當前代碼段的所有的代碼終止運行，不會影響下一個代碼段的代碼執行。

解析錯誤：會影響當前代碼段的所有代碼執行，不會影響下一個代碼段的代碼執行

? 執行流程圖：

. DOM

1.1. DOM簡介

全稱Document Object Model，即文檔對象模型。

DOM描繪了一個層次化的樹，允許開發人員添加、刪除、修改頁面的某一部分。

瀏覽器在解析HTML頁面標記的時候，其實不是按照一行一行讀取并解析的，

而是將HTML頁面中的每一個標記按照順序在內存中組建一顆DOM樹，

組建好之后，按照樹的結構將頁面顯示在瀏覽器的窗口中。

1.2. 節點層次

HTML網頁是可以看做是一個樹狀的結構，如下：

html

|-- head

| |-- title

| |-- meta

| ...

|-- body

| |-- div

| |-- form

| | |-- input

| | |-- textarea

... ... ...

這是一顆樹，是由多個節點（Node）組成的，節點的類型有很多種。

節點最多有一個父節點，可以有多個子節點。

HTML DOM 定義了訪問和操作HTML文檔的標準方法。

document

代表當前頁面的整個文檔樹。

訪問屬性

all

forms

images

links

body

訪問方法(最常用的DOM方法)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
// 獲取dom 樹, 獲取document 對象.
var dom = window.document;
// all 獲取頁面中所有的標簽節點 ,注釋和文檔類型約束.
function testAll() {
      var allArr = dom.all;
      alert(allArr.length);
      for (var i = 0; i < allArr.length; i++) {
      //獲取節點名稱
      alert(allArr[i].nodeName);
      }
}
// anchors 獲取頁面中的所有的錨連接.
function testAnchors() {
    var anArr = dom.anchors;
    alert(anArr.length);
}
// froms  獲取所有的form 表單對象
function testForms() {
        var formArr = dom.forms;
        alert(formArr.length);
        alert(formArr[0].nodeName);
}
// images
function testImages() {
        var imageArr = dom.images;
        alert(imageArr.length);
}
// links  獲取頁面的超鏈接.
function testLinks() {
      var linkArr = dom.links;
      //alert(linkArr.length);
      for (var i = 0; i < linkArr.length; i++) {
      //alert(linkArr[i].nodeName);
      }
      for (var i in linkArr) {
      alert(i);
      }
      }
//testLinks();
// 獲取頁面的Body
var body = dom.body;
alert(body.nodeName);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title>
</head>
<body onmousemove="test(this)">
<img src="xxx" alt="這是一個美女"/>
<img src="xxx" alt="這是一個美女"/>
<img src="xxx" alt="這是一個美女"/>
<a href="http://www.baidu.com">百度一下</a>
<a href="http://www.google.com">百度兩下</a>
<a href="http://www.baigu.com">百谷一下</a>
<a name="one"></a>
<a name="two"></a>
<form>
<label>姓名:</label><!--默認不寫type 就是文本輸入框-->
<input  type="text"/>
</form>
</body>
</html>

1.3. 獲取節點對象案例

document.getElementById("html元素的id")

document.getElementsByTagName("標簽名")

document.getElementsByName("html元素的name")

示例：

1，得到所有的div元素并顯示信息（innerHTML）。

2，得到所有div元素中id為"test"的結果。

Var dom = window.document;
function testByTagName() {
  var iptArr = dom.getElementsByTagName("input");
  for (var i = 0; i < iptArr.length; i++) {
  	alert(iptArr[i].value);
  }
}

// window 對象提供了一個事件, onload 事件 onload(頁面加載完畢執行該代碼) 是一個事件, 給事件一個方法,

//window.onload = testByTagName;

//2，得到所有標簽id為"username"的結果。獲取舊value值并設置value值

function testById() {
  var user = dom.getElementById("username");
  alert(user.value);
  user.value = "rose";
  }
//testById();

//3. 獲取所有標簽name 為like的元素.獲取value值.

function testByName() {
	var likeArr = dom.getElementsByName("like");
  for (var i = 0; i < likeArr.length; i++) {
		  alert(likeArr[i].value);
  }
}
testByName();

1.3.1. 案例

顯示頁面任意一個節點對象的所有子節點的nodeName、nodeType、nodeValue

1.3.2. 屬性操作練習

1，寫一個form，其中有多個checkbox。

2，獲取所有選中的數量。

3，實現全選與全部選的效果。

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
 
<script type="text/javascript">
function getSum()
{
/*
需求：通過點擊總金額按鈕獲取被選中的條目的金額的總和，并將總金額顯示在按鈕右邊。
思路：
1，先獲取所有的checkbox對象。
2，對這些對象進行遍歷。判斷哪個對象被選中。
3，對被選中對象的金額進行累加。
4，顯示在按鈕右邊。
*/

var items = document.getElementsByName("item");
var sum = 0;
for(var x=0; x<items.length; x++)
{
if(items[x].checked)
{
sum += parseInt(items[x].value);
}
}
var str = sum+"元";
document.getElementById("sumid").innerHTML = str.fontcolor('red');
}
 
function checkAll(node){
    /*
    需求：通過全選checkbox，將其他條目都選中。
    思路：
    只要將全選checkbox的checked狀態賦值給其他的item checked狀態即可。
    */
    //var allNode = document.getElementsByName("all")[index];
    var items = document.getElementsByName("item");
    for(var x=0; x<items.length; x++){
        items[x].checked = node.checked;
    }
}
</script>
</head>
 
<body>
 
 
<div>商品列表</div>
<input type="checkbox" name="all" onclick="checkAll(this)"  /> 全選<br />
<input type="checkbox" name="item" value="3000" />筆記本電腦3000元<br />
<input type="checkbox" name="item" value="3000"  />筆記本電腦3000元<br />
<input type="checkbox" name="item" value="3000"  />筆記本電腦3000元<br />
<input type="checkbox" name="item" value="3000"  />筆記本電腦3000元<br />
<input type="checkbox" name="item" value="3000"  />筆記本電腦3000元<br />
<input type="checkbox" name="item" value="3000"  />筆記本電腦3000元<br />
<input type="checkbox" name="all" onclick="checkAll(this)"  /> 全選<br />
<input type="button" value="總金額：" onclick="getSum()" /><span id="sumid"></span>
 
 
</body>
</html>

1.4. 通過節點關系查找節點

從一個節點出發開始查找：

parentNode 獲取當前元素的父節點。

childNodes 獲取當前元素的所有下一級子元素。

firstChild 獲取當前節點的第一個子節點。

lastChild 獲取當前節點的最后一個子節點。

nextSibling 獲取當前節點的下一個節點。（兄節點）

previousSibling 獲取當前節點的上一個節點。（弟節點）

示例1：

firstChild屬性最普遍的用法是訪問某個元素的文本：

var text=x.firstChild.nodeValue;

示例2：

parentNode 屬性常被用來改變文檔的結構。

假設您希望從文檔中刪除帶有 id 為 "maindiv" 的節點：

var x=document.getElementById("maindiv");

x.parentNode.removeChild(x);

1.4.1. 獲取節點對象的信息

每個節點都包含的信息的，這些屬性是：

nodeType 節點類型

nodeName 節點名稱

nodeValue 節點值

nodeType

nodeType 屬性可返回節點的類型。

---------------------------------

元素類型節點類型

------------------

元素 1 就是標簽元素，例<div>..</div>

文本 3 標簽元素中的文本

注釋 8 表示為注釋

nodeName

nodeName 屬性含有某個節點的名稱。

--------------------------------

元素節點的 nodeName 是標簽名稱

屬性節點的 nodeName 是屬性名稱

文本節點的 nodeName 永遠是 #text

文檔節點的 nodeName 永遠是 #document

nodeValue

對于文本節點，nodeValue 屬性是所包含的文本。

對于屬性節點，nodeValue 屬性是屬性值。

對于注釋節點，nodeValue 屬性注釋內容。

nodeValue 屬性對于文檔節點和元素節點是不可用的。

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
//節點和節點之間的關系.
//獲取dom樹
var dom = window.document;
//獲取指定id 的標簽節點.
function test() {
        var form = dom.getElementById("form1");
        //獲取父節點.
        //alert(form.parentNode.nodeName);
        // 獲取子節點(Node 包含 文本,注釋,標簽)
        var childArr = form.childNodes;
        //alert(childArr.length);
        /*
        for (var i = 0; i < childArr.length; i++) {
        alert(childArr[i]);
        }
        */
        // 獲取第一個孩子.
        var first = form.firstChild;
        //alert(first);
        //最后一個孩子.
        var last = form.lastChild;
        //alert(last);
        // 獲取下兄弟(獲取弟弟)
        var sibling = form.nextSibling;
        //alert(sibling.nodeName);
        // 獲取大哥
        var previous = form.previousSibling;
        alert(previous.nodeName);
}
test();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>javascript</title>
</head>
      <body onmousemove="test(this)">
            <a>哈哈</a>
            <form id="form1">
                  <label>姓名:</label>
                  <input type="text" />
            </form>
      </body>
</html>

1.5. 節點操作

1.5.1. 創建新節點

document.createElement("標簽名") 創建新元素節點
elt.setAttribute("屬性名", "屬性值") 設置屬性
elt.appendChild(e) 添加元素到elt中最后的位置
elt.insertBefore(new, child); 添加到elt中，child之前。 // 參數1：要插入的節點參數 2：插入目標元素的位置
elt.removeChild(eChild) 刪除指定的子節點

lt;table>和<form>結合效果圖：

在HTML/CSS 中，我們經常用HTML來布局和填充內容，用CSS來添加效果，修飾內容和布局，使整個頁面變得更好看。

HTML和CSS的配合方法：

即在<head></head>標簽內添加CSS樣式表的鏈接：

代碼展示如下：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Make a Table Frame</title>
 <link rel="stylesheet" type="text/css" href="CSS/tableframe.css" >
</head>

CSS選擇器

定義：

對帶有指定屬性的 HTML 元素設置樣式。

注意：

只有在規定了 !DOCTYPE 時，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中，不支持屬性選擇。

功能：

“選擇器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用于網頁中的哪些元素。

CSS中的選擇器有三個：

標簽選擇器、class類選擇器、id選擇器

1.標簽選擇器樣式表：a{}、 div{}、table{} ...

{對全局所有的選中類型標簽的樣式修改}

2.class類選擇器樣式表： .class{}

{在HTML中每個標簽都可以同時綁定多個類名，每個標簽都可以設置class；同一個界面中class是不可重復}

3. id選擇器樣式表： #d1 {}

{每個標簽都可有id，每個頁面不可重復id，}

【一個HTML標簽只能綁定一個id屬性,一個HTML標簽可以綁定多個class屬性】

單純選擇<div>標簽的時候是對全局的的（所有的）<div>進行修飾；

選擇器優先級：

id選擇器>class類選擇器>標簽選擇器

所以有id和class 選擇器的標簽將不會被覆蓋。交叉時是按照優先級覆蓋顯示的。

<table>部分：電腦配件管理表2018年5月-8月

單純的HTML 表格表單內容

標題<caption>標簽：

表格的標題<caption>的內容填充（HTML）：

<caption> 表格標題</caption>

標題<caption>的樣式修飾(CSS)

table.formdata caption
{
	text-shadow: #FF00ff;
	text-align: center;
	padding-bottom: 6px;
	font-weight: bold;
}

其他<table>標簽相關內容可參考 HTML中表格的實例應用一文。

<form>部分：

form在網頁中主要負責數據采集功能。

一個表單有三個基本組成部分：

（1）表單標簽：包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。

（2）表單域：包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。

（3）表單按鈕：提交按鈕、復位按鈕和一般按鈕；用于將數據傳送到服務器上的CGI腳本或者取消輸入。還可以用表單按鈕來控制其他定義了處理腳本的處理工作。

<input>標簽

定義：

<input> 標簽規定用戶可輸入數據的輸入字段。

根據不同的 type 屬性，輸入字段有多種形態。輸入字段可以是文本字段、復選框、密碼字段、單選按鈕、按鈕等等

語法代碼：

<input type="value" >

實例代碼：

<td><input type="text" name="Mainboard 6月" id="Mainboard 6月"></td>

關系展示：

<input>中 submit屬性和reset屬性

實例代碼：

<p>

</p>

實例展示：

<input>標簽的其他屬性值：

<input>標簽外是否添加<form>標簽？

input標簽外是否添加form標簽需要按情形區分：

應用場景的區別：

1.所有向后臺提交數據（包括原生和ajax提交）的<input>都建議用<form>包裹.

2.如果只是用來做前臺交互效果則不推薦使用form包裹。

但提交數據時，其實也可以不用form包裹input標簽：

1.如果有form標簽，在點擊提交銨鈕時，瀏覽器自動收集參數，并打包一個http請求到服務器，完成表單提交。在這一過程中，瀏覽器會根據method的不同，將參數編碼后，放在urI中(get)，或者放在請求的data中(post)。然后發送到服務器。

2.如果沒有form，post方式的提交要使用ajax手工完成。get方式的提交需要自己拼接url。

<form>表單其他相關內容可參考 HTML中表單的應用實例一文。

最后，附帶一下該可輸入的EXCEL表格的源碼。

HTML code：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Make a Table Frame</title>
 <link rel="stylesheet" type="text/css" href="CSS/tableframe.css" >
</head>
<body image="">
 <form method="psot">
	<table border="1px" class="formdata">
 	<caption>電腦配件管理表2018年5月-8月</caption>
 	<tr>
 		<th></th>
 		<th scope="col">5月</th>
 		<th scope="col">6月</th>
 		<th scope="col">7月</th>
 		<th scope="col">8月</th>
 	</tr>
 	<tr>
 		<th scope="row">Hard Disk</th>
 		<td><input type="text" name="Hard Disk 5月" id="Hard Disk 5月"></td>
 		<td><input type="text" name="Hard Disk 6月" id="Hard Disk 6月"></td>
 		<td><input type="text" name="Hard Disk 7月" id="Hard Disk 7月"></td>
 		<td><input type="text" name="Hard Disk 8月" id="Hard Disk 8月"></td>
 	</tr>
 	<tr>
 		<th scope="row">Mainboard</th>
 		<td><input type="text" name="Mainboard 5月" id="Mainboard 5月"></td>
 <td><input type="text" name="Mainboard 6月" id="Mainboard 6月"></td>
 <td><input type="text" name="Mainboard 7月" id="Mainboard 7月"></td>
 <td><input type="text" name="Mainboard 8月" id="Mainboard 8月"></td>
 	</tr>
 	<tr>
 		<th scope="row">Case</th>
 		<td><input type="text" name="Case 5月" id="Case 5月"></td>
 <td><input type="text" name="Case 6月" id="Case 6月"></td>
 <td><input type="text" name="Case 7月" id="Case 7月"></td>
 <td><input type="text" name="Case 8月" id="Case 8月"></td>
 	</tr>
 	<tr>
 	 <th scope="row">Power</th>
 	 <td><input type="text" name="Power 5月" id="Power 5月"></td>
 <td><input type="text" name="Power 6月" id="Power 6月"></td>
 <td><input type="text" name="Power 7月" id="Power 7月"></td>
 <td><input type="text" name="Power 8月" id="Power 8月"></td>	
 	</tr>
 	<tr>
 		<th scope="row">CPU Fan</th>
 		<td><input type="text" name="CPU Fan 5月" id="CPU Fan 5月"></td>
 <td><input type="text" name="CPU Fan 6月" id="CPU Fan 6月"></td>
 <td><input type="text" name="CPU Fan 7月" id="CPU Fan 7月"></td>
 <td><input type="text" name="CPU Fan 8月" id="CPU Fan 8月"></td> 
 	</tr>
 	<tr>
 		<th scope="row">Total</th>
 		<td><input type="text" name="Total 5月" id="Total 5月"></td>
 <td><input type="text" name="Total 6月" id="Total 6月"></td>
 <td><input type="text" name="Total7月" id="Total 7月"></td>
 <td><input type="text" name="Total 8月" id="Total 8月"></td>
 	</tr>
	</table>
 <p>
 <input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn">
 <input type="reset" value= "Reset All" class="btn">
 </p>
 </form>
</body>
</html>

CSS code :

body
{
	font-family: Arial;
	/*background-image: url(image/mainroad.jpg) no-repeat;*/
	background-color: #00ff00;
	background-size: 100%;
}
table.formdata
{
	width: 300px;
	height: 150px;
	border: 2px solid #F00;
	border-collapse: collapse;
	font-family: Arial;
}
table.formdata caption
{
	text-shadow: #FF00ff;
	text-align: center;
	padding-bottom: 6px;
	font-weight: bold;
}
table.formdata th
{
	border:1px solid #be34hc;
	background-color: #E2E2E2;
	color:#000000;
	text-aglin:center;
	font-weight: normal;
	padding: 2px 8px 2px 6px;
	margin: 0px;
}
table.formdata input
{
	width: 100px;
	padding: 1px 3px 1px 3px;
	margin: 0px;
	border:none;
	font-family: Arial;
}
.btn
{
	width:100px;
	background-color: #FF00ee;
	border:1px solid #00f2f2;
	font-family: Arial;
}

本文部分內容來自網絡，如有侵權，請聯系修改。

在線咨詢

上一篇：關于 HTML5 你需要了解的基礎知識
下一篇：HTML初學者入門學習教程筆記手冊第一部分

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

web前端入門JavaScript筆記之一

習大綱

1.JS概念

2.JS組成部分

3.JS的作用

二、Console對象-控制臺輸出

1.語法

2.說明

3.作用

4.案例展示

三、變量

1.概念

2.變量的聲明

? 語法

? 聲明類型

? 變量命名規則

? 練習

四、變量數據類型

1.說明

2.基本類型（3種）

3.復合類型（2種）

數組的概念

? 操作數組

? 多維數組

? 操作多維數組

4.特殊類型（2種）

5.打印數據類型

五、JS變量的傳值方式

1.賦值傳值【拷貝傳值】

2.引用傳值

六、運算符

1.運算符和表達式的概念

2.算數運算符

? 種類

? 說明

? 課堂練習

3.賦值運算

? 種類：

? 說明：

4.字符串運算符

? 種類：

? 說明：

? 課堂練習

5.比較運算符

? 種類：

? 說明：

6.三元運算符【?】

? 語法：

? 說明：

7.邏輯運算符

七、判斷

1.單分支【if】

2.雙分支【if-else】

3.多分支【if-else-if】

4.多路選擇【switch-case】

八、循環

1.For

2.While

3.do-while

4.For/while/do-while 的區別

? 什么時候使用for 或者while ?

? While 和do-while的區別

? 循環流程

? 循環次數

5.for-in

? 練習

九、函數

1.函數的概念

2.函數的定義

3.匿名函數

? 概念

? 語法

? 調用匿名函數

4.Return 的作用

5.變量的種類和生命周期

? 種類

? 生命周期

6.【新】arguments對象的使用

? 描述

<input>中 submit屬性和reset屬性