前端基礎之JavaScript-day14

阿新 • • 發佈：2017-08-05

script 支持 rar 日期和時間動態類型語言第14天 mat switch 整體

寫在前面

上課第14天，打卡：

　　　　唯心不易，堅持！

參考：http://www.cnblogs.com/yuanchenqi/articles/6893904.html

前言

　　一個完整的 JavaScript 實現是由以下 3 個不同部分組成的：

技術分享

1.核心（ECMAScript） 

2.文檔對象模型（DOM） Document object model (整合js，css，html)

3.瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）



Javascript 在開發中絕大多數情況是基於對象的.也是面向對象的.

一、ECMAScript

　　1.ECMA

　　　　描述了JS的基本語法、語句、類型、關鍵字、運算符、對象等基礎概念；

　　2.JS的引入方式

1.直接編寫
    <script>
        alert(‘hello JS‘)
        console.log(‘hello JS‘)
    </script>

2.導入JS文件
    <script src="hello.js"></script>

　　3.JS中的變量、常亮和標識符

# 變量的定義
var num;
var sum = 10;
var name = ‘liu‘, age=18, gender = ‘male‘;

> 聲明變量時不用聲明變量類型. 全都使用var關鍵字;
> 一行可以聲明多個變量.並且可以是不同類型;
> 聲明變量時 可以不用var. 如果不用var 那麽它是全局變量;
> 變量命名規範和其他語言大同小異，不贅述



# 常量 ：直接在程序中出現的數據值



# 標識符：
    由不以數字開頭的字母、數字、下劃線(_)、美元符號($)組成
    常用於表示函數、變量等的名稱，例如：_abc,$abc,abc,abc123是標識符，而1abc不是
    JavaScript語言中代表特定含義的詞稱為保留字，不允許程序再定義為標識符

技術分享

　　4.JS的數據類型

技術分享

number        -----  數值
boolean       -----  布爾值
string        -----  字符串
undefined     -----  undefined
null          -----   null

　　　　4.1 數字類型

技術分享

　　　　4.2 字符串類型

是由Unicode字符、數字、標點符號組成的序列；

字符串常量首尾由單引號或雙引號括起；
JavaScript中沒有字符類型；常用特殊字符在字符串中的表達；

字符串中部分特殊字符必須加上右劃線\；
常用的轉義字符 \n:換行 \‘:單引號 \":雙引號 \\:右劃線

　　　　4.3 布爾類型

# 小寫 （Python中是大寫）
true和false

　　　　4.4 Null & Undefined類型

Undefined類型
    Undefined 類型只有一個值，即 undefined。
    當聲明的變量未初始化時，該變量的默認值是 undefined。
    當函數無明確返回值時，返回的也是值 "undefined";

Null類型
    另一種只有一個值的類型是 Null，它只有一個專用值 null，即它的字面量。
    值 undefined 實際上是從值 null 派生來的，因此 ECMAScript 把它們定義為相等的。



盡管這兩個值相等，但它們的含義不同。
undefined 是聲明了變量但未對其初始化時賦予該變量的值，
null 則用於表示尚未存在的對象。

如果函數或方法要返回的是對象，那麽找不到該對象時，返回的通常是 null。

　　5.運算符

算術運算符：
    +   -    *    /     %       ++        -- 

比較運算符：
    >   >=   <    <=    !=    ==    ===   !==

邏輯運算符：
     &&   ||   ！

賦值運算符：
    =  +=   -=  *=   /=

字符串運算符：
    +  連接，兩邊操作數有一個或兩個是字符串就做連接運算

console.log(2=="2");  //js內部會做一個類型轉換
# true

console.log(2==="2");
# false
# ===表示全等於，會區分類型

　　　　- js不同於python，是一門弱類型語言

靜態類型語言
一種在編譯期間就確定數據類型的語言。大多數靜態類型語言是通過要求在使用任一變量之前聲明其數據類型來保證這一點的。Java 和 C 是靜態類型語言。 

動態類型語言
一種在運行期間才去確定數據類型的語言，與靜態類型相反。VBScript 和 Python 是動態類型的，因為它們確定一個變量的類型是在您第一次給它賦值的時候。 



強類型語言
一種總是強制類型定義的語言。Java 和 Python 是強制類型定義的。您有一個整數，如果不明確地進行轉換 ，不能將把它當成一個字符串去應用。 

弱類型語言
一種類型可以被忽略的語言，與強類型相反。JS 是弱類型的。在JS中，可以將字符串 ‘12‘ 和整數 3 進行連接得到字符串‘123‘，然後可以把它看成整數 123 ，所有這些都不需要任何的顯示轉換。 

所以說 Python 既是動態類型語言 (因為它不使用顯示數據類型聲明)，
又是強類型語言 (因為只要一個變量獲得了一個數據類型，它實際上就一直是這個類型了)。



var num = 3;
var pre = ‘12‘;
var res = pre+num;
console.log(res);                 // 123
console.log(typeof res);       // string
console.log(123==res);       // true
console.log(123===res);     // flase

　　　　- 單元運算發(+ 和 -)

- 除了可以表示減號還可以表示負號  例如：x=-y
 
+ 除了可以表示加法運算還可以用於字符串的連接  例如："abc"+"def"="abcdef"

　　　　- NaN

var n = "10";
var m = +n;
console.log(m);                // 10 
console.log(typeof m);      // number


var i = ‘liu‘;
var j = +i;
console.log(j);                 // NaN 
console.log(typeof j);       // number



# NaN 特點

var n=NaN;
console.log(n>3);           // false
console.log(n<3);           // false
console.log(n==3);         // false
console.log(n==NaN);     // false

console.log(n!=NaN);      //NaN參與的所有的運算都是false,除了!=

　　　　- 比較運算符

# 兩個字符串比較大小

var bResult = "Blue" < "alpha";
alert(bResult);          //輸出 true　　
在上面的例子中，字符串 "Blue" 小於 "alpha"，
因為字母 B 的字符代碼是 66，字母 a 的字符代碼是 97。


# 比較兩個字符串形式的數字

var bResult = "25" < "3";
alert(bResult);          //輸出 "true"

上面這段代碼比較的是字符串 "25" 和 "3"。
兩個運算數都是字符串，所以比較的是它們的字符代碼（"2" 的字符代碼是 50，"3" 的字符代碼是 51）。



不過，如果把某個運算數該為數字，那麽結果就有趣了：

var bResult = "25" < 3;
alert(bResult);           //輸出 "false"

這裏，字符串 "25" 將被轉換成數字 25，然後與數字 3 進行比較，結果不出所料。




