22.Dom、事件

問答

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

  • innerText屬性
    ①innerText是一個可寫屬性鸽嫂，返回元素內(nèi)包含的文本內(nèi)容纵装，在多層次的時候會按照由淺到深的順序拼接其內(nèi)容；
    ②當(dāng)寫入新內(nèi)容時會覆蓋掉其內(nèi)部原來所有內(nèi)容据某，此時輸入的內(nèi)容為文本格式橡娄，即使有HTML標(biāo)簽也會轉(zhuǎn)義成文本;
  • innerHTML屬性
    ①innerHTML屬性返回元素的HTML結(jié)構(gòu)。它是一個可寫的屬性癣籽，在寫入的時候也會自動構(gòu)建DOM挽唉。也就是它不僅獲取文本內(nèi)容還能獲取html標(biāo)簽滤祖。
    ②當(dāng)寫入新內(nèi)容時也會覆蓋掉其內(nèi)部內(nèi)容，當(dāng)有HTML標(biāo)簽時會當(dāng)成HTML標(biāo)簽處理瓶籽。
    例如： 
  <div id="ct">
      <div>hello jirengu<a href="#">百度</a></div>
  </div>

  <script>
     var ct=document.getElementById('ct');
  </script>

打印結(jié)果：


Paste_Image.png

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

elem.children和elem.childNodes都是返回元素的直接子元素。
區(qū)別在于：
elem.children返回的是所有標(biāo)簽的元素節(jié)點(diǎn)的集合塑顺；
elem.childNodes包括當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)的集合汤求。除了HTML元素節(jié)點(diǎn)，該屬性返回的還包括Text節(jié)點(diǎn)和Comment節(jié)點(diǎn)严拒。其中文本節(jié)點(diǎn)包括：空格扬绪、換行符和制表符等。

<div id="parent">
        <div class="child">
            <a >百度鏈接</a>
        </div>
        <div>fasdfasdf</div>
        <div>fasdfasdf</div>
        <div>fasdfasdf</div>
</div>

<script>
        var elem=document.getElementById("parent");
</script>
Paste_Image.png

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

常見的方法：
getElementById()挤牛、getElementsByClassName()、getElementsByTagName()巧骚、getElementsByName()赊颠、querySelector()格二、querySelectorAll()

①getElementById()返回匹配指定ID屬性的元素節(jié)點(diǎn)劈彪。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null顶猜。注意：如果有幾個相同id名沧奴，只返回第一個。

<div id="ct">
        <div class="child">hello</div>
</div>
<div id="ct">world!</div>

<script>
        var ct=document.getElementById('ct');
</script>
Paste_Image.png

②getElementsByClassName()方法返回一個類似數(shù)組的對象（HTMLCollection類型的對象）长窄，包括了所有class名字符合指定條件的元素滔吠，元素的變化實(shí)時反映在返回結(jié)果中。
這個方法不僅可以在document對象上調(diào)用挠日，也可以在任何元素節(jié)點(diǎn)上調(diào)用疮绷。
注意：這個方法的參數(shù)可以是多個空格分隔的class名字，返回同時具有這些節(jié)點(diǎn)的元素嚣潜。

    <div id="ct">
        <div class="child">hello</div>
        <p class="child">好好學(xué)習(xí)冬骚，天天向上<span class="child">學(xué)習(xí)是一種習(xí)慣</span><a href="#" class="child">baidu</a></p>
        <p class="sibling">進(jìn)度太慢，心里很著急</p>
    </div>
    <div class="sibling neighbor">fasdfa</div>

    <script>
            document.getElementsByClassName('child');
            document.getElementsByClassName("sibling");
            document.getElementsByClassName('sibling neighbor')
            var ct = document.getElementById('ct');
                ct.getElementsByClassName('sibling');
    </script>
Paste_Image.png

