day15CSS+JavaScript+DOM

標籤：dom

CSS補充    position:  ##多層        a. fiexd => 固定在頁面的某個位置         ##返回頂端        b. relative + absolute                      <div style=‘position:relative;‘>                <div style=‘position:absolute;top:0;left:0;‘></div>  ##以外面的父級div框為標準，定位自己            </div>    opcity: 0.5 透明度    z-index: 層級順序，大的在上面   ##點擊，彈出一個框，背景變成灰色透明    overflow: hidden,auto  ##圖片  hiddon，超過規定的範圍就隱藏，auto出現捲軸/*當滑鼠移動到當前標籤上時，以下css屬性才生效*/.pg-header .menu:hover{    background-color: blue;}    background-image:url(‘image/4.gif‘); # 預設，div大，圖片重複訪    background-repeat: repeat-y;  # 圖片應用只豎著加，背景色   no-repeat不堆疊    background-position-x: ##移動       background-position-y: ##移動  正向下，負向上     扣表徵圖  加圖片大小    background-position: 10px 10px;   樣本：輸入框  最右邊有一個圖片<div style="height: 35px;width: 400px;position: relative;">    <input type="text" style="height: 35px;width: 370px;padding-right: 30px" />    <span style="position:absolute;right:3px;top:10px;background-image: url(i_name.jpg);height: 16px;width: 16px;display: inline-block;"></span></div>

<script  src="路徑">//javascript</script>變數     name = ‘hequan‘   全域變數     var name=‘hequan‘ 局部變數數字     age = 18;     i = parseInt(age);字串     a = "hequan"     a.length 長度     a.substring(起始位置，結束位置)     a.charAt(索引位置)函數     function func(){}布爾類型     小寫字典    a={‘k1‘:‘v1‘}列表（數組）     a = [11,22,33]函數     function  函數名(){     }

定時器：     setInterval(‘執行的代碼‘,間隔時間5000);尋找：     document.getElementById(‘i1‘).innerText;自動滾動:function func() {    var tag = document.getElementById(‘i1‘)    var content = tag.innerText    var f = content.charAt(0);    var l = content.substring(1, tag.length)    var new_content = l + f;    tag.innerText = new_content}setInterval(‘func()‘,500);

for迴圈     a = [11,22,33,44]     for (var item in  a ){     //迴圈預設都是 key          console.log(a[item]);     }     for (var i=0;i<a.length;i++){   //數組可以，字典不可以         }條件陳述式     if(條件){         }else  if（條件）{         }else{         }          == 只要值相等     === 值相等 類型也要相等     &&  and     ||   or

1、找到標籤    擷取單個元素        document.getElementById(‘i1‘)    擷取多個元素（列表）document.getElementsByTagName(‘div‘)    擷取多個元素（列表）document.getElementsByClassName(‘c1‘)    a. 直接找        document.getElementById            根據ID擷取一個標籤        document.getElementsByName          根據name屬性擷取標籤集合        document.getElementsByClassName    根據class屬性擷取標籤集合        document.getElementsByTagName      根據標籤名擷取標籤集合    b. 間接        tag = document.getElementById(‘i1‘)        parentElement          // 父節點標籤元素        children                // 所有子標籤        firstElementChild      // 第一個子標籤元素        lastElementChild        // 最後一個子標籤元素        nextElementtSibling    // 下一個兄弟標籤元素        previousElementSibling  // 上一個兄弟標籤元素2、操作標籤    a. innerText        擷取標籤中的常值內容        標籤.innerText        對標籤內部文本進行重新複製        標籤.innerText = ""    b. className  //樣式名字        tag.className =》 直接整體做操作        tag.classList.add(‘樣式名‘)  添加指定樣式        tag.classList.remove(‘樣式名‘)  刪除指定樣式        PS：            <div onclick=‘func();‘>點我</div>            <script>                function func(){                }            </script>    c. checkbox            擷取值            checkbox對象.checked            設定值            checkbox對象.checked = true

例子function ShowModel(){    document.getElementById(‘i1‘).classList.remove(‘hide‘);    document.getElementById(‘i2‘).classList.remove(‘hide‘);}function HideModel(){    document.getElementById(‘i1‘).classList.add(‘hide‘);    document.getElementById(‘i2‘).classList.add(‘hide‘);}function ChooseAll(){    var tbody = document.getElementById(‘tb‘);    // 擷取所有的tr    var tr_list = tbody.children;    for(var i=0;i<tr_list.length;i++){        // 迴圈所有的tr，current_tr        var current_tr = tr_list[i];        var checkbox = current_tr.children[0].children[0];        checkbox.checked = true;    }}     function ChangeMenu(nid){        var current_header = document.getElementById(nid);        var item_list = current_header.parentElement.parentElement.children;        for(var i=0;i<item_list.length;i++){            var current_item = item_list[i];            current_item.children[1].classList.add(‘hide‘);        }        current_header.nextElementSibling.classList.remove(‘hide‘);     }

本文出自 “何全” 部落格，請務必保留此出處http://hequan.blog.51cto.com/5701886/1908641

day15CSS+JavaScript+DOM