JavaScript學習筆記

標籤：z-index   element   doc   定位   flow   tts   模態   cas   標籤   

javascript他是一種獨立的語言，一般存在於html檔案中，瀏覽器就是js的解譯器script可以和CSS的style一樣放在head標籤裡面，也可以寫一個commons.js檔案，匯入即可語言的學習內容：寫js代碼可以在html檔案裡面進行也可以在瀏覽器上點擊審查元素，在console裡面調試編寫變數的建立方式：    全域變數：        a =‘asdf‘ 一般很少    局部變數(在函數裡面)         var b = ‘asdasd‘基本的資料類型      數字            a= 12            age=‘18‘;            轉換類型            a = parseInt(age);            b= parsefloat(age)      字串              obj.length                           長度              obj.trim()                           移除空白              obj.trimLeft()              obj.trimRight)              obj.charAt(n)                        返回字串中的第n個字元              obj.concat(value, ...)               拼接              obj.indexOf(substring,start)         子序列位置              obj.lastIndexOf(substring,start)     子序列位置              obj.substring(from, to)              根據索引擷取子序列              obj.slice(start, end)                切片              obj.toLowerCase()                    大寫              obj.toUpperCase()                    小寫              obj.split(delimiter, limit)          分割              obj.search(regexp)                   從頭開始匹配，返回匹配成功的第一個位置(g無效)              obj.match(regexp)                    全域搜尋，如果正則中有g表示找到全部，否則只找到第一個。              obj.replace(regexp, replacement)     替換，正則中有g則替換所有，否則只替換第一個匹配項，                                                   $數字：匹配的第n個組內容；                                                   $&：當前匹配的內容；                                                   $`：位於匹配子串左側的文本；                                                   $‘：位於匹配子串右側的文本                                                   $$：直接量$符號      列表（數組）                    obj.length          數組的大小                    obj.push(ele)       尾部追加元素                    obj.pop()           尾部擷取一個元素                    obj.unshift(ele)    頭部插入元素                    obj.shift()         頭部移除元素                    obj.splice(start, deleteCount, value, ...)  插入、刪除或替換數組的元素                                        obj.splice(n,0,val) 指定位置插入元素                                        obj.splice(n,1,val) 指定位置替換元素                                        obj.splice(n,1)     指定位置刪除元素                    obj.slice( )        切片                    obj.reverse( )      反轉                    obj.join(sep)       將數組元素串連起來以構建一個字串                    obj.concat(val,..)  串連數組                    obj.sort( )         對數組元素進行排序      字典      布爾               ==      比較值相等               !=       不等於               ===   比較值和類型相等               !===  不等於               ||        或               &&      且條件陳述式for迴圈    1、迴圈列表的時候迴圈的是元素的索引所以要這麼寫        1. 迴圈時，迴圈的元素是索引            a = [11,22,33,44]            for(var item in a){                console.log(item);            }            a = {‘k1‘:‘v1‘,‘k2‘:‘v2‘}            for(var item in a){                console.log(item);            }        2.            for(var i=0;i<10;i=i+1){            }            這種方式不支援字典            a = [11,22,33,44]            for(var i=0;i<a.length;i=i+1){            }函數的建立：            funtion 函數名（a,b,c）{            }            調用的時候函數名（1,2,3）DOM：檔案對象，用來找到html檔案中的標籤        1、找到標籤            擷取單個元素document.getElementById(‘i1‘)            擷取多個元素(返回列表)document.getElementsByName(‘asda‘)            擷取多個元素(返回列表)document.getElementsByTagName(‘div‘)            擷取多個元素（返回列表）document.getElementsByClassName(‘c1‘)           間接找：                  parentNode          // 父節點                  childNodes          // 所有子節點                  firstChild          // 第一個子節點                  lastChild           // 最後一個子節點                  nextSibling         // 下一個兄弟節點                  previousSibling     // 上一個兄弟節點                  parentElement           // 父節點標籤元素                  children                // 所有子標籤                  firstElementChild       // 第一個子標籤元素                  lastElementChild        // 最後一個子標籤元素                  nextElementtSibling     // 下一個兄弟標籤元素                  previousElementSibling  // 上一個兄弟標籤元素        2、操作標籤            擷取標籤內的內容            標籤.innerText            b.classname                b.classname 直接整體操作                b.classname.add(樣式名字) 添加樣式                b.classname.remove(樣式名字) 刪除樣式             c、checkbox                    擷取值                        checkbox對象.checked                        設定                        checkbox對象.checked = trueCSS補充：    - position    - background    - hover    - overflow    - z-index    - opacity樣本：輸入框右邊放置表徵圖JavaScript：    局部變數 var    基礎資料型別 (Elementary Data Type)：        數字        字串        數組        字典        布爾值    For迴圈    條件陳述式        ==        !=        ===        !==        ||        &&    函數的定義：        function func(){            ...        }Dom    找標籤        - 直接找 $(‘#id‘)  $(‘.c1‘).siblings()        - 簡介找    操作：        innerText        checkbox:            checked        className        classList    事件：        <div onclick=‘函數(123)‘></div>        <script>            。。。。        </script>    定時器        setInterval(‘函數()‘, 4000)    其他：        alert()        console.log()執行個體：    蒞臨指導    多選    模態對話方塊    左側菜單    返回頂部

 

JavaScript學習筆記