③getElementsByTagName()方法返回所有指定標(biāo)簽的元素懂算。返回值是一個HTMLCollection對象(類似數(shù)組),任何元素的變化會實(shí)時反映在返回結(jié)果中只冻。
這個方法不僅可以在document對象上調(diào)用，也可以在任何元素節(jié)點(diǎn)上調(diào)用计技。

   <div id="ct">
        <div class="child">hello</div>
        <p class="child">好好學(xué)習(xí)喜德，天天向上<span class="child">學(xué)習(xí)是一種習(xí)慣</span><a href="#" class="child">baidu</a></p>
        <p class="sibling">進(jìn)度太慢，心里很著急</p>
    </div>
    <div class="sibling neighbor">fasdfa</div>

    <script>
            document.getElementsByTagName('p');
    </script>
Paste_Image.png

④getElementsByName方法用于選擇擁有name屬性的HTML元素垮媒，比如form舍悯、img航棱、frame、embed和object萌衬，返回一個NodeList格式的對象丧诺，不會實(shí)時反映元素的變化。

    <div id="ct">
        <div class="child">hello</div>
        <p class="child">好好學(xué)習(xí)奄薇，天天向上<span class="child">學(xué)習(xí)是一種習(xí)慣</span><a href="#" class="child">baidu</a></p>
        <p class="sibling">進(jìn)度太慢驳阎，心里很著急</p>
    </div>
    <div class="sibling neighbor">fasdfa</div>
    <form name="submit">
        <input type="text" name="性別">
    </form>

    <script>
            document.getElementsByName('submit');
    </script>
Paste_Image.png

⑤querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點(diǎn)。如果有多個節(jié)點(diǎn)滿足匹配條件馁蒂，則返回第一個匹配的節(jié)點(diǎn)呵晚。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null沫屡。

    <div id="ct">
        <div class="child">hello</div>
        <p class="child">好好學(xué)習(xí)饵隙，天天向上<span class="child">學(xué)習(xí)是一種習(xí)慣</span><a href="#" class="child">baidu</a></p>
        <p class="sibling">進(jìn)度太慢，心里很著急</p>
    </div>
    <div class="sibling neighbor">fasdfa</div>
    <form name="submit">
        <input type="text" name="性別">
    </form>

    <script>
        document.querySelector('#ct');
        document.querySelector('.child');
        document.querySelector('form[name]');
    </script>
Paste_Image.png

⑥querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)沮脖，返回的是NodeList類型的對象金矛。NodeList對象不是動態(tài)集合，所以元素節(jié)點(diǎn)的變化無法實(shí)時反映在返回結(jié)果中勺届。


Paste_Image.png

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

①創(chuàng)建一個元素可以用createElement()方法：

var newDiv = document.createElement("div");
var a = document.creatElement("a");

②給元素設(shè)置屬性可以用setAttribute()方法：

//element.setAttribute("屬性名"," 值')
var p = document.querySelector('p');
p.setAttribute('class','text');

③createTextNode()方法用來生成文本節(jié)點(diǎn)免姿，參數(shù)為所要生成的文本節(jié)點(diǎn)的內(nèi)容饼酿。

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");

5.元素的添加、刪除胚膊？

添加元素的方法有：
①appendChild()是在調(diào)用該方法的元素內(nèi)添加新元素故俐。新元素是作為子元素被添加的，且是添加在元素內(nèi)最后的位置紊婉。

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);

②insertBefore()也是在調(diào)用該方法的元素內(nèi)添加新元素药版。但該方法接收兩個參數(shù)，一個是被添加的元素喻犁，另一個是被“替位”的子元素槽片。新元素會插入在舊子元素的位置之前。

target.insertBefore(newChild,existingChild)
//newChild作為target的子節(jié)點(diǎn)插入到existingChild子節(jié)點(diǎn)之前

刪除元素方法有：
removeChild()能刪除指定的元素

parentNode.removeChild(childNode);

替換元素方法有：
replaceChild()接受兩個參數(shù)：要插入的元素和要替換的元素

var btn1 = document.getElementById("btn1");
var btn3 = document.createElement("button");
btn3.id = "btn3";btn3.innerText = "新按鈕";
c1.replaceChild(btn3, btn1)株汉；