總結：
比較運算符兩側如果一個是數字類型,一個是其他類型,會將其類型轉換成數字類型.
比較運算符兩側如果都是字符串類型,比較的是最高位的asc碼,如果最高位相等,繼續取第二位比較.

　　　　- 擴展

等性運算符：執行類型轉換的規則如下：

如果一個運算數是 Boolean 值，在檢查相等性之前，把它轉換成數字值。false 轉換成 0，true 為 1。 
如果一個運算數是字符串，另一個是數字，在檢查相等性之前，要嘗試把字符串轉換成數字。 
如果一個運算數是對象，另一個是字符串，在檢查相等性之前，要嘗試把對象轉換成字符串。 
如果一個運算數是對象，另一個是數字，在檢查相等性之前，要嘗試把對象轉換成數字。 




在比較時，該運算符還遵守下列規則：

值 null 和 undefined 相等。 
在檢查相等性時，不能把 null 和 undefined 轉換成其他值。 
如果某個運算數是 NaN，等號將返回 false，非等號將返回 true。 
如果兩個運算數都是對象，那麽比較的是它們的引用值。
如果兩個運算數指向同一對象，那麽等號返回 true，否則兩個運算數不等。

　　　　- 邏輯運算符

if (2>1 && [1,2]){
    console.log("Successfully")       // 打印 Successfully
}
else {
    console.log(‘Failed‘)
}

console.log(1 && 3);                  // 3
console.log(typeof (1 && 3));         // number
console.log(0 && 3);                  // 0
console.log(0 || 3);                  // 3
console.log(2 || 3);                  // 2

　　6.流程控制

# if...else if...else...
var score=window.prompt("您的分數:");
if (score>90){
    ret="優秀";
}else if (score>80){
    ret="良";
}else if (score>60){
    ret="及格";
}else {
    ret = "不及格";
}
alert(ret);

# JS 沒有 elif ，只有 else if

# switch ... case
var y;
var x = 5;
switch (x)
{
    case 1: y="星期一";    break;
    case 2: y="星期二";    break;
    case 3: y="星期三";    break;
    case 4: y="星期四";    break;
    case 5: y="星期五";    break;
    case 6: y="星期六";    break;
    case 7: y="星期日";    break;
    default: y="未定義";
}
alert(y)

// Python 沒有 switch case，Python用字典替代；
// JS 有 swith case

// JS 第一種for循環：條件循環
for (var i=0; i<10; i++)
{
	console.log(i);
}


// JS 第二種for循環：遍歷循環
var arr = [1,2,3]; //數組
for (var i in arr)
{
	console.log(i);           // 打印數組下標
	console.log(arr[i]);    // 打印數組值 
}

var count = 0;
while (count < 10)
{
    console.log(‘ok‘);
    count++;
}


# 循環輸出H1到H7的字體的 hello
var i=1;
while (i <= 5) {
    document.write("<H"+i+">hello</H "+i+"> ");
    document.write("<br>");
    i++;
}

# 異常處理
try {
    console.log(‘Start...‘);
    throw Error(‘--->>>‘);        // 主動拋出異常
}
catch (e) {
    console.log(‘Get exception: ‘ + e);
}
finally {
    console.log(‘End.‘);
}

二、JS中的對象

在JavaScript中除了null和undefined以外其他的數據類型都被定義成了對象，
也可以用創建對象的方法定義變量；

String、Math、Array、Date、RegExp都是JavaScript中重要的內置對象，
在JavaScript程序大多數功能都是基於對象實現的。

# 示例

var s1 = "hello1";
var s2 = new String("hello2");

console.log(s1);                // hello1
console.log(s2);                // String對象...
console.log(typeof s1);      // string
console.log(typeof s2);      // object

　　技術分享

　　1.string對象

x.length         －－－－獲取字符串的長度




x.toLowerCase()        －－－－轉為小寫
x.toUpperCase()        －－－－轉為大寫
x.trim()                     －－－－去除字符串兩邊空格       


# 字符串查詢方法

x.charAt(index)         －－－－str1.charAt(index);－－－－獲取指定位置字符，其中index為要獲取的字符索引

x.indexOf(findstr,index)－－－－查詢字符串位置
x.lastIndexOf(findstr)  

x.match(regexp)         －－－－match返回匹配字符串的數組，如果沒有匹配則返回null
x.search(regexp)        －－－－search返回匹配字符串的首字符位置索引

                        示例：
                        var str1="welcome to the world of JS!";
                        var str2=str1.match("world");
                        var str3=str1.search("world");
                        alert(str2[0]);  // 結果為"world"
                        alert(str3);     // 結果為15
                        

# 子字符串處理方法

x.substr(start, length)      －－－－start表示開始位置，length表示截取長度
x.substring(start, end)      －－－end是結束位置

x.slice(start, end)             －－－－切片操作字符串
                        示例：
                            var str1="abcdefgh";
                            var str2=str1.slice(2,4);
                            var str3=str1.slice(4);
                            var str4=str1.slice(2,-1);
                            var str5=str1.slice(-3,-1);

                            alert(str2); //結果為"cd"
                            
                            alert(str3); //結果為"efgh"
                            
                            alert(str4); //結果為"cdefg"
                            
                            alert(str5); //結果為"fg"

x.replace(findstr,tostr)    －－－－    字符串替換

x.split();                        －－－－分割字符串
                                 var str1="一,二,三,四,五,六,日"; 
                                var strArray=str1.split(",");
                                alert(strArray[1]);//結果為"二"
                                
x.concat(addstr)             －－－－    拼接字符串

　　2.Array數組對象

//JS 中的數組對象的三種創建方式
var arr = [1,2,3];

var arr2 = new Array(1,2,3);

var arr = Array(3);
arr[0] = ‘liu‘;
arr[1] = ‘li‘;
arr[2] = ‘xin‘;

　　　　- 數組常用操作

# join()
var arr = [1,2,3];
var s = arr.join(‘ - ‘);
console.log(s);    // 1 - 2 - 3


# concat()
var a = [1,2,3];
var b=a.concat(4,5) ;
console.log(a.toString());  //返回結果為1,2,3
console.log(b.toString());  //返回結果為1,2,3,4,5


# reverse()
var arr = [1,9,3];
console.log(arr.reverse())  // 3 9 1 


# sort() 默認按首字符對應的ascii碼排序
var arr = [100,56,23,4];
console.log(arr.sort()); //排序結果：100,23,4,56

// 按照數值排序的解決辦法：
function MySort(m,n){
    if (m>n)
    {
        return 1;
    }
    else if (m<n)
    {
        return -1;
    }
    else
    {
        return 0;
    }
}
var arr2 = [100,56,23,4];
console.log(arr2.sort(MySort));

