「JavaScript從入門到精通」第十三課 DOM操作高級應用-01

篇文章開始我們介紹一些DOM的高級應用。

表格應用-1：添加刪除

這里我們來介紹一些關于表格的應用。大家應該都很了解HTML的表格table標簽。實際上，由于JS誕生的年代正是表格風行使用的時候，因此JS內有很多對表格的便捷操作。

例如，我們在選取表格tbody的時候，自然可以使用getElementsByTagName('tbody')的方法，也可以直接用tbodies代替，同樣的選取表格所有行的方法為：rows（相當于getElementByTageName('tr')），選取表格所有列的方法為：cells（相當于getElementsByTagName('td')）。此外還有tFoot和tHead屬性，用于選取表格的表頭和表尾。和前面不同的是，一個表格可以有多個tBody、行和列，因此他們獲取的是一個數組，但表格的表頭和表尾只能有一個，因此它們獲取的不是數組而是單個的元素。

現在我們利用這些方法實現表格變色的功能。

<html>
<head>
<meta charset="utf-8" />
<title>無標題文檔</title>
<script>
window.onload = function() { var oTab = document.getElementById('tab1'); var oldColor = ''; for (var i = 0; i < oTab.tBodies[0].rows.length; i++) { oTab.tBodies[0].rows[i].onmouseover = function() { oldColor = this.style.background; this.style.background = 'green'; }; oTab.tBodies[0].rows[i].onmouseout = function() { this.style.background = oldColor; }; if (i % 2) { oTab.tBodies[0].rows[i].style.background = ''; } else { oTab.tBodies[0].rows[i].style.background = '#CCC'; } }};
</script>
</head>
<body>
<table id="tab1" border="1" width="500">
<thead>
<tr><td>ID</td><td>姓名</td><td>年齡</td></tr>
</thead>
<tbody>
<tr><td>1</td><td>Blue</td><td>27</td></tr>
<tr><td>2</td><td>張三</td><td>23</td></tr>
<tr><td>3</td><td>李四</td><td>28</td></tr>
<tr><td>4</td><td>王五</td><td>25</td></tr>
<tr><td>5</td><td>張偉</td><td>24</td></tr>
</tbody>
</table>
</body>
</html>

效果如下：

這里需要注意的是，選取表格行或列時，如果有表頭或表尾，一定要在前面加上tbodies，如上面代碼的oTab.tbodies[0].rows，如果不添加tbodies，則會對整個表格進行操作（包括表頭和表尾）。

DOM應用到表格

通過DOM，我們可以對表格進行添加和刪除操作。

<html>
<head>
<meta charset="utf-8" />
<title>無標題文檔</title>
<script>
window.onload = function()
{
var oTab = document.getElementById('tab1');
var oBtn = document.getElementById('btn1');
var oName = document.getElementById('name');
var oAge = document.getElementById('age');
oBtn.onclick = function()
{
var oTr = document.createElement('tr');
var oTd = document.createElement('td');
oTd.innerHTML = oTab.tBodies[0].rows.length + 1; //?
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = oName.value;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = oAge.value
oTr.appendChild(oTd);
oTab.tBodies[0].appendChild(oTr);
};
};
</script>
</head>
<body>
姓名：
<input id="name" type="text" /> 年齡：
<input id="age" type="text" />
<input id="btn1" type="button" value="添加" />
<table id="tab1" border="1" width="500">
<thead>
<tr><td>ID</td><td>姓名</td><td>年齡</td></tr>
</thead>
<tbody>
<tr><td>1</td><td>Blue</td><td>27</td></tr>
<tr><td>2</td><td>張三</td><td>23</td></tr>
<tr><td>3</td><td>李四</td><td>28</td></tr>
<tr><td>4</td><td>王五</td><td>25</td></tr>
<tr><td>5</td><td>張偉</td><td>24</td></tr>
</tbody>
</table>
</body>
</html>

當我們點擊添加時，輸入的姓名，年齡就可以添加到表格下方。同樣的，我們利用DOM對表格進行刪除操作。