舉例說明：

    <div id="ct">
        <div class="red">紅色1</div>
    </div>

    <script>
        //這里是末尾添加appendchild
        var ct = document.getElementById('ct');
        var blue = document.createElement('div');
        blue.className="blue";
        blue.innerText="藍(lán)色2";
        ct.appendChild(blue);

        //這里是插入insertBefore
        var red = document.getElementsByClassName('red')[0];
        /*注意得到的class是數(shù)組筐乳，要轉(zhuǎn)換成對象*/
        var yellow = document.createElement('div');
        yellow.className="yellow";
        yellow.innerText="黃色3";
        ct.insertBefore(yellow,red);

        //這里是刪除removeChild
        ct.removeChild(red);

        //這里面是替換replaceChild
        var green = document.createElement('div');
        green.className="green";
        green.innerText="綠色4";
        ct.replaceChild(green,yellow);

    </script>

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

①DOM0級事件就是將一個函數(shù)賦值給一個事件處理程序?qū)傩浴?/strong>
②它的一個事件處理程序只能對應(yīng)一個事件處理程序乔妈，也就是如果對同一事件,后面的處理程序會覆蓋前面的.蝙云。

方法一：
<a href="#" id="test" onclick="console.log(1);console.log(2);">
   <button type="button">點(diǎn)擊我</button>
</a>

方法二：
<script>
    var a = document.getElementById('test');            
    a.onclick = function(){
       console.log('3');
    } 
               
    a.onclick = function(){
         console.log('4');
    }
</script>
刪除DOM0事件處理程序，只要將對應(yīng)事件屬性設(shè)為null即可,a.onclick = null;

//方法一是把onclick寫在元素的標(biāo)簽內(nèi)的,點(diǎn)擊按鈕路召，console中會打印出1和2勃刨。方法二是先獲取元素波材，再綁定事件的,注意此處第二個onclick會覆蓋第一個onclick的事件處理程序，同時也會覆蓋行內(nèi)的onclick身隐。因此點(diǎn)擊按鈕廷区，只會打印出4。

①** DOM2級事件處理方式指定了添加事件處理程序和刪除事件處理程序的方法贾铝，addEventListener和removeEventListener**隙轻。
②它的一個事件可以添加多個事件處理程序（可以寫多個函數(shù)），而不會被后面的所覆蓋垢揩，同時也不會覆蓋DOM0級事件玖绿。
③它可以選擇在捕獲階段還是冒泡階段處理程序。
④IE9之前不支持DOM2級事件叁巨，而DOM0則跨瀏覽器且無兼容問題斑匪；

 // addEventListener(eventName,func,isPuhuo);  
 // removeEventListener(eventName,func,isPuhuo);

<a href="#" id="test" onclick="console.log(1);console.log(2);"> 
    <button   type="button">點(diǎn)擊我</button></a>
<script>
    a.addEventListener('click',function(){
         console.log('我是DOM2級事件1');
    });
    a.addEventListener('click',function(){
         console.log('我是DOM2級事件2');
    });
</script>
//輸出的結(jié)果是： 1, 2 ,我是DOM2級事件1, 我是DOM2級事件2
```
**所有的DOM節(jié)點(diǎn)都包含這兩個方法（demo0和domo2），并且接受3個參數(shù)：** 
1.事件類型(例如click锋勺、mouseover等) 
2.事件處理方法(可寫匿名函數(shù)蚀瘸，也可寫有名函數(shù)) 
3.布爾參數(shù)，如果是true表示在捕獲階段調(diào)用事件處理程序庶橱，如果是false贮勃，則是在事件冒泡階段處理(默認(rèn)為false，即為在冒泡階段處理) 

**舉例說明：**
```
<a href="#" id="test" onclick="console.log(1);console.log(2);">
   <button type="button">點(diǎn)擊我</button>
</a>

<script>
    a.onclick = function(){
       console.log('3'); //會覆蓋標(biāo)簽內(nèi)的DOM0級事件
    };

    var b = function(){
       console.log('我是DOM2級事件b');
    };

   var c = function(){
       console.log('我是DOM2級事件c');
   };

   a.addEventListener('click',b,false);
   a.addEventListener('click',c,true); //在捕獲階段就執(zhí)行了悬包，因此最早被執(zhí)行
