【前端】第五模塊·WEB開發基礎-第2章JavaScript基礎

時間 2019-11-11

標籤前端第五模塊 web 開發基礎 javascript 欄目 HTML 简体版

原文原文鏈接

第1章 JavaScript基礎

01-JavaScript歷史介紹

02-JavaScript的組成

03-JavaScript的引入方式

04-變量的使用

05-基本數據類型（一）

06-基本數據類型（二）

07-JavaScript比較運算符的特殊狀況

08-數據類型轉換

09-流程控制（一）

10-流程控制（二）

11-while循環

12-for循環

13-雙重for循環

14-數組的建立

15-數組的經常使用方法

16-字符串的經常使用方法

17-Math內置對象

18-函數的使用

19-JavaScript的面向對象

20-arguments的使用

21-Date的使用

22-JSON的用法

23-正則表達式建立

24-元字符和正則表達式練習題案例

25-DOM的介紹

26-DOM是作什麼的

27-DOM對象的獲取

28-事件的介紹和綁定事件

29-節點的樣式屬性操做

30-節點樣式屬性顏色切換

31-節點對象值的操做

32-節點屬性的操做

33-顯示隱藏的兩種方式

34-DOM節點的操做

35-DOM節點的補充

36-模態框案例

37-模態框案例bug解決

38-模擬hover選擇器效果

39-tab欄選項卡

40-ES6的let解決tab欄選項卡

41-client系列

42-屏幕的可視寬高

43-offset系列

44-scroll系列

45-定時器的相關使用

46-BOM的介紹和open&amp；close

47-location本地信息對象

48-history對象的使用

第3章 JQuery開發和Bootstrap

01-jQuery的介紹

02-如何使用jquery

03-jQuery的入口函數

04-jQuery對象和JS對象的相互轉換

05-jQuery如何操做DOM

06-層級選擇器

07-基本過濾選擇器

08-屬性選擇器

09-過濾選擇器方法

10-siblings選擇器方法的基本使用

11-jquery操做選項卡深刻

12-index（）索引的獲取

13-基本的動畫

14-捲簾門動畫效果

15-淡入淡出和自定義動畫

16-二級菜單動畫的使用

17-jQuery的標籤屬性操做

18-jQuery對DOM對象屬性操做

19-jQuery對類樣式的操做

20-jQuery對值的操做

21-父子之間插入操做一

22-父子之間插入操做二

23-兄弟之間插入操做

24-替換操做

25-刪除和清空操做

26-操做input的value值

27-jQuery的位置信息

28-JS的事件流

29-事件冒泡的處理

30-抽屜評論簡易佈局

31-抽屜評論收起操做實現

32-抽屜評論收起操做實現

33-事件對象

34-jQuery的單雙擊事件

35-jQuery的移入和移出事件

36-jQuery的表單事件

37-jQuery的聚焦、失焦和鍵盤事件

38-事件委託

39-BS端那點事

40-什麼是Ajax

41-MVC思想和jQuery的ajax_GET請求

42-jQuery的POST請求

43-POST請求Bug修復

44-和風天氣API接口文檔介紹

45-jQuery插件庫介紹

46-jQuery總結和做業分析（必看）

47-響應式介紹

48-@media媒體查詢

49-Bootstrap介紹

50-Bootstrap的下載和基本使用

51-Bootstrap的佈局容器

52-Bootstrap的格柵系統

53-Bootstrap柵格的實現原理

54-Boostrap的列偏移

55-Boostrap的排版

56-Boostrap的表格

57-Boostrap的表單

58-全局CSS樣式

59-導航條

60-面板和下拉菜單

61-按鈕組和按鈕式的下拉菜單

62-分頁、路徑導航、徽章

63-警告框和進度條

64-Boostrap的插件

65-我的經歷分享

第1章 JavaScript基礎

01-JavaScript的歷史介紹

02-JavaScript的組成

ECMAScript5.0
BOM
DOM

03-JavaScript的引入方式

內接式
外接式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<style type="text/css"></style>-->
    <link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<!--一、外接式-->
