js引入

昨日內容回顧

邊框

 1  border-style:solid;
 2  border-width:1px;
 3  border-color:red;
 4  簡寫:
 5  border:1px dotted red;
 6  ​
 7  單獨
 8  border-top-style:solid;
 9  簡寫
10  border-top:1px dotted red;
11  ​
12  邊框圓角
13  border-radius:50%

 

display

1  display的值:
2  none:隱藏標籤,不佔空間 ---  visibility:hidden;隱藏標籤,佔用空間
3  inline:將標籤作成內斂樣式
4  block:將標籤作成塊級樣式
5  inline-block:同時具有兩種標籤的一些特色,可以設置高度寬度,而且不獨佔一行
6  ​

 

 

盒子模型

1  content 內容  
2  padding 內邊距  內容與邊框之間的距離  padding:10px 20px;上下 左右  padding:1px 20px 30px 40px;上右下左
3  border 邊框
4  margin 外邊距 與其餘標籤之間的距離

 

float浮動

 1  佈局用的,設置了浮動的標籤會脫離正常文檔流,會形成父級標籤塌陷的問題
 2  float:left;
 3  float:right;
 4  ​
 5  解決塌陷:
 6      1.父級標籤設置行高
 7      2.僞元素選擇器清除浮動
 8          .clearfix:after{
 9              content:'';
10              display:block;
11              clear:both;
12          }
13          父級標籤class='clearfix'
14  ​

 

overflow溢出

1  overflow:auto; 出現滾動條
2  overflow:hidden; 隱藏內容

 

position定位

1  position:static.  默認就是它
2  position:relative;相對定位,保留原來位置的空間,相對本身原來的位置移動
3  position:absolute;絕對定位,不保留原來位置的空間,按照父級標籤或者祖先標籤中有設置了position爲相對定位的標籤,若是有,按照他的位置移動,若是沒有按照body移動
4  position:fixed; 固定定位.根據瀏覽器窗口位置來定位

 

z-index控制層級

1  z-index的值誰大誰在上面

 

透明度opacity

1  opacity標籤透明度
2  rgba(255,0,0,0.3) 單獨設置的某個屬性的透明度

 

錨點

1  設置
2      <a name='top'>頂部<a/>
3      <div id='top'>頂部</div>
4  觸發點:
5      <a href='#top'></a>

 

 

今日內容

js引入

1  方式1:
2      <script>
3          // js代碼
4          alert('澳門皇家賭場上線啦!!!')
5      </script>
6  方式2:外部文件引入 xx.js文件
7      <script src="js文件路徑"></script>
8  

 

註釋

1  // 這是單行註釋
2  ​
3  /*
4  這是
5  多行註釋
6  */

 

結束符

1 結束符 JavaScript中的語句要以分號（;）爲結束符。也就是說和縮進不要緊了

 

聲明變量var

1 var a = 10;
2 聲明變量時能夠先不賦值
3 var a;此時a的值爲undefined  

 

js動態類型語言

 

基礎數據類型

數值類型 Number

 1 var a = 10;
 2 undefined
 3 typeof a;
 4 "number"
 5 var b = 1.11;
 6 undefined
 7 typeof b;
 8 "number"
 9 查看數據類型用 typeof a;
10 
11 var c = 123e5;  // 12300000
12 var d = 123e-5;  // 0.00123

 

 

字符類型 String

1 var a = 'alexdsb'
2     a
3         "alexdsb"
4     typeof a;
5         "string"
6 var a = "Hello"
7 var b = "world;
8 var c = a + b;   //字符串拼接
9 console.log(c);  // 獲得Helloworld

 

類型轉換

 1 parseInt("123")  // 返回123
 2 parseInt("ABC")  // 返回NaN,NaN屬性是表明非數字值的特殊值。該屬性用於指示某個值不是數字。
 3 parseFloat("123.456")  // 返回123.456
 4 
 5 示例:
 6 var a = 'a123';
 7 var b = parseInt(a);
 8 
 9     b
10         NaN
11     typeof b;
12         "number"
13         
14 var b = '1.11';
15 parseFloat(b)
16         1.11   

 

 

字符串經常使用方法

 1 1  .length屬性,查看字符串長度
 2 示例
 3     var a = 'hello';
 4     a.length; // 5
 5 2  .trim() 移除空白
 6 示例
 7     var a = '  hello  ';
 8     a.trim(); //"hello"
 9 3  .trimLeft()  .trimRight()
