當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
第五模块·WEB开发基础-第2章JavaScript基础
生活随笔
收集整理的這篇文章主要介紹了
第五模块·WEB开发基础-第2章JavaScript基础
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
第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&；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的引入方式
- 內接式
- 外接式
04-變量的使用
- js中使用var關鍵字來聲明變量；
- js是一門弱類型的語言；
05-基本數據類型（一）
5.1 JavaScript中的基本數據類型
- number
- string
- boolean
- null
- undefied
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> <!--1、js的基本數據類型：numberstringbooleannullundefined --> <script type="text/javascript">// var $ = 100;// console.log($);//numbervar a = 100;console.log(a);console.log(typeof a);//JavaScript可以讓除數為零；var b = 26 / 0;//Infinity,表示無限大！ console.log(typeof b);console.log(b);//stringvar 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);//undefinedvar 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">//1、將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));//2、強制轉換String()或者toString()var str1 = String(n1);console.log(typeof str1);var num = 1234;console.log(num.toString());//3、將string轉換為numbervar strNum2 = '19939';var num2 = Number(strNum2);console.log(typeof num2);console.log(num2);//4、一種特殊情況:NaN,Not a Numbervar 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">/*1、初始化循環變量；2、判斷循環條件；3、更新循環變量；*///舉個例子；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，也可以叫做數組；//1、字面量方式創建數組；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]);//2、使用構造函數進行創建"數組"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">//1、數組的合并方法-concat；var south = ['上海', '杭州', '深圳', '成都'];var north = ['北京', '石家莊', '濟南', '張家口'];var china = south.concat(north);console.log("中國南方的城市如下:", south);console.log("中國北方的城市如下:", north);console.log("南北方的城市群:", china);//2、將數組中的元素以指定的'字符串'連接起來，它會返回一個新的字符串；var birthday = [1993, 9, 11];var birthdate = birthday.join('-');console.log(birthdate);//3、切片；slice(start,end),返回數組中的一段記錄，即切片，但顧頭不顧尾；var arr = ['崔曉昭', '崔曉珊', '崔曉絲', '崔曉磊'];var newArr = arr.slice(1, 14);console.log(newArr);//4、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);//5、反轉數組（reverse）和排序數組（sort）；var names = ['cxz', 'cxs', 'cxl'];console.log(names);names.reverse();console.log(names);names.sort();console.log(names);//6、isArray判斷是不是數組；var citys = 19930911;iscitys = Array.isArray(citys);if (iscitys) {console.log('他是一個數組');} else {console.log('他不是一個數組');}//7、遍歷數組；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>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&；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-個人經歷分享
?
轉載于:https://www.cnblogs.com/tqtl911/p/9991106.html
總結
以上是生活随笔為你收集整理的第五模块·WEB开发基础-第2章JavaScript基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ch=cin.get()和cin.get
- 下一篇： SQL语句中LEFT JOIN、JOIN