整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
篇文章開(kāi)始我們介紹一些DOM的高級(jí)應(yīng)用。
這里我們來(lái)介紹一些關(guān)于表格的應(yīng)用。大家應(yīng)該都很了解HTML的表格table標(biāo)簽。實(shí)際上，由于JS誕生的年代正是表格風(fēng)行使用的時(shí)候，因此JS內(nèi)有很多對(duì)表格的便捷操作。
例如，我們?cè)谶x取表格tbody的時(shí)候，自然可以使用getElementsByTagName('tbody')的方法，也可以直接用tbodies代替，同樣的選取表格所有行的方法為：rows（相當(dāng)于getElementByTageName('tr')），選取表格所有列的方法為：cells（相當(dāng)于getElementsByTagName('td')）。此外還有tFoot和tHead屬性，用于選取表格的表頭和表尾。和前面不同的是，一個(gè)表格可以有多個(gè)tBody、行和列，因此他們獲取的是一個(gè)數(shù)組，但表格的表頭和表尾只能有一個(gè)，因此它們獲取的不是數(shù)組而是單個(gè)的元素。
現(xiàn)在我們利用這些方法實(shí)現(xiàn)表格變色的功能。
<html>
<head>
<meta charset="utf-8" />
<title>無(wú)標(biāo)題文檔</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>
效果如下：
這里需要注意的是，選取表格行或列時(shí)，如果有表頭或表尾， 一定要在前面加上tbodies，如上面代碼的oTab.tbodies[0].rows，如果不添加tbodies，則會(huì)對(duì)整個(gè)表格進(jìn)行操作（包括表頭和表尾）。
通過(guò)DOM，我們可以對(duì)表格進(jìn)行添加和刪除操作。
<html>
<head>
<meta charset="utf-8" />
<title>無(wú)標(biāo)題文檔</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>
當(dāng)我們點(diǎn)擊添加時(shí)，輸入的姓名，年齡就可以添加到表格下方。同樣的，我們利用DOM對(duì)表格進(jìn)行刪除操作。
<html>
<head>
<meta charset="utf-8" />
<title>無(wú)標(biāo)題文檔</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>
效果如下：
注意兩點(diǎn)：
1.我們?cè)谠O(shè)置刪除元素的參數(shù)時(shí)，因?yàn)閠r是a標(biāo)簽的父元素的父元素，所以使用的是this.parentNode.parentNode進(jìn)行選擇。
2.我們?nèi)匀皇窃趖bodie內(nèi)對(duì)元素進(jìn)行刪除，tbody是tr的父元素，因此刪除tr的代碼也必須由tbody來(lái)選中。
可以看到，我們已經(jīng)可以對(duì)添加的行進(jìn)行刪除操作。但是這里仍然有一個(gè)小問(wèn)題。因?yàn)槲覀兪峭ㄟ^(guò)行數(shù)=ID的形式為ID賦值，如果進(jìn)行刪除操作后，行數(shù)不等于ID，那么可能會(huì)出現(xiàn)ID重復(fù)的情況。為了避免這種情況，我們用一個(gè)變量存儲(chǔ)初始的行數(shù)值+1，之后每點(diǎn)擊一次添加，就把這個(gè)值賦添加行的id并自增，這樣就不會(huì)出現(xiàn)重復(fù)的情況了：
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);
};
};
對(duì)于已經(jīng)刪除的行來(lái)說(shuō)，它的ID已經(jīng)被廢棄，因此不需要再次使用，實(shí)際情況中，大部分網(wǎng)站都是采用的這種方式。
如果要從表格中尋找我們需要的數(shù)據(jù)，就需要用到表格搜索功能。在我們上面的表格中，我們想通過(guò)搜索名字獲取對(duì)應(yīng)的信息。這個(gè)功能的實(shí)現(xiàn)也很簡(jiǎn)單，通過(guò)判斷是否存在某個(gè)名字和搜索框內(nèi)相等即可。
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 = '';
}
}
};
};
效果如下：
效果如下：
注意這里在將符合內(nèi)容的行背景變黃的同時(shí)將不符合條件的行重新標(biāo)為白色。
但是這個(gè)搜索功能并不完善。首先，目前主流的搜索功能是不區(qū)分大小寫(xiě)的，但JS默認(rèn)區(qū)分大小寫(xiě)，因此我們搜“blue”的話(huà)是將不會(huì)有效果。在JS里有一種方法叫toLowerCase，可以把一個(gè)英文字符串轉(zhuǎn)化為全小寫(xiě)，因此只要我們將比較的兩串字符串全部轉(zhuǎn)化為小寫(xiě)進(jìn)行比較，就可以忽略本身大小寫(xiě)帶來(lái)的區(qū)別了。
其次，我們希望我們的程序?qū)崿F(xiàn)模糊搜索功能，可以不輸入全名就能搜索出結(jié)果。在JS里提供了一種search()方法，其作用為在一串字符串中找到另一串字符串并返回字符串位置，沒(méi)找到則返回-1：
var str='abcdef';
alert(str.search('de'));
結(jié)果為3。因此，我們可以通過(guò)search方法來(lái)尋找表格中的姓名是否包含我們輸入的文字，如果不等于-1的話(huà)則說(shuō)明包含。
完整代碼如下：
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 = '';
}
}
};
};
最后，我們還希望實(shí)現(xiàn)一個(gè)多關(guān)鍵字搜索功能，當(dāng)我們同時(shí)輸入幾個(gè)關(guān)鍵字時(shí)，可以將幾個(gè)關(guān)鍵字的答案都返回給我們。我們通過(guò)空格將關(guān)鍵字隔開(kāi)，然后可以使用JS的split方法。split方法的作用是切分字符串：
var str='abc 123 ert';
var arr=str.split(' ');
alert(arr);
效果如下：
split方法會(huì)在字符串中尋找參數(shù)字符并用參數(shù)字符將字符串切開(kāi)并返回一個(gè)數(shù)組。
現(xiàn)在，我們也可以將輸入的字符串用split方法切開(kāi)成一個(gè)數(shù)組，再對(duì)數(shù)組里的元素進(jìn)行一一判斷檢驗(yàn)，就可以達(dá)成我們的目的了。
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';
}
}
}
};
};
剛才我們做的效果是高亮顯示。如果我們希望我們的程序在搜索后只保留我們需要的行，也就是實(shí)現(xiàn)篩選功能，應(yīng)該怎么做呢？實(shí)際上也非常簡(jiǎn)單，我們前面做高亮功能時(shí)修改的是行元素的background屬性，這里如果我們修改的是元素display屬性，當(dāng)它符合條件時(shí)，將其display屬性設(shè)置為block；不需要顯示時(shí)，設(shè)置為none。這樣就可以做到篩選搜索元素了。
效果如下:
我是石川（Blue），如果你覺(jué)得我的公眾號(hào)還不錯(cuò)，請(qǐng)多幫我推薦給你的朋友，多謝了。
石川簡(jiǎn)介：前阿里巴巴高級(jí)技術(shù)經(jīng)理，現(xiàn)開(kāi)課吧技術(shù)學(xué)院院長(zhǎng)。精通C/C++、Java、Python、前端開(kāi)發(fā)等多種開(kāi)發(fā)技術(shù)，曾參與淘寶網(wǎng)的早期建設(shè)和優(yōu)化，擁有豐富的企業(yè)級(jí)系統(tǒng)開(kāi)發(fā)經(jīng)驗(yàn)，對(duì)HTML5移動(dòng)端互聯(lián)網(wǎng)技術(shù)及生態(tài)體系有深厚的造詣。
天總結(jié)的是CSS3的學(xué)習(xí)內(nèi)容
CSS3是CSS技術(shù)的升級(jí)版本，CSS即層疊樣式表(Cascading StyleSheet)。CSS3語(yǔ)言是朝著模塊化發(fā)展的，把它分解成小的模塊，并且加入 更多新的模塊進(jìn)來(lái)：
盒子模型
文字特效
邊框圓角
動(dòng)畫(huà)
多列布局
用戶(hù)界面
旋轉(zhuǎn)
漸變
...CSS選擇器：使用CSS對(duì)html頁(yè)面中的元素實(shí)現(xiàn)一對(duì)一，一對(duì)多或者多對(duì)一的控制：
選擇器
{
樣式
}1.屬性選擇器
在CSS3中追加了三個(gè)選擇器:[att*=val];[att^=val];[att$=val]–>att表示為屬性，val表示為屬性的屬性值。
[att*=val]:如果元素用att表示的屬性的值中包含val指定的字符，那么該元素使用這個(gè)樣式。
[att$=val]:如果元素用att表示的屬性的屬性值的結(jié)尾字符用val指定的字符，那么該元素使用這個(gè)樣式。
[att^=val]:如果元素用att表示的屬性的屬性值的開(kāi)頭字符為用val指定的字符，那么該元素使用這個(gè)樣式。
注意： /如果純用數(shù)字的時(shí)候該樣式不會(huì)顯示成功，需要用\連接與數(shù)字最近的符號(hào) 注意！只有’-‘的字符需要加’\’/
<head>
<meta charset="UTF-8">
<title>css3中的屬性選擇器</title>
<style>
/*1.[att*=val] 此時(shí)只有id=section1A的div會(huì)擁有該樣式*/
[id*= section1]{
background-color: blueviolet;
}
/*2.[att^=val] 此時(shí)只有id=footer的div會(huì)擁有該樣式*/
[id^= f]{
background-color: blue;
}
/*3.[att$=val] 此時(shí)只有id=sectionB的div會(huì)擁有該樣式*/
[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.結(jié)構(gòu)性偽類(lèi)選擇器
(1)類(lèi)選擇器
使用類(lèi)選擇器把相同的元素定義成不同的樣式，偽類(lèi)選擇器是已經(jīng)定義好的不可以隨便起名。
p.right{
color:red;
}
p.left{
colot:blue;
}(2)偽類(lèi)選擇器—-最常見(jiàn)的偽類(lèi)選擇器：a（使用順序?yàn)椋何矗眩瑧遥＃?/p>
a:link{
color: #ff6600;
}
a:visited{
color: blueviolet;
}
a:hover{
color: aqua;
}
/*鼠標(biāo)點(diǎn)擊時(shí)*/
a:active{
color: darkblue;
}(3)偽元素選擇器
針對(duì)于CSS中已經(jīng)定義好的偽元素使用的選擇器(first-line;first-letter;before;after)。
選擇器:偽元素{
屬性:值;
}
選擇器.類(lèi)名:偽元素{
屬性:值;
}我自己是一名從事了多年開(kāi)發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取
first-line偽元素選擇器：向某個(gè)元素中的第一行文字使用樣式。
first-letter偽類(lèi)選擇器：向某個(gè)元素中的文字的首字母或者第一個(gè)文字使用樣式。
before：在某個(gè)元素之前插入一些內(nèi)容。
after：在某個(gè)元素之后插入一些內(nèi)容。
可以使用before和after偽元素在頁(yè)面中插入文字，圖像，項(xiàng)目編號(hào)等。
插入文字：E:before/after
排除一些不需要插入內(nèi)容的元素：E:none：before/after
插入圖像
插入項(xiàng)目編號(hào)
a.在多個(gè)標(biāo)題前加上編號(hào)：counter屬性對(duì)項(xiàng)目追加編號(hào)
元素:before{
content:counter(計(jì)數(shù)器);
}
元素{
counter-increment:content屬性值中所指定的計(jì)數(shù)器名稱(chēng)；
} b.對(duì)編號(hào)中添加文字
c.指定編號(hào)的樣式
d.指定編號(hào)的種類(lèi)：list-style-type
e.編號(hào)嵌套，重置編號(hào)
要對(duì)哪一個(gè)元素進(jìn)行重置，那么就在該元素的父元素上進(jìn)行設(shè)置reset。
f.中編號(hào)中嵌入大編號(hào) h2:before{
content:counter(大編號(hào)計(jì)數(shù)器)'-'conter(中編號(hào)計(jì)數(shù)器); g.在字符串兩邊嵌套文字符號(hào):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中主要有四個(gè)偽類(lèi)選擇器</h1>
<p>
CSS中主要有四個(gè)偽類(lèi)選擇器<br />
first-line偽元素選擇器：向某個(gè)元素中的第一行文字使用樣式
</p>
<p>
first-letter偽類(lèi)選擇器：向某個(gè)元素中的文字的首字母或者第一個(gè)文字使用樣式
</p>
<h4>befor&after</h4>
<ul>
<li><a href="first.html">balabala</a></li>
</ul>
</body>(4)結(jié)構(gòu)性偽類(lèi)選擇器
<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><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標(biāo)題</h2>
<p>內(nèi)容</p>
</div>
<div id="B">
<h2>B標(biāo)題</h2>
<p>內(nèi)容</p>
</div>
</body>first-child：?jiǎn)为?dú)指定第一個(gè)子元素的樣式。
last-child：?jiǎn)为?dú)指定最后一個(gè)子元素的樣式。
nth-child：選擇器匹配正數(shù)下來(lái)的第N個(gè)子元素，nth-child(odd)為第奇數(shù)個(gè)子元素，nth-child(even)為第偶數(shù)個(gè)子元素。
nth-last-child(n)：匹配倒數(shù)數(shù)下來(lái)第n個(gè)子元素。
nth-of-type：正數(shù)，當(dāng)指定元素為標(biāo)題加內(nèi)容的時(shí)候，如果使用上面的方法會(huì)導(dǎo)致真正的指定元素不被成功指定，因此需要使用nth-first-type方法進(jìn)行指定。
nth-last-type：倒數(shù)，同nth-first-type。
循環(huán)使用樣式：nth-child(An+B)–A 表示每次循環(huán)中共包括幾種樣式，B表示指定的樣式在循環(huán)中所處的位置。
only-child：只對(duì)一個(gè)元素起作用。
<head>
<meta charset="UTF-8">
<title>結(jié)構(gòu)性偽類(lèi)選擇器</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;
}
/*循環(huán)*/
li:nth-child(4n+1){
background-color: aquamarine;
}
li:nth-child(4n+2){
background-color: indianred;
}
/*唯一的*/
li:only-child{
background-color: hotpink;
}
/*存在的問(wèn)題*/
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>唯一,多加一個(gè)就沒(méi)有啦</li>
</ul>
<div id="A">
<h2>A標(biāo)題</h2><p>內(nèi)容</p>
<h2>B標(biāo)題</h2><p>內(nèi)容</p>
</div>
</body>3.UI元素狀態(tài)偽類(lèi)選擇器
指定的樣式只有在元素處于某種狀態(tài)下才起作用，在默認(rèn)狀態(tài)下不起作用！
選擇器:偽元素{
屬性:值;
}
選擇器.類(lèi)名:偽元素{
屬性:值;
}first-line偽元素選擇器：向某個(gè)元素中的第一行文字使用樣式。
first-letter偽類(lèi)選擇器：向某個(gè)元素中的文字的首字母或者第一個(gè)文字使用樣式。
before：在某個(gè)元素之前插入一些內(nèi)容。
after：在某個(gè)元素之后插入一些內(nèi)容。
可以使用before和after偽元素在頁(yè)面中插入文字，圖像，項(xiàng)目編號(hào)等。
插入文字：E:before/after
排除一些不需要插入內(nèi)容的元素：E:none：before/after
插入圖像
插入項(xiàng)目編號(hào)
a.在多個(gè)標(biāo)題前加上編號(hào)：counter屬性對(duì)項(xiàng)目追加編號(hào)
元素:before{
content:counter(計(jì)數(shù)器);
}
元素{
counter-increment:content屬性值中所指定的計(jì)數(shù)器名稱(chēng)；
} b.對(duì)編號(hào)中添加文字
c.指定編號(hào)的樣式
d.指定編號(hào)的種類(lèi)：list-style-type
e.編號(hào)嵌套，重置編號(hào)
要對(duì)哪一個(gè)元素進(jìn)行重置，那么就在該元素的父元素上進(jìn)行設(shè)置reset。
f.中編號(hào)中嵌入大編號(hào) h2:before{
content:counter(大編號(hào)計(jì)數(shù)器)'-'conter(中編號(hào)計(jì)數(shù)器); g.在字符串兩邊嵌套文字符號(hào):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中主要有四個(gè)偽類(lèi)選擇器</h1>
<p>
CSS中主要有四個(gè)偽類(lèi)選擇器<br />
first-line偽元素選擇器：向某個(gè)元素中的第一行文字使用樣式
</p>
<p>
first-letter偽類(lèi)選擇器：向某個(gè)元素中的文字的首字母或者第一個(gè)文字使用樣式
</p>
<h4>befor&after</h4>
<ul>
<li><a href="first.html">balabala</a></li>
</ul>
</body>(4)結(jié)構(gòu)性偽類(lèi)選擇器
<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><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標(biāo)題</h2>
<p>內(nèi)容</p>
</div>
<div id="B">
<h2>B標(biāo)題</h2>
<p>內(nèi)容</p>
</div>
</body>first-child：?jiǎn)为?dú)指定第一個(gè)子元素的樣式。
last-child：?jiǎn)为?dú)指定最后一個(gè)子元素的樣式。
nth-child：選擇器匹配正數(shù)下來(lái)的第N個(gè)子元素，nth-child(odd)為第奇數(shù)個(gè)子元素，nth-child(even)為第偶數(shù)個(gè)子元素。
nth-last-child(n)：匹配倒數(shù)數(shù)下來(lái)第n個(gè)子元素。
nth-of-type：正數(shù)，當(dāng)指定元素為標(biāo)題加內(nèi)容的時(shí)候，如果使用上面的方法會(huì)導(dǎo)致真正的指定元素不被成功指定，因此需要使用nth-first-type方法進(jìn)行指定。
nth-last-type：倒數(shù)，同nth-first-type。
循環(huán)使用樣式：nth-child(An+B)–A 表示每次循環(huán)中共包括幾種樣式，B表示指定的樣式在循環(huán)中所處的位置。
only-child：只對(duì)一個(gè)元素起作用。
<head>
<meta charset="UTF-8">
<title>結(jié)構(gòu)性偽類(lèi)選擇器</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;
}
/*循環(huán)*/
li:nth-child(4n+1){
background-color: aquamarine;
}
li:nth-child(4n+2){
background-color: indianred;
}
/*唯一的*/
li:only-child{
background-color: hotpink;
}
/*存在的問(wèn)題*/
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>唯一,多加一個(gè)就沒(méi)有啦</li>
</ul>
<div id="A">
<h2>A標(biāo)題</h2><p>內(nèi)容</p>
<h2>B標(biāo)題</h2><p>內(nèi)容</p>
</div>
</body>3.UI元素狀態(tài)偽類(lèi)選擇器
指定的樣式只有在元素處于某種狀態(tài)下才起作用，在默認(rèn)狀態(tài)下不起作用！
4.兄弟元素選擇器
用來(lái)指定位于同一父元素之中的某個(gè)元素之后的所有其他某個(gè)種類(lèi)的兄弟元素所使用的樣式。一定要是之后的兄弟元素！
<子元素>~<子元素之后的同級(jí)兄弟元素>
{
樣式
}1.text-shadowp{
text-shadow：length(陰影離開(kāi)文字的橫方向距離) length(陰影離開(kāi)文字的縱方向距離) length(陰影模糊半徑) color(陰影顏色)
}位移距離：前兩個(gè)參數(shù)代表的陰影離開(kāi)文字的橫(縱)方向距離，不可省略。
第三個(gè)參數(shù)代表模糊半徑，代表陰影向外模糊時(shí)候的范圍，數(shù)值越大越模糊。
當(dāng)沒(méi)有指定顏色值時(shí)，會(huì)使用默認(rèn)文字的顏色。
指定多個(gè)陰影，并且可以針對(duì)每個(gè)陰影用逗號(hào)分隔。
2.word-break：瀏覽器文本自動(dòng)換行。
3.word-wrap： 長(zhǎng)單詞與URL地址自動(dòng)換行。
4.服務(wù)器端字體和@font-face屬性
定義斜體或粗體：在定義字體的時(shí)候，可以把字體定義成斜體或者粗體，在使用服務(wù)器服務(wù)器端字體的時(shí)候，需要根據(jù)斜體還是粗體使用不同的漢字。
顯示客戶(hù)端字體：首先將font-family設(shè)置為本地的字體名，然后將src屬性設(shè)置為local(‘字體’)。
font-variant：設(shè)置文本是否大小寫(xiě)。
font-weight：設(shè)置文本的粗細(xì)。
font-stretch：設(shè)置文本是否橫向的拉伸變形。
2.3.盒模型
1.各種盒模型
inline-block類(lèi)型
使用inline-block類(lèi)型來(lái)執(zhí)行分列顯示
<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類(lèi)型來(lái)執(zhí)行分列顯示-1.傳統(tǒng)方式</h1>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<hr color="darkred">
<h1>使用inline-block類(lèi)型來(lái)執(zhí)行分列顯示-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類(lèi)型來(lái)顯示水平菜單<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類(lèi)型來(lái)顯示水平菜單-inline-block</h1>
<ul class="ul2">
<li>A</li><li>B</li><li>C</li><li>D</li>
</ul>
</body>
使用inline-block類(lèi)型來(lái)顯示水平菜單<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類(lèi)型來(lái)顯示水平菜單-inline-block</h1>
<ul class="ul2">
<li>A</li><li>B</li><li>C</li><li>D</li>
</ul>
</body>
<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類(lèi)型-一個(gè)表格前后都有文字將其環(huán)繞</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類(lèi)型
可以將多個(gè)元素作為列表顯示，同時(shí)在元素的開(kāi)頭加上列表的標(biāo)記。
run-in類(lèi)型和compact類(lèi)型
none類(lèi)型
當(dāng)元素被指定none后，該元素不會(huì)顯示
2.顯示不下的內(nèi)容
overflow屬性：指定對(duì)盒子中容納不下的內(nèi)容的顯示辦法
overflow-x屬性與overflow-y屬性
textoverflow：在盒子的末尾顯示代表省略符號(hào)的‘…’，但是該屬性只在內(nèi)容在水平位置上超出時(shí)顯示。
3.盒子陰影
box-shadow:讓盒在顯示的時(shí)候產(chǎn)生陰影的效果
對(duì)盒內(nèi)子元素設(shè)置陰影
對(duì)一個(gè)文字或第一行設(shè)置陰影：通過(guò)first-line或者first-letter
對(duì)表格和對(duì)單元格使用陰影
4.box-sizing寬高計(jì)算
指定針對(duì)元素的寬度和高度的計(jì)算方法
(content)border-box:屬性值表示元素的寬高度(不)包括內(nèi)補(bǔ)白區(qū)域及邊框的寬度高度<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代表寬度和高度包含內(nèi)補(bǔ)白寬度高度，即雖然有padding和border，最終仍然為300px
</div>
<div class="b">
box-sizing：content-box:代表不包含寬高度內(nèi)補(bǔ)白區(qū)域，即最后為300px+30px+30px
</div>
</div>
</body>2.4.邊框和背景樣式
1.新增的背景屬性
background-clip:指定背景的顯示范圍
border-box：從邊框開(kāi)始
padding-box：從內(nèi)邊框開(kāi)始
content-box：從內(nèi)容開(kāi)始
background-orgin:指定繪制背景圖像的起點(diǎn)
可以指定繪制時(shí)的起始位置，默認(rèn)為padding，可以為border或者content左上角開(kāi)始繪制。
background-size:指定背景中圖像的尺寸
auto
length
percentage：以父元素的百分比設(shè)置背景圖像的寬高度。
cover：全覆蓋。
contain ：與cover相反，主要將背景圖片縮小，來(lái)適合布滿(mǎn)整個(gè)容器。
2.顯示多個(gè)背景屬性： 第一個(gè)圖像在最上面
3.圓角邊框：border-radius
指定兩個(gè)半徑：左上右下+左下右上
當(dāng)不顯示邊框的時(shí)候，瀏覽器會(huì)把四個(gè)角繪制成圓角
修改邊框種類(lèi)。
繪制四個(gè)不同半徑的邊框
4.圖像邊框：border-image
可以讓元素的長(zhǎng)度或?qū)挾忍幱陔S時(shí)變化時(shí)，變化狀態(tài)的邊框統(tǒng)一使用一個(gè)圖像文件來(lái)進(jìn)行繪制。
2.5.CSS3變形功能
1.利用transform實(shí)現(xiàn)文字或圖像的旋轉(zhuǎn)，縮放，傾斜移動(dòng)這四種類(lèi)型的變形處理。
旋轉(zhuǎn)：totate(角度)
縮放：scale(值):0.5即為縮放到50%
傾斜:skew(值),值為角度
移動(dòng)：translate(值)
對(duì)一個(gè)元素使用多個(gè)方法
transform：方法1 方法2 方法 3 方法4
改變?cè)鼗c(diǎn)
transform-origin:
2.6.CSS3的動(dòng)功能
1.transition功能：支持從一個(gè)屬性值平滑到另外一個(gè)屬性值
允許CSS屬性值在一定的時(shí)間內(nèi)平滑的過(guò)度，這種效果可以在單擊，獲得焦點(diǎn)，被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑的以動(dòng)畫(huà)效果改變CSS屬性值。
(1)執(zhí)行變換的屬性：transition-property：過(guò)渡即將開(kāi)始
none：沒(méi)有屬性會(huì)獲得過(guò)渡效果
all:所以屬性會(huì)獲得過(guò)渡效果
property：定義應(yīng)用過(guò)渡效果的CSS屬性名稱(chēng)列表，以逗號(hào)分隔
(2)變換延續(xù)時(shí)間：transition-duration：規(guī)定完成過(guò)渡需要花費(fèi)的時(shí)間，默認(rèn)值零沒(méi)有效果。
(3)在延續(xù)時(shí)間段，變換速率的變化：transition-timing-function。
(4)變換延遲時(shí)間：transition-delay：指定一個(gè)動(dòng)畫(huà)開(kāi)始執(zhí)行的時(shí)間，也就是當(dāng)改變?cè)貙傩灾岛蠖嚅L(zhǎng)時(shí)間開(kāi)始執(zhí)行過(guò)渡效果。
<head>
<meta charset="UTF-8">
<title>CSS3中的動(dòng)畫(huà)效果</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功能：支持通過(guò)關(guān)鍵幀的指定來(lái)在頁(yè)面上產(chǎn)生更復(fù)雜的動(dòng)畫(huà)現(xiàn)象。
<head>
<style>
div.animation{
width: 20px;
height: 20px;
background-color: #ef23ff;
}
/*關(guān)鍵幀的封裝*/
@-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的分頁(yè)
1.點(diǎn)擊及鼠標(biāo)懸停分頁(yè)樣式
2.鼠標(biāo)懸停過(guò)渡效果：transition: background-color .9s;
3.圓角樣式：border-radius
4.邊框：border:2px solid darkviolet;
2.8.布局相關(guān)樣式
1.多欄布局
column-count屬性：將一個(gè)元素中的內(nèi)容分成多欄進(jìn)行顯示，要將元素的寬度設(shè)置成多個(gè)欄目的總寬度
column-width屬性：指定欄目的寬度來(lái)生成分欄
column-gap屬性：指定欄目之間的距離
column-rule:欄目之間添加分隔線(xiàn)
2.盒布局： 多欄布局的欄目寬度必須相等，指定欄目的寬度的時(shí)候也只能統(tǒng)一指定，但是欄目的寬度不可能全部都一樣，所以多欄布局比較適合在文字內(nèi)容頁(yè)面顯示，比如新聞。并不適合整個(gè)網(wǎng)頁(yè)編排時(shí)使用。而盒布局就相對(duì)比較隨意一些，可以定義成不同的頁(yè)面。
3.彈性盒子布局
(1)box-flex：使得盒子布局變成彈性布局：可以自適應(yīng)窗口
(2)box-ordinal-group：改變?cè)氐娘@示順序
(3)box-orient：改變?cè)嘏帕蟹较?/p>
horizontal:在水平行中從左向右排列子元素
vertical：從上向下垂直排列子元素
<style>
div.all{
display: -webkit-box;
/*-webkit-box-orient: vertical;窗口垂直現(xiàn)實(shí)與水平顯示*/
}
.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)元素的高度寬度自適應(yīng)：就是元素的高度和寬度可以根據(jù)排列的方向改變而改變。
(5)使用彈性布局來(lái)消除空白：方法就是給子div中加入一個(gè)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)對(duì)多個(gè)元素使用box-flex屬性，讓瀏覽器或者容器中的元素的總寬度或者總高度都等于瀏覽器或者容器高度。
(7)box-pack屬性和box-align屬性：指定水平方向與垂直方向的對(duì)齊方式(文字，圖像，以及子元素的水平方向或是垂直方向上的對(duì)齊方式)
2.9.不同瀏覽器加載不同的CSS樣式
Media Queries模塊是CSS3中的一個(gè)和各種媒體相關(guān)的重要模塊
原文鏈接：https://blog.csdn.net/qq_27348951/article/details/53378364
.查詢(xún)節(jié)點(diǎn)
1.根據(jù)節(jié)點(diǎn)的層級(jí)查詢(xún)節(jié)點(diǎn)
1.childNodes
元素節(jié)點(diǎn),文本節(jié)點(diǎn),
2.children
元素節(jié)點(diǎn)
3.parentNode
獲取父節(jié)點(diǎn)
4.nextSibling
獲取下一個(gè)兄弟節(jié)點(diǎn)
有可能是文本節(jié)點(diǎn)
5.nextElementSibling
獲取下一個(gè)兄弟元素節(jié)點(diǎn)
6.previousSibling
獲取上一個(gè)兄弟節(jié)點(diǎn)
有可能是文本節(jié)點(diǎn)
7.previousElementSibling
獲取上一個(gè)兄弟元素節(jié)點(diǎn)
2.通過(guò)標(biāo)簽名查詢(xún)節(jié)點(diǎn) - 返回?cái)?shù)組
document|elem.getElementsByTagName("標(biāo)簽名");
document:整個(gè)文檔內(nèi)查找
elem:某個(gè)元素內(nèi)查找
3.通過(guò)元素的name屬性值查詢(xún)節(jié)點(diǎn)
document.getElementsByName("name屬性值");
返回值:包含指定name屬性值的元素的數(shù)組
<input type="radio" checked >
4.通過(guò)元素的class值查詢(xún)節(jié)點(diǎn)
document|elem.getElementsByClassName("class");
返回:返回包含指定class屬性值的所有元素
2.增加節(jié)點(diǎn)
1.創(chuàng)建元素節(jié)點(diǎn)
語(yǔ)法:
var elem=document.createElement("元素名");
ex:
var div=document.createElement("div");
div.setAttribute("id","container");
div.innerHTML="動(dòng)態(tài)創(chuàng)建的文本";
2.增加節(jié)點(diǎn)到網(wǎng)頁(yè)上
1.document.body.appendChild(elem);
向body中追加elem的新元素
2.parentNode.appendChild(elem);
向parentNode內(nèi)部追加elem新元素
3.parentNode.insertBefore(newElem,oldElem)
將newElem元素插入到parentNode中oldElem元素之前
3.刪除節(jié)點(diǎn)
在DOM中,刪除節(jié)點(diǎn)的行為只能由父元素發(fā)起
parentNode.removeChild(elem);
刪除 parentNode 中的 elem 元素
4.事件
1.什么是事件
通常都是由用戶(hù)的行為來(lái)激發(fā)的操作
2.觸發(fā)事件的行為
所有的事件在綁定時(shí),必須加 on
1.鼠標(biāo)事件
1.click 事件
當(dāng)鼠標(biāo)單擊元素時(shí)觸發(fā)該事件
2.mouseover 事件
當(dāng)鼠標(biāo)移入進(jìn)元素時(shí)的事件
3.mouseout 事件
當(dāng)鼠標(biāo)移出元素時(shí)的事件
4.mousemove 事件
當(dāng)鼠標(biāo)在元素內(nèi)移動(dòng)時(shí)的事件
2.鍵盤(pán)事件
1.keydown 事件
當(dāng)鍵位按下時(shí)所激發(fā)的事件
2.keypress 事件
當(dāng)鍵位按下時(shí)所激發(fā)的事件
3.keyup 事件
當(dāng)鍵位抬起時(shí)所激發(fā)的事件
3.狀態(tài)改變事件
1.load 事件
當(dāng)元素加載完成時(shí)所觸發(fā)的事件(body)
2.change 事件
當(dāng)選項(xiàng)發(fā)生改變時(shí)所觸發(fā)的事件(select)
3.focus 事件
當(dāng)元素獲取焦點(diǎn)時(shí)所觸發(fā)的事件(文本框類(lèi))
4.blur 事件
當(dāng)元素失去焦點(diǎn)時(shí)所觸發(fā)的事件(文本框類(lèi))
5.submit 事件
當(dāng)表單被提交時(shí)所觸發(fā)的事件(表單)
3.綁定的方式
1.在元素中綁定事件
<元素 on事件名=""></元素>
2.在js中動(dòng)態(tài)的為元素綁定事件
語(yǔ)法:
DOM對(duì)象.on事件名=function(){
}
ex:
var main = document.getElementById("main");
main.onclick = function(){
}
注意：在JS動(dòng)態(tài)綁定事件中,允許使用 this 來(lái)表示觸發(fā)當(dāng)前事件的DOM元素
4.事件行為
1.狀態(tài)改變事件
1.load 事件
通常為 body 綁定 load 事件,目的是為了在所有內(nèi)容都加載完成之后再實(shí)現(xiàn)一些初始化的操作
1. <body onload="函數(shù)()">
2.JS中動(dòng)態(tài)綁定
window.onload = function(){
網(wǎng)頁(yè)加載完成后,要執(zhí)行的操作
}
2.submit 事件
只有表單被提交時(shí)才會(huì)被觸發(fā)
注意:該事件需要一個(gè)boolean返回值來(lái)通知表單是否要繼續(xù)被提交.如果返回true,則可以提交表單.否則,阻止表單提交
JS中動(dòng)態(tài)綁定:
表單對(duì)象.onsubmit = function(){
return true/false;
}
1.創(chuàng)建一個(gè)網(wǎng)頁(yè),包含多個(gè)單選按鈕(name相同)
2.創(chuàng)建一個(gè)普通按鈕
3.單擊普通按鈕的時(shí)候
驗(yàn)證多個(gè)單選按鈕中必須有一個(gè)被選中
<!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()">驗(yàn)證</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">樂(lè)
</p>
<script src="common.js"></script>
<script>
function checkAll(){
//先獲取 chkAll 的選中狀態(tài)
var isChk = $("chkAll").checked;
//獲取所有的 hobby 并循環(huán),將所有的hobby的checked更改為isChk
var all = document.getElementsByName("hobby");
for(var i=0;i<all.length;i++){
all[i].checked = isChk;
}
}
function checkRadio(){
//得到頁(yè)面中name=gender的所有的元素
var arr=document.getElementsByName("gender");
//聲明變量用于記錄 radio 的選中狀態(tài)
var isChecked = false;
for(var i=0;i<arr.length;i++){
if(arr[i].checked){
isChecked = true;
break;
}
}
if(isChecked){
alert('通過(guò)');
}else{
alert('請(qǐng)選中一項(xiàng)');
}
}
</script>
</body>
</html>
點(diǎn)擊按鈕時(shí)
1.先獲取三個(gè)文本框的值
2.創(chuàng)建兩個(gè)按鈕 - 刪除按鈕 , 修改按鈕
3.先創(chuàng)建四個(gè)td
將三個(gè)文本框的值追加到前三個(gè)td
將兩個(gè)按鈕追加到第四個(gè)td中
4.創(chuàng)建一個(gè)tr
將四個(gè)td追加到tr中
5.將 tr 追加到 table 中
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