10 4  .charAt(n) 返回索引爲n的那個字符
11 5  .concat()  字符串拼接
12     示例
13         var a = 'hello';
14         var b = 'world';
15         a.concat(b)  //"helloworld"
16 6  .indexOf()  經過元素找索引
17     示例
18         a
19             "hello"
20         a.indexOf('e')
21         
22         start參數,索引發始位置
23         a.indexOf('l',3)
24         
25         找不到返回-1
26             a.indexOf('e',3)  -1
27 7  .slice() 切片
28     var a = 'hello';
29     a.slice(2,4)  顧頭不鈷錠
30 8   .toLowerCase() #所有變小寫     
31     .toUpperCase()  #所有變大寫
32     示例:
33         var b = 'HH';
34         b.toLowerCase();
35         
36 9  .split 字符串分隔,第二個參數是返回多少個數據
37     示例
38     var a = "hello"
39     a.split('e') //(2) ["h", "llo"]
40     a.split('e',1) //["h"]      
41     

 

布爾值

1 var a = true;
2 var b = false;
3 
4 ""(空字符串)、0、null、undefined、NaN都是false。

 

null和undefined

1 　null和undefined
2     null表示值是空，通常在須要指定或清空一個變量時纔會使用，如 name=null;
3     undefined表示當聲明一個變量但未初始化時，該變量的默認值是undefined。還有就是函數無明確的返回值時，    返回的也是undefined。
4 　　　　null表示變量的值是空，undefined則表示只聲明瞭變量，但尚未賦值。
5  

 

對象類型 object

1 JavaScript 中的全部事物都是對象：字符串、數值、數組、函數...此外，JavaScript 容許自定義對象。
2 好比聲明一個字符串對象
3     var a = new String('bb')

 

複雜數據類型或者引用數據類型

數組 Array

1 建立數組:
2 var a = [11,22,33];
3 var b = new Array([22,33])
4 typeof a;  //object類型

 

數組經常使用方法和屬性

 1 1 索引取值
 2     var a = [123, "ABC"]; 
 3     console.log(a[1]);  // 輸出"ABC"
 4 
 5 2 .length  a.length //2
 6 
 7 3. .push() 尾部追加  .pop()尾部刪除
 8     示例
 9         var a = [11,22,33]
10         a.push('123'); //[11, 22, 33, "123"]
11         a.pop();  //"123"
12         a  --  [11, 22, 33]
13 4 .unshift(ele)頭部追加  .shift()頭部刪除
14     var a = [11,22,33]
15 
16     a  //(3) [11, 22, 33]
17         a.unshift('aa');
18     a
19         (4) ["aa", 11, 22, 33]
20     a.shift();
21         "aa"
22     a
23         (3) [11, 22, 33]
24 
25 5  .sort排序
26     var a = [11,4,84,73];
27 
28     a.sort()
29         (4) [11, 4, 73, 84]
30     function sortNumber(a,b){
31         return a - b;
32     }
33 
34     a.sort(sortNumber)
35         (4) [4, 11, 73, 84]
36     function sortNumber(a,b){
37         return b - a
38     }
39     a.sort(sortNumber)
40         (4) [84, 73, 11, 4]
41         
42     解釋:
43         若是想按照其餘標準進行排序，就須要提供比較函數，也就是本身提供一個函數提供排序規則，該函數要比較兩個值，而後返回一個用於說明這兩個值的相對順序的數字。比較函數應該具備兩個參數 a 和 b，其返回值以下：
44 
45 　　　　　　若 a 小於 b，在排序後的數組中 a 應該出如今 b 以前，則返回一個小於 0 的值。
46 　　　　　　若 a 等於 b，則返回 0。
47 　　　　　　若 a 大於 b，則返回一個大於 0 的值。
48 
49 6  .splice() 刪除元素   var a = [84, 73, 11, 4];  a.splice(1,2,'aa','bb','cc');

 

自定義對象 {}

1 var a = {"name": "Alex", "age": 18};
2 var d = {'name':'chao',age:18}; 鍵能夠不加引號
3 console.log(a.name);
4 console.log(a["age"]);
5 for循環遍歷自定義對象
6 var a = {"name": "Alex", "age": 18};
7 for (var i in a){
8   console.log(i, a[i]);
9 }

 

 

運算符

算數運算符

1 + - * / % ++ --  i++,是i自加1，i--是i自減1   i++的這個加1操做優先級低，先執行邏輯，而後再自加1，而++i，這個加1操做優先級高，先自加1，而後再執行代碼後面的邏輯

 

比較運算符

1 > >= < <= != == === !==   ==是弱等於(不比較數據類型)    ===強等於 強等於會比較數據類型

 

邏輯運算符

1 && || !  #and，or，非（取反）!null返回true

 

賦值運算符

1 = += -= *= /=  #n += 1其實就是n = n + 1

 