<!--<script type="text/javascript" src="./js/index.js"></script>-->
<!--二、內接式-->
<!--
一、建議在body以後書寫js代碼
二、注意代碼結尾的分號
-->
<script type="text/javascript">
    alert('cuixiaozhao');
    console.log('崔曉昭');

</script>
</body>
</html>

04-變量的使用

js中使用var關鍵字來聲明變量；
js是一門弱類型的語言；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script type="text/javascript">
    //js中的變量聲明方式，使用var關鍵字，js是一個弱類型的語言；
    //一、變量的聲明和定義
    var a = 100;
    alert(a);

    //二、先聲明變量，將來定義；
    var b;
    b = '200';
    console.log(a);
    console.log(b);

    //c未定義，就使用,undefined;
    console.log(c);

</script>
</body>
</html>

05-基本數據類型（一）

5.1 JavaScript中的基本數據類型

number
string
boolean
null
undefied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--

一、js的基本數據類型：
    number
    string
    boolean
    null
    undefined
-->
<script type="text/javascript">
    // var $ = 100;
    // console.log($);
    var a = 100;
    console.log(a);
    console.log(typeof a);

    var b = 26 / 0;//Infinity,表示無限大！
    console.log(typeof b);
    console.log(b);

    var c = '崔曉昭';
    console.log(c);
    console.log(typeof c);


    var d = "";
    console.log(d);
    console.log(typeof d);


    //JavaScript中的+多是連字符也多是加法符號，表示運算；
    console.log('cui' + 'xiaozhao');
    console.log(1 + 2 + 3);

    var e = 11 + '';
    console.log(e);
    console.log("E的數據類型爲:", typeof e);


</script>
</body>
</html>

06-基本數據類型（二）

6.1 JavaScript中的數據類型彙總說明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--

一、js的基本數據類型：
    number
    string
    boolean
    null
    undefined
-->
<script type="text/javascript">
    // var $ = 100;
    // console.log($);

    //number
    var a = 100;
    console.log(a);
    console.log(typeof a);
    //JavaScript可讓除數爲零；
    var b = 26 / 0;//Infinity,表示無限大！
    console.log(typeof b);
    console.log(b);

    //string
    var c = '崔曉昭';
    console.log(c);
    console.log(typeof c);

    //空字符串
    var d = "";
    console.log(d);
    console.log(typeof d);

    //字符串的拼接
    //JavaScript中的+多是連字符也多是加法符號，表示運算；
    console.log('cui' + 'xiaozhao');
    console.log(1 + 2 + 3);

    var e = 11 + '';
    console.log(e);
    console.log("E的數據類型爲:", typeof e);

    //boolean類型
    // var isShow = false;
    // var isShow = true;
    var isShow = 1 == 1;
    console.log(typeof isShow);//boolean

    //null值
    var f = null;
    console.log(typeof f);

    //undefined
    var g;
    console.log(g);
    console.log(typeof g);


    //複雜的（引用）數據類型：
    //  Function def
    //  Object dict
    //  Array list
    //  String string
    //  Date time模塊

</script>
</body>
</html>

07-JavaScript比較運算符的特殊狀況

7.1 JavaScript中的運算符和Python中的運算符基本是同樣同樣的！

7.2 兩個等於號和三個等於號的區別；

7.3 ++a和a++的區別；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script type="text/javascript">


    var x = 5;
    var y = '5';
    console.log("2個等於號:", x == y);//比較的是值的相同；
    console.log("3個等於號:", x === y);//比較的是值和類型的相同，即內存地址；

</script>
</body>
</html>

08-數據類型轉換

8.1 string與number的相互轉換；