</script>
//輸出的結(jié)果是：我是DOM2級事件c ,3, 我是DOM2級事件b 
```

### 7.attachEvent與addEventListener的區(qū)別衙猪？
①**參數(shù)個數(shù)不相同**，addEventListener有三個參數(shù)布近，attachEvent只有兩個，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段丝格，addEventListener第三個參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設(shè)置為冒泡階段）
②**第一個參數(shù)意義不同**撑瞧，addEventListener第一個參數(shù)是事件類型（比如click，load）显蝌，而attachEvent第一個參數(shù)指明的是事件處理函數(shù)名稱（onclick预伺，onload）
③**事件處理程序的作用域不相同**，addEventListener的作用域是元素本身曼尊，this是指的觸發(fā)元素酬诀，而attachEvent事件處理程序會在全局變量內(nèi)運(yùn)行，this是window
④**兩者為一個事件添加多個事件處理程序時骆撇，執(zhí)行順序不同：**attachEvent()添加多個事件處理程序時順序無規(guī)律(添加的方法少的時候大多是按添加順序的反順序執(zhí)行的瞒御，但是添加的多了就無規(guī)律了)；而addEventListener()添加多個事件處理程序時是按添加的先后順序執(zhí)行
④**支持的瀏覽器不同：**addEventListener()是W3C標(biāo)準(zhǔn)神郊，支持Chrome肴裙、firefox等主流瀏覽器趾唱。attachEvent()非W3C標(biāo)準(zhǔn)，且只支持IE瀏覽器蜻懦，別的瀏覽器不支持甜癞。 
```
//判斷瀏覽器是否有該方法：
var btn = getElementById('btn');
if(btn.addEventListener){...} //若有該方法，則會執(zhí)行函數(shù)內(nèi)語句宛乃；若無該方法悠咱，則不執(zhí)行
```

### 8.解釋IE事件冒泡和DOM2事件傳播機(jī)制？
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2438058-6e20e5c99793fa2e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
**IE事件冒泡：**事件開始時由最具體的元素（文檔中嵌套層次最深的那個節(jié)點(diǎn)）接收征炼，然后逐級向上傳播到較為不具體的節(jié)點(diǎn)（文檔）
**所有瀏覽器都支持事件冒泡乔煞，IE只支持事件冒泡，不支持事件捕獲柒室。**

**DOM2事件傳播機(jī)制：**
DOM2模型中渡贾，事件的傳播分為三個階段： 
1.事件捕獲(capturing phase).事件被從document一直向下傳播到目標(biāo)元素，在這過程中雄右，依次檢查經(jīng)過的節(jié)點(diǎn)是否注冊了該事件的監(jiān)聽函數(shù)(此處要求addEventListener()第三個參數(shù)為true),若有則執(zhí)行空骚。
2.事件處理(target phase).事件到達(dá)目標(biāo)元素，執(zhí)行目標(biāo)元素的事件處理函數(shù)擂仍。 
3.事件冒泡(bubbling phase).事件從目標(biāo)元素上升一直到達(dá)document囤屹，同樣依次檢查經(jīng)過的節(jié)點(diǎn)是否注冊了該事件的監(jiān)聽函數(shù)(要求addEventListener()的第三個參數(shù)為空或者false),若有則執(zhí)行。
注意逢渔，所有的事件都會經(jīng)歷事件捕獲階段肋坚，但是只有部分事件會經(jīng)歷事件冒泡，例如submit就不會被事件冒泡肃廓。

### 9.如何阻止事件冒泡智厌？ 如何阻止默認(rèn)事件？
IE中的事件對象是window.event ;其他瀏覽器中必須通過參數(shù)把event傳過來盲赊，比如通過函數(shù)的參數(shù)傳遞event對象铣鹏。
**注意：**event == window.event,所有對象都是window對象的屬性，所以不加window瀏覽器都能認(rèn)出來哀蘑。

**阻止事件冒泡：**
**IE瀏覽器：**將cancelBubble屬性設(shè)為true可取消冒泡（默認(rèn)為false）
**其他主流瀏覽器：**使用stopPropagation()方法可取消事件冒泡,使用event對象在處理事件函數(shù)中調(diào)用
```
//方法一
function stopPropagation(e){
     var e = window.event||e;
     if(document.all){    //這里判斷是否是IE瀏覽器
                e.cancleBubble = true;
     }else{
                e.stopPropagation();
      }
}