<html>
<head>
<meta charset="utf-8" />
<title>無標題文檔</title>
<script>
window.onload = function() { var oTab = document.getElementById('tab1'); var oBtn = document.getElementById('btn1'); var oName = document.getElementById('name'); var oAge = document.getElementById('age'); oBtn.onclick = function() { var oTr = document.createElement('tr'); var oTd = document.createElement('td'); oTd.innerHTML = oTab.tBodies[0].rows.length + 1; //? oTr.appendChild(oTd); var oTd = document.createElement('td'); oTd.innerHTML = oName.value; oTr.appendChild(oTd); var oTd = document.createElement('td'); oTd.innerHTML = oAge.value; oTr.appendChild(oTd); var oTd = document.createElement('td'); oTd.innerHTML = '<a href="javascript：;">刪除</a>'; oTr.appendChild(oTd); oTd.getElementsByTagName('a')[0].onclick = function() { oTab.tBodies[0].removeChild(this.parentNode.parentNode); }; oTab.tBodies[0].appendChild(oTr); }; };
</script>
</head>
<body>
姓名：
<input id="name" type="text" /> 年齡：
<input id="age" type="text" />
<input id="btn1" type="button" value="添加" />
<table id="tab1" border="1" width="500">
<thead>
<tr><td>ID</td><td>姓名</td><td>年齡</td></tr>
</thead>
<tbody>
<tr><td>1</td><td>Blue</td><td>27</td></tr>
<tr><td>2</td><td>張三</td><td>23</td></tr>
<tr><td>3</td><td>李四</td><td>28</td></tr>
<tr><td>4</td><td>王五</td><td>25</td></tr>
<tr><td>5</td><td>張偉</td><td>24</td></tr>
</tbody>
</table>
</body>
</html>

效果如下：

注意兩點：

1.我們在設置刪除元素的參數時，因為tr是a標簽的父元素的父元素，所以使用的是this.parentNode.parentNode進行選擇。

2.我們仍然是在tbodie內對元素進行刪除，tbody是tr的父元素，因此刪除tr的代碼也必須由tbody來選中。

可以看到，我們已經可以對添加的行進行刪除操作。但是這里仍然有一個小問題。因為我們是通過行數=ID的形式為ID賦值，如果進行刪除操作后，行數不等于ID，那么可能會出現ID重復的情況。為了避免這種情況，我們用一個變量存儲初始的行數值+1，之后每點擊一次添加，就把這個值賦添加行的id并自增，這樣就不會出現重復的情況了：

window.onload = function()
{
var oTab = document.getElementById('tab1');
var oBtn = document.getElementById('btn1');
var oName = document.getElementById('name');
var oAge = document.getElementById('age');
var id = oTab.tBodies[0].rows.length + 1;
oBtn.onclick = function()
{
var oTr = document.createElement('tr');
var oTd = document.createElement('td');
oTd.innerHTML = id++; //?
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = oName.value;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = oAge.value;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = '<a href="javascript：;">刪除</a>';
oTr.appendChild(oTd);
oTd.getElementsByTagName('a')[0].onclick = function()
{
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
};
oTab.tBodies[0].appendChild(oTr);
};
};

對于已經刪除的行來說，它的ID已經被廢棄，因此不需要再次使用，實際情況中，大部分網站都是采用的這種方式。

表格應用-2：搜索

如果要從表格中尋找我們需要的數據，就需要用到表格搜索功能。在我們上面的表格中，我們想通過搜索名字獲取對應的信息。這個功能的實現也很簡單，通過判斷是否存在某個名字和搜索框內相等即可。

window.onload = function()
{
var oTab = document.getElementById('tab1');
var oTxt = document.getElementById('name');
var oBtn = document.getElementById('btn1');
oBtn.onclick = function()
{
for (var i = 0; i < oTab.tBodies[0].rows.length; i++)
{
if (oTab.tBodies[0].rows[i].cells[1].innerHTML == oTxt.value)
{
oTab.tBodies[0].rows[i].style.background = 'yellow';
}
else
{
oTab.tBodies[0].rows[i].style.background = '';
}
}
};
};

效果如下：

注意這里在將符合內容的行背景變黃的同時將不符合條件的行重新標為白色。

但是這個搜索功能并不完善。首先，目前主流的搜索功能是不區分大小寫的，但JS默認區分大小寫，因此我們搜“blue”的話是將不會有效果。在JS里有一種方法叫toLowerCase，可以把一個英文字符串轉化為全小寫，因此只要我們將比較的兩串字符串全部轉化為小寫進行比較，就可以忽略本身大小寫帶來的區別了。

其次，我們希望我們的程序實現模糊搜索功能，可以不輸入全名就能搜索出結果。在JS里提供了一種search()方法，其作用為在一串字符串中找到另一串字符串并返回字符串位置，沒找到則返回-1：

var str='abcdef';
alert(str.search('de'));

結果為3。因此，我們可以通過search方法來尋找表格中的姓名是否包含我們輸入的文字，如果不等于-1的話則說明包含。

完整代碼如下：

window.onload = function()
{
var oTab = document.getElementById('tab1');
var oTxt = document.getElementById('name');
var oBtn = document.getElementById('btn1');
oBtn.onclick = function()
{
for (var i = 0; i < oTab.tBodies[0].rows.length; i++)
{
var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var sTxt = oTxt.value.toLowerCase();
if (sTab.search(sTxt) != -1)
{
oTab.tBodies[0].rows[i].style.background = 'yellow';
}
else
{
oTab.tBodies[0].rows[i].style.background = '';
}
}
};
};

最后，我們還希望實現一個多關鍵字搜索功能，當我們同時輸入幾個關鍵字時，可以將幾個關鍵字的答案都返回給我們。我們通過空格將關鍵字隔開，然后可以使用JS的split方法。split方法的作用是切分字符串：

var str='abc 123 ert';
var arr=str.split(' ');
alert(arr);

效果如下：

split方法會在字符串中尋找參數字符并用參數字符將字符串切開并返回一個數組。

現在，我們也可以將輸入的字符串用split方法切開成一個數組，再對數組里的元素進行一一判斷檢驗，就可以達成我們的目的了。

window.onload = function()
{
var oTab = document.getElementById('tab1');
var oTxt = document.getElementById('name');
var oBtn = document.getElementById('btn1');
oBtn.onclick = function()
{
for (var i = 0; i < oTab.tBodies[0].rows.length; i++)
{
var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var sTxt = oTxt.value.toLowerCase();
var arr = sTxt.split(' ');
oTab.tBodies[0].rows[i].style.background = '';
for (var j = 0; j < arr.length; j++)
{
if (sTab.search(arr[j]) != -1)
{
oTab.tBodies[0].rows[i].style.background = 'yellow';
}
}
}
};
};

剛才我們做的效果是高亮顯示。如果我們希望我們的程序在搜索后只保留我們需要的行，也就是實現篩選功能，應該怎么做呢？實際上也非常簡單，我們前面做高亮功能時修改的是行元素的background屬性，這里如果我們修改的是元素display屬性，當它符合條件時，將其display屬性設置為block；不需要顯示時，設置為none。這樣就可以做到篩選搜索元素了。

效果如下:

我是石川（Blue），如果你覺得我的公眾號還不錯，請多幫我推薦給你的朋友，多謝了。

石川簡介：前阿里巴巴高級技術經理，現開課吧技術學院院長。精通C/C++、Java、Python、前端開發等多種開發技術，曾參與淘寶網的早期建設和優化，擁有豐富的企業級系統開發經驗，對HTML5移動端互聯網技術及生態體系有深厚的造詣。

天總結的是CSS3的學習內容

一、CSS簡介

CSS3是CSS技術的升級版本，CSS即層疊樣式表(Cascading StyleSheet)。CSS3語言是朝著模塊化發展的，把它分解成小的模塊，并且加入更多新的模塊進來：

二、CSS3的應用

2.1.超級選擇器

CSS選擇器：使用CSS對html頁面中的元素實現一對一，一對多或者多對一的控制：

選擇器
{
    樣式
}

1.屬性選擇器

在CSS3中追加了三個選擇器:[att*=val];[att^=val];[att$=val]–>att表示為屬性，val表示為屬性的屬性值。

[att*=val]:如果元素用att表示的屬性的值中包含val指定的字符，那么該元素使用這個樣式。

[att$=val]:如果元素用att表示的屬性的屬性值的結尾字符用val指定的字符，那么該元素使用這個樣式。

[att^=val]:如果元素用att表示的屬性的屬性值的開頭字符為用val指定的字符，那么該元素使用這個樣式。

注意： /如果純用數字的時候該樣式不會顯示成功，需要用\連接與數字最近的符號注意！只有’-‘的字符需要加’\’/

<head>
    <meta charset="UTF-8">
    <title>css3中的屬性選擇器</title>
    <style>
        /*1.[att*=val] 此時只有id=section1A的div會擁有該樣式*/
        [id*= section1]{
            background-color: blueviolet;
        }
        /*2.[att^=val] 此時只有id=footer的div會擁有該樣式*/
        [id^= f]{
            background-color: blue;
        }
        /*3.[att$=val] 此時只有id=sectionB的div會擁有該樣式*/
         [id$= B]{
            background-color: chartreuse;
        }
        /*注意！*/
        [id$= \-1]{
            background-color: crimson;
        }
    </style>
</head>
<body>
    <h1>CSS3中的屬性選擇器</h1>
    <div id="section1A">section1A</div>
    <div id="sectionB">sectionB</div>
    <div id="section2-1">section2-1</div>
    <div id="footer">footer</div>
</body>

2.結構性偽類選擇器
(1)類選擇器
使用類選擇器把相同的元素定義成不同的樣式，偽類選擇器是已經定義好的不可以隨便起名。

p.right{
    color:red;
}
p.left{
    colot:blue;
}

(2)偽類選擇器—-最常見的偽類選擇器：a（使用順序為：未，已，懸，停）

        a:link{
            color: #ff6600;
        }
        a:visited{
            color: blueviolet;
        }
        a:hover{
            color: aqua;
        }
        /*鼠標點擊時*/
        a:active{
            color: darkblue;
        }

(3)偽元素選擇器
針對于CSS中已經定義好的偽元素使用的選擇器(first-line;first-letter;before;after)。

選擇器:偽元素{
    屬性:值;
}
選擇器.類名:偽元素{
    屬性:值;
}

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取

first-line偽元素選擇器：向某個元素中的第一行文字使用樣式。

first-letter偽類選擇器：向某個元素中的文字的首字母或者第一個文字使用樣式。

before：在某個元素之前插入一些內容。

after：在某個元素之后插入一些內容。

可以使用before和after偽元素在頁面中插入文字，圖像，項目編號等。

插入文字：E:before/after

排除一些不需要插入內容的元素：E:none：before/after

插入圖像

插入項目編號

a.在多個標題前加上編號：counter屬性對項目追加編號

            元素:before{
                content:counter(計數器);
            }
            元素{
                counter-increment:content屬性值中所指定的計數器名稱；
            }

    b.對編號中添加文字
    c.指定編號的樣式
    d.指定編號的種類：list-style-type
    e.編號嵌套，重置編號
        要對哪一個元素進行重置，那么就在該元素的父元素上進行設置reset。
    f.中編號中嵌入大編號

        h2:before{
            content:counter(大編號計數器)'-'conter(中編號計數器);

    g.在字符串兩邊嵌套文字符號:open-quoter&close-quoter

<head>
    <meta charset="UTF-8">
    <title>偽元素選擇器</title>
    <style>
         p:first-line{
            color: blueviolet;
        }
        p:first-letter{
            color: aqua;
        }
        li:before{
            content: "~~~";
            color: #000;
        }
        li:after{
            content: "~~~";
            color: darkred;
        }
    </style>
</head>
<body>
    <h1>CSS中主要有四個偽類選擇器</h1>
    <p>
        CSS中主要有四個偽類選擇器<br />
        first-line偽元素選擇器：向某個元素中的第一行文字使用樣式
    </p>
    <p>
        first-letter偽類選擇器：向某個元素中的文字的首字母或者第一個文字使用樣式
    </p>
    <h4>befor&after</h4>
    <ul>
        <li><a href="first.html">balabala</a></li>
    </ul>   
</body>

(4)結構性偽類選擇器

root選擇器：將樣式綁定到頁面的根元素中。
not選擇器：只對某個結構元素使用樣式，但該元素下面的子結構元素不使用該樣式。
empty選擇器：指定當元素中內容為空白時顯示的樣式。

<head>
    <style>
    /*empty選擇器*/
        :empty{
            background-color: darkviolet;
        }
    </style>
</head>
<body>
    <table border="1" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td></td>
        </tr>
    </table>
 </body>

target選擇器：在用戶點擊了超鏈接并轉到target元素后，對頁面中某個target元素指定樣式。

<head>
    <style>
        /*target選擇器*/
        :target{
            background-color: blanchedalmond;
            color: brown;
        }
    </style>
</head>
<body>
    <h2>target選擇器</h2>
    <a href="#A">A</a>
    <a href="#B">B</a>
    <div id="A">
        <h2>A標題</h2>
        <p>內容</p>
    </div>
    <div id="B">
        <h2>B標題</h2>
        <p>內容</p>
    </div>
</body>

first-child：單獨指定第一個子元素的樣式。

last-child：單獨指定最后一個子元素的樣式。

nth-child：選擇器匹配正數下來的第N個子元素，nth-child(odd)為第奇數個子元素，nth-child(even)為第偶數個子元素。

nth-last-child(n)：匹配倒數數下來第n個子元素。

nth-of-type：正數，當指定元素為標題加內容的時候，如果使用上面的方法會導致真正的指定元素不被成功指定，因此需要使用nth-first-type方法進行指定。

nth-last-type：倒數，同nth-first-type。

循環使用樣式：nth-child(An+B)–A 表示每次循環中共包括幾種樣式，B表示指定的樣式在循環中所處的位置。

only-child：只對一個元素起作用。

<head>
    <meta charset="UTF-8">
    <title>結構性偽類選擇器</title>
    <style>
        /* 選擇器first-child；last-child；nth-child;nth-last-child*/
        li:first-child{
            background-color: darkviolet;
        }
        li:last-child{
            background-color: chartreuse;
        }
        li:nth-child(3){
            background-color: cadetblue;
        }
        li:nth-child(odd){
            background-color: aquamarine;
        }
        li:nth-child(even){
            background-color: cornflowerblue;
        }
        li:nth-last-child(3){
            background-color: darkgrey;
        }
        /*循環*/
        li:nth-child(4n+1){
            background-color: aquamarine;
        }
        li:nth-child(4n+2){
            background-color: indianred;
        }
        /*唯一的*/
        li:only-child{
            background-color: hotpink;
        }
        /*存在的問題*/
        h2:nth-child(2){
            background-color: darkgoldenrod;
        }
        h2:nth-child(odd){
             background-color: darkgoldenrod;
        }
        h2:nth-child(even){
            background-color: darkgoldenrod;
        }
        h2:nth-of-type(odd){
            background-color: chartreuse;
        }
        h2:nth-of-type(even){
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <h1>選擇器first-child；last-child；nth-child;nth-last-child</h1>
    <ul>
        <li>No.1</li><li>No.2</li><li>No.3</li><li>No.4</li>
        <li>No.5</li><li>No.6</li><li>No.7</li><li>No.8</li>
        <li>No.9</li><li>No.10</li>
        <li>No.11</li><li>No.12</li>
    </ul>
    <h1>唯一的</h1>
    <ul>
        <li>唯一,多加一個就沒有啦</li>
    </ul>
    <div id="A">
        <h2>A標題</h2><p>內容</p>
        <h2>B標題</h2><p>內容</p>
    </div>
</body>

3.UI元素狀態偽類選擇器
指定的樣式只有在元素處于某種狀態下才起作用，在默認狀態下不起作用！

選擇器:偽元素{
    屬性:值;
}
選擇器.類名:偽元素{
    屬性:值;
}

first-line偽元素選擇器：向某個元素中的第一行文字使用樣式。

first-letter偽類選擇器：向某個元素中的文字的首字母或者第一個文字使用樣式。

before：在某個元素之前插入一些內容。

after：在某個元素之后插入一些內容。

可以使用before和after偽元素在頁面中插入文字，圖像，項目編號等。

插入文字：E:before/after

排除一些不需要插入內容的元素：E:none：before/after

插入圖像

插入項目編號

a.在多個標題前加上編號：counter屬性對項目追加編號

            元素:before{
                content:counter(計數器);
            }
            元素{
                counter-increment:content屬性值中所指定的計數器名稱；
            }

    b.對編號中添加文字
    c.指定編號的樣式
    d.指定編號的種類：list-style-type
    e.編號嵌套，重置編號
        要對哪一個元素進行重置，那么就在該元素的父元素上進行設置reset。
    f.中編號中嵌入大編號

        h2:before{
            content:counter(大編號計數器)'-'conter(中編號計數器);

       g.在字符串兩邊嵌套文字符號:open-quoter&close-quoter

<head>
    <meta charset="UTF-8">
    <title>偽元素選擇器</title>
    <style>
         p:first-line{
            color: blueviolet;
        }
        p:first-letter{
            color: aqua;
        }
        li:before{
            content: "~~~";
            color: #000;
        }
        li:after{
            content: "~~~";
            color: darkred;
        }
    </style>
</head>
<body>
    <h1>CSS中主要有四個偽類選擇器</h1>
    <p>
        CSS中主要有四個偽類選擇器<br />
        first-line偽元素選擇器：向某個元素中的第一行文字使用樣式
    </p>
    <p>
        first-letter偽類選擇器：向某個元素中的文字的首字母或者第一個文字使用樣式
    </p>
    <h4>befor&after</h4>
    <ul>
        <li><a href="first.html">balabala</a></li>
    </ul>   
</body>

(4)結構性偽類選擇器

root選擇器：將樣式綁定到頁面的根元素中。
not選擇器：只對某個結構元素使用樣式，但該元素下面的子結構元素不使用該樣式。
empty選擇器：指定當元素中內容為空白時顯示的樣式。

<head>
    <style>
    /*empty選擇器*/
        :empty{
            background-color: darkviolet;
        }
    </style>
</head>
<body>
    <table border="1" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td></td>
        </tr>
    </table>
 </body>

target選擇器：在用戶點擊了超鏈接并轉到target元素后，對頁面中某個target元素指定樣式。

<head>
    <style>
        /*target選擇器*/
        :target{
            background-color: blanchedalmond;
            color: brown;
        }
    </style>
</head>
<body>
    <h2>target選擇器</h2>
    <a href="#A">A</a>
    <a href="#B">B</a>
    <div id="A">
        <h2>A標題</h2>
        <p>內容</p>
    </div>
    <div id="B">
        <h2>B標題</h2>
        <p>內容</p>
    </div>
</body>

first-child：單獨指定第一個子元素的樣式。

last-child：單獨指定最后一個子元素的樣式。

nth-child：選擇器匹配正數下來的第N個子元素，nth-child(odd)為第奇數個子元素，nth-child(even)為第偶數個子元素。

nth-last-child(n)：匹配倒數數下來第n個子元素。

nth-of-type：正數，當指定元素為標題加內容的時候，如果使用上面的方法會導致真正的指定元素不被成功指定，因此需要使用nth-first-type方法進行指定。

nth-last-type：倒數，同nth-first-type。

循環使用樣式：nth-child(An+B)–A 表示每次循環中共包括幾種樣式，B表示指定的樣式在循環中所處的位置。

only-child：只對一個元素起作用。

<head>
    <meta charset="UTF-8">
    <title>結構性偽類選擇器</title>
    <style>
        /* 選擇器first-child；last-child；nth-child;nth-last-child*/
        li:first-child{
            background-color: darkviolet;
        }
        li:last-child{
            background-color: chartreuse;
        }
        li:nth-child(3){
            background-color: cadetblue;
        }
        li:nth-child(odd){
            background-color: aquamarine;
        }
        li:nth-child(even){
            background-color: cornflowerblue;
        }
        li:nth-last-child(3){
            background-color: darkgrey;
        }
        /*循環*/
        li:nth-child(4n+1){
            background-color: aquamarine;
        }
        li:nth-child(4n+2){
            background-color: indianred;
        }
        /*唯一的*/
        li:only-child{
            background-color: hotpink;
        }
        /*存在的問題*/
        h2:nth-child(2){
            background-color: darkgoldenrod;
        }
        h2:nth-child(odd){
             background-color: darkgoldenrod;
        }
        h2:nth-child(even){
            background-color: darkgoldenrod;
        }
        h2:nth-of-type(odd){
            background-color: chartreuse;
        }
        h2:nth-of-type(even){
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <h1>選擇器first-child；last-child；nth-child;nth-last-child</h1>
    <ul>
        <li>No.1</li><li>No.2</li><li>No.3</li><li>No.4</li>
        <li>No.5</li><li>No.6</li><li>No.7</li><li>No.8</li>
        <li>No.9</li><li>No.10</li>
        <li>No.11</li><li>No.12</li>
    </ul>
    <h1>唯一的</h1>
    <ul>
        <li>唯一,多加一個就沒有啦</li>
    </ul>
    <div id="A">
        <h2>A標題</h2><p>內容</p>
        <h2>B標題</h2><p>內容</p>
    </div>
</body>

3.UI元素狀態偽類選擇器
指定的樣式只有在元素處于某種狀態下才起作用，在默認狀態下不起作用！

4.兄弟元素選擇器
用來指定位于同一父元素之中的某個元素之后的所有其他某個種類的兄弟元素所使用的樣式。一定要是之后的兄弟元素！

<子元素>~<子元素之后的同級兄弟元素>
    {
        樣式
    }

2.2.文字陰影與自動換行

1.text-shadow

p{
    text-shadow：length(陰影離開文字的橫方向距離) length(陰影離開文字的縱方向距離) length(陰影模糊半徑) color(陰影顏色)
}

位移距離：前兩個參數代表的陰影離開文字的橫(縱)方向距離，不可省略。

第三個參數代表模糊半徑，代表陰影向外模糊時候的范圍，數值越大越模糊。

當沒有指定顏色值時，會使用默認文字的顏色。

指定多個陰影，并且可以針對每個陰影用逗號分隔。

2.word-break：瀏覽器文本自動換行。

3.word-wrap：長單詞與URL地址自動換行。

4.服務器端字體和@font-face屬性

定義斜體或粗體：在定義字體的時候，可以把字體定義成斜體或者粗體，在使用服務器服務器端字體的時候，需要根據斜體還是粗體使用不同的漢字。

顯示客戶端字體：首先將font-family設置為本地的字體名，然后將src屬性設置為local(‘字體’)。

font-variant：設置文本是否大小寫。

font-weight：設置文本的粗細。

font-stretch：設置文本是否橫向的拉伸變形。

2.3.盒模型

1.各種盒模型

inline-block類型

使用inline-block類型來執行分列顯示

<head>
    <style>
    div.div1{
            background-color: #ff6600;
            width: 300px;
            height: 150px;
            float: left;
        }
        div.div2{
            background-color: #21fffc;
            width: 200px;
            height: 100px;
            float: left;
        }
        div.div3{
            background-color: #ef23ff;
            width: 500px;
            height: 100px;
            clear: both;
        }
        /*inline-block*/
        div.div4{
            background-color: #ff6600;
            display: inline-block;
            width: 300px;
        }
        div.div5{
            background-color: #21fffc;
            vertical-align: top;
            display: inline-block;
            width: 200px;
        }
        div.div6{
            background-color: #ef23ff;
            width: 500px;
            height: 100px;
        }
      </style>
</head>
<body>
    <h1>使用inline-block類型來執行分列顯示-1.傳統方式</h1>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <hr color="darkred">
    <h1>使用inline-block類型來執行分列顯示-1.inline-block方式</h1>
    <div class="div4">
        div1div1div1div1div1div1div1
        div1div1div1div1div1div1div1div1
        div1div1div1div1div1div1div1div1
    </div><div class="div5">
        div2div2div2div2div2div2div2
        div2div2div2div2div2div2div2div2
    </div>
    <div class="div6">
        div3
    </div>  
</body>

使用inline-block類型來顯示水平菜單

<head>
    <style>
        ul.ul1 li{
            float: left;
            list-style: none;
            padding:5px 20px;
            text-align: center;
            border-right: 1px solid darkviolet;
            width: 200px;
            color: wheat;
            background-color: mediumvioletred;
        }
        ul.ul2 li{
            list-style: none;
            display: inline-block;
            padding:5px 20px;
            text-align: center;
            border-right: 1px solid darkviolet;
            width: 200px;
            color: wheat;
            background-color: mediumvioletred;
        }
    </style>
</head>
<body>
    <h1>使用inline-block類型來顯示水平菜單-inline-block</h1>
    <ul class="ul2">
        <li>A</li><li>B</li><li>C</li><li>D</li>
    </ul>
</body>

使用inline-block類型來顯示水平菜單

<head>
    <style>
        ul.ul1 li{
            float: left;
            list-style: none;
            padding:5px 20px;
            text-align: center;
            border-right: 1px solid darkviolet;
            width: 200px;
            color: wheat;
            background-color: mediumvioletred;
        }
        ul.ul2 li{
            list-style: none;
            display: inline-block;
            padding:5px 20px;
            text-align: center;
            border-right: 1px solid darkviolet;
            width: 200px;
            color: wheat;
            background-color: mediumvioletred;
        }
    </style>
</head>
<body>
    <h1>使用inline-block類型來顯示水平菜單-inline-block</h1>
    <ul class="ul2">
        <li>A</li><li>B</li><li>C</li><li>D</li>
    </ul>
</body>

inline-table類型

<head>
    <style>
        table{
           display: inline-table;
           vertical-align: bottom;
           border: 2px solid blueviolet;
           width: 400px;
           height: 200px;
           color: darkviolet;
       }
        td{
            border: 2px solid violet;
        }
    </style>
</head>
<body>
    <h1>使用inline-table類型-一個表格前后都有文字將其環繞</h1>
    巴拉巴拉
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>
    巴拉巴拉
</body>

list-item類型

可以將多個元素作為列表顯示，同時在元素的開頭加上列表的標記。

run-in類型和compact類型

none類型

當元素被指定none后，該元素不會顯示

2.顯示不下的內容

overflow屬性：指定對盒子中容納不下的內容的顯示辦法

overflow-x屬性與overflow-y屬性

textoverflow：在盒子的末尾顯示代表省略符號的‘…’，但是該屬性只在內容在水平位置上超出時顯示。

3.盒子陰影

box-shadow:讓盒在顯示的時候產生陰影的效果

對盒內子元素設置陰影

對一個文字或第一行設置陰影：通過first-line或者first-letter

對表格和對單元格使用陰影

4.box-sizing寬高計算

指定針對元素的寬度和高度的計算方法

    (content)border-box:屬性值表示元素的寬高度(不)包括內補白區域及邊框的寬度高度

<head>
    <style>
        div.a,div.b{
            width: 300px;
            padding: 30px;
            margin: 20px auto;
            border: 30px solid darkviolet;
            background-color: violet;
        }
        div.a{
            box-sizing: border-box;
        }
        div.b{
            box-sizing: content-box;
        }
    </style>
</head>
<body>
    <h2>box-sizing：content&border-box</h2>
    <div class="ab">
        <div class="a">
            box-sizing：border-box代表寬度和高度包含內補白寬度高度，即雖然有padding和border，最終仍然為300px
        </div>
        <div class="b">
            box-sizing：content-box:代表不包含寬高度內補白區域，即最后為300px+30px+30px
        </div>
    </div>
</body>

2.4.邊框和背景樣式

1.新增的背景屬性

background-clip:指定背景的顯示范圍

border-box：從邊框開始

padding-box：從內邊框開始

content-box：從內容開始

background-orgin:指定繪制背景圖像的起點

可以指定繪制時的起始位置，默認為padding，可以為border或者content左上角開始繪制。

background-size:指定背景中圖像的尺寸

auto

length

percentage：以父元素的百分比設置背景圖像的寬高度。

cover：全覆蓋。

contain ：與cover相反，主要將背景圖片縮小，來適合布滿整個容器。

2.顯示多個背景屬性：第一個圖像在最上面

3.圓角邊框：border-radius

指定兩個半徑：左上右下+左下右上

當不顯示邊框的時候，瀏覽器會把四個角繪制成圓角

修改邊框種類。

繪制四個不同半徑的邊框

4.圖像邊框：border-image

可以讓元素的長度或寬度處于隨時變化時，變化狀態的邊框統一使用一個圖像文件來進行繪制。

2.5.CSS3變形功能

1.利用transform實現文字或圖像的旋轉，縮放，傾斜移動這四種類型的變形處理。

旋轉：totate(角度)

縮放：scale(值):0.5即為縮放到50%

傾斜:skew(值),值為角度

移動：translate(值)

對一個元素使用多個方法

transform：方法1 方法2 方法 3 方法4

改變元素基點

transform-origin:

2.6.CSS3的動功能

1.transition功能：支持從一個屬性值平滑到另外一個屬性值

允許CSS屬性值在一定的時間內平滑的過度，這種效果可以在單擊，獲得焦點，被點擊或對元素任何改變中觸發，并圓滑的以動畫效果改變CSS屬性值。

(1)執行變換的屬性：transition-property：過渡即將開始

none：沒有屬性會獲得過渡效果

all:所以屬性會獲得過渡效果

property：定義應用過渡效果的CSS屬性名稱列表，以逗號分隔

(2)變換延續時間：transition-duration：規定完成過渡需要花費的時間，默認值零沒有效果。

(3)在延續時間段，變換速率的變化：transition-timing-function。

(4)變換延遲時間：transition-delay：指定一個動畫開始執行的時間，也就是當改變元素屬性值后多長時間開始執行過渡效果。

<head>
    <meta charset="UTF-8">
    <title>CSS3中的動畫效果</title>
    <style>
        div.transition1{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            -webkit-transition:all 1s linear 1s;
        }
    </style>
</head>
<body>
    <h2>transition</h2>
    <div class="transition1"></div>
</body>

2.Animations功能：支持通過關鍵幀的指定來在頁面上產生更復雜的動畫現象。

name：指定合集名稱
duration：整個動畫執行完成所需時間
timing-function：實現動畫方法
iteration-count：重復播放次數

<head>
    <style>
        div.animation{
            width: 20px;
            height: 20px;
            background-color: #ef23ff;
        }
        /*關鍵幀的封裝*/
        @-webkit-keyframes myan{
            0%{
                background-color: violet;
                width: 50px;
            }
            10%{
                background-color: palevioletred;
                width: 100px;
            }
            30%{
                background-color: mediumvioletred;
                width: 200px;
            }
            50%{
                background-color: blueviolet;
                width: 40px;
            }
            70%{
                background-color: darkviolet;
                width: 400px;
            }
            90%{
                background-color: #7300a4;
                width: 600px;
            }
            100%{
                background-color: #4a0068;
                width: 800px;
            }
        }
    </style>
</head>
<body>
    <h2>animation</h2>
    <div class="animation"></div>
</body>

2.7.CSS3的分頁

1.點擊及鼠標懸停分頁樣式

2.鼠標懸停過渡效果：transition: background-color .9s;

3.圓角樣式：border-radius

4.邊框：border:2px solid darkviolet;

2.8.布局相關樣式

1.多欄布局

column-count屬性：將一個元素中的內容分成多欄進行顯示，要將元素的寬度設置成多個欄目的總寬度

column-width屬性：指定欄目的寬度來生成分欄

column-gap屬性：指定欄目之間的距離

column-rule:欄目之間添加分隔線

2.盒布局：多欄布局的欄目寬度必須相等，指定欄目的寬度的時候也只能統一指定，但是欄目的寬度不可能全部都一樣，所以多欄布局比較適合在文字內容頁面顯示，比如新聞。并不適合整個網頁編排時使用。而盒布局就相對比較隨意一些，可以定義成不同的頁面。

3.彈性盒子布局

(1)box-flex：使得盒子布局變成彈性布局：可以自適應窗口

(2)box-ordinal-group：改變元素的顯示順序

(3)box-orient：改變元素排列方向

horizontal:在水平行中從左向右排列子元素

vertical：從上向下垂直排列子元素

<style>
    div.all{
        display: -webkit-box;
        /*-webkit-box-orient: vertical;窗口垂直現實與水平顯示*/
        }
        .left{
            width: 300px;
            background-color: #ef23ff;
            -webkit-box-ordinal-group:3;
        }
        .right{
            width: 300px;
            background-color: #ef23ff;
            -webkit-box-ordinal-group: 2;
        }
        .center{
            -webkit-box-flex:1;
            background-color: #962fff;
            -webkit-box-ordinal-group: 1;
        }
    </style>

(4)元素的高度寬度自適應：就是元素的高度和寬度可以根據排列的方向改變而改變。
(5)使用彈性布局來消除空白：方法就是給子div中加入一個box-flex屬性。

<style>
    .center1{
            display: -webkit-box;/*盒模型顯示*/
            border: 5px solid darkviolet;
            -webkit-box-orient: horizontal;/*水平顯示*/
            width: 600px;
            height: 400px;
        }
        .d1{
            background-color: #ff99e1;
            -webkit-box-flex: 2;
        }
        .d2{
            background-color: #962fff;
            -webkit-box-flex: 3;
        }
        .d3{
            background-color: #ef23ff;
            -webkit-box-flex: 4;
        }
        .d1,.d2,.d3{
            -webkit-box-sizing: border-box;
        }
    </style>

(6)對多個元素使用box-flex屬性，讓瀏覽器或者容器中的元素的總寬度或者總高度都等于瀏覽器或者容器高度。

(7)box-pack屬性和box-align屬性：指定水平方向與垂直方向的對齊方式(文字，圖像，以及子元素的水平方向或是垂直方向上的對齊方式)

2.9.不同瀏覽器加載不同的CSS樣式

Media Queries模塊是CSS3中的一個和各種媒體相關的重要模塊

原文鏈接：https://blog.csdn.net/qq_27348951/article/details/53378364

.查詢節點

1.根據節點的層級查詢節點

1.childNodes

元素節點,文本節點,

2.children

元素節點

3.parentNode

獲取父節點

4.nextSibling

獲取下一個兄弟節點

有可能是文本節點

5.nextElementSibling

獲取下一個兄弟元素節點

6.previousSibling

獲取上一個兄弟節點

有可能是文本節點

7.previousElementSibling

獲取上一個兄弟元素節點

2.通過標簽名查詢節點 - 返回數組

document|elem.getElementsByTagName("標簽名");

document:整個文檔內查找

elem:某個元素內查找

3.通過元素的name屬性值查詢節點

document.getElementsByName("name屬性值");

返回值:包含指定name屬性值的元素的數組

4.通過元素的class值查詢節點

document|elem.getElementsByClassName("class");

返回:返回包含指定class屬性值的所有元素

2.增加節點

1.創建元素節點

語法:

var elem=document.createElement("元素名");

ex:

var div=document.createElement("div");

div.setAttribute("id","container");

div.innerHTML="動態創建的文本";

2.增加節點到網頁上

1.document.body.appendChild(elem);

向body中追加elem的新元素

2.parentNode.appendChild(elem);

向parentNode內部追加elem新元素

3.parentNode.insertBefore(newElem,oldElem)

將newElem元素插入到parentNode中oldElem元素之前

3.刪除節點

在DOM中,刪除節點的行為只能由父元素發起

parentNode.removeChild(elem);

刪除 parentNode 中的 elem 元素

4.事件

1.什么是事件

通常都是由用戶的行為來激發的操作

2.觸發事件的行為

所有的事件在綁定時,必須加 on

1.鼠標事件

1.click 事件

當鼠標單擊元素時觸發該事件

2.mouseover 事件

當鼠標移入進元素時的事件

3.mouseout 事件

當鼠標移出元素時的事件

4.mousemove 事件

當鼠標在元素內移動時的事件

2.鍵盤事件

1.keydown 事件

當鍵位按下時所激發的事件

2.keypress 事件

當鍵位按下時所激發的事件

3.keyup 事件

當鍵位抬起時所激發的事件

3.狀態改變事件

1.load 事件

當元素加載完成時所觸發的事件(body)

2.change 事件

當選項發生改變時所觸發的事件(select)

3.focus 事件

當元素獲取焦點時所觸發的事件(文本框類)

4.blur 事件

當元素失去焦點時所觸發的事件(文本框類)

5.submit 事件

當表單被提交時所觸發的事件(表單)

3.綁定的方式

1.在元素中綁定事件

<元素 on事件名=""></元素>

2.在js中動態的為元素綁定事件

語法:

DOM對象.on事件名=function(){

}

ex:

var main = document.getElementById("main");

main.onclick = function(){

}

注意：在JS動態綁定事件中,允許使用 this 來表示觸發當前事件的DOM元素

4.事件行為

1.狀態改變事件

1.load 事件

通常為 body 綁定 load 事件,目的是為了在所有內容都加載完成之后再實現一些初始化的操作

1. <body onload="函數()">

2.JS中動態綁定

window.onload = function(){

網頁加載完成后,要執行的操作

}

2.submit 事件

只有表單被提交時才會被觸發

注意:該事件需要一個boolean返回值來通知表單是否要繼續被提交.如果返回true,則可以提交表單.否則,阻止表單提交

JS中動態綁定:

表單對象.onsubmit = function(){

return true/false;

}

1.創建一個網頁,包含多個單選按鈕(name相同)

2.創建一個普通按鈕

3.單擊普通按鈕的時候

驗證多個單選按鈕中必須有一個被選中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p>
		<input type="radio" name="gender">男
		<input type="radio" name="gender">女
	</p>
	<button onclick="checkRadio()">驗證</button>
	<p>
		<input type="checkbox" id="chkAll" onclick="checkAll()">全選
		<input type="checkbox" name="hobby">吃
		<input type="checkbox" name="hobby">喝
		<input type="checkbox" name="hobby">玩
		<input type="checkbox" name="hobby">樂
	</p>
	<script src="common.js"></script>
	<script>
		
		function checkAll(){
			//先獲取 chkAll 的選中狀態
			var isChk = $("chkAll").checked;
			//獲取所有的 hobby 并循環,將所有的hobby的checked更改為isChk
			var all = document.getElementsByName("hobby");
			for(var i=0;i<all.length;i++){
				all[i].checked = isChk;
			}
		}
		function checkRadio(){
			//得到頁面中name=gender的所有的元素
			var arr=document.getElementsByName("gender");
			//聲明變量用于記錄 radio 的選中狀態
			var isChecked = false;
			for(var i=0;i<arr.length;i++){
				if(arr[i].checked){
					isChecked = true;
					break;
				}
			}
			if(isChecked){
				alert('通過');
			}else{
				alert('請選中一項');
			}
		}
	</script>
</body>
</html>

點擊按鈕時

1.先獲取三個文本框的值

2.創建兩個按鈕 - 刪除按鈕 , 修改按鈕

3.先創建四個td

將三個文本框的值追加到前三個td

將兩個按鈕追加到第四個td中

4.創建一個tr

將四個td追加到tr中

5.將 tr 追加到 table 中

在線咨詢

上一篇：JavaScript 初學者手冊
下一篇：基于Bootstrap v3.3.7的后臺HTML模板

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「JavaScript從入門到精通」第十三課 DOM操作高級應用-01

表格應用-1：添加 刪除

DOM應用到表格

表格應用-2：搜索

一、CSS簡介

二、CSS3的應用

2.1.超級選擇器

2.2.文字陰影與自動換行

您的項目需求

表格應用-1：添加刪除

一、CSS簡介

二、CSS3的應用