// 簡單的寫法
// MySort() 可以簡寫成：
function MySort(m,n)
{
    return m-n
}


# slice() 切片
var arr1=[‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘f‘,‘g‘,‘h‘];
var arr2=arr1.slice(2,4);
var arr3=arr1.slice(4);
var arr4=arr1.slice(2,-1);
console.log(arr2);    // c d
console.log(arr3);    // e f g h 
console.log(arr4);    // c d e f g 


# splice()
//x. splice(start, deleteCount, value, ...)

//使用註解

//x代表數組對象
//splice的主要用途是對數組指定位置進行刪除和插入
//start表示開始位置索引
//deleteCount刪除數組元素的個數
//value表示在刪除位置插入的數組元素
//value參數可以省略       
        
var a = [1,2,3,4,5,6,7,8];
a.splice(1,2);
alert(a.toString());//a變為 [1,4,5,6,7,8]
a.splice(1,1);
alert(a.toString());//a變為[1,5,6,7,8]
a.splice(1,0,2,3);
alert(a.toString());//a變為[1,2,3,5,6,7,8] 

# push 和 pop
數組的push和pop  // 在數組的末尾進行插入和移除；後進先出，即 stack棧操作；

var arr1=[1,2,3];
arr1.push(4,5);
alert(arr1);
//結果為"1,2,3,4,5"
arr1.push([6,7]);
alert(arr1)
//結果為"1,2,3,4,5,6,7"
arr1.pop();
alert(arr1);
//結果為"1,2,3,4,5"

# shift 和 unshift
數組的shift和unshift  // 在數組的開頭進行插入和移除；先進先出，即 queue隊列操作；

var arr1=[1,2,3];
arr1.unshift(4,5);
alert(arr1);  //結果為"4,5,1,2,3"
arr1. unshift([6,7]);
alert(arr1);  //結果為"6,7,4,5,1,2,3"
arr1.shift();
alert(arr1);  //結果為"4,5,1,2,3"

　　　　- 數組特性

//  js中數組的特性
         //java中數組的特性,  規定是什麽類型的數組,就只能裝什麽類型.只有一種類型.
         //js中的數組特性1: js中的數組可以裝任意類型,沒有任何限制.
         //js中的數組特性2: js中的數組,長度是隨著下標變化的.用到多長就有多長.
         var arr5 = [‘abc‘,123,1.14,true,null,undefined,new String(‘1213‘),new Function(‘a‘,‘b‘,‘alert(a+b)‘)];
        /*  alert(arr5.length);//8
         arr5[10] = "hahaha";
         alert(arr5.length); //11
         alert(arr5[9]);// undefined */

　　3.Date日期對象

# 不指定參數

var date = new Date();
console.log(date);			// Wed Aug 02 2017 21:50:22 GMT+0800 (中國標準時間)
console.log(date.toDateString()); 	// Wed Aug 02 2017
console.log(date.toTimeString());	// 21:52:21 GMT+0800 (中國標準時間)

console.log(date.toLocaleString());	// 2017/8/2 下午9:50:22
console.log(date.toLocaleDateString());	// 2017/8/2
console.log(date.toLocaleTimeString()); // 下午9:50:22

console.log(date.toISOString());	// 2017-08-02T13:50:22.271Z
console.log(date.toJSON()); 		// 2017-08-02T13:53:51.928Z
console.log(date.toUTCString());	// Wed, 02 Aug 2017 13:52:21 GMT

# 參數為日期字符串

var nowd2=new Date("2004/3/20 11:12");
console.log(nowd2.toLocaleString( ));    // 2004/3/20 上午11:12:00

var nowd3=new Date("08/02/17 11:12");
console.log(nowd3.toLocaleString( ));    // 2017/8/2 上午11:12:00

# 參數為毫秒數

var nowd3=new Date(1000000000000);
console.log(nowd3.toLocaleString( ));        // 2001/9/9 上午9:46:40 
console.log(nowd3.toUTCString());            // Sun, 09 Sep 2001 01:46:40 GMT

# 參數為年月日小時分鐘秒毫秒

var nowd4=new Date(2017,7,2,11,12,1,300);
alert(nowd4.toLocaleString( ));  // 2017/8/2 上午11:12:01

// js中月份是從0到11
// 毫秒並不直接顯示

獲取日期和時間
getDate()                 獲取日
getDay ()                 獲取星期
getMonth ()               獲取月（0-11）
getFullYear ()            獲取完整年份
getYear ()                獲取年
getHours ()               獲取小時
getMinutes ()             獲取分鐘
getSeconds ()             獲取秒
getMilliseconds ()        獲取毫秒
getTime ()                返回累計毫秒數(從1970/1/1午夜)

# 獲取當前日期

function getCurrentDate(){
        //1. 創建Date對象
        var date = new Date(); //沒有填入任何參數那麽就是當前時間
        //2. 獲得當前年份
        var year = date.getFullYear();
        //3. 獲得當前月份 js中月份是從0到11.
        var month = date.getMonth()+1;
        //4. 獲得當前日
        var day = date.getDate();
        //5. 獲得當前小時
        var hour = date.getHours();
        //6. 獲得當前分鐘
        var min = date.getMinutes();
        //7. 獲得當前秒
        var sec = date.getSeconds();
        //8. 獲得當前星期
        var week = date.getDay(); //沒有getWeek
        // 2014年06月18日 15:40:30 星期三
        return year+"年"+changeNum(month)+"月"+day+"日 "+hour+":"+min+":"+sec+" "+parseWeek(week);
    }

alert(getCurrentDate());

//解決 自動補齊成兩位數字的方法
function changeNum(num){
    if(num < 10){
        return "0"+num;
    }else{
        return num;
    }

}
//將數字 0~6 轉換成 星期日到星期六
function parseWeek(week){
    var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    //             0      1      2      3 .............
    return arr[week];
}


輸出結果：2017年08月2日 22:5:45 星期三

　　4.Math對象

abs(x)    返回數的絕對值。
exp(x)    返回 e 的指數。
floor(x)對數進行下舍入。
log(x)    返回數的自然對數（底為e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次冪。
random()    返回 0 ~ 1 之間的隨機數。
round(x)    把數四舍五入為最接近的整數。
sin(x)    返回數的正弦。
sqrt(x)    返回數的平方根。
tan(x)    返回角的正切。

　　5.Function 對象(重點)

　　JS的函數加載執行與python不同，它是整體加載完才會執行，所以執行函數放在函數聲明上面或下面都可以；

foo();
function foo() {
    console.log(‘JS函數的調用不分先後！！！‘);
}

