丰满亚洲大尺度无码无码专线,一个色的导航,性少妇sexfreexxxx片

問題

1.dom對象的innerText和innerHTML有什么區(qū)別？

innerText：
當(dāng)使用innerText讀取值時，如果有HTML標(biāo)簽，它會過濾掉HTML標(biāo)簽，并且按照由淺入深的順序?qū)⑺械奈谋酒唇悠饋怼?/li>
當(dāng)使用innerText寫入值時，結(jié)果會刪除dom對象的所有子節(jié)點，插入包含的相應(yīng)文本值的文本節(jié)點。如果有HTML標(biāo)簽，它會對HTML語法字符（小于號、大于號、引號及和號等）進行編碼，使HTML標(biāo)簽以正常的文本形式出現(xiàn)在dom對象中。
舉例：

<body>
    <div id="content">
        <p>This is a <strong>test</strong> paragraph</p>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
<script>
    var oDiv = document.getElementById("content");
    console.log(oDiv.innerText);
    oDiv.innerText = "<h2>Hello & <strong>hunger</strong></h2>";

innerText運行結(jié)果

innerHTML
當(dāng)使用innerHTML讀取值時，返回dom對象的所有子節(jié)點（包括元素、注釋和文本節(jié)點）對應(yīng)的HTML標(biāo)記。
當(dāng)使用innerHTML寫入值時，會根據(jù)寫入的值創(chuàng)建新的DOM樹，然后用這個DOM樹完全替換原先所有的子節(jié)點。
舉例:

<body>
    <div id="content">
        <p>This is a <strong>test</strong> paragraph</p>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
<script>
    var oDiv = document.getElementById("content");
    console.log(oDiv.innerHTML);
    oDiv.innerHTML = "<h2>Hello & <strong>hunger</strong></h2>";

innerHTML運行結(jié)果.png

那么總而言之：innerHTML是一種插入HTML字符的方法，所以它會根據(jù)標(biāo)簽生成DOM樹，而innerText是一種插入文本的方法，所以它會過濾掉標(biāo)簽。

2.elem.children和elem.childNodes的區(qū)別？

elem.children
每個節(jié)點都會有一個childNodes屬性，其中保存著一個NodeList對象。而NodeList是一個類數(shù)組，用于保存節(jié)點中所有的子節(jié)點（共12中，Element元素節(jié)點只是其中一種，具體哪12種可以參考深入理解DOM節(jié)點類型第一篇——12種DOM節(jié)點類型概述）。這組節(jié)點是有序的，可以通過位置來訪問。
舉例：

<body>
        <ul id="test">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
</body>
<script>
    var oUl = document.getElementById("test");
    console.log(oUl.children.length);//返回7,包括3個元素節(jié)點和4個空白字符的文本節(jié)點
</script>

而elem.children只會返回節(jié)點的元素子節(jié)點，除此之外，與elem.childNodes沒什么區(qū)別。
舉例：

<body>
        <ul id="test">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
</body>
<script>
    var oUl = document.getElementById("test");
    console.log(oUl.children.length);//返回3
</script>

3.查詢元素有幾種常見的方法？

querySelector 方法接受一個CSS選擇器作為參數(shù)，返回匹配該選擇器的元素節(jié)點。
如果有多個節(jié)點滿足匹配條件，則返回第一個匹配的節(jié)點。
如果沒有發(fā)現(xiàn)匹配的節(jié)點，則返回null。
該方法在HTML文檔上和HTML元素上都能調(diào)用。