//方法二
function stopBubble(e){
       if(e && e.stopPropagation){ 
                e.stopPropagation();
       }else{
             window.event.cancelBubble = true;
       }
}
```
**阻止默認(rèn)事件：**
**IE瀏覽器：**將returnValue屬性值設(shè)為false可取消事件的默認(rèn)行為（默認(rèn)為true）诚卸，event對象在函數(shù)中調(diào)用；
**其他主流瀏覽器：**使用preventDefault()方法可取消事件的默認(rèn)行為
例如```<a>```標(biāo)簽如果有href屬性绘迁，點(diǎn)擊則會自動跳轉(zhuǎn)合溺。如果取消該事件的默認(rèn)行為，則不會進(jìn)行跳轉(zhuǎn)
注意缀台，使用preventDefault的前提是：cancelable屬性為true棠赛。
```
//方法一
function preventDefaultAction(e){
     var e = window.event||event;
     if(document.all){
             e.returnValue = false;
     }else{
             e.preventDefault();
     }
}

//方法二 
function stopPreventDafaultAction(e){
     if(e && e.preventDeafult){
              e.preventDeafult();
     }else{
             window.event.returnValue = false;
    }
}
```
**舉例說明：**
```
    <div id="ct">
        <a class="btn" >百度</a>
    </div>
    
    //DOM事件對象
    <script>
        var ct=document.querySelector('#ct');
        var btn=document.querySelector('.btn');

        btn.addEventListener('click',function(event){
            console.log('事件1',event);
            event.preventDefault(); //取消事件默認(rèn)行為
            event.stopPropagation(); //取消事件冒泡
        });
        ct.addEventListener('click',function(){
            console.log('事件2',event)
            event.preventDefault();
        });


        //IE事件對象
        btn.attachEvent('onclick',function(){
            console.log("事件3",event);
            event.returnValue=false;//取消事件默認(rèn)行為
            event.cancelBubble=true;//取消事件冒泡
        });
        ct.attachEvent('onclick',function(){
            console.log("事件4",event);
        });
    </script>
```
**老師我有一個問題就是上面的例子DOM事件對象中ct的event不是參數(shù),但是直接寫到事件處理函數(shù)里面也可以打印出來事件對象，跟視頻上講的和網(wǎng)上查的不一樣?**

****
## 代碼部分
### 1.有如下代碼，要求當(dāng)點(diǎn)擊每一個元素li時控制臺展示該元素的文本內(nèi)容恭朗。不考慮兼容
```
<ul class="ct"> 
    <li>這里是</li> 
    <li>杭州</li> 
    <li>西湖</li>
</ul>
<script>
    //todo ...
</script>
```
方法1：事件代理
```
    <ul class="ct">
        <li>這里是</li>
        <li>杭州</li>
        <li>西湖</li>
    </ul>
    
    <script>
        var ct=document.querySelector('.ct');
        ct.addEventListener('click',function(e){
            console.log(e.target.innerHTML);
        });
    </script>
```
[demo](http://js.jirengu.com/gemiyotulo/1/edit?html,js,console,output)

方法2：直接綁定在元素上屏镊，用遍歷的方法
```
      <ul class="ct">
         <li>這里是</li>
         <li>杭州</li>
         <li>西湖</li>
      </ul>
    
    <script>
        var ct=document.querySelectorAll('li');
        for(var i=0;i<ct.length;i++){
            ct[i].addEventListener('click',function(){
                console.log(this.innerHTML);
            });
        };
        
    </script>
```
[demo](http://js.jirengu.com/gemiyotulo/1/edit?html,js,console,output)

### 2.補(bǔ)全代碼，要求：
　1. 當(dāng)點(diǎn)擊按鈕```開頭添加時```在```<li>這里是</li>```元素前添加一個新元素痰腮，                                                                                                                   內(nèi)容為用戶輸入的非空字符串而芥；當(dāng)點(diǎn)擊``結(jié)尾添加時``在```<li>前端6班</li>```后添加用戶輸入的非空字符串.
　2.當(dāng)點(diǎn)擊每一個元素```li```時控制臺展示該元素的文本內(nèi)容。
```
<ul class="ct">
    <li>這里是</li>
    <li>杭州</li>
    <li>西湖</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>