8.2 parseInt和parseFloat的使用；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script type="text/javascript">
    //一、將number類型轉換爲string類型
    var n1 = 123;
    var n2 = '123';
    console.log(typeof n1);
    console.log(typeof n2);
    console.log(n1 + n2);
    console.log("n1+n2:", typeof (n1 + n2));
    //二、強制轉換String()或者toString()
    var str1 = String(n1);
    console.log(typeof str1);

    var num = 1234;
    console.log(num.toString());

    //三、將string轉換爲number
    var strNum2 = '19939';
    var num2 = Number(strNum2);
    console.log(typeof num2);
    console.log(num2);

    //四、一種特殊狀況:NaN,Not a Number
    var strNum1 = '19930911.0911cxz';
    var num1 = Number(strNum1);
    console.log(typeof num1);
    console.log(num1);//NaN:Not a number

    //parseInt(),parseFloat(),解析字符串，返回整數和小數；
    console.log(parseInt(strNum1));//19930911
    console.log(parseFloat(strNum1));//19930911.0911

</script>
</body>
</html>

09-流程控制（一）

9.1 js中的流程控制語句以及邏輯「與」和邏輯「或」；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS中的流程控制</title>
</head>
<body>
<script type="text/javascript">
    //if;
    //if else if else;
    let age = 16;
    if (age == 18) {
        //{}做爲當前的做用域；
        console.log('能夠去會所了！');
    } else if (age == 26) {
        console.log('該娶媳婦啦！')
    } else {
        console.log('隨便你啦！');
    }

    //js中的"邏輯與"與"邏輯或"
    let math = 91;
    let english = 85;

    if (math == 90 && english > 90) {
        console.log('小朋友，此次考試成績還不錯哦!')
    } else if (math < 90 || english > 90) {
        console.log('有一門課程考的還能夠吧！')
    } else {
        console.log('好好加油！')
    }


    //做用域以外繼續打印內容；
    console.log('做用域外的代碼照樣執行,和Python同樣！');
    alert('出現一個彈窗吧！')
</script>
</body>
</html>

10-流程控制（二）

10.1 switch語句的使用以及「case」穿透；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07-js中的switch語句</title>
</head>
<body>
<script type="text/javascript">
    var gameScore = 'good911';
    if (gameScore == 'good') {
        console.log('小朋友，你真好！')

    } else if (gameScore == 'better') {
        console.log('小朋友，你更好啦！')
    } else if (gameScore == 'best') {
        console.log('小朋友，你最好啦！')
    } else {
        console.log('小朋友，不知道如何誇讚你啦！')
    }
    //js中switch的用法學習；
    switch (gameScore) {
        case 'good':
            console.log('玩很很好呀！');
            //swith語句，case是一個條件，只要遇到break跳出流程控制，若是break不寫，程序會進入下一個break;
            //官方名稱"case穿透"！
            break;
        case 'better':
            console.log('玩很geng好呀！');
            break;
        case 'best':
            console.log('玩很最好啦！');
            break;
        default:
            console.log('玩的不知所措了,下一次必定會吃雞的...');
            break;
    }
</script>
</body>
</html>

11-while循環

11.1 JS中的while循環初識；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS中的while循環</title>
</head>
<body>

<script type="text/javascript">
    /*
    一、初始化循環變量；
    二、判斷循環條件；
    三、更新循環變量；
    */
    //舉個例子；
    var i = 1;
    while (i <= 10) {
        if (i % 2 == 0) {
            console.log(i);
        }
        //i = i + 1;
        i += 1;
    }
    console.log('將0~100之間的偶數打印出來:');
    var n = 0;
    while (n <= 100) {
        console.log(n);
        n += 2;
    }
    //do~while的用法；
    console.log('do~while的用法！');
    var m = 1;
    do {
        console.log(m);
        m += 1;
    } while (m <= 11);

</script>
</body>
</html>

do~while的特色：無論條件如何，上來以後先循環一次，使用場景很少！

12-for循環

12.1 JS中的for循環以及小練習；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS中的for循環</title>
</head>
<body>
<script type="text/javascript">
    //需求：打印1~100之間的數字；
    for (var i = 1; i <= 100; i++) {
        console.log(i)
    }
    //使用js輸入1~100之間的整數之和；
    console.log('使用js輸入1~100之間的整數之和；');
    var sum = 0;
    for (var j = 1; j <= 100; j++) {
        sum += j;
    }
    console.log(sum);
    //新需求：使用js中的for循環，輸入1~100之間2的倍數；

    console.log('新需求：使用js中的for循環，輸入1~100之間2的倍數');
    for (var m = 1; m <= 100; m++) {
        if (m % 2 == 0) {
            console.log(m);
        }
    }