querySelectorAll 方法與querySelector用法類似。
區(qū)別是返回一個靜態(tài)的NodeList對象（NodeList 本質(zhì)上是一個動態(tài)的 Node 集合，只是規(guī)范中對 querySelectorAll 有明確要求，規(guī)定其必須返回一個靜態(tài)的 NodeList 對象），包含所有匹配給定的選擇器的節(jié)點。
該方法在HTML文檔上和HTML元素上都能調(diào)用。
getElementById 方法返回匹配指定的id屬性的元素節(jié)點。
如果沒有發(fā)現(xiàn)匹配的節(jié)點，則返回null。
該方法只能在HTML文檔上調(diào)用，不能在HTML元素上調(diào)用。
getElementsByTagName 方法接受一個元素的標(biāo)簽名為參數(shù)，返回一個實時的NodeList對象，包含所有匹配的子節(jié)點。
該方法在HTML文檔上和HTML元素上都能調(diào)用。
特殊的是，在HTML文檔中，也就是使用document.getElementsByTagName時，會返回一個HTMLCollection對象（與NodeList很像），這是一個“動態(tài)”的合集，可以實時反映 HTML文檔的變化。
getElementsByClassName方法類似getElementsByTagName，只不過它接受的參數(shù)為元素的class屬性值組成的字符串。
如果參數(shù)是一個空格分隔的字符串，元素的class必須符合所有的字符串之中的class才能匹配。

剛開始接觸HTMLCollection和NodeList時，對它們之間關(guān)系挺莫名其妙的，后來查閱了下資料才稍微有些明白。
具體可以參考這個回答：NodeList 和 HTMLCollection之間的關(guān)系？
簡單來說就是由于歷史原因，DOM規(guī)范分為2個部分：Core（最基礎(chǔ)的XML解析說明）和HTML（HTML的特有API解析說明）。而NodeList是屬于Core的，HTMLCollection 是屬于HTML的。
它們返回的都是實時的Node合集，并且可以Node[取索引]來返回子節(jié)點。
不同的是NodeList是node節(jié)點集合（即包含元素節(jié)點，文檔節(jié)點和注釋節(jié)點等12種節(jié)點類型），而HTMLCollection只包含元素節(jié)點集合，所以在HTML文檔中，getByElement系列都是HTMLCollection集合。
而有的書上說這些查詢元素的方法都是NodeList集合，有的說是HTMLCollection合集，看起來很矛盾，其實是討論的使用環(huán)境不一樣罷了。
另外動態(tài)集合雖然很實用，但是在循環(huán)它們的時候要特別小心，不要因為忽略了實時變化而造成死循環(huán)。
參考：深入理解javascript中的動態(tài)集合——NodeList、HTMLCollection和NamedNodeMap

4.如何創(chuàng)建一個元素？如何給元素設(shè)置屬性？

document.createElement()方法可以創(chuàng)建新的元素節(jié)點，這個方法只接受一個參數(shù)，就是創(chuàng)建元素的標(biāo)簽名。
document.createTextNode()方法可以用來創(chuàng)建新的文本節(jié)點，這個方法方法值接受一個參數(shù)，就是要插入節(jié)點的文本。
setAttribute()用來給元素設(shè)置屬性，這個方法接收2個參數(shù)，需要設(shè)置的屬性名和屬性值。
舉例：

<body>
    <div></div>
</body>
<script>
    var oDiv = document.getElementsByTagName("div")[0];
    var oImg = document.createElement("img");
    var txt = document.createTextNode("my images")
    oImg.setAttribute("alt","A cup of coffee");
    oImg.setAttribute("src","images/coffee.jpg");
    oDiv.appendChild(oImg);
    oDiv.appendChild(txt);
</script>

運行結(jié)果

5.元素的添加、刪除。

元素的添加：
appendChild()方法，讓指定元素成為某個現(xiàn)有元素的最后一個子元素。
用語法表示：parent.appendChild(child);
舉例：

<body>
    <ul id="test">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
<script>
    var oUl = document.getElementById("test");
    var oLi = document.createElement("li");
    oUl.appendChild(oLi);
</script>

運行結(jié)果

insertBefore()方法；讓指定的元素插入到某個現(xiàn)有元素的前面。調(diào)用此方法，必須告訴它三件事：
1.新元素：你想插入的元素（newElement）
2.目標(biāo)元素：你想把這個新元素插入到哪個元素（targetElement）之前。
3.父元素：目標(biāo)元素的父元素（parentElement）
下面是該方法的調(diào)用語法：parentElment.insertBefore(newElement,targetElement)
舉例：

