day 15 html（2） css，javascript，dom

時間 2019-11-26

標籤 day html css javascript dom 欄目 HTML 简体版

原文原文鏈接

1、CSS補充javascript

　　position:fixed =>固定在頁面的某個位置；html

　　　　　　absolute=>絕對定位，不能固定某個位置，一般與relative搭配使用java

　　　　　　<div style="position:relative;">python

　　　　　　　　<div style="position:absolute;top:0;right;0;"></div>數組

　　　　　　<div>瀏覽器

　　　　　　放在父類標籤的某個位置網絡

　　　　　　用fposition:fixed屬性能夠放置多層，疊加順序由z-index決定，數值越大越靠上dom

　　　　　　opcity：0.5設置透明度函數

　　當放置的圖片過大時，能夠經過div 中的overflow：hidden或auto來設置隱藏多餘部分或出現滾動條url

　　<div style="height: 200px;width: 200px;overflow: auto;">
 　　   <img src = 'img/111.jpg'/>
　　</div>
　
　　hover當鼠標移到相應標籤時，如下屬性才生效

　　.pg-header .logo:hover {
　　    background-color: blue;
　　}
　　background-image:url('111.jpg') 設置背景色，若是圖片太小，則會重複疊放
　　　　　　background-repeat:no-repeat\repeat-x\repeat-y設置疊放的方向或不疊放
　　　　　　background-position-x:
　　　　　　background-position-y:指定顯示圖片的起始位置，實現大圖片的顯示定位
　　　　　　background：能夠把上述屬性加入其中

2、JavaScript
　　獨立的語言，瀏覽器具備js解釋器
　　編寫js程序，須要語句末尾添加";",切記
　　通常存在於html中，能夠在head頭中添加，能夠建立js文件而後在<script src="js文件路徑"></script>中引用，js路徑能夠是網絡路徑
　　<script type='asdf/javascript'>
　　　　js代碼
　　</script>

　　html從上到下解釋，若是放在head中，下邊body中的東西得不到執行
　　因此《script》的調用最好放在body的最下邊

　　js的註釋//和/*註釋內容*/
　　寫js代碼：
　　　　——html文件中編寫
　　　　——臨時文件能夠在瀏覽器終端console中編寫查看結果

　　變量：
　　JS：
　　　　name = 'alex'; #全局變量

　　　　var name = 'eric' #局部變量

　　基本數據類型
　　數字（number）
　　　　parseInt() 轉換爲整型
　　　　parseFloat（） 轉換爲浮點型
　　字符串（string）
　　　　a.charAt(n):獲取第n個位置的字符
　　　　a.substring（m,n）獲取m到n的字符串
　　　　a.length獲取字符串長度
　　　　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個組內容；

　　$&：當前匹配的內容；

　　$`：位於匹配子串左側的文本；

　　$'：位於匹配子串右側的文本

　　　$$：直接量$符號　　　　

　　列表(數組)
　　　　　a = [11,22,33]
　　　　　　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( )         對數組元素進行排序
　　字典
　　　　a={'k1':2,'k2':3,2:5}
　　布爾類型 ：小寫
　　　　true 
　　　　false

　　條件語句
　　　　if（條件）{
　　　　}else if（條件）{
　　　　}else if（條件）{
　　　　}else{}
　　　　==值相等
　　　　===值相等、類型相同
　　　　！=值不等
　　　　！=值不等，類型不一樣
　　　　&&與 ||或
　　for循環
　　　　a=[11,22,33]
　　一、　　for (var item in a){//能夠循環數組，字典
　　　　　　console.log(item,a[item]);
　　　　}
　　二、　　for (var i=0;i<a.length;i=i+1){//只能循環數組
　　　　　　console.log(a[item]);
　　　　}
　　函數
　　　　js中編寫函數須要使用function 函數名(形參1，形參2，...){函數體}

　　alert(彈出框內容) 彈出一個窗口

　　setInterval（‘執行的代碼’，間隔（ms））每間隔多少毫秒執行一次函數，定時器

　　console.log()在console中打印一條信息


3、dom
　直接查找
　　一、找到標籤
　　　　documnent.getElementById('i1')//根據id獲取單個元素
　　　　document.getElementById（‘name1’）
　　　　document.getElementById             根據ID獲取一個標籤

　　　　document.getElementsByName 根據name屬性獲取標籤集合

　　　　document.getElementsByClassName 根據 class 屬性獲取標籤集合

　　　　document.getElementsByTagName 根據標籤名獲取標籤集合


　　二、操做標籤
　　　　標籤.innerText //獲取標籤中的文本內容
　　　　className//設置class
　　　　classList.add('樣式名')//添加指定樣式
　　　　classList.remove('樣式名') //刪除指定樣式

　　　　ps:
　　　　　　<div onclick='func();'>點我</div>
　　　　　　<script>
　　　　　　　　function fun(){
　　　　　　　　}
　　　　　　</script>

　　　　checkbox
　　　　　　獲取值
　　　　　　checkbox對象.checked=true或false設置checkbox選與不選

　間接查找
　　　　 parentNode          //父節點