前端之JavaScript

時間 2019-11-18

原文原文鏈接

css的一些內容複習

ps 有一些標籤自帶下面的一個或多個屬性值
p標籤自帶margin上下16px
ul標籤自帶margin上下16px padding-left：40px
marging:用於調整標籤與標籤之間的距離（外邊距）
border：用於調整邊框的粗細
padding：用於調整標籤內部文本與邊框之間的距離（內邊距）
content：標籤內部文本
margin:10px,20px,30px,40px 上右下左（**）
margin：10px,20px,30px   上   左右
margin：10px,20px     上下    左右（**）
margin：10px       上下左右

ps:padding的規則亦是如此
border： solid 3px red;
border-left
border-right
border-top
border-bottom   調標籤某一個樣式

網頁佈局都涉及到了浮動，可是浮動會形成父標籤塌陷，如何解決浮動帶來的影響呢？

浮動   （先搭架子）
    用來作網頁的佈局  （先搭建網頁骨架，再去調樣式，最後調js代碼）
    缺點：浮動的元素會脫離文檔流，形成父標籤塌陷（基於這個標籤被誰套住了）
    如何解決浮動帶來的負面影響：
        1.先手動再寫一個div強行撐起來
        2.clear屬性 限制
        3.clearfix
            .clearfix:after{
                content:'';
                clear:bothl
                display:block  /*讓這個內容獨佔一行*/
            }
            ps:應用場景  左右頁面佈局

剩下的css內容的補充

溢出
    overflow：hidden/auto/scoll
    ps:應用場景   圓形頭像（width=100% 是讓頭像所有顯示，因此是100%）
定位
    標籤默認是static（靜態），不能調整top，left,right,bottom
    若是想要調整：
        相對定位：相對於標籤自身的位置
        絕對定位：相對於已經定位過的父標籤再作定位   購物車下面的大框
        固定定位：相對於瀏覽器固定在窗口的某個位置，不隨文檔的上下滑動而變更
    
        研究是否脫離文檔流：
            脫離文檔流：浮動，絕對定位，固定定位
            不脫離文檔流的：相對定位

z-index
    調整頁面與用戶的距離
    示例：  模態框
透明度 opacity 調節的是全部標籤的透明度
      rgba()  自能調節顏色的透明度

JavaScript的語法學習

1.JavaScript和Java的關係

js:Javascript   和Java一點關係都沒有，當初Java很火，這門是爲了蹭Java的熱度

因此不要錯認爲JavaScript和Java有某種關係javascript

2.JavaScript的註釋註釋是代碼之母

//單行註釋

 /*

 多行註釋
 */

3.JavaScript中的結束符

　　　　結束符是;注意是英文狀態下的分號css

4.聲明變量的關鍵字 var

變量聲明的關鍵字：var 變量名=「值」
        js屬於動態類型(同一個變量能夠存不一樣數據類型的值)   var x="egon"; var x="18";

4.變量

變量命名規則  js中$也能夠用來做變量名 var $='女'；console.log('$',$)
        通常是以駝峯體命名，首字母小寫
        var userName="張全蛋";

聲明變量：

　　　　var name='hello'
　　　　let name='egon' let就用在局部環境,局部中使用var會影響全局java

5.引入方式 2種

方式1：直接在script內部寫js代碼
方式2：在js內部書寫js代碼，而後在script中src屬於引入外部js代碼文件

6.變量的命名規範

        數字，字母，下劃線，$
        不能以數字開頭，而且不能與存在的關鍵字衝突
        python中建議：user_nmae
        javascript建議使用（駝峯體）：userName

7.數據類型

        1.數值類型
        2.字符串類型
        3.布爾類型
        4.underfined
        5.對象
            null
            數組 [1，2，3，4]
            自定義對象  {'name':'jason'}
         6.數值類型
            NaN 表示當前轉換的對象不是一個數值類型，可是NaN是一個數值類型
        7.symbol  新增的

8.數據類型詳細解析

1.1數字類型
        var n1=18;var n2=18.1；var n3=1.81e5;
        var n4=NaN //Not a Number表示這個值不是一個數字
        2.1字符串類型
            var s1="小強"; var s2="egon"; var s=s1+s2;  //字符串拼接用+號
        經常使用方法.length/.trim()/.trimleft()/.trimright()/.charAt(n)/.concat(valule)字符串的拼接/.indexOf("xiao")子序列位置 /.slice(start,end) 切片/.substring(start,stop) 切片