<body>
    <ul id="test">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
<script>
    var oUl = document.getElementById("test");
    var oLi = document.createElement("li");
    oUl.insertBefore(oLi,oUl.firstChild);
</script>

運行結(jié)果

元素的刪除：
removeChild()方法：刪除某個元素，不過要注意的是，該方法不是在待刪除的元素上調(diào)用，而是在其父元素上調(diào)用。
用語法表示就是：parent,removerChild(child).
舉例：

<body>
    <ul id="test">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
<script>
    var oUl = document.getElementById("test");
    var oLi = document.querySelectorAll("li")[0];
    oUl.removeChild(oLi);
</script>

運行結(jié)果

6.DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別？

DOM0級事件就是將一個函數(shù)賦值給一個事件處理程序?qū)傩浴?br> 這些屬性通常都是小寫，例如onclick，來看一個例子:

<body>
<input id="myBtn" type="button" value="點擊我"/>
</body>
<script>
    var oBtn = document.getElementById("myBtn");
    oBtn.onclick = function(){
        console.log(this.id);
    }
</script>

運行結(jié)果

使用DOM0 級方法指定的事件處理程序被認(rèn)為是元素的方法，因此，這個時候的事件處理程序是在元素的作用域中運行，換句話說，程序中的this引用當(dāng)前元素，所以，上述例子點擊按鈕后顯示的是元素的ID。
另外如果要刪除DOM0 級事件處理程序，只要將事件處理程序設(shè)置為null即可。