# 形參個數不等於實參個數也不會報錯！！！
function foo(x,y) {
    console.log(arguments);		// [2, 3, 4, 5, 6, 7, 8, 9, 10]
    console.log(typeof arguments);   	// object
    console.log(arguments.length);	// 9
    console.log(x+y)			// 5
}
foo(2,3,4,5,6,7,8,9,10);


# 遍歷 arguments
function add() {
   var sum=0;
   for (var i=0;i<arguments.length;i++){
       sum+=arguments[i]
   }
   return sum
}
var ret=add(1,4,6,4);
alert(ret);	// 15

# 限定函數參數個數
function f(a,b,c){
    if (3 != arguments.length){
        throw new Error("function f called with "+arguments.length+" arguments,but it just need 3 arguments")
    }
    else {
        alert("success!")
    }
}

f(1,2,3,4,5)

# Python中的匿名函數
ret = (lambda x,y:x+y)(3,4)
print(ret)    // 7

# JS 中的匿名函數
(function(arg){
        console.log(arg);
})(‘123‘)    // 123

(function(){
        alert("tony");
})()    // tony

二、BOM

window對象

所有瀏覽器都支持 window 對象。
概念上講.一個html文檔對應一個window對象.
功能上講: 控制瀏覽器窗口的.
使用上講: window對象不需要創建對象,直接使用即可.

　　1.window對象的方法

alert()            顯示帶有一段消息和一個確認按鈕的警告框。
confirm()          顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
prompt()           顯示可提示用戶輸入的對話框。

open()             打開一個新的瀏覽器窗口或查找一個已命名的窗口。
close()            關閉瀏覽器窗口。

setInterval()      按照指定的周期（以毫秒計）來調用函數或計算表達式。
clearInterval()    取消由 setInterval() 設置的 timeout。
setTimeout()       在指定的毫秒數後調用函數或計算表達式。
clearTimeout()     取消由 setTimeout() 方法設置的 timeout。
scrollTo()         把內容滾動到指定的坐標。

　　2.方法實例

# confirm
ret = confirm(‘Are you ok?‘);
if (ret)
{
    console.log(‘123‘);
}
else
{
    console.log(‘999‘);
}

# prompt
ret = prompt(‘Input please:‘,‘這個是默認值‘);
console.log(ret);


# 猜數字小遊戲
var num = Math.round(Math.random()*100);
function acceptInput(){
    //2.讓用戶輸入(prompt)    並接受 用戶輸入結果
    var userNum = prompt("請輸入一個0~100之間的數字!","0");
    //3.將用戶輸入的值與 隨機數進行比較
            if(isNaN(+userNum)){
                //用戶輸入的無效(重復2,3步驟)
                alert("請輸入有效數字!");
                acceptInput();
            }
            else if(userNum > num){
            //大了==> 提示用戶大了,讓用戶重新輸入(重復2,3步驟)
                alert("您輸入的大了!");
                acceptInput();
            }else if(userNum < num){
            //小了==> 提示用戶小了,讓用戶重新輸入(重復2,3步驟)
                alert("您輸入的小了!");
                acceptInput();
            }else{
            //答對了==>提示用戶答對了 , 詢問用戶是否繼續遊戲(confirm).
                var result = confirm("恭喜您!答對了,是否繼續遊戲?");
                if(result){
                    //是 ==> 重復123步驟.
                    num = Math.round(Math.random()*100);
                    acceptInput();
                }else{
                    //否==> 關閉窗口(close方法).
                    close();
                }
            }
}
acceptInput();

setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。
由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。


語法：setInterval(code,millisec)
其中，code為要調用的函數或要執行的代碼串。
millisec周期性執行或調用 code 之間的時間間隔，以毫秒計。

# 實例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function showTime(){
           var nowd2=new Date().toLocaleString();
           var temp=document.getElementById("ID1");
           temp.value=nowd2;
        }
        var ID;
        console.log(ID);
        function begin(){
            if (ID==undefined){
                 showTime();
                 ID=setInterval(showTime,1000);
            }
        }
        function end(){
            clearInterval(ID);
            ID=undefined;
        }
    </script>
</head>
<body>
    <input id="ID1" type="text" onclick="begin()">
    <button onclick="end()">停止</button>
</body>
</html>

三、DOM

　　1.DOM節點

　　　　1.節點關系

    HTML  Document Object Model（文檔對象模型）
    HTML  DOM 定義了訪問和操作HTML文檔的標準方法
    HTML  DOM 把 HTML 文檔呈現為帶有元素、屬性和文本的樹結構（節點樹)

在節點樹中，頂端節點被稱為根（root）

每個節點都有父節點、除了根（它沒有父節點）

一個節點可擁有任意數量的子

同胞是擁有相同父節點的節點

　　　　2.節點查找

　　　　　　- 直接查找

document.getElementById();            // ID是唯一的，能獲取到唯一一個元素;

document.getElementsByClassName();    // 返回文檔中所有指定類名的元素集合，作為 NodeList對象; 可以通過對象的length屬性來確定指定類名的元素個數，並循環各個元素來獲取你需要的那個元素

document.getElementsByName();         // 返回帶有指定名稱的對象的集合, 與 getElementById() 方法相似，但是它查詢元素的 name 屬性，而不是 id 屬性;

document.getElementsByTagName();      // 可返回帶有指定標簽名的對象的集合, 返回元素的順序是它們在文檔中的順序,

# document.getElementById(“idname”)
<html>
<head>
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader")
alert(x.innerHTML)
}
</script>
</head>
<body>

<h1 id="myHeader" onclick="getValue()">這是標題</h1>
<p>點擊標題，會提示出它的值。</p>

</body>
</html>


# document.getElementsByClassName(“name”)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<div class="example">
樣式 class="example" 的 Div 元素
</div>
<div class="example">
另外一個樣式 class="example" 的 Div 元素
</div>
<p class="example">樣式為 class="example" 的 p 元素。</p>
<p>這是一個插入在 p 元素中樣式 class="example" 的<span class="example">span</span> 元素 。</p>
<button class="example" onclick="myFunction()">點我</button>
<script>
function myFunction() {
    var x = document.getElementsByClassName("example");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].style.backgroundColor = "red";
    }
}
</script>

</body>
</html>


# document.getElementsByName(“name”)
<html>
<head>
<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByName("myInput");
  alert(x.length);
  }
</script>
</head>

<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="名為 ‘myInput‘ 的元素有多少個？" />
</body>

</html>


# document.getElementsByTagName(“tagname”)
<html>
<head>
<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByTagName("input");
  alert(x.length);
  }
</script>
</head>
<body>

<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="How many input elements?" />

</body>
</html>

　　　　　　- 導航查找

parentElement           // 父節點標簽元素

children                // 所有子標簽

firstElementChild       // 第一個子標簽元素