```
```
    <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 ct=document.getElementsByClassName('ct')[0],
            start=document.getElementById('btn-add-start'),
            end=document.getElementById('btn-add-end');

        //這里是事件代理使新添加的節(jié)點(diǎn)打印出來
        ct.addEventListener('click',function(e){
                console.log(e.target.innerText)
        })

        start.addEventListener('click',function(){
            //注意這里要點(diǎn)擊下去之后才得到輸入內(nèi)容膀值，不能寫在外面
            var content=document.getElementsByClassName('ipt-add-content')[0].value;
            if(/\S+/.test(content)){
                var newLi=document.createElement('li');
                newLi.innerText=content;
                ct.insertBefore(newLi,ct.firstChild);
            }else{
                alert('請輸入非空字符');
            }
        });

        end.addEventListener('click',function(){
            var content=document.getElementsByClassName('ipt-add-content')[0].value;
            if(/\S+/.test(content)){
                var newLi=document.createElement('li');
                newLi.innerText=content;
                ct.appendChild(newLi);
            }else{
                alert('請輸入非空字符');
            }
        });

    </script>
```
[demo](http://js.jirengu.com/gemiyotulo/1/edit?html,js,console,output)

### 3.補(bǔ)全代碼棍丐，要求：當(dāng)鼠標(biāo)放置在`i`元素上，會在```img-preview```里展示當(dāng)前```li```元素的```data-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>
```
```
//方法一：用appendChild,注意需要用innerText事先清空preview內(nèi)的內(nèi)容
    <ul class="ct">
        <li data-img="http://pic.58pic.com/58pic/13/72/07/55Z58PICKka_1024.jpg">鼠標(biāo)放置查看圖片1</li>
        <li data-img="http://img3.3lian.com/2013/s2/37/d/28.jpg">鼠標(biāo)放置查看圖片2</li>
        <li data-img="http://image.cnsc8.com/tupian_201410/Big_Pic/lXrknEGPnt.jpg">鼠標(biāo)放置查看圖片3</li>
    </ul>
    <div class="img-preview"></div>
    

    <script>
        var ct=document.querySelector('.ct');
        var pre=document.querySelector('.img-preview');
        ct.addEventListener('mouseover',function(event){
            var newPic=document.createElement('img');
            pre.innerText='';  //清空preview內(nèi)的內(nèi)容
            newPic.setAttribute('src',event.target.getAttribute('data-img'))
            pre.appendChild(newPic);
        });
    </script>

```
[demo](http://js.jirengu.com/gemiyotulo/1/edit?html,js,output)

```
//方法二歌逢、用innerHTML，注意雙引號翘狱、單引號的用法
    <ul class="ct">
        <li data-img="http://pic.58pic.com/58pic/13/72/07/55Z58PICKka_1024.jpg">鼠標(biāo)放置查看圖片1</li>
        <li data-img="http://img3.3lian.com/2013/s2/37/d/28.jpg">鼠標(biāo)放置查看圖片2</li>
        <li data-img="http://image.cnsc8.com/tupian_201410/Big_Pic/lXrknEGPnt.jpg">鼠標(biāo)放置查看圖片3</li>
    </ul>
    <div class="img-preview"></div>
    
    <script>
        var ct=document.querySelector('.ct');
        var pre=document.querySelector('.img-preview');

        var hover=function(event){
            pre.innerHTML='<img src=" '+event.target.getAttribute('data-img')+' ">'

        }
        ct.addEventListener('mouseover',hover);
    </script>