DOM2 級定義了兩個方法，用于處理指定和刪除事件處理程序的操作：addEventListener()和removerEventListerner(）。
所有DOM節(jié)點都包含這兩個方法，并且都接受3個參數(shù)：
1.要處理的事件名
2.作為事件處理程序的函數(shù)
3.一個布爾值，布爾值如果是true，表示在捕獲階段調(diào)用事件處理程序，如果是flase，表示在冒泡階段調(diào)用事件處理程序。

看例子：

<body>
<input id="myBtn" type="button" value="點擊我"/>
</body>
<script>
    var oBtn = document.getElementById("myBtn");
    oBtn.addEventListener("click",function(){
        console.log(this.id);
    },false);
    oBtn.addEventListener("click",function(){
        console.log("Hello world")
    },false);
</script>

運行結(jié)果

與DOM0 級的區(qū)別在于，使用DOM2 級方法可以添加多個事件處理程序。

另外，通過addEventListener()添加的事件只能通過removeEventListener()來刪除，刪除時傳入的參數(shù)與添加時相同，這也就意味著添加的匿名函數(shù)是無法刪除的。

7.attachEvent與addEventListener的區(qū)別？

1.接受的參數(shù)：
attachEvent接受2個參數(shù)：事件名稱，事件處理函數(shù)，只支持事件冒泡。
addEventListener接受3個參數(shù)：事件名稱，事件處理函數(shù)，布爾值

2.事件名稱：
attachEvent事件名稱前面要加“on”，如“onclick”，
addEventListener不需要，如“click”。

3.作用域：
attachEvent會在全局作用域中運行，即this = window。
addEventListener是在元素作用域中運行，this指的是當(dāng)前元素。

4.事件處理程序的順序：
addEventListener是按照添加順序執(zhí)行。
attachEvent是按照添加順序相反執(zhí)行。

5.刪除方法：
attachEvent使用detachEvent刪除添加事件。
addEventListener使用removeEventListener刪除添加事件。

6.兼容：
IE8以及IE8以下只支持attachEvent，
IE9開始支持addEventListener。

8.解釋IE事件冒泡和DOM2事件傳播機制？

IE事件冒泡：指的是IE的事件流，事件開始時由最具體的元素（文檔嵌套層次最深的那個節(jié)點）接受，然后逐漸向上傳播到較為不具體的節(jié)點（文檔）
DOM2的事件傳播機制：指的是DOM2級事件的事件流，包括三個階段：事件捕獲階段、處于目標(biāo)階段和事件冒泡階段。首先發(fā)生的是事件捕獲，為截獲事件提供了機會。然后是實際的目標(biāo)收到事件。最后一個是冒泡階段，事件作出相應(yīng)。

9.如何阻止事件冒泡？如何阻止默認(rèn)事件？

stopPropagation()方法可以阻止事件冒泡，如果bubbles（表明事件是否冒泡）為ture，則可以使用這個方法。
舉例：

<body>
    <div id="test">
        <input id="myBtn" type="button" value="點擊我"/>
    </div>
</body>
<script>
    var oDiv = document.getElementById("test");
    var oBtn = document.getElementById("myBtn");
    oDiv.addEventListener("click",function(){
        console.log(this.id+"我被冒泡了");
    },false);
    oBtn.addEventListener("click",function(ev){
        console.log(this.id);
        ev.stopPropagation();
    },false);
</script>

運行結(jié)果

preventDefault()方法可以阻止默認(rèn)事件，如果cancelable（表明是否可取消事件的默認(rèn)行為）為ture，則可以使用這個方法。
舉例：

<body>
    <div id="test">
        <a id="myLink" >點擊我</a>
    </div>
</body>
<script>
    var link = document.getElementById("myLink");
    link.addEventListener("click",function(ev){
        ev.preventDefault();//取消a鏈接點擊轉(zhuǎn)跳到指定的URL的默認(rèn)行為。
    },false);
</script>

運行結(jié)果

代碼

1.有如下代碼，要求當(dāng)點擊每一個元素li時控制臺展示該元素的文本內(nèi)容。不考慮兼容

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
</ul>
<script>
//todo ...
</script>

解答代碼：
方法一，循環(huán)子元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任務(wù)1</title>
</head>
<body>
<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>任務(wù)6班</li>
</ul>
<script>
    var oUl = document.getElementsByClassName("ct");
    var aLi = oUl[0].getElementsByTagName("li");
    for(var i=0,len=aLi.length; i<len; i++){
        aLi[i].addEventListener("click",function(){
            console.log(this.innerText);
        },false);
    }
</script>
</body>
</html>

代碼1-方法1效果預(yù)覽
方法二，事件代理：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任務(wù)1</title>
</head>
<body>
<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>任務(wù)6班</li>
</ul>
<script>
    var oUl = document.getElementsByClassName("ct")[0];
    oUl.addEventListener("click",function(ev){
        console.log(ev.target.innerText)
    })
</script>
</body>
</html>

代碼1-方法2效果預(yù)覽

2.補全代碼，要求：

1.當(dāng)點擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素，內(nèi)容為用戶輸入的非空字符串；當(dāng)點擊結(jié)尾添加時在<li>前端6班</li>后添加用戶輸入的非空字符串.
2.當(dāng)點擊每一個元素li時，控制臺展示該元素的文本內(nèi)容。

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
</ul>
<input class="ipt-add-content" placeholder="添加內(nèi)容"/>
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>
<script>
//todo ...
</script>

解決代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任務(wù)2</title>
</head>
<body>
<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
</ul>
<input class="ipt-add-content" placeholder="添加內(nèi)容"/>
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>
<script>
    var oUl = document.getElementsByClassName("ct")[0];
    var oLi = document.getElementsByTagName("li");
    var startBtn = document.getElementById("btn-add-start");
    var endBtn = document.getElementById("btn-add-end");
    var addContent = document.getElementsByClassName("ipt-add-content")[0];
    startBtn.addEventListener("click",function(){
        if(!addContent.value){
            alert("請輸入內(nèi)容");
        }
        else {
            var newLi = document.createElement("li");//注意邏輯順序，是點擊之后再創(chuàng)建一個新的li元素
            newLi.innerText = addContent.value;
            oUl.insertBefore(newLi,oLi[0]);
        }
    },false)
    endBtn.addEventListener("click",function(){
        if(!addContent.value){
            alert("請輸入內(nèi)容")
        }
        else{
            var newLi = document.createElement("li");
            newLi.innerText = addContent.value;
            oUl.appendChild(newLi);
        }
    },false)
    oUl.addEventListener("click",function(ev){
        console.log(ev.target.innerText);
    },false)
</script>
</body>
</html>

代碼2效果預(yù)覽

3.補全代碼，要求：當(dāng)鼠標(biāo)放置在`li`元素上，會在img-preview里展示當(dāng)前`li`元素的date-img對應(yīng)的圖片。

<ul class="ct">
    <li data-img="1.png">鼠標(biāo)放置查看圖片1</li>
    <li data-img="2.png">鼠標(biāo)放置查看圖片2</li>
    <li data-img="3.png">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
//todo ...
</script>

解決代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任務(wù)2</title>
</head>
<body>
<ul class="ct">
    <li data-img="1.jpg">鼠標(biāo)放置查看圖片1</li>
    <li data-img="2.jpg">鼠標(biāo)放置查看圖片2</li>
    <li data-img="3.jpg">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
    var oDiv = document.querySelector(".img-preview");
        newImg = document.createElement("img");
    oDiv.appendChild(newImg);
    //方法一：循環(huán)子元素，設(shè)置事件程序
    var oLi = document.getElementsByTagName("li");
    for(var i=0,len=oLi.length; i<len; i++){
        oLi[i].onmouseover = function(){
            var source = this.getAttribute("data-img");
            newImg.setAttribute("src",source);
        }
    }

    //方法2：對父元素進行事件監(jiān)聽
//    var oUl = document.querySelector(".ct");
//    oUl.addEventListener("mouseover",function(ev){
//        var source = ev.target.getAttribute("data-img");
//        newImg.setAttribute("src",source);
//    },false);
</script>
</body>
</html>

代碼3-方法1效果預(yù)覽
 代碼3-方法2效果預(yù)覽
4.實現(xiàn)如下圖Tab切換的功能
解決代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任務(wù)2</title>
    <style type="text/css">
        body,ul,li,p{
            margin:0;
            padding:0;
        }
        .clearfix:after{
            content:'';
            display:block;
            clear:both;
        }
        .tab-switch *{
            box-sizing:border-box;
        }
        .tab-switch{
            width:600px;
            margin:auto;
            margin-top:40px;
            border:1px solid #ccc;
        }
        .tab li{
            list-style-type:none;
            float:left;
            width:200px;
            height:40px;
            line-height:40px;
            text-align:center;
            cursor:pointer;
            border-right:1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }
        .tab li:last-child{
            border-right:none;
        }
        .tab .active {
            background-color:#eee;
        }
        .tab-switch div{
            display:none;
            height:300px;
            padding:20px;
        }
        .tab-switch .content{
            display:block;
        }
    </style>
</head>
<body>
    <div class="tab-switch">
        <ul class="tab clearfix">
            <li class="active">tab1</li>
            <li>tab2</li>
            <li>tab3</li>
        </ul>
        <div class="content">內(nèi)容1</div>
        <div>內(nèi)容2</div>
        <div>內(nèi)容3</div>
    </div>
    <script>
        var oDiv = document.querySelector(".tab-switch");
            aLi = oDiv.getElementsByTagName("li");
            aDiv = oDiv.getElementsByTagName("div");
        for(var i=0,len=aLi.length; i<len; i++){
            aLi[i].index = i;//創(chuàng)建一個index屬性來表示div的序列號。
            aLi[i].addEventListener("click",function(){
                for(var i=0,len=aLi.length; i<len; i++){
                    aLi[i].className= "";
                    aDiv[i].style.display = "none";
                }
                this.className = "active";
                aDiv[this.index].style.display="block";
            },false);
        }
    </script>
</body>
</html>

代碼4效果預(yù)覽

5.實現(xiàn)下圖的模態(tài)框功能

方法1，直接修改顯示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任務(wù)5</title>
    <style type="text/css">
        #modal-1{
            display:none;
        }
        a{
            text-decoration: none;
            color: #333;
        }
        .cover{
            position:fixed;
            top:0px;
            left:0px;
            right:0px;
            bottom:0px;
            background-color: #000;
            opacity:0.4;
            z-index:99;
        }
        .modal-ct{
            position:fixed;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            width:400px;
            border-radius: 3px;
            background-color:#fff;
            z-index:100;
        }
        .header {
            position:relative;
            height:36px;
            line-height:36px;
            border-bottom: 1px solid #ccc;
        }
        h3{
            margin: 0;
            padding-left: 10px;
            font-size: 16px;
        }
        .close{
            position:absolute;
            right:10px;
            top: 10px;
            line-height:1;
        }
        .content{
            padding:10px;
        }
        .footer{
            padding:10px;
            border-top:1px solid #eee;
        }
        .footer:after{
            content:'';
            display:block;
            clear:both;
        }
        .btn{
            float:right;
            margin-left:10px;
        }
    </style>