lastElementChild        // 最後一個子標簽元素

nextElementtSibling     // 下一個兄弟標簽元素

previousElementSibling  // 上一個兄弟標簽元素

註意：JS中沒有辦法找到所有的兄弟標簽！

# 導航查找示例1
<div class="box1">
    <div class="box2_div">
        <div class="box3_div" id="div3">DIV3</div>
    </div>
    <p class="box2_p">box2_p</p>
    <p class="box3_p">box3_p</p>
    <p class="box4_p">box4_p</p>
    <p class="box5_p">box5_p</p>
</div>

<script>
    var ele=document.getElementById("div3");
    var ele_p=ele.parentElement.nextElementSibling;
    console.log(ele_p);                 // <p class="box2_p">box2_p</p>
    console.log(ele_p.innerHTML);       // box2_p
    console.log(ele_p.innerText);       // box2_p
</script>



# 導航查找示例2
<div class="box1">
    <div class="box2_div">
        <div class="box3_div" id="div3">DIV3</div>
    </div>
    <p class="box2_p">box2_p</p>
    <p class="box3_p">box3_p</p>
    <p class="box4_p">box4_p</p>
    <p class="box5_p">box5_p</p>
</div>
<script>
    var ele=document.getElementById("div3");
    var ele_p=ele.parentElement.parentElement.firstElementChild;
    console.log(ele_p);                    
    console.log(ele_p.innerHTML);         // <div class="box3_div" id="div3">DIV3</div>
    console.log(ele_p.innerText);         // DIV3
</script>



# 導航查找示例3
<div class="box1">
    <div class="box2_div">
        <div class="box3_div" id="div3">DIV3</div>
    </div>

    <p class="box2_p">box2_p</p>
    <p class="box3_p">box3_p</p>
    <p class="box4_p">box4_p</p>
    <p class="box5_p">box5_p</p>
</div>
<script>
    var ele=document.getElementById("div3");
    var ele_p=ele.parentElement.parentElement;
    var eles_son = ele_p.children;
    console.log(eles_son.length);           // 5
</script>

　　3.節點操作

關於DOM對象：
	1.document文檔對象 (*****)
	2.element標簽對象 (*****)
	3.屬性對象 (*)
	4.文本對象 (*)
	5.註釋對象 (*)

Node節點操作
	1.創建節點	createElement
	2.添加節點	appendChild
	3.刪除節點	removeChild
	4.替換節點	replaceChild