.toLowerCase()小寫 /.toUpperCase() 大寫 /.split(delimiter,limit)分割 limit限制返回的列表的元素的個數 
        substring 和slice的區別

        相同點：
            若是start=stop    ,返回空字符串  後面的參數是索引，特色是顧頭不顧尾
            若是stop省略，那麼會取到字符串的末尾，就是隻有start的時候，默認所有取出
            若是某個參數超過string的長度，這個參數會被替換成string的長度   就是不會報錯嘍？是的，不報錯
        區別：substring（對應的索引）的特色   仍是不會報錯！！！
            若是start>stop,start和stop會交換，
            若是是負數或者不是數字，就會被0替換  
            var s="hello world    "
            s.substring(-8,9);  是負數會默認將負數換成0
            "hello wor"
            s.substring('a',9); 不是數字也會默認將第一個換成0
            "hello wor"
            s.substring(9,0);  若是第一個參數大於第二個參數，默認會將二者交換位置
            "hello wor"

            slice（對應的索引）的特色
            若是start>stop 不會交換二者 
            s.slice(9,0);  
            ""
            s.slice(1,0);   只會返回''空字符串
            ""
            s.slice(3,1);
            ""
            若是stop 小於0，會從字符串末尾處開始往前數stop個字符結束，不包括stop
            s.slice(0,-7);  能夠理解爲先倒着找到了7個元素，而後將這7個元素去掉，從0開始
            "hello wo"
            s.slice(0,-9); 先倒着找9個元素，而後將這9個元素去除，從0開始顯示出來
            "hello "
            s.slice(0,-4); 先倒着找4個元素，而後將這4個元素去除，從0開始顯示剩下的
            "hello world"

            若是start小於0，會從字符串末尾處開始往前數start個字符結束，包括start
            s.slice(-7,1);   這個沒有什麼實際意義，倒着找到了元素，可是又讓在1這裏結束，臣妾作不到啊！
            ""
            s.slice(-7);  若是不寫後面的stop，默認是找到所有，倒着找到了7個元素，直接將後面全部的東西返回
            "rld    "

            2.indexOf(substring,start)  用於查找元素的位置，可是隻會找到第一個元素就結束查找，後面相同的元素就不會接着查找，除非指定後面的start
            s.indexOf("o",0);  未指定start的時候，默認只找到第一個元素就不日後找了
            4
            s.indexOf("o",5);  指定start的時候，超過了第一個元素的位置就會日後查找下一個元素
            7
            s.indexOf("w",0); 未指定start的時候，只找到第一個就不找了
            6

            3.charAt(n)  返回第n個元素
            s.charAt(3);  後面的這個參數是個數，不是索引！
            "l"
            4.concat(value,...) 相似與python中的append  用於多個數組的合併，將數組的成員，添加到原數組的尾部，而後返回一個新數組，原數組不變     新數組的成員添加到原數組的尾部！！！
                            在字符串中是拼接，相似數據庫中的concat
            var l=[]
            l.concat(1,2,3);  將新元素添加到數組中
            (3) [1, 2, 3]
            l.concat(1,[2,3]);  將新元素添加到數組尾部，而後數組的合併
            (3) [1, 2, 3]
            l.concat([1],[2],[3]);  將新元素依次添加到數組的尾部，而後數組合並
            (3) [1, 2, 3]
           3.1 bool值  所有小寫，也是true/false（空格，0，null，underfined，NaN） 
          4.1 null是原先有值，將他從新定義，underfined是一開始就沒有定義
          5.1數組[]
          經常使用方法
            length/push--append/pop--pop/unshift--insert/shift--頭部移除元素/slice--split  reservse--reservse/join--join/concat(鏈接數組)--extend/sort--sort/forEach/splice(刪除並添加)/map(映射)--switch
        forEach查看容器中的每個元素
            容器.forEach(元素，元素對應的索引，元素所在的容器){
                邏輯體代碼
            }

View Code

9.相關運算

數學運算符 + - * / % // 
比較運算符
    == 弱等於
    ===強等於 不只比較值的大小還比較typeof
    ！=弱不等於
    ！==強不等於

10.流程控制和循環

     if -else    
    固定格式   
        if (條件1){
            邏輯體代碼
        }
        else （條件2）{
            邏輯體代碼
        };    **注意這裏是英文狀態下的分號;
    for 循環--相似與python中的while循環
    固定格式
        for (起始條件；結束條件；條件成立因素){
            邏輯體代碼
        };

11.函數

關鍵字function   函數名+（） 函數體   函數返回值return   函數的調用
    統一格式   function  函數名(){函數體代碼 函數返回值}；
        function func(){           //無參函數，沒有返回值
            console.log('hello')
        };
        function  bar(x,y){          //有參函數，沒有返回值
            console.log('hello world')
        };
         function func(){           //無參函數，有返回值
            return 555
        };
        function  bar(x,y){          //有參函數，有返回值
               return x+y      
        };
        **注意在python中若是返回多個是以元組的形式返回，可是在JavaScript中，默認只返回最後一個，因此若是想要多個元素，就用數組將這個元素括起來
        **注意在python中傳參的時候根據位置參數傳參是必須保證明參和形參個數一致才能夠，可是在JavaScript中，傳多傳少都不會報錯，傳多了只會取取能接受的前兩個，傳少了默認是0

12.JSON方法

json對象
        stringify loads
        parse  dumps

13.正則

正則的兩種定義方式
        1.new    reg1=new RegExp()
         2.       reg2=/^[A-Za-z][A-Za-z0-9]{5,9}$/
    坑點集錦：
        1.正則表達式中千萬不要寫空格
        2.全局匹配模式配置last index
        3.匹配的時候不傳任何參數默認匹配underfined

14.BOM

BOM  location     window.location.href  //獲取URL
                window.location.href="URL" //跳轉到指定頁面
                window.location.reload()  //從新加載頁面
                alert警告框/confirm確認框/prompt輸入框 能夠拿到具體的輸入內容

15.DOM

    Document Object Model
        直接查找（*****）
            id   
                var pEle=document.getElementById('id')  
                    pEle;
                    pEle.parentElement  //查看當前id的父親
                    pEle.parentElement.parentElement   //查看當前id的父親的父親
            class（類）
                var pEle=document.getElementByClassName('class')
            tag(標籤)
                var pEle=document.getElementsByTagName('p')
        間接查找