</head>
<body>
    <button class="btn-modal">點我！</button>
    <div id="modal-1" class="modal-dialog">
        <div class="cover"></div>
        <div class="modal-ct">
            <div class="header">
                <h3>我是標(biāo)題3</h3>
                <a class="close" href="#">X</a>
            </div>
            <div class="content">
                <p>我是內(nèi)容1</p>
                <p>我是內(nèi)容2</p>
            </div>
            <div class="footer">
                <a class="btn btn-confirm" href="#">確定</a>
                <a class="btn btn-cancel" href="#">取消</a>
            </div>
        </div>
    </div>
    <script>
        var btn = document.querySelector(".btn-modal"),
                modal = document.querySelector("#modal-1"),
                modalCt= document.querySelector("#modal-1 .modal-ct");
        btn.addEventListener("click",function(ev){
            ev.stopPropagation();
            showModal(modal);
        });
        modalCt.addEventListener("click",function(ev){
            ev.stopPropagation();
            if(hasClass(ev.target,"close") || hasClass(ev.target,"btn-cancel")){
                hideModal(modal);
            }
        });
        document.body.addEventListener("click",function(){
            hideModal(modal);
        })
        function showModal(modal){
            modal.style.display = "block";
        }
        function hideModal(modal) {
            modal.style.display = "none";
        }
        function hasClass(ele, cls){
            return ele.className.match(new RegExp('\\b'+cls+'\\b'));
        }
    </script>