// 創建節點：
createElement(標簽名) ：創建一個指定名稱的元素。
例：var  tag=document.createElement(“input")
            tag.setAttribute(‘type‘,‘text‘);

// 添加節點：
追加一個子節點（作為最後的子節點）
somenode.appendChild(newnode)
 
把增加的節點放到某個節點的前邊
somenode.insertBefore(newnode,某個節點);


// 刪除節點：
removeChild()：獲得要刪除的元素，通過父元素調用刪除


// 替換節點：
somenode.replaceChild(newnode, 某個節點);

關於標簽（節點屬性）的操作：

1.操作標簽的文本
	innerHTML  -> 標簽+文本都能取出來（多層的話，會拼接成字符串返回）
	innerText  -> 只會取文本

	重新賦值的時候：
	innerHTML 會渲染
	innerText 不渲染，只是單純的字符串形式，而不會解析


2.操作標簽的屬性
	attribute操作
		element.getAttribute(‘屬性名‘)            --> element.屬性名 (DHTML)
		element.setAttribute(‘屬性名‘,屬性值)      --> element.屬性名 = 屬性值 (DHTML)

		element.removeAttribute(‘屬性名‘)


3、value獲取當前選中的value值
        1.input   
        2.select （selectedIndex）
        3.textarea  


4、innerHTML 給節點添加html代碼：
        該方法不是w3c的標準，但是主流瀏覽器支持    
        tag.innerHTML = “<p>要顯示內容</p>”;


5.關於class的操作(*****)  // 首先給某個 class-name 做好一個 css樣式，通過給某標簽增加/減少該 class-name 從而實現對應css樣式的變更
	element.className
	element.classList
		- element.classList.add
		- element.classList.remove


6.改變CSS樣式
<p id="p2">Hello world!</p>
<script>
    document.getElementById("p2").style.fontSize="50px";
    document.getElementById("p2").style.color="blue";
</script>

# 節點屬性操作示例
# 獲取+設置節點的value
<body>
<div class="c1">
   <a href=‘‘ id="aaa">點擊</a>
</div>
<input type="text" id="t1" value="123">
</body>
<script>
    var ele=document.getElementById("t1");
    console.log(ele.getAttribute("value"));
    var btn = document.getElementById(‘aaa‘);
    btn.onmousedown = function () {
      ele.setAttribute(‘value‘,666);
    };
</script>


# 通過innerHTML的方式給節點設置內部標簽
<body>
<div class="c1">
    <p>123</p>
</div>
<input type="text" id="t1" value="123">
</body>
<script>
    var ele=document.getElementsByClassName("c1")[0];
    console.log(ele.innerHTML);
    console.log(ele.innerText);
//    ele.innerText="<a href=‘‘>點擊</a>";
    ele.innerHTML="<a href=‘‘>點擊</a>";
</script>

　　2.DOM Event事件

　　　　1.事件類型

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素獲得焦點。               練習：輸入框
onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange       域的內容被改變。             應用場景：通常用於表單元素,當元素內容被改變時觸發.（三級聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並松開。
onkeyup        某個鍵盤按鍵被松開。

onload         一張頁面或一幅圖像完成加載。

onmousedown    鼠標按鈕被按下。
onmousemove    鼠標被移動。
onmouseout     鼠標從某元素移開。
onmouseover    鼠標移到某元素之上。
onmouseleave   鼠標從元素離開

onselect       文本被選中。
onsubmit       確認按鈕被點擊。

　　　　2.事件綁定方式

綁定事件的方式：
1.直接寫大標簽裏：<button onclick="end()">end</button>
2.在JS裏先獲取標簽元素，再綁定具體事件：標簽對象.事件=函數

# 方式一

<div id="div" onclick="foo(this)">點我呀</div>

<script>
    function foo(self){           // 形參不能是this;
        console.log("點你大爺!");
        console.log(self);   
    }
</script>


# 方式二

<p id="abc">試一試!</p>

<script>

    var ele=document.getElementById("abc");

    ele.onclick=function(){
        console.log("ok");
        console.log(this);    // this直接用
    };

</script>

# 擴展示例：

<body>
    <div id="d1">DIID</div>
    <div class="item">111</div>
    <div class="item">222</div>
    <div class="item">333</div>
</body>
<script>
    var ele1 =  document.getElementById(‘d1‘);
    ele1.onclick = function () {
        console.log(this);
    };
    var eles = document.getElementsByClassName(‘item‘);
    for (var i=0; i<eles.length; i++)
    {
        eles[i].onclick = function () {
            alert(this.innerHTML);
        };
    }
</script>

　　　　3.事件介紹

...


...


...

四、練習

　　1.新節點的增刪改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .add_node {
            width: 50%;
            height: 300px;
            background-color: wheat;
        }
    </style>
</head>
<body>
    <div class="add_node">
        <p id="p1">hello</p>
    </div>
    <button>add_img</button>
</body>
<script>
    var ele = document.getElementsByTagName(‘button‘)[0];
//    ele.onmouseover = function () {
    ele.onclick = function () {
        //創建一個節點
        var ele_img = document.createElement(‘img‘);// 創建好一個空的 img標簽
        ele_img.src=‘s.png‘;// 初始化這個標簽
        ele_img.height=260;
        //將創建的節點添加到div裏
        var ele_parent = document.getElementsByClassName(‘add_node‘)[0];
//        ele_parent.appendChild(ele_img);            // 在後面插入新節點
        var ele_p = document.getElementById(‘p1‘);
//      ele_parent.removeChild(ele_p);                // 移除已有節點
        ele_parent.insertBefore(ele_img,ele_p);       // 在節點前面插入新節點 
//      ele_parent.replaceChild(ele_img,ele_p);       // 用新節點替換已有節點
</script> 
</html>

　　2.左側菜單欄，點擊顯示子選項，並將其他菜單關閉；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .item {
            margin: 20px;/*上 下 左 右*/
        }
        .left_menu {
            width: 20%;
            height: 500px;
            background-color: wheat;
            float: left;
        }
        .title {
            text-align: center;
            background-color: #53e3a6;
            line-height: 30px;
            color: red;
        }
        .hidden {
            display: none;
        }
        .content_menu {
            width: 80%;
            height: 500px;
            background-color: green;
            float: left;
            
        }
    </style>

</head>
<body>

    <div class="outer">
        <div class="left_menu">

            <div class="item">
                <div class="title">菜單一</div>
                <div class="con">
                    <p>111</p>
                    <p>112</p>
                    <p>113</p>
                </div>
            </div>
            <div class="item">
                <div class="title">菜單二</div>
                <div class="con hidden">
                    <p>211</p>
                    <p>212</p>
                    <p>213</p>
                </div>
            </div>
            <div class="item">
                <div class="title">菜單三</div>
                <div class="con hidden">
                    <p>311</p>
                    <p>312</p>
                    <p>313</p>
                </div>
            </div>


        </div>
        <div class="content_menu"></div>
    </div>


</body>
<script>
    var eles = document.getElementsByClassName(‘title‘);
    for (var i=0; i<eles.length;  i++)
    {
        eles[i].onclick = function () {
            console.log(this);// this -> 代指當前操作的標簽
            this.nextElementSibling.classList.remove(‘hidden‘);

            var item_arr = this.parentElement.parentElement.children;
            var ele_curr_p = this.parentElement;
            for (j=0; j<item_arr.length; j++){
                if (ele_curr_p != item_arr[j]){
                    item_arr[j].children[1].classList.add(‘hidden‘);
                }
            }
        };
    }

</script>
</html>

　　3.給table每一行添加一個checkbox，可單選、全選、反選以及取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>全選</button>
<button>反選</button>
<button>取消</button>
<table border="1">
    <tr>
        <th>   </th>
        <th>姓名</th>
        <th>年齡</th>
        <th>性別</th>
    </tr>
    <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>
</body>
<script>
    var eles = document.getElementsByTagName(‘button‘);
    var ele_checbox = document.getElementsByTagName(‘input‘);
    for (var i=0; i<eles.length; i++)
    {
        eles[i].onclick=function () {
            if (this.innerHTML=="全選")
            {
                for (j=0; j<ele_checbox.length; j++)
                {
                    ele_checbox[j].checked="checked";
//                    ele_checbox[j].checked=true;
                }
            }
            else if (this.innerText=="反選")
            {
                for (j=0; j<ele_checbox.length; j++)
                {
                    if (ele_checbox[j].checked)
                    {
                        ele_checbox[j].checked=false;
                    }
                    else
                    {
                        ele_checbox[j].checked=true;
                    }

                }
            }
            else
            {
                for (j=0; j<ele_checbox.length; j++)
                {
                    ele_checbox[j].checked=false;
                }
            }
        }
    }
</script>
</html>

　　4.模態對話框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back {
            width: 100%;
            height: 1200px;
            background-color: wheat;
        }
        .fade {
            position: fixed;
            top: 0; /*遮罩層占滿屏*/
            bottom: 0;
            left: 0;
            right: 0;
            background-color: darkgrey;
            opacity: 0.5;
        }
        .model {
            width: 400px;
            height: 200px;
            background-color: white;
            border-radius: 4%;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -200px; /* 讓跳出框水平+垂直居中 */
            margin-top: -100px;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
    <div class="back">
        <input type="button" value="show" id="show">
    </div>
    <div class="fade hide">
    </div>
    <div class="model hide">
        IP：<input type="text"><br>
        PORT：<input type="text"><br>
        USER：<input type="text"><br>
        PASS：<input type="text">
        <input type="button" value="Cancel" id="cancel">
    </div>
</body>
<script>
    var ele = document.getElementById(‘show‘);
    ele.onclick=function () {
        var ele_hiddens = document.getElementsByClassName(‘hide‘);
        ele_hiddens[0].classList.remove(‘hide‘);
//        ele_hiddens[1].classList.remove(‘hide‘);/*註意：這個寫 1 就錯了*/
        ele_hiddens[0].classList.remove(‘hide‘);
        /* 推薦按 fade 和 model 去找 */

        var cancel_ele = document.getElementById(‘cancel‘);
        cancel_ele.onclick=function () {
            this.parentElement.classList.add(‘hide‘);
            this.parentElement.previousElementSibling.classList.add(‘hide‘);
        }
    }
</script>
</html>

五、day14課後作業

作業要求

　　實現web頁面上展示主機列表，增加主機、刪除主機、修改主機等基本操作；

代碼實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    .select {
        /*border: 1px solid red;*/
        margin-bottom: 10px;
    }
    .fade {
        position: fixed;
        top: 0; /*遮罩層占滿屏*/
        bottom: 0;
        left: 0;
        right: 0;
        background-color: darkgrey;
        opacity: 0.5;
    }
    .model {
        width: 400px;
        height: 200px;
        background-color: white;
        border-radius: 4%;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -200px; /* 讓跳出框水平+垂直居中 */
        margin-top: -100px;
    }
    #table {
        border: 1px solid blue;
        margin-left: 300px;
    }
    .hide {
        display: none;
    }
    #add {
        width: 100px;
        height: 50px;
        background-color: green;
        border-radius: 10px;
        font-size: 20px;
        color: white;
        margin-left: 500px;
    }
    .item-info {
        margin-top: 20px;
    }
    .item-info label {
        float: left;
        width: 30%;
        margin-left: 50px;
    }
    .item-btn {
        margin-top: 10px;
        margin-left: 100px;
    }
    .item-btn #confirm,#cancel{
        background-color: darkblue;
        border: none;
        color: white;
        text-align: center;
        font-size: 20px;
        border-radius: 4px;
        margin-left: 30px;
    }