流程控制

if -else if -else

1 var a = 10;
2 if (a > 5){   
3   console.log("a > 5");
4 }else if (a < 5) {
5   console.log("a < 5");
6 }else {
7   console.log("a = 5");
8 }

 

switch 切換

 1 var a = 10;
 2 undefined
 3 switch (a){    //switch (a++){}
 4     case 9:
 5         console.log('999');
 6     break;
 7     case 10:
 8         console.log('101010');
 9     break;
10     case 11:
11         console.log('111111');
12     break;
13 }
14 
15 加上default示例:
16 
17     var a = 20;
18 
19     switch (a){
20         case 9:
21             console.log('999');
22         break;
23         case 10:
24             console.log('101010');
25         break;
26         case 11:
27             console.log('111111');
28         break;
29         default :  //上面的條件都不成立的時候,走default
30             console.log('啥也不對!!')
31 
32     }

 

 

問題

 1 var a = 10;
 2 
 3     switch (a){
 4         case 9:
 5             console.log('999');
 6         break;
 7         case 10:
 8             console.log('101010');
 9         // break;
10         case 11:
11             console.log('111111');
12         break;
13         default :
14             console.log('啥也不對!!')
15 
16     }

 

 

for循環

 1 for (var i=0;i<10;i++) {  
 2   console.log(i);
 3 }
 4 
 5 循環數組：
 6 var l2 = ['aa','bb','dd','cc']
 7 方式1
 8 for (var i in l2){
 9    console.log(i,l2[i]);
10 }
11 方式2
12 for (var i=0;i<l2.length;i++){
13 　　console.log(i,l2[i])
14 }
15 
16 循環自定義對象：
17 var d = {aa:'xxx',bb:'ss',name:'小明'};
18 for (var i in d){
19     console.log(i,d[i],d.i)  #注意循環自定義對象的時候，打印鍵對應的值，只能是對象[鍵]來取值，不能使用對象.鍵來取值。
20 }

 

while循環

1 var i = 0;
2 while (i < 10) {
3   console.log(i);
4   i++;
5 }

 

三元運算符

1 var a = 1;
2 var b = 2;
3 var c = a > b ? a : b //若是a>b這個條件成立，就把冒號前面的值給c，不然把冒號後面的值給c   //python中的：a = x if x>y else y
4  

 

函數

 1 // 普通函數定義
 2 function f1() {
 3   console.log("Hello world!");
 4 }
 5 
 6 // 帶參數的函數
 7 function f2(a, b) {
 8   console.log(arguments);  // 內置的arguments對象
 9   console.log(arguments.length);
10   console.log(a, b);
11 }
12 
13 // 帶返回值的函數
14 function sum(a, b){
15   return a + b;  //在js中，若是你想返回多個值是不行的，好比return a ，b；只能給你返回最後一個值，若是就想返回多個值，你能夠用數組包裹起來 return [a,b]；
16 }
17 sum(1, 2);  // 調用函數  sum(1,2,3,4,5)參數給多了，也不會報錯，仍是執行前兩個參數的和，sum(1)，少參數或者沒參數也不報錯，不過返回值就會是NAN
18 
19 // 匿名函數方式，多和其餘函數配合使用，後面咱們就會用到了
20 var sum = function(a, b){  //在es6中，使用var，可能會飄黃，是由於在es6中，建議你使用let來定義變量，不過不影響你使用
21   return a + b;  
22 }
23 sum(1, 2);
24 
25 // 當即執行函數，頁面加載到這裏，這個函數就直接執行了，不須要被調用執行
26 (function(a, b){
27   return a + b;
28 })(1, 2);  //python中寫能夠這麼寫：ret=(lambda x,y:x+y)(10,20) 而後print(ret)
29  

 

函數的全局變量和局部變量

 1 局部變量：
 2 
 3 　　　　　　在JavaScript函數內部聲明的變量（使用 var）是局部變量，因此只能在函數內部訪問它（該變量的做用域是函數內部）。只要函數運行完畢，本地變量就會被刪除。
 4 
 5 　　　　全局變量：
 6 
 7 　　　　　　在函數外聲明的變量是全局變量，網頁上的全部腳本和函數都能訪問它。
 8 
 9 　　　　變量生存週期：
10 
11 　　　　　　JavaScript變量的生命期從它們被聲明的時間開始。
12 
13 　　　　　　局部變量會在函數運行之後被刪除。
14 
15 　　　　　　全局變量會在頁面關閉後被刪除。

 

做用域

1 首先在函數內部查找變量，找不到則到外層函數查找，逐步找到最外層。

 