```
[demo](http://js.jirengu.com/caqamoqeyi/1/edit?html,js,output)

### 4.實(shí)現(xiàn)如下圖Tab切換的功能
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2438058-69d3816693f338b5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>tab 切換</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    *{
        box-sizing:border-box;
    }
    body,ul,li{
        margin:0px;
        padding:0px;
        
    }
    ul:after{
        content: "";
        display: block;
        clear: both;
    }
    li{
        border:1px solid;
        list-style: none;
        width: 200px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        float: left;
        cursor: pointer;
    }
    div{
        border: 1px solid;
        width: 600px;
        height: 300px;
        display: none;
        padding: 20px;
    }

    .active1{
        background:#EEE;
    }
    .active2{
        display: block;
    }

</style>

</head>
<body>
    <ul id="tab">
        <li class="active1">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
    </ul>
    <div class="content active2">內(nèi)容1</div>
    <div class="content">內(nèi)容2</div>
    <div class="content">內(nèi)容3</div>

    <script>
        function hasClass(ele,cls){
            var reg=new RegExp('\\b'+cls+'\\b');
            return !!ele.className.match(reg);
        };

        function addClass(ele,cls){
            if(hasClass(ele,cls)){
                return
            }else{
                
                return ele.className=ele.className+' '+cls;
            }
        };

        function removeClass(ele,cls){
            if(hasClass(ele,cls)){
                var reg=new RegExp('\\b'+cls+'\\b');
                return ele.className=ele.className.replace(reg,'')
            }else{
                return;
            }
        };
        //上面的將原有的秘案，添加，刪除的三個函數(shù)進(jìn)行封裝

        function indexOf(ele){
            var tab=document.querySelector('#tab');
            for(var i=0;i<tab.children.length;i++){
                if(ele.target==tab.children[i]){
                    return i;
                }
            }
        };
        //這里是獲取數(shù)組里面點(diǎn)擊li的下標(biāo)

        function toggleContent(ele){
            var index=indexOf(ele);
            //這是找出點(diǎn)擊li的下標(biāo)
            var content=document.querySelectorAll('.content');
            for(var i=0;i<content.length;i++){
                removeClass(content[i],'active2');
            }
            //通過遍歷content數(shù)組潦匈，刪除里面的active2
            addClass(content[index],'active2')
            //這是給點(diǎn)擊li相對應(yīng)的content添加active2
        }
        //這里是切換內(nèi)容阱高，獲取點(diǎn)擊li的下標(biāo)，通過下標(biāo)找出相對應(yīng)的內(nèi)容

        var tab=document.querySelector('#tab');
        function toggleTab(ele){
            var children=tab.children;
            if(hasClass(ele.target,'active1')){
                return;
            }else{
                for(var i=0;i<children.length;i++){
                    removeClass(children[i],'active1');
                }
                addClass(ele.target,'active1');
            }
        }
        //這里是切換tab茬缩，跟上面差不多

        tab.addEventListener('click',toggleTab);
        tab.addEventListener('click',toggleContent);
     //這里用了事件代理tab
```
[demo](http://js.jirengu.com/wujaluboka/1/edit?html,css,js,output)

### 5.實(shí)現(xiàn)下圖的模態(tài)框功能
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2438058-1470ef12bc4cdb4e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>modal模態(tài)框 原生</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    *{
        margin:0px;
        padding: 0px;
    }
    a{
        text-decoration: none;
        color:black;
    }
    .head{
        border-bottom:1px solid #AAA;
        padding:14px;
    }
    .head p{
        float: left;

    }
    .head a{
        float: right;
    }
    .head:after{
        content:"";
        display: block;
        clear:both;
    }
    .hide{
        display: none;
    }
    .show{
        display: block;
    }
    .btn{
        position: absolute;
        left: 50%;
        margin-left: -270px;
        top: 9px;
    }
    .cover{
        width: 600px;
        height: 500px;
        background-color: #000;
        opacity: 0.5;
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -300px;
    }
    #modal{
        border: 1px solid #CCC;
        width: 300px;
        height: 180px;
        background-color: #FFF;
        border-radius: 4px;
        position: absolute;
        top:160px;
        left: 50%;
        margin-left: -150px;
    }

    .content{
        padding: 15px;
        line-height: 2;
    }
    .footer{
        float:right;
        padding: 12px;
    }
</style>