</style>

<body>

    <div class="select">
        <button id="add">添加</button>
        <!--<button>全選</button>-->
        <!--<button>反選</button>-->
        <!--<button>取消</button>-->
    </div>

    <div id="table-div">
        <table border="1" id="table">
            <tr>
                <!--<th>   </th>-->
                <th>IP</th>
                <th>端口</th>
                <th>所屬部門</th>
                <th>所屬IDC</th>
                <th>在線狀態</th>
                <th>服務</th>
                <th>操作</th>
            </tr>
            <tr>
                <!--<td><input type="checkbox"></td>-->
                <td>10.0.0.1</td>
                <td>11</td>
                <td>TPP</td>
                <td>beijing_cnc</td>
                <td>在線</td>
                <td>視頻播放</td>
                <td>
                    <button class="update">修改</button>
                    <span>|</span>
                    <button class="delete">刪除</button>
                </td>
            </tr>
            <tr>
                <!--<td><input type="checkbox"></td>-->
                <td>10.0.0.2</td>
                <td>33</td>
                <td>Cloud-calculator</td>
                <td>beijing_ct</td>
                <td>在線</td>
                <td>雲計算</td>
                <td>
                    <button class="update">修改</button>
                    <span>|</span>
                    <button class="delete">刪除</button>
                </td>
            </tr>
            <tr>
                <!--<td><input type="checkbox"></td>-->
                <td>10.0.0.3</td>
                <td>44</td>
                <td>IDD</td>
                <td>shanghai_ct</td>
                <td>在線</td>
                <td>PPP</td>
                <td>
                    <button class="update">修改</button>
                    <span>|</span>
                    <button class="delete">刪除</button>
                </td>
            </tr>
        </table>
    </div>


    <div class="fade hide">
    </div>
    <div class="model hide">
        <div class="item-info">
            <label for="">IP:</label><input class="item item_ip" type="text"><br>
            <label for="">端口:</label><input class="item item_port" type="text"><br>
            <label for="">所屬部門:</label><input class="item item_depart" type="text"><br>
            <label for="">所屬IDC:</label><input class="item item_idc" type="text"><br>
            <label for="">在線狀態:</label><input class="item item_online" type="text"><br>
            <label for="">服務:</label><input class="item item_service" type="text"><br>
        </div>
        <div class="item-btn">
            <input type="button" value="確定" id="confirm">
            <input type="button" value="取消" id="cancel">
        </div>
    </div>
</body>
<script>
    var ele = document.getElementById(‘add‘);
    ele.onclick = function () {
        var fade = document.getElementsByClassName(‘fade‘)[0];
        var model = document.getElementsByClassName(‘model‘)[0];
        fade.classList.remove(‘hide‘);
        model.classList.remove(‘hide‘);

        var item_eles = document.getElementsByClassName(‘item‘);
        for (var x=0; x<item_eles.length; x++)
        {
            item_eles[x].value = ‘‘
        }

        var cancel = document.getElementById(‘cancel‘);
        cancel.onclick = function () {
            this.parentElement.parentElement.classList.add(‘hide‘);
            this.parentElement.parentElement.previousElementSibling.classList.add(‘hide‘);
        };

        var confirm = document.getElementById(‘confirm‘);
        confirm.onclick = function () {
            var eles = document.getElementsByClassName(‘item‘);
            var table = document.getElementById(‘table‘);
            var ele_item = document.createElement(‘tr‘);
//            ele_item.innerHTML = "<td><input type=\"checkbox\"></td>";
            ele_item.innerHTML = "";
            for (var i=0; i<eles.length; i++)
            {
                console.log(eles[i].value);
                ele_item.innerHTML += "<td>"+ eles[i].value +"</td>"
            }
            ele_item.innerHTML += "<td><button>修改</button><span> | </span><button>刪除</button></td>";
            table.appendChild(ele_item);

            this.parentElement.parentElement.classList.add(‘hide‘);
            this.parentElement.parentElement.previousElementSibling.classList.add(‘hide‘);
        }
    };

    var update_btns = document.getElementsByClassName(‘update‘);
    for (var j=0; j<update_btns.length; j++)
    {
        update_btns[j].onclick = function () {
            var fade = document.getElementsByClassName(‘fade‘)[0];
            var model = document.getElementsByClassName(‘model‘)[0];
            fade.classList.remove(‘hide‘);
            model.classList.remove(‘hide‘);

            var cur_items = this.parentElement.parentElement.children;
//            console.log(cur_items[1].innerText);
//            console.log(cur_items[2].innerText);
//            console.log(cur_items[3].innerText);
            var item_eles = document.getElementsByClassName(‘item‘);
            for (var n=0; n< item_eles.length; n++)
            {
                item_eles[n].value = cur_items[n].innerText
            }

            var cancel = document.getElementById(‘cancel‘);
            cancel.onclick = function () {
                this.parentElement.parentElement.classList.add(‘hide‘);
                this.parentElement.parentElement.previousElementSibling.classList.add(‘hide‘);
            };

            var confirm = document.getElementById(‘confirm‘);
            confirm.onclick = function () {
                for (var m=0; m< item_eles.length; m++)
                {
                    cur_items[m].innerText = item_eles[m].value;
                }
                this.parentElement.parentElement.classList.add(‘hide‘);
                this.parentElement.parentElement.previousElementSibling.classList.add(‘hide‘);
            }
        }
    }

    var delete_btns = document.getElementsByClassName(‘delete‘);
    for (var i=0; i<delete_btns.length; i++)
    {
        delete_btns[i].onclick = function () {
            var table = this.parentElement.parentElement.parentElement;
//            var table = document.getElementById(‘table‘); // 這樣獲取得到的table刪除時報錯
            var item_to_del = this.parentElement.parentElement;
            table.removeChild(item_to_del);
        }
    }

</script>
</html>

前端基礎之JavaScript-day14

