「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：添加删除