</head>
<body>
    <div class="btn">
        <button id="btnChild">點(diǎn)我</button>
    </div>
    <div class="cover hide"></div>
    <div id="modal" class="hide">
        <div class="head">
            <p>我是標(biāo)題</p>
            <a class="close" href="#">X</a>
        </div>
        <div class="content">
            <p>我是內(nèi)容一</p>
            <p>我是內(nèi)容二</p>
        </div>
        <div class="footer">
            <button class="btn-cancel">取消</button>
            <button class="btn-confirm">確定</button>
        </div>
    </div>
        

    <script>
        var btnChild=document.querySelector('#btnChild');
        var modal=document.querySelector('#modal');
        var cover=document.querySelector('.cover');
        var close=document.querySelector('.close');
        var btnCancel=document.querySelector('.btn-cancel');
        var btnConfirm=document.querySelector('.btn-confirm');

        function hasClass(ele,cls){
            var reg=new RegExp('\\b'+cls+'\\b','g');
            return !!ele.className.match(reg);

        }

        function addClass(ele,cls){
            if(hasClass(ele,cls)){
                return;
            }else{
                ele.className=ele.className+" "+cls;
            } 
        }

        function removeClass(ele,cls){
            if(hasClass(ele,cls)){
                var reg=new RegExp('\\b'+cls+'\\b','g');
                return ele.className=ele.className.replace(reg,'');
            }
        }

        function showModal(ele){
            removeClass(modal,'hide');
            removeClass(cover,'hide');
            addClass(modal,'show');
            addClass(cover,'show');
        }

        function hideModal(ele){
            removeClass(modal,'show');
            removeClass(cover,'show');
            addClass(modal,'hide');
            addClass(cover,'hide');
        }

        btnChild.addEventListener('click',showModal);
        cover.addEventListener('click',hideModal);
        close.addEventListener('click',hideModal);
        btnCancel.addEventListener('click',hideModal);
        btnConfirm.addEventListener('click',hideModal);
        
    </script>
</body>
</html>

```
[demo](http://js.jirengu.com/wejirixeko/1/edit?html,css,js,output)
****
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末赤惊，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子凰锡，更是在濱河造成了極大的恐慌未舟，老刑警劉巖，帶你破解...
    沈念sama閱讀 216,496評論 6贊 501
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件掂为，死亡現(xiàn)場離奇詭異裕膀，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)菩掏，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門魂角，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人智绸，你說我怎么就攤上這事》梅蓿” “怎么了瞧栗？”我有些...
    開封第一講書人閱讀 162,632評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長海铆。 經(jīng)常有香客問我迹恐，道長，這世上最難降的妖魔是什么卧斟？ 我笑而不...
    開封第一講書人閱讀 58,180評論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任殴边，我火速辦了婚禮憎茂，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘锤岸。我一直安慰自己竖幔，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評論 6贊 388
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布是偷。 她就那樣靜靜地躺著拳氢，像睡著了一般。 火紅的嫁衣襯著肌膚如雪蛋铆。 梳的紋絲不亂的頭發(fā)上馋评，一...
    開封第一講書人閱讀 51,165評論 1贊 299
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音刺啦，去河邊找鬼留特。 笑死，一個胖子當(dāng)著我的面吹牛玛瘸，可吹牛的內(nèi)容都是我干的蜕青。 我是一名探鬼主播，決...
    沈念sama閱讀 40,052評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼捧韵，長吁一口氣：“原來是場噩夢啊……” “哼市咆！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起再来，我...
    開封第一講書人閱讀 38,910評論 0贊 274
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤蒙兰，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后芒篷，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體搜变，經(jīng)...
    沈念sama閱讀 45,324評論 1贊 310
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評論 2贊 332
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年针炉，在試婚紗的時候發(fā)現(xiàn)自己被綠了挠他。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,711評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡篡帕，死狀恐怖殖侵，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情镰烧，我是刑警寧澤拢军，帶...
    沈念sama閱讀 35,424評論 5贊 343
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站怔鳖，受9級特大地震影響茉唉，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評論 3贊 326
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一度陆、第九天 我趴在偏房一處隱蔽的房頂上張望艾凯。 院中可真熱鬧，春花似錦懂傀、人聲如沸趾诗。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0贊 22
  • 一樁弒父案鸿竖，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽沧竟。三九已至，卻和暖如春缚忧，著一層夾襖步出監(jiān)牢的瞬間悟泵，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工闪水， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留糕非，地道東北人。 一個月前我還...
    沈念sama閱讀 47,722評論 2贊 368
  • 代替公主和親
    正文 我出身青樓球榆，卻偏偏與公主長得像朽肥，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子持钉，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評論 2贊 353

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