</body>
</html>

代碼5-方法1效果預(yù)覽
方法2，通過添加和刪除類名來改變顯示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任務(wù)5-2</title>
    <style type="text/css">
        a{
            text-decoration: none;
            color: #333;
        }
        .cover{
            position:fixed;
            top:0px;
            left:0px;
            right:0px;
            bottom:0px;
            background-color: #000;
            opacity:0.4;
            z-index:99;
            display:none;
        }
        .modal-ct{
            position:fixed;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            width:400px;
            border-radius: 3px;
            background-color:#fff;
            z-index:100;
            display:none;
        }
        .header {
            position:relative;
            height:36px;
            line-height:36px;
            border-bottom: 1px solid #ccc;
        }
        h3{
            margin: 0;
            padding-left: 10px;
            font-size: 16px;
        }
        .close{
            position:absolute;
            right:10px;
            top: 10px;
            line-height:1;
        }
        .content{
            padding:10px;
        }
        .footer{
            padding:10px;
            border-top:1px solid #eee;
        }
        .footer:after{
            content:'';
            display:block;
            clear:both;
        }
        .btn{
            float:right;
            margin-left:10px;
        }
        .active{
            display:block;
        }
    </style>
</head>
<body>
    <button class="btn-modal">點我！</button>
    <div id="modal-1" class="modal-dialog ">
        <div class="cover"></div>
        <div class="modal-ct">
            <div class="header">
                <h3>我是標(biāo)題3</h3>
                <a class="close" href="#">X</a>
            </div>
            <div class="content">
                <p>我是內(nèi)容1</p>
                <p>我是內(nèi)容2</p>
            </div>
            <div class="footer">
                <a class="btn btn-confirm" href="#">確定</a>
                <a class="btn btn-cancel" href="#">取消</a>
            </div>
        </div>
    </div>
    <script>
        var oBtn = document.querySelector(".btn-modal"),
            oCover = document.querySelector(".cover"),
            oModalCt= document.querySelector("#modal-1 .modal-ct");
        oBtn.addEventListener("click",function(ev){
            ev.stopPropagation();
            addClass(oCover,"active");
            addClass(oModalCt,"active");
        });
        oModalCt.addEventListener("click",function(ev){
            ev.stopPropagation();
            if(hasClass(ev.target,"close") || hasClass(ev.target,"btn-cancel")){
                removeClass(oCover,"active");
                removeClass(oModalCt,"active");
            }
        });
        document.body.addEventListener("click",function(ev){
            removeClass(oCover,"active");
            removeClass(oModalCt,"active");
        });
        function hasClass(ele, cls){
            var reg = new RegExp('\\b'+cls+'\\b','g');
            return reg.test(ele.className);
        };
        function addClass(ele, cls){
            if(!hasClass(ele,cls)){
                ele.className += " "+cls
            }
        };
        function removeClass(ele,cls){
            if(hasClass(ele,cls)){
                ele.className = ele.className.replace(cls,"")
            }
        };
    </script>