</script>
</body>
</html>

13-雙重for循環

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS中的雙重for循環</title>
</head>
<body>
<script type="text/javascript">
    // 學習前的補充內容：
    document.write('cxz19930911');
    document.write('<h1>崔曉昭</h1>');
    document.write('<br/>');
    //使用for循環進行循環寫入；
    for (var i = 1; i <= 10; i++) {
        console.log(i);
        document.write('我愛你，中國！')
    }
    //需求01：使用js代碼打印"直角三角形"；
    console.log('需求01：使用js代碼打印"直角三角形"；');
    for (i = 1; i <= 6; i++) {
        for (var j = 1; j <= i; j++) {
            document.write('*');
        }
        document.write('<br>');
    }
</script>
</body>
</html>

14-數組的建立

14.1 JS中的數組Array的建立；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11-JS中的數組Arra</title>
</head>
<body>
<script type="text/javascript">
    //JS中的數組Array，也能夠叫作數組；
    //一、字面量方式建立數組；
    var colors = ['red', 'blue', 'green'];
    console.log(colors);
    console.log(window.colors);//其中，window能夠省略不寫；
    console.log(colors[0]);
    console.log(colors[1]);
    console.log(colors[2]);
    console.log(colors[-1]);
    console.log(colors[5]);
    //二、使用構造函數進行建立"數組"
    var types = new Array();
    console.log(types);
    console.log(typeof types);
    types[0] = 'S';
    types[1] = 'M';
    types[2] = 'L';
    types[3] = 'XL';
    types[4] = 'XXL';
    types[5] = 'XXXL';
    console.log(types);
    for (var i = 0; i <= types.length; i++) {
        console.log(types[i-1]);
    }
</script>
</body>
</html>

15-數組的經常使用方法

15.1 數組的常見方法；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12-JS中的數據的常見方法</title>
</head>
<body>
<script type="text/javascript">
    //一、數組的合併方法-concat；
    var south = ['上海', '杭州', '深圳', '成都'];
    var north = ['北京', '石家莊', '濟南', '張家口'];
    var china = south.concat(north);
    console.log("中國南方的城市以下:", south);
    console.log("中國北方的城市以下:", north);
    console.log("南北方的城市羣:", china);
    //二、將數組中的元素以指定的'字符串'鏈接起來，它會返回一個新的字符串；
    var birthday = [1993, 9, 11];
    var birthdate = birthday.join('-');
    console.log(birthdate);
    //三、切片；slice(start,end),返回數組中的一段記錄，即切片，但顧頭不顧尾；
    var arr = ['崔曉昭', '崔曉珊', '崔曉絲', '崔曉磊'];
    var newArr = arr.slice(1, 14);
    console.log(newArr);
    //四、push和pop方法；
    var nums = [12, 3, 4, 5, 6, 6, 9];
    console.log(nums);
    nums.pop();
    console.log(nums);
    nums.push(19930911);
    console.log(nums);
    //五、反轉數組（reverse）和排序數組（sort）；
    var names = ['cxz', 'cxs', 'cxl'];
    console.log(names);
    names.reverse();
    console.log(names);
    names.sort();
    console.log(names);
    //六、isArray判斷是否是數組；
    var citys = 19930911;
    iscitys = Array.isArray(citys);
    if (iscitys) {
        console.log('他是一個數組');
    } else {
        console.log('他不是一個數組');
    }
    //七、遍歷數組；forEach是一個回調函數，經過forEach來遍歷數組中的每一項內容；
    //item爲對象值，index爲索引值；
    //注意Python中的列表方法和JavaScript中的不同，沒有就是沒有了；
    names2 = ['cxz', 'cxs', 'cxl'];
    names.forEach(function (item, index) {
        console.log(index + 1);
        console.log(item);

    })
</script>
</body>
</html>