script 支持 rar 日期和時間動態類型語言第14天 mat switch 整體寫在前面上課第14天，打卡：　　　　唯心不易，堅持！參考：http://www.cnblogs.com/yuanchenqi/articles/6893904.

前端基礎之JavaScript

內置 html網頁網頁解釋它的 style java htm 解釋器一、JavaScript概念 JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶

前端基礎之JavaScript對象

定義 local 表示 ret 整體 fine call array 期望一.簡單介紹　　在JavaScript中除了null和undefined以外其他的數據類型都被定義成了對象，也可以用創建對象的方法定義變量　　以創建對象的方式定義變量　　var aa=Num

前端基礎之JavaScript重點之DOM&BOM

接收 eight 顯示 prev doc 事情 event對象 iou 關閉重點來了 : BOM對象 window對象 : 所有瀏覽器都支持window對象. 概念上講 : 一個html文檔對應一個window對象. 功能上講 : 控制瀏覽器窗口的. 使用上講 : wi

前端系列之JavaScript基礎知識概述

div spa func 大小寫 doc space 留言布爾 java ?微信公眾號：compassblog 歡迎關註，歡迎轉發，互相學習，共同進步！有任何問題，請後臺留言聯系！ 1、什麽是JavaScript （1）、JavaScript是web上一種功能強大的

前端開發之JavaScript基礎篇一

object 行為基礎篇類型轉換設計介紹目的數據類型轉換引入主要內容：　　1、JavaScript介紹　　2、JavaScript的引入方式　　3、javaScript變量和命名規則　　4、五種基本數據類型　　5、運算符　　6、字符串

前端基礎之html

html meta pic working -s 標題欄塊級元素加載客戶端 css樣式 HTML 初識 web服務本質 import socket def main(): sock = socket.socket(socket.AF_I

前端基礎之CSS

strong 解耦技術分享查找 lan span htm src body CSS：對html標簽進行批量渲染的，一般分兩步 1、進行查找標簽 2、操作標簽； 1、查找標簽： 2、操作標簽： css樣式層疊的引入方式： 1、行內引入：只能對單一標簽進行CSS

前端基礎之css復習

play 平鋪 city port 空格 ul li input 現實進行 !/usr/bin/env python# -*- coding: utf-8 -*-#前端基礎之CSS#CSS 語法#CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。‘‘‘

前端基礎（JavaScript）

model final lower closed vbs 字符 var 顯示不同 JavaScript概述 JavaScript的歷史 1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).後將其改名Sc

前端基礎之jQuery

它的是否屬性選擇器 mat fadein form 內部 ops -html 概述 jQuery是目前使用最廣泛的javascript函數庫。據統計，全世界排名前100萬的網站，有46%使用jQuery，遠遠超過其他庫。微軟公司甚至把jQuery作為他們的官方庫。 jQ

進擊的Python【第十六章】：Web前端基礎之jQuery

name cat 隱藏 function wid get val 綁定 des 進擊的Python【第十六章】：Web前端基礎之jQuery 一、什麽是 jQuery ？ jQuery是一個JavaScript函數庫。 jQuery是一個輕量級的"寫的少，做的多"的Java

前端基礎之 html

ctype 取值解析 adding 成對不同 clas dbo eight ---恢復內容開始--- web服務本質 html 定義　　超文本標記語言。是通過標簽語言來標記要顯示的網頁中的各個部分。一套瀏覽器認識的規則。結構　　1.<html><

python學習_day54_前端基礎之js（2）

data 截取定義得到 let 結果是什麽 index 插入　　在JavaScript中除了null和undefined以外其他的數據類型都被定義成了對象，也可以用創建對象的方法定義變量，String、Math、Array、Date、RegExp都是JavaScri

python學習_day52_前端基礎之CSS布局3

兩個表示 sans ucid grand -i 參照物原始的 doctype 一、定位屬性position 1、相對定位relative 　　相對定位是相對於該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有著

python學習_day58_前端基礎之jQuery入門1

基本兼容多瀏覽器 python jquery入門選擇 eight ges span 偶數一、jQuery介紹　　jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。使用戶能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行

Airbnb前端規範之javascript編碼規範

傳遞 ++ ack ice 必須轉換 cat eal 快速 1 引用 1.1 對所有的引用使用 const ，不要使用 var。（這能確保你無法對引用重新賦值，也不會導致出現 bug 或難以理解） // bad var a = 1; var b = 2; /

前端基礎之DOM操作

事件 scrollto 高度 closed con select pan 增刪改簽名前戲到目前為止，我們已經學過了JavaScript的一些簡單的語法。但是這些簡單的語法，並沒有和瀏覽器有任何交互。也就是我們還不能制作一些我們經常看到的網頁的一些交互，我們需要繼續學習

前端基礎之CSS-Day13

r語基於 float 不但 contain 自身 luci 子div cpp 1、CSS 語法 1.1、CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。 selector { property: value;

前端基礎之html-Day12

邊距 localhost 什麽 html標簽位置個數 mage 適合段落 1、web服務本質 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREA

前端基礎之JavaScript-day14

寫在前面

前言

一、ECMAScript

1.ECMA

2.JS的引入方式

3.JS中的變量、常亮和標識符

4.JS的數據類型

5.運算符

6.流程控制

二、JS中的對象

1.string對象

2.Array數組對象

3.Date日期對象

4.Math對象

5.Function 對象(重點)

二、BOM

1.window對象的方法

2.方法實例

三、DOM

1.DOM節點

1.節點關系

2.節點查找

3.節點操作

2.DOM Event事件

1.事件類型

2.事件綁定方式

3.事件介紹

四、練習

1.新節點的增刪改

2.左側菜單欄，點擊顯示子選項，並將其他菜單關閉；

3.給table每一行添加一個checkbox，可單選、全選、反選以及取消

4.模態對話框

五、day14課後作業

作業要求

代碼實現

相關推薦

　　1.ECMA

　　2.JS的引入方式

　　3.JS中的變量、常亮和標識符

　　4.JS的數據類型

　　5.運算符

　　6.流程控制

　　1.string對象

　　2.Array數組對象

　　3.Date日期對象

　　4.Math對象

　　5.Function 對象(重點)

　　1.window對象的方法

　　2.方法實例

　　1.DOM節點

　　　　1.節點關系

　　　　2.節點查找

　　3.節點操作

　　2.DOM Event事件

　　　　1.事件類型

　　　　2.事件綁定方式

　　　　3.事件介紹

　　1.新節點的增刪改

　　2.左側菜單欄，點擊顯示子選項，並將其他菜單關閉；

　　3.給table每一行添加一個checkbox，可單選、全選、反選以及取消

　　4.模態對話框