</body>
</html>

代碼5-方法2效果預(yù)覽

本文版權(quán)歸本人和饑人谷所有，轉(zhuǎn)載請注明來源。

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Dom、事件

Dom、事件

問題

1.dom對象的innerText和innerHTML有什么區(qū)別？

2.elem.children和elem.childNodes的區(qū)別？

3.查詢元素有幾種常見的方法？

4.如何創(chuàng)建一個元素？如何給元素設(shè)置屬性？

5.元素的添加、刪除。

6.DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別？

7.attachEvent與addEventListener的區(qū)別？

8.解釋IE事件冒泡和DOM2事件傳播機制？

9.如何阻止事件冒泡？如何阻止默認(rèn)事件？

代碼

1.有如下代碼，要求當(dāng)點擊每一個元素li時控制臺展示該元素的文本內(nèi)容。不考慮兼容

2.補全代碼，要求：

3.補全代碼，要求：當(dāng)鼠標(biāo)放置在`li`元素上，會在img-preview里展示當(dāng)前`li`元素的date-img對應(yīng)的圖片。

5.實現(xiàn)下圖的模態(tài)框功能

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Dom、事件

問題

1.dom對象的innerText和innerHTML有什么區(qū)別？

2.elem.children和elem.childNodes的區(qū)別？

3.查詢元素有幾種常見的方法？

4.如何創(chuàng)建一個元素？如何給元素設(shè)置屬性？

5.元素的添加、刪除。

6.DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別？

7.attachEvent與addEventListener的區(qū)別？

8.解釋IE事件冒泡和DOM2事件傳播機制？

9.如何阻止事件冒泡？如何阻止默認(rèn)事件？

代碼

1.有如下代碼，要求當(dāng)點擊每一個元素li時控制臺展示該元素的文本內(nèi)容。不考慮兼容

2.補全代碼，要求：

3.補全代碼，要求：當(dāng)鼠標(biāo)放置在li元素上，會在img-preview里展示當(dāng)前li元素的date-img對應(yīng)的圖片。

5.實現(xiàn)下圖的模態(tài)框功能

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

3.補全代碼，要求：當(dāng)鼠標(biāo)放置在`li`元素上，會在img-preview里展示當(dāng)前`li`元素的date-img對應(yīng)的圖片。