閉包

 1 var city = "BeiJing";
 2 function f(){
 3     var city = "ShangHai";
 4     function inner(){
 5         console.log(city);
 6     }
 7     return inner;
 8 }
 9 var ret = f();
10  

 

面向對象

es5封裝方式

 1 function Person(name){
 2     this.name = name;
 3 }
 4 var p = new Person('taibai');
 5 p.name
 6 
 7 "taibai"
 8 Person.prototype.sum = function(a,b){return a+b;}
 9 ƒ (a,b){return a+b;}
10 
11 p.sum(2,3);

 

 

Date對象

 1 var d1 = new Date(); //獲取當前時間
 2 console.log(d1.toLocaleString());  //當前時間日期的字符串表示
 3 //方法2：參數爲日期字符串
 4 var d2 = new Date("2004/3/20 11:12");
 5 console.log(d2.toLocaleString());
 6 var d3 = new Date("04/03/20 11:12");  #月/日/年(能夠寫成04/03/2020)
 7 console.log(d3.toLocaleString());
 8 //方法3：參數爲毫秒數，瞭解一下就行
 9 var d3 = new Date(5000);  
10 console.log(d3.toLocaleString());
11 console.log(d3.toUTCString());  
12  
13 //方法4：參數爲年月日小時分鐘秒毫秒
14 var d4 = new Date(2004,2,20,11,12,0,300);
15 console.log(d4.toLocaleString());  //毫秒並不直接顯示

 

date對象的其餘方法

 1 var d = new Date(); 
 2 //getDate()                 獲取日
 3 //getDay ()                 獲取星期 ，數字表示（0-6），週日數字是0
 4 //getMonth ()               獲取月（0-11,0表示1月,依次類推）
 5 //getFullYear ()            獲取完全年份
 6 //getHours ()               獲取小時
 7 //getMinutes ()             獲取分鐘
 8 //getSeconds ()             獲取秒
 9 //getMilliseconds ()        獲取毫秒
10 //getTime ()                返回累計毫秒數(從1970/1/1午夜),時間戳

 

json

1 var str1 = '{"name": "chao", "age": 18}';
2 var obj1 = {"name": "chao", "age": 18};
3 // JSON字符串轉換成對象  反序列化
4 var obj = JSON.parse(str1); 
5 // 對象轉換成JSON字符串  序列化
6 var str = JSON.stringify(obj1);

 

 

RegExp正則對象

 1 建立正則對象的方法
 2     var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
 3 簡寫方式:
 4     var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
 5 
 6 test方法.測試某個字符串是否符合正則規則
 7     var s = 'hello'
 8     reg1.test(s)  符合返回True,不符合返回false
 9     
10     一個坑:
11         reg1.test() 裏面什麼也不寫,會默認放一個"undefined"字符串
12         reg1.test("undefined") 

 

 

其餘正則方法

 1 var s2 = "hello world";
 2 
 3 s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正則 的內容 ，/o/g後面這個g的意思是匹配全部的o,
 4 s2.search(/h/g);        // 0                      查找字符串中符合正則表達式的內容位置，返回第一個配到的元素的索引位置，加不加g效果相同
 5 s2.split(/o/g);         // ["hell", " w", "rld"]  按照正則表達式對字符串進行切割，獲得一個新值，原數據不變
 6 s2.replace(/o/g, "s");  // "hells wsrld"          對字符串按照正則進行替換
 7 
 8 var s1 = "name:Alex age:18";
 9 
10 s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Alex age:18"
11 s1.replace(/a/g, "哈哈哈");     // "n哈哈哈me:Alex 哈哈哈ge:18"      全局匹配
12 s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不區分大小寫
13 
14 坑:
15     var reg = /a/g;
16     var s = 'alex a sb';
17     reg.test(s); //true
18     reg.lastIndex; // 1
19     reg.test(s); //true
20     reg.lastIndex; // 6
21     reg.test(s); //false
22     
23     reg.lastIndex = 0;從新賦值,讓其歸零

 

Math計算模塊

 1 Math.abs(x)      返回數的絕對值。
 2 exp(x)      返回 e 的指數。
 3 floor(x)    小數部分進行直接捨去。
 4 log(x)      返回數的天然對數（底爲e）。
 5 max(x,y)    返回 x 和 y 中的最高值。
 6 min(x,y)    返回 x 和 y 中的最低值。
 7 pow(x,y)    返回 x 的 y 次冪。
 8 random()    返回 0 ~ 1 之間的隨機數。
 9 round(x)    把數四捨五入爲最接近的整數。
10 sin(x)      返回數的正弦。
11 sqrt(x)     返回數的平方根。
12 tan(x)      返回角的正切。