Web前端技術(shù)PPT完整全套教學(xué)課件_第1頁
Web前端技術(shù)PPT完整全套教學(xué)課件_第2頁
Web前端技術(shù)PPT完整全套教學(xué)課件_第3頁
Web前端技術(shù)PPT完整全套教學(xué)課件_第4頁
Web前端技術(shù)PPT完整全套教學(xué)課件_第5頁
已閱讀5頁，還剩481頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

Web前端技術(shù)概述學(xué)習(xí)導(dǎo)圖1.1前端技術(shù)發(fā)展歷程前端技術(shù)發(fā)展歷程起源階段(1990-1994)第一次瀏覽器之爭(1995-1999)動態(tài)頁面的興起(2000-2004)第二次瀏覽器之爭(2004-2013)HTML5的發(fā)展(2008-)起源階段(1990-1994)第一次瀏覽器之爭(1995-1999)微軟公司IE瀏覽器vs網(wǎng)景公司Navigator瀏覽器第一次瀏覽器之爭(1995-1999)新技術(shù)的出現(xiàn)和規(guī)范的制訂動態(tài)頁面的崛起(2000-2004)動態(tài)頁面02030401第二次瀏覽器之爭(2004-2013)IE瀏覽器Firefox瀏覽器Chrome瀏覽器Opera瀏覽器HTML5技術(shù)的興起和快速發(fā)展(2008-至今)1.2前端學(xué)習(xí)路線前端學(xué)習(xí)路線1.3前端開發(fā)工具前端開發(fā)工具前端開發(fā)工具前端開發(fā)工具前端開發(fā)工具1.4前端就業(yè)前景Web前端崗位的出現(xiàn)Web前端工程師前端市場需求與就業(yè)前端市場需求與就業(yè)HTML語言基礎(chǔ)學(xué)習(xí)導(dǎo)圖2.1HTML基礎(chǔ)概念2.1.1HTML概述HTML是HypertextMarkupLanguage的縮寫，中文翻譯為超文本標(biāo)記語言。HTML定義了一套標(biāo)記標(biāo)簽，并使用標(biāo)記標(biāo)簽來描述網(wǎng)頁，由標(biāo)簽及文本內(nèi)容組成的文檔叫HTML文檔，也叫web頁面。超文本是指信息節(jié)點（即Web頁面）通過超鏈接構(gòu)成的具有一定邏輯結(jié)構(gòu)和語義的網(wǎng)絡(luò)。2.1.2HTML元素HTML標(biāo)簽又稱為HTML元素HTML元素是由尖括號包圍的關(guān)鍵詞，例如<html>HTML元素通常成對出現(xiàn)，例如<body>和</body>HTML元素對大小寫不敏感，<P>等價于<p>，推薦使用小寫。2.1.2HTML元素2.1.2HTML元素HTML屬性可以給元素添加附加信息，屬性包括屬性名和屬性值兩部分<pid="desc"class="red"></p><img

src="bg.jpg"></img>屬性值可以用雙引號、單引號包含起來，也可以不加引號2.1.3HTML文檔的基本結(jié)構(gòu)HTML文檔的基本結(jié)構(gòu)2.1.4HTML中顏色的表示顏色值由十六進制來表示紅(R)、綠(G)、藍(B)，每個顏色的最低值為0(十六進制為00)，最高值為255(十六進制為FF)。2.2頁面頭部元素2.2.1標(biāo)題元素頁面頭部元素由<head></head>所包含的部分，可設(shè)置網(wǎng)頁的標(biāo)題、字符集、關(guān)鍵字、描述信息等。2.2.2元信息元素元信息元素<meta>：用于定義網(wǎng)頁的字符集、關(guān)鍵字以及網(wǎng)頁內(nèi)容的描述。設(shè)定網(wǎng)頁關(guān)鍵字：<metaname="keywords"content="Web前端技術(shù),網(wǎng)頁設(shè)計與制作,HTML">設(shè)定網(wǎng)頁描述信息：<metaname="description"content="Web前端技術(shù)教程一書主要介紹前端開發(fā)相關(guān)技術(shù)。">2.2.2元信息元素設(shè)定網(wǎng)頁自動刷新：<metahttp-equiv="refresh"content="5">設(shè)定網(wǎng)頁自動跳轉(zhuǎn)：<metahttp-equiv="refresh"content="3;url=http://">設(shè)定網(wǎng)頁字符集：<metahttp-equiv="content-type"content="text/html;charset=gb18030">2.3頁面主體元素2.3頁面主體元素設(shè)置網(wǎng)頁文字和背景顏色<bodybgcolor="#336699"text="white">添加網(wǎng)頁背景圖片<bodybackground="images/bg.jpg"bgproperties="fixed">使用body元素，可以設(shè)置頁面背景、文字顏色、頁邊距等頁面屬性。設(shè)置網(wǎng)頁邊距<bodyleftmargin="10"rightmargin="20"topmargin="15"bottommargin="15">2.4文字與段落元素2.4文字與段落元素網(wǎng)頁中的文字可分為普通文字、空格、特殊文字和注釋語句。

使用空格鍵并不能輸入多個空格，為了輸入空格，可以使用空格對應(yīng)的字符代碼

，一個

表示一個半角空格，要輸入多個空格時，需要連續(xù)多個

。

2.4文字與段落元素默認情況下，中文網(wǎng)頁中的文字是以黑色、宋體、3號字的效果來顯示，如果希望改變默認的文字顯示效果，可使用<font>字體屬性。

<fontface="隸書,宋體,黑體"size="4"color="#ffcc00">字體元素</font>使用文字修飾元素，可以設(shè)置字體格式，如粗體、斜體、顯示下劃線等。2.4文字與段落元素標(biāo)題元素根據(jù)字號大小分為6級，分別用<h1>-<h6>標(biāo)簽定義

段落元素使用<p>標(biāo)簽，換行元素使用<br>標(biāo)簽，水平線元素通過<hr>標(biāo)簽2.4文字與段落元素預(yù)格式化元素<pre>，保留HTML文檔中的Enter鍵和空格鍵，使瀏覽器不解析<pre>中定義的文本。2.4文字與段落元素2.5列表與表格元素2.5列表與表格元素使用列表元素可以使相關(guān)內(nèi)容以一種整齊的方式排列顯示，HTML支持有序列表和無序列表。有序列表用<ol>表示，無序列表用<ul>表示，列表項用<li>表示默認情況下，有序列表是以阿拉伯?dāng)?shù)字作為列表項的前導(dǎo)符，使用屬性type可以改變有序列表的前導(dǎo)符，可分別取1、A、a、I、i等取值。還可以設(shè)置start屬性，定義有序列表前導(dǎo)符的起始項。2.5列表與表格元素表格由<table>元素定義，每個表格均有若干行（<tr>標(biāo)簽定義），每行被分割為若干單元格（<td>標(biāo)簽定義），表格表頭使用<th>標(biāo)簽定義。2.5列表與表格元素2.6圖片與多媒體元素2.6圖片與多媒體元素圖片元素通過<img>標(biāo)簽定義。src屬性定義圖像的URL地址，alt屬性定義圖像不可見時的替換文本，width、height屬性分別定義圖像的寬和高。2.7圖片與多媒體元素2.7超鏈接元素超鏈接元素<a>。href為必設(shè)屬性，用來設(shè)置需要鏈接到的目標(biāo)文件；target屬性用來鏈接目標(biāo)窗口。<ahref="welcome.html"target="_blank">這是一個鏈接</a>鏈接路徑就是在超鏈接中用于標(biāo)識目標(biāo)文件的位置標(biāo)識，常見的鏈接路徑有以下兩種類型：絕對路徑：文件的完整路徑，如/index.html相對路徑：相對于當(dāng)前文件的路徑。根據(jù)鏈接目標(biāo)內(nèi)容的不同，可以將鏈接分為以下幾種類型：內(nèi)部鏈接：是指同一個網(wǎng)站內(nèi)部，不同網(wǎng)頁之間的鏈接關(guān)系，一般使用相對路徑鏈接文件。外部鏈接：是指跳轉(zhuǎn)到當(dāng)前網(wǎng)站外部，和其他網(wǎng)站中的頁面或其他元素之間的鏈接，一般使用絕對路徑。書簽鏈接：指的是鏈接目標(biāo)位置是網(wǎng)頁中的指定位置（書簽）的鏈接。要使用書簽鏈接，首先需要在待鏈接的目標(biāo)網(wǎng)頁中定義書簽，使用<aname="書簽名">[文字/圖片]</a>進行定義，然后再創(chuàng)建指向書簽的鏈接。2.7超鏈接元素腳本鏈接：指的是使用JavaScript腳本作為鏈接的目標(biāo)。<ahref="javascript:alert('您好，歡迎訪問我的站點')">歡迎訪問</a>電子郵件鏈接：指自動啟動郵件系統(tǒng)，如outlook的鏈接類型。<ahref="mailto:abcde@163.com?subject=意見或建議&cc=12345@">意見或建議（郵件鏈接）</a>文件下載鏈接：指鏈接類型為.doc，.rar，.zip等文件類型。2.7超鏈接元素2.8表單元素2.8表單元素表單對象元素由表單標(biāo)簽<form>和表單域兩部分組成，用于搜集不同類型的用戶輸入，比如：文本域、下拉列表、單選框、復(fù)選框等。表單使用<form>標(biāo)簽定義，多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽<input>，輸入類型由類型屬性type進行定義。當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時，就會用到文本域。文本域通過<inputtype="text">標(biāo)簽來設(shè)定。隱藏域hidden，隱藏域不會被瀏覽者看到，主要用于在不同頁面中傳遞隱藏域中設(shè)定的值。<inputtype="hidden"name="username"value="admin">2.8表單元素<inputtype="radio">標(biāo)簽定義了單選框選項<inputtype="checkbox">標(biāo)簽定義了復(fù)選框選項<inputtype="radio"name="gender"value="female"checked="checked"/>女<inputtype="radio"name="gender"value="male"/>男<inputtype="checkbox"name="m1"value="music"checked="checked"/>音樂<inputtype="checkbox"name="m2"value="trip"/>旅游<inputtype="checkbox"name="m3"value="reading"checked="checked"/>閱讀2.8表單元素提交按鈕：<inputtype="submit">重置按鈕：<inputtype="reset">普通按鈕：<inputtype="button">圖像按鈕：<inputtype="image"name="btnImage"src="images/btnImg.jpg"width="60"height="30">2.8表單元素文件域file，用于將本地文件上傳到服務(wù)器端，使用文件域上傳文件到服務(wù)器，需要在<form>中修改表單的編碼，即設(shè)置<formenctype="multipart/form-data"><inputtype="file"name="photo">2.8表單元素<select>,<option>標(biāo)簽定義下拉列表2.8表單元素文本域元素<textarea>，支持輸入多行文本，常用于備注、留言。<textareaname="note"rows="10"cols="30">備注信息</textarea>rows屬性設(shè)置可見行數(shù)，當(dāng)文本超出這個值時將顯示垂直滾動條，cols屬性設(shè)置一行可輸入的字符個數(shù)。2.8表單元素<fieldset>元素用于分組，<legend>元素為每個分組定義標(biāo)題2.8表單元素CSS層疊樣式表基礎(chǔ)學(xué)習(xí)導(dǎo)圖3.1CSS基本概念3.1.1CSS概述CSS層疊樣式表是一種可控制網(wǎng)頁樣式并允許樣式與內(nèi)容相分離的一種技術(shù)CSS能夠?qū)W(wǎng)頁的布局、字體、顏色、背景等圖文實現(xiàn)更精確的控制CSS使得網(wǎng)頁的體積更小、下載速度更快，且可以實現(xiàn)多個頁面的自動更新3.1.2CSS基本語法CSS代碼主要由對象、屬性、屬性值三個基本部分組成。對象很重要，它指定了對哪些網(wǎng)頁元素進行樣式設(shè)置，在CSS中對象也稱為選擇器(selector)。屬性是CSS語法中的關(guān)鍵字，它規(guī)定了格式修飾的一個方面。3.1.3在頁面中使用CSS內(nèi)聯(lián)樣式表：直接在HTML標(biāo)簽內(nèi)使用style屬性內(nèi)部樣式表：使用<style>標(biāo)簽在HTML文檔頭部定義在頁面中使用CSS外部樣式表：將CSS代碼寫入一個或多個文件后綴名為.css的文件中。當(dāng)樣式需要應(yīng)用于多個頁面時，使用<link>標(biāo)簽鏈接到樣式表（1）定義獨立的外部樣式文件（2）在頁面中通過<link>鏈接外部樣式文件3.2CSS選擇器3.2.1元素選擇器*是通配符選擇器，可以與任何元素匹配。選擇指定HTML元素(標(biāo)簽)，給選擇的元素設(shè)置樣式2.2.2類選擇器類(class)選擇器：選擇并設(shè)置一組元素的樣式3.2.3ID選擇器ID選擇器：為標(biāo)有特定id的HTML元素設(shè)置樣式3.2.4后代選擇器后代選擇器：選擇并設(shè)置元素后代的元素3.2.5子元素選擇器子元素選擇器：只選擇元素的子元素，不會擴大到任意的后代元素3.2.6相鄰兄弟元素選擇器相鄰兄弟元素選擇器：選擇緊接在另一個元素后的元素，且二者有相同的父元素3.2.7兄弟元素選擇器兄弟元素選擇器：選擇一個元素后的元素，且二者有相同的父元素3.2.8復(fù)合選擇器復(fù)合選擇器包括交集選擇器和并集選擇器兩種類型。交集選擇器是由兩個選擇器直接連接構(gòu)成，結(jié)果是兩者各自元素范圍的交集，其中第一個選擇器必須是元素選擇器，第二個選擇器是類選擇器或ID選擇器，兩個選擇器之間必須連續(xù)寫，不能有空格。3.2.9屬性選擇器可以為擁有指定屬性的HTML元素設(shè)置樣式3.2.8復(fù)合選擇器并集選擇器：對各個基本選擇器所選擇的范圍同時選中，任何形式的基本選擇器都可以作為并集選擇器的一個組成部分，各個元素之間用逗號分隔。3.2.9屬性選擇器[title]{color:red;}

給具有title屬性的所有元素設(shè)置樣式；[title=test]{color:red;}

給具有title屬性且屬性值為test的元素設(shè)置樣式；[title~=hello]{color:red;}給包含指定值的title屬性的所有元素設(shè)置樣式，一般適用于由空格分隔的屬性值，如<h2title="helloworld">Helloworld</h2>[lang|=en]{color:red;}

給帶有包含指定值的lang屬性的所有元素設(shè)置樣式，一般適用于由連字符分隔的屬性值，如<plang="en-us">Hi!</p>。3.2.10偽類選擇器偽類：同一個標(biāo)簽，根據(jù)其不同的狀態(tài)，有不同的樣式,用冒號表示。靜態(tài)偽類:僅用于超鏈接的樣式，如:link，:visited動態(tài)偽類，是所有元素都適用的樣式，如:hover,:active,:focus等a:link{color:red;}/*超鏈接點擊之前是紅色*/a:visited{color:green;}/*超鏈接點擊之后是綠色*/a:hover{color:green;}/*鼠標(biāo)懸停，放到標(biāo)簽上的時候*/a:active{color:black;}/*鼠標(biāo)點擊鏈接，但是不松手的時候*/偽類選擇器分為兩類：靜態(tài)偽類、動態(tài)偽類3.2.10偽類選擇器/*輸入元素獲取焦點時：*/input:focus{color:white;background-color:#6a6a6a;}/*鼠標(biāo)放在元素上時顯示藍色*/label:hover{color:blue;}/*點擊元素鼠標(biāo)沒有松開時顯示紅色*/label:active{color:red;}3.2.11偽元素選擇器h1:before可以在元素內(nèi)容前面插入新內(nèi)容h1:after可以在元素內(nèi)容之后插入新內(nèi)容偽元素是原本不在DOM中的元素，這個元素是新創(chuàng)建的元素。3.3CSS常用屬性3.3.1字體屬性字體屬性用來定義文本所使用的字體系列、大小、粗細、樣式等3.3.2文本屬性文本屬性可定義文本的外觀、進行段落排版。通過文本屬性，可以改變文本的字符間距、對齊方式、修飾方式、文本縮進等。3.3.2文本屬性3.3.3顏色和背景屬性3.3.3顏色和背景屬性background-repeat屬性用來設(shè)置是否及如何重復(fù)背景圖像，默認屬性值為repeat。3.3.3顏色和背景屬性background-position屬性設(shè)置背景圖像的起始位置，其取值有三種形式：background-position:xposypos|x%y%|xy第一種取值形式為xposypos，表示使用預(yù)定義關(guān)鍵字定位，其中水平方向可取值left|center|right，垂直方向可選top|center|bottom。第二種取值形式為x%y%，分別表示水平位置和垂直位置的百分比，其中左上角是0%0%，右下角是100%100%。第三種取值形式為xy，分別表示水平位置和垂直位置的像素值，其中左上角是00。3.3.3顏色和背景屬性background-attachment:設(shè)置背景圖像是否固定或隨頁面的其余部分滾動3.3.4列表屬性在CSS中，使用list-style設(shè)置列表樣式?？梢栽O(shè)置的屬性包括：3.3.4列表屬性3.3.5表格屬性可以設(shè)置的屬性包括：3.3.5表格屬性3.4CSS盒子模型3.4.1盒子組成所有頁面元素都可以看成是一個盒子，占據(jù)著一定的頁面空間盒子模型由內(nèi)容(content)、邊框(border)、內(nèi)邊距(padding)、外邊距(margin)4個部分組成盒子的寬度=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界3.4.1盒子組成3.4.2盒子邊框?qū)傩詁order是盒子邊框，形成盒子的邊界，一般用于分離元素border的屬性主要有三個：顏色(color)、寬度(width)、樣式(style)3.4.2盒子邊框?qū)傩越o不同邊框設(shè)置不同的屬性值只設(shè)置一條邊框的某一屬性3.4.3盒子內(nèi)邊距屬性padding是盒子的內(nèi)邊距，即邊框和內(nèi)容之間的空白區(qū)域設(shè)置1個屬性值表示上下左右4個內(nèi)邊距的值；設(shè)置2個屬性值表示上下內(nèi)邊距和左右內(nèi)邊距的值；設(shè)置3個屬性值，前者表示上邊距屬性值，中間表示左右內(nèi)邊距屬性值，后者表示下內(nèi)邊距值；設(shè)置4個屬性值，表示上、右、下、左內(nèi)邊距的值，呈順時針方向3.4.3盒子內(nèi)邊距屬性可以使用padding-top,padding-right,padding-bottom,padding-left單獨設(shè)置某一方向的內(nèi)邊距3.4.4盒子外邊距屬性margin是盒子的外邊距，即頁面上元素和元素之間的距離3.5CSS元素布局與定位3.5.1標(biāo)準(zhǔn)文檔流標(biāo)準(zhǔn)文檔流是指不使用與布局和定位相關(guān)CSS規(guī)則時，頁面元素默認的排列規(guī)則。頁面元素分為兩類：塊級元素(block)：左右撐滿占據(jù)一行，和同級兄弟元素依次垂直排列，如div,li元素等行內(nèi)元素(inline)：相鄰元素之間橫向排列，到文檔右端自動換行，如span,a元素等3.5.2元素在標(biāo)準(zhǔn)流中的定位span1span2margin-rightmargin-left行內(nèi)元素的水平間距是由這兩個元素所在盒子的外邊距之和決定的。3.5.2元素在標(biāo)準(zhǔn)流中的定位div1div2Max(margin-bottom,margin-top)兩個塊級元素之間的垂直距離不是第1個元素的margin-bottom加第2個元素的margin-top，而是兩者之中較大者3.5.2元素在標(biāo)準(zhǔn)流中的定位當(dāng)一個元素包含另一個元素時，就形成父子關(guān)系，其中子元素的margin將以父塊的內(nèi)容為參考。外層的虛線邊框是父div的內(nèi)容區(qū)域，可以看出，子元素的margin以及其它部分都是從父元素的內(nèi)容區(qū)域開始計算的。3.5.2元素在標(biāo)準(zhǔn)流中的定位3.5.2元素在標(biāo)準(zhǔn)流中的定位margin為負值時，元素之間的定位。當(dāng)元素的margin設(shè)為負值時，會使元素所在的盒子向反方向移動，可能導(dǎo)致兩個元素的重疊，產(chǎn)生一個元素覆蓋在另一個元素上面的效果。3.5.3元素的定位屬性元素通過position屬性實現(xiàn)定位，分為靜態(tài)定位（static）、相對定位（relative）、絕對定位（absolute）和固定定位（fixed）四種定位方式。relative:元素的位置將相對其原本的標(biāo)準(zhǔn)位置偏移指定的距離3.5.3元素的定位屬性absolute：元素可以放在頁面上的任意位置，位置相對于最近已定位的父元素，如果元素沒有已定位的父元素，那么它的位置相對于<html>3.5.3元素的定位屬性fixed：元素位置相對于瀏覽器窗口是固定位置，拖動滾動條時，元素位置不會發(fā)生變化3.5.4元素的浮動屬性在標(biāo)準(zhǔn)流中，一個塊級元素在水平方向會自動伸展，直到包含它的父級元素的邊界；在垂直方向上與兄弟元素依次排列，不能并排。3.5.4元素的浮動屬性如果將float屬性設(shè)置為left或right，那么元素就會向其父級元素的左側(cè)或右側(cè)靠緊，同時盒子的寬度不再伸展，將根據(jù)盒子中內(nèi)容寬度決定其寬度。標(biāo)準(zhǔn)流div1float:leftdiv2float:leftdiv3float:left3.5.4元素的浮動屬性右浮動效果標(biāo)準(zhǔn)流div1float:rightdiv2float:right3.5.4元素的浮動屬性清除浮動效果clear:left|right|both|nonenone為默認值，允許元素兩邊都可以有浮動對象，left不允許左邊有浮動對象，right不允許右邊有浮動對象，both不允許有浮動對象。頁面中有兩個元素div1、div2，它們都設(shè)置為左浮動。如果希望div2能排列在div1下邊，就像div1沒有浮動，div2左浮動那樣，只要在div2中使用clear:left;指定div2元素左邊不允許出現(xiàn)浮動元素，這樣div2就會移到下一行。3.5.5元素的顯示屬性元素的顯示可以通過display屬性進行設(shè)置，利用display屬性可以實現(xiàn)塊級元素和行內(nèi)元素的相互轉(zhuǎn)換。3.5.5元素的顯示屬性設(shè)置display:inline可以將任意的塊級元素轉(zhuǎn)換為行內(nèi)元素，設(shè)置該屬性值后，元素將擁有行內(nèi)元素的特性?？梢耘c其他行內(nèi)元素共享一行，不會獨占一行；不能更改元素的height和width屬性值，大小由內(nèi)容撐開；可以使用padding屬性，設(shè)置上下左右值都有效，而使用margin屬性時，僅left和right屬性會產(chǎn)生邊距效果，設(shè)置top和bottom屬性沒有任何效果。3.5.5元素的顯示屬性設(shè)置display:block可以將任意的行內(nèi)元素轉(zhuǎn)換為塊級元素，元素將擁有塊級元素的特性。即元素將獨占一行，在不設(shè)置自己的寬度的情況下，塊級元素會默認填滿父級元素的寬度；能夠改變元素的height和width值；可以設(shè)置padding、margin的各個屬性值，top、left、bottom、right都能夠產(chǎn)生邊距效果。3.5.5元素的顯示屬性在設(shè)計水平導(dǎo)航欄效果時，通常希望多個導(dǎo)航鏈接項處于同一行，即呈現(xiàn)行內(nèi)元素的特征。同時，還希望設(shè)置各個導(dǎo)航鏈接項的寬度和高度，即同時兼有塊級元素的特征。此時，可以設(shè)置display屬性值為inline-block，該屬性值結(jié)合了inline與block的一些特點，使得塊級元素不再獨占一行。在元素的顯示上，inline-block與浮動效果相似，但是兩者又有著本質(zhì)的區(qū)別3.5.6元素的可見性屬性visibility屬性用來指定一個元素是否可見。默認屬性值為visible，表示元素可見；當(dāng)屬性值為hidden時，元素不可見，注意：元素雖然被隱藏，但仍占據(jù)原來所在位置，仍然會影響布局；display:none;設(shè)置元素不可見，元素隱藏后，不會影響布局。3.5.7元素的溢出處理屬性overflow屬性規(guī)定當(dāng)內(nèi)容溢出元素框時的處理。overflow:visible|hidden|scroll|auto;CSS3層疊樣式表進階學(xué)習(xí)導(dǎo)圖4.1CSS3新增選擇器4.1CSS3新增選擇器新增偽類選擇器4.1CSS3新增選擇器E:not()用于匹配除not()中選擇的元素外的所有元素。4.1CSS3新增選擇器E:target用來匹配錨點#指向的文檔中的具體元素，即URL后面跟錨點#，指向文檔內(nèi)某個具體的元素，那么該元素就會觸發(fā)target。4.1CSS3新增選擇器E:first-child表示選擇父元素下的第一個子元素，E:last-child表示選擇父元素下最后一個子元素。4.1CSS3新增選擇器E:nth-child(n)表示選擇父元素下面的第n個子元素，注意在CSS中n從1開始，且n可以是表達式。E:nth-last-child(n)表示從父元素最后一個元素開始計數(shù)，反向選擇。4.1CSS3新增選擇器E:only-child表示如果父元素下僅有一個元素，那么該元素被選中。4.1CSS3新增選擇器E:first-of-type,E:last-of-type,E:only-of-type,E:nth-of-type(n),E:nth-of-last-type(n)，只考慮樣式中定義的子元素類型，不會受到其他元素的影響。4.1CSS3新增選擇器E:empty表示選擇沒有任何子元素的父元素。4.1CSS3新增選擇器E:checked匹配用戶界面上處于選中狀態(tài)的元素E，該選擇器主要用于檢測表單中單選框或復(fù)選框是否為選中狀態(tài)。4.2CSS3新增盒子屬性4.2.1圓角邊框?qū)傩詧A角邊框?qū)傩詁order-radius<style>#rcorner{border-radius:25px;border:2pxsolid#333333;padding:20px;width:200px;height:150px;}</style><body><pid="rcorner">圓角</p></body>僅設(shè)置一個屬性值當(dāng)僅設(shè)置一個屬性值時，邊框的四個角具有相同的大小，如果希望單獨設(shè)置四個角的圓角效果，可以使用border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius屬性設(shè)置圓角值。設(shè)置不同個數(shù)的屬性值4.2.1圓角邊框?qū)傩栽O(shè)置橢圓邊框效果第一個數(shù)值表示水平半徑，第二個數(shù)值表示垂直半徑4.2.1圓角邊框?qū)傩詧D片的圓角效果4.2.1圓角邊框?qū)傩?.2.2邊框圖片屬性CSS3中提供了border-image屬性，該屬性使用圖像填充盒子的邊框。第一個參數(shù)是border-image-source，表示背景圖像的url地址；第二個參數(shù)是border-image-slice，表示圖片剪裁位置；圖片裁剪九宮格表示距離圖片上部30%、距離右邊35%、距離底部40%、左邊30%的地方各剪裁一下，形成了九個分離的區(qū)域。border-image:url(border.png)30%35%40%30%repeatborder-image:url(border.png)27repeat第三個參數(shù)是border-image-repeat，即邊框圖片的重復(fù)性，可取值repeat（重復(fù)）、round（平鋪）、Stretch（拉伸），其中Stretch是默認值。border-image:url(border.png)27border-image:url(border.png)27repeatborder-image:url(border.png)27roundrepeat4.2.2邊框圖片屬性原始圖像81*81border-image:url(border.png)27stretchborder-image:url(border.png)27round4.2.2邊框圖片屬性4.2.3盒子陰影屬性box-shadow屬性用來定義盒子陰影效果box-shadow:

offset-xoffset-yblurspreadcolor

inset4.2.3盒子陰影屬性紙質(zhì)樣式卡片效果4.2.3盒子陰影屬性圖片卡片陰影效果4.2.3盒子陰影屬性4.2.4盒子背景屬性background-image屬性，將多張圖片同時設(shè)置為背景，不同背景圖片用逗號隔開background-size指定背景圖像的大小。CSS3以前，背景圖像大小是由圖像的實際大小決定。background-size:auto|<長度值>|<百分比>|cover|containauto，默認值，不改變背景圖片的原始高度和寬度<長度值>，成對出現(xiàn)，例如80px60px<百分比>，例如100%100%Cover，覆蓋，背景圖片等比縮放以填滿整個容器Contain，容納，背景圖片等比縮放至某一邊緊貼容器邊緣4.2.4盒子背景屬性background-origin屬性指定了背景圖像的起始區(qū)域。background-origin:border-box|padding-box|content-box當(dāng)background-attachment屬性設(shè)置為fixed時，background-origin屬性會失效。4.2.4盒子背景屬性4.2.4盒子背景屬性4.3CSS3漸變屬性4.3CSS3漸變屬性漸變（Gradients）效果提供了在兩個或多個指定的顏色之間顯示平穩(wěn)的過渡。CSS3定義了三種類型的漸變：一種是線性漸變（LinearGradients），根據(jù)漸變方向的不同，又分為向下、向上、向左、向右、對角等不同方向的線性漸變；第二種漸變是徑向漸變（RadialGradients），由具有不同半徑的圓的中心進行定義；第三種類型為重復(fù)漸變，是由單個漸變重復(fù)而成。由于不同瀏覽器廠商在實現(xiàn)漸變標(biāo)準(zhǔn)時，對于漸變方向的定義、角度的定義以及順時針還是逆時針有所不同，所以在使用漸變時需要添加瀏覽器前綴。例如，對于Chrome、Safari瀏覽器，前綴為-webkit-，而火狐瀏覽器Firefox的前綴為-moz-，Opera瀏覽器的前綴為-o-。4.3.1線性漸變線性漸變background:linear-gradient(direction,color-stop1,color-stop2,...);指定線性漸變的方向（左右，對角線）4.3.1線性漸變指定線性漸變的方向（指定角度）4.3.1線性漸變多個顏色過渡節(jié)點的線性漸變4.3.1線性漸變精確控制顏色過渡的位置4.3.1線性漸變帶透明度顏色過渡的線性漸變4.3.1線性漸變重復(fù)線性漸變（repeating-linear-gradient）background:repeating-linear-gradient(black,gray10%,white15%);黑色漸變到灰色從高度的0%至10%，灰色漸變到白色從高度的10%至15%，然后重復(fù)這一漸變4.3.2重復(fù)線性漸變徑向漸變background:radial-gradient(shape[size]atpostion,start-color,...,last-color);shape漸變形狀，取值circle（圓形）或ellipse（橢圓形），形狀可以搭配attop，atcenter或atbottom等位置使用，例如radial-gradient(circleatcenter,#f00,#ff0,#080);，也可以使用%或px指定中心點位置，例如radial-gradient(circleat50%,#f00,#ff0,#080);。4.3.3徑向漸變徑向漸變background:radial-gradient(shape[size]atpostion,start-color,...,last-color);size是可選值，表示邊緣輪廓的位置，可取值分別為closest-side，表示漸變的半徑長度為從圓心到離圓心最近的邊；closest-corner，表示漸變的半徑長度為從圓心到離圓心最近的角；farthest-side，表示漸變的半徑長度為從圓心到離圓心最遠的邊；farthest-corner，表示漸變的半徑長度為從圓心到離圓心最遠的角。例如radial-gradient(circlefarthest-corner,#f00,#ff0,#080);也可以配合at使用，例如radial-gradient(circlefarthest-cornerat30px30px,#f00,#ff0);。4.3.3徑向漸變顏色結(jié)點均勻分布的徑向漸變顏色結(jié)點不均勻分布的徑向漸變4.3.3徑向漸變重復(fù)徑向漸變用于創(chuàng)建重復(fù)的徑向漸變圖像background:repeating-radial-gradient(shape[size]atposition,start-color,...,last-color);background:repeating-radial-gradient(black,white10%,gray15%);4.3.4重復(fù)徑向漸變4.4字體與文本屬性4.4.1使用字體使用@font-face加載特定的字體，@font-face語句是CSS中的一個功能模塊，是為了解決由于瀏覽者系統(tǒng)中沒有安裝字體導(dǎo)致不能顯示的問題，用于實現(xiàn)網(wǎng)頁字體多樣性。font-family的作用是聲明字體變量;src屬性定義字體的下載地址，local表示本機地址，url表示網(wǎng)址，當(dāng)網(wǎng)頁加載時會自動從服務(wù)器上下載字體文件再顯示出來。4.4.2本文陰影文本陰影text-shadow:h-shadowv-shadowblurcolorh-shadow和v-shadow是必填項，分別表示垂直和水平陰影，允許為負值；blur為選填項，表示模糊的距離；color為選填項，表示陰影顏色。4.4.3文本溢出處理文本溢出處理text-overflow指定應(yīng)向用戶如何顯示溢出內(nèi)容text-overflow:clip|ellipsis|string4.5CSS32D/3D變換4.5.1平移變換translate(x,y)方法，從當(dāng)前元素位置沿X軸和Y軸移動相應(yīng)的位移量transform:translateX(x)transform:translateY(y)translate3d(x,y,z)，實現(xiàn)元素在三維空間的平移變換。translateZ(z)4.5.1平移變換rotate(angle)用來在二維空間中將元素對象相對中心原點進行旋轉(zhuǎn)，給定度數(shù)為正值為順時針旋轉(zhuǎn)，負值為逆時針旋轉(zhuǎn)4.5.2旋轉(zhuǎn)變換默認是圍繞元素的中心點旋轉(zhuǎn)，也可以使用transform-origin屬性設(shè)置旋轉(zhuǎn)中心點，例如transform-origin:00，使元素的旋轉(zhuǎn)中心點為左上角。4.5.2旋轉(zhuǎn)變換scale(x,y),scaleX(x),scaleY(y)方法，將元素根據(jù)中心原點進行縮放，參數(shù)可以是正數(shù)、負數(shù)或小數(shù)，默認值為1，取正數(shù)表示放大相應(yīng)的倍數(shù)，取小于1的小數(shù)值表示縮小相應(yīng)的倍數(shù)，取負數(shù)值不會縮小元素，而是翻轉(zhuǎn)元素。4.5.3縮放變換skew(angle[,angle])方法用來實現(xiàn)元素對象的傾斜顯示。兩個參數(shù)值分別表示元素在X軸和Y軸方向上傾斜的角度，如果第二個參數(shù)為空，則默認為0；參數(shù)取正值，表示元素沿水平或垂直方向，按順時針傾斜，否則如果取負值，表示元素按逆時針方向傾斜。4.5.4傾斜變換CSS32D/3D變換

skewX效果perspective屬性：定義元素距離視圖（人眼）的距離，以像素為單位。當(dāng)元素定義perspective屬性時，其子元素會獲得透視效果，而不是元素本身。Z=0，所以此時投影在屏幕上的圖像尺寸和原始圖片大小一樣過translateZ增大Z的值，即圖片向視點靠近，此時視距減小，投影到屏幕上的圖像變大了。4.5.5perspective屬性帶perspective屬性的旋轉(zhuǎn)效果4.5.5perspective屬性圖片旋轉(zhuǎn)應(yīng)用案例4.5.6變換應(yīng)用案例4.6CSS3過渡與動畫效果4.6.1過渡效果過渡transition是元素從一種樣式逐漸改變?yōu)榱硪环N的效果transition:propertydurationtiming-functiondelay過渡效果應(yīng)用案例4.6.1過渡效果4.6.2動畫效果動畫和過渡一樣，是使元素從一種樣式變化為另一種樣式的效果。CSS3中使用@keyframes規(guī)則創(chuàng)建動畫4.6.2動畫效果動畫效果應(yīng)用案例4.6.3圖片過濾效果filter屬性為元素添加可視效果(例如：模糊與飽和度)4.7CSS3應(yīng)用案例水平導(dǎo)航條4.7.1導(dǎo)航條垂直導(dǎo)航條4.7.2下拉菜單4.7.3響應(yīng)式圖片與媒體查詢響應(yīng)式圖片媒體查詢@media可用于檢測viewport(視窗)的寬度與高度，設(shè)備的寬度與高度，朝向(智能手機橫屏，豎屏)，分辨率等4.7.3響應(yīng)式圖片與媒體查詢媒體查詢由多種媒體組成，可以包含一個或多個表達式，表達式根據(jù)條件是否成立返回true或false。

在屏幕可視窗口尺寸大于480像素的設(shè)備上修改背景顏色響應(yīng)式圖片相冊4.7.3響應(yīng)式圖片與媒體查詢4.7.4關(guān)鍵幀動畫4.7.4關(guān)鍵幀動畫4.7.5旋轉(zhuǎn)照片墻把照片疊在一起，然后rotateY旋轉(zhuǎn)，給每張圖片旋轉(zhuǎn)不一樣的角度；設(shè)置perspective和preserve-3d，使瀏覽器以3D方式渲染；設(shè)置translateZ；設(shè)置旋轉(zhuǎn)動畫。4.7.6輪播圖效果JavaScript語言學(xué)習(xí)導(dǎo)圖5.1JavaScript簡介5.1JavaScript簡介JS是一種在瀏覽器中運行的解釋性腳本語言。在html基礎(chǔ)上，JS可以開發(fā)交互式Web網(wǎng)頁。TIOBE編程語言排行榜5.1JavaScript簡介JS是由ES(ECMAScript)、DOM(文檔對象模型)、BOM(瀏覽器對象模型)組成。ECMAScript6.0（簡稱ES6）是JavaScript語言的下一代標(biāo)準(zhǔn)，已經(jīng)在2015年6月發(fā)布。它的目標(biāo)是使得JavaScript語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級開發(fā)語言。Node.js是一個基于ChromeV8引擎的JavaScript運行環(huán)境，是讓JS運行在服務(wù)端的開發(fā)平臺，它使得JS成為與PHP、Python等服務(wù)端語言相似的語言。Node.js就只有ES，目前瀏覽器比較流行的版本就是ES6(ES2015)。5.2基本語法5.2.1代碼書寫規(guī)范區(qū)分大小寫JavaScript語言是嚴格區(qū)分大小寫的。一般來說，對于變量、函數(shù)以及事件的命名建議采用小寫和大寫組合的形式，例如studentId、getNumber、onClick等。代碼格式每條功能執(zhí)行語句的最后必須以分號結(jié)束，一個單獨的分號也可以表示一條語句，叫做空語句。一行可以寫一條語句，也可以寫多條語句。代碼注釋單行注釋，以兩個斜杠//開頭，后面跟上注釋文字；另一種是多行注釋，以符號/*作為起始，以*/作為結(jié)束，中間是待注釋的內(nèi)容，注釋內(nèi)容可以跨越多行。5.2.2標(biāo)識符和保留字標(biāo)識符標(biāo)識符就是一個名稱，主要用來命名程序中的常量、變量和函數(shù)等。在JS中，要求一個合法的標(biāo)識符可以由字母、數(shù)字、下劃線（_）和美元符號（$）組成，但不能以數(shù)字開頭，并且不能使用JavaScript中定義的保留字。。保留字保留字是指在程序中有特定含義，已成為編程語言語法體系的一部分字符，這些字符只能在JavaScript語法規(guī)定的場合下使用，而不能用作變量名、函數(shù)名等標(biāo)識符。5.2.3常量與變量程序運行時，值可以改變的量為變量，值不變的量為常量常量聲明：constname='Bill';變量聲明：使用var關(guān)鍵詞聲明變量，可以同時聲明多個變量vari,j,k;在聲明變量的同時對其賦值vari=1,j=2,k=3;如果只是聲明了變量，并未對其賦值，則其值默認為undefinedJS擁有動態(tài)類型,相同的變量名可用作不同的類型var現(xiàn)在已經(jīng)不推薦使用了，因為會有變量提升等問題5.2.3常量與變量ES6新增了let命令，用來聲明局部變量，它的用法類似于var，但是所聲明的變量，只在let命令所在的代碼塊內(nèi)有效。let聲明變量letname='Bill';5.2.4數(shù)據(jù)類型JS采用了弱類型的方式，所以在聲明變量時無需事先指定數(shù)據(jù)類型，可在使用或賦值時再確定其數(shù)據(jù)類型。在JS中數(shù)據(jù)類型主要分為值類型（基本類型）和引用類型兩類，其中值類型又包括數(shù)字型、字符串型、布爾類型、空類型、未定義類型等；引用類型包括數(shù)組、函數(shù)、對象等類型。字符串是由Unicode字符、數(shù)字、標(biāo)點符號等組成的序列，用單引號或雙引號進行包含。字符串?dāng)?shù)據(jù)也可看成是一個String對象，可以通過String對象的屬性和方法對字符串進行操作。數(shù)字型（Number）是最基本的數(shù)據(jù)類型，JS中不區(qū)分整數(shù)和浮點數(shù)，所有數(shù)字都是由浮點型來表示。5.2.4數(shù)據(jù)類型布爾數(shù)據(jù)類型只有兩個取值：true或false。JavaScript中還有一些特殊的數(shù)據(jù)類型，包括轉(zhuǎn)義字符、未定義值、空值等。處于未賦值狀態(tài)的變量是undefined類型，表示未知狀態(tài)，而null類型則表示變量被賦予空值，用于定義空或不存在的引用，如果引用一個沒有定義的變量，同樣也會返回null值。JS中還有一種特殊類型的數(shù)字常量NaN，表示非數(shù)字。5.3流程控制語句5.3流程控制語句JavaScript中提供了if條件判斷、switch多分支、for循環(huán)、while循環(huán)、do…while循環(huán)、break、continue等7種流程控制語句。條件判斷語句5.3流程控制語句循環(huán)語句5.4函數(shù)5.4.1函數(shù)的定義JavaScript使用關(guān)鍵字function定義函數(shù)，函數(shù)可以通過聲明定義，也可以是一個表達式。函數(shù)一般定義在HTML文檔的<head>部分，在<script>元素內(nèi)部；函數(shù)也可以單獨定義在外部的腳本文件中。函數(shù)定義語法格式5.4.2函數(shù)的調(diào)用JavaScript中，函數(shù)調(diào)用有三種方式：函數(shù)的直接調(diào)用、在事件響應(yīng)中調(diào)用、通過鏈接調(diào)用。函數(shù)的直接調(diào)用是指直接使用函數(shù)名，使用具體的實際參數(shù)替換形式參數(shù)。在事件響應(yīng)中調(diào)用，通過將函數(shù)與事件相關(guān)聯(lián)完成事件響應(yīng)的過程。在超鏈接標(biāo)簽中的href屬性中使用“javascript:關(guān)鍵字”格式，通過鏈接調(diào)用函數(shù)。5.4.2函數(shù)的調(diào)用在事件響應(yīng)中調(diào)用函數(shù)直接調(diào)用函數(shù)JS程序按照在HTML中出現(xiàn)的順序逐行執(zhí)行。但是函數(shù)體內(nèi)的代碼，不會立即執(zhí)行，只有當(dāng)所在函數(shù)被其它程序調(diào)用時，代碼才會執(zhí)行5.4.3常用內(nèi)置函數(shù)JavaScript還提供了一些常用的內(nèi)置函數(shù)5.5自定義對象5.5.1自定義對象的創(chuàng)建JavaScript提供了兩種創(chuàng)建自定義對象的方法。一種稱為字面量表示法，即手動的寫出對象的內(nèi)容來創(chuàng)建一個對象。5.5.1自定義對象的創(chuàng)建另外一種方法是使用new關(guān)鍵字創(chuàng)建對象。或者5.5.2對象成員的訪問與操作當(dāng)需要訪問對象屬性或方法，可以使用點(.)，后面跟要訪問的屬性或方法即可。也可以用一個對象來做另一個對象成員的值，例如可以將person對象中的name屬性值定義為一個對象。5.5.2對象成員的訪問與操作還可以使用中括號訪問對象的屬性，例如person['age']，person['name']['first']，這種方式看起來更像是訪問一個數(shù)組元素。有時需要判斷一個對象有無屬性，此時可以使用關(guān)鍵字in。5.6內(nèi)置對象5.6.1Array對象Array對象是使用單獨的變量名存儲一連串相同或不同類型的數(shù)據(jù)。創(chuàng)建Array數(shù)組對象有兩種方式創(chuàng)建數(shù)組訪問數(shù)組：通過指定數(shù)組名以及索引號，可以訪問某個特定的元素5.6.2String對象String對象用來保存和處理字符串變量。創(chuàng)建String對象很簡單，直接使用newString即可，例如varstr1=newString("Thisisastring");5.6.3Math對象Math對象包含用來進行數(shù)學(xué)計算的各類屬性和方法。Math和其他對象不同，它不是一個構(gòu)造函數(shù)，它屬于一個工具類不用創(chuàng)建對象。5.6.4Date對象Date對象用來獲取日期和時間。創(chuàng)建Date對象的基本語法為：vardate=newDate(日期參數(shù))。日期參數(shù)有幾種情況：一是省略不寫，此時獲取系統(tǒng)當(dāng)前日期和時間。二是采用格式為“月日，公元年時：分：秒”或“月日，公元年”的日期字符串，例如vardate=newDate("Apil1,202011:40:20")。第三種是一律以數(shù)值表示，格式為“公元年，月，日，時，分，秒”或“公元年，月，日”的形式，例如vardate=newDate(2020,4,1,11,40,20)。5.6.4Date對象5.7JavaScript腳本的編寫5.7.1腳本直接嵌入在script元素中這種方式首先將<script>元素插入到<head></head>之間或者<body></body>之間，然后在<script></script>之間根據(jù)需要編寫JavaScript腳本。該方式比較簡單，在頁面加載時，腳本即可運行。5.7.2在事件響應(yīng)中嵌入和執(zhí)行腳本為了避免在頁面加載時直接執(zhí)行腳本，可以將腳本編寫為函數(shù)，在事件響應(yīng)中觸發(fā)執(zhí)行。5.7.3腳本直接嵌入在script元素中將JavaScript代碼編寫為一個獨立的以.js為擴展名的腳本文件，然后在頁面中用script元素鏈接外部腳本文件。5.8JavaScript腳本的調(diào)試5.8.1使用alert方法調(diào)試腳本使用alert方法進行調(diào)試比較簡單，直接在需要調(diào)試輸出的地方輸出字符串或變量即可，例如varname=”abc”;alert(name);。5.8.2使用console.log調(diào)試腳本新一代的瀏覽器，如Firefox、Chrome，包括IE，都相繼推出了JS調(diào)試控制臺，支持使用類似"console.log(xxxx)"的形式，在控制臺打印調(diào)試信息，而不直接影響頁面顯示。5.8.3使用斷點調(diào)試腳本所謂斷點，是指可以讓程序暫時停止執(zhí)行的某個位置。JavaScript斷點調(diào)試，即是在瀏覽器開發(fā)者工具中為JavaScript代碼添加斷點，讓代碼執(zhí)行到某一特定位置暫停，方便開發(fā)者對該處代碼段的分析與邏輯處理。DOM與BOM編程學(xué)習(xí)導(dǎo)圖6.1DOM概念與基礎(chǔ)操作6.1.1DOM概述DOM全稱文檔對象模型(DocumentObjectModel)，其作用是將網(wǎng)頁轉(zhuǎn)為一個JS對象，從而使用JS對網(wǎng)頁元素進行各種操作。瀏覽器會根據(jù)DOM模型，將HTML文檔解析成一系列節(jié)點，再由這些節(jié)點組成一個樹狀結(jié)構(gòu)。6.1.2獲取節(jié)點獲取節(jié)點主要有兩種方式：一種是從document頂層對象出發(fā)，調(diào)用相應(yīng)方法訪問各節(jié)點，另一種方式是從節(jié)點指針出發(fā)獲取該節(jié)點所在的父節(jié)點、兄弟節(jié)點和子節(jié)點。6.1.2獲取節(jié)點getElementById方法，即通過ID訪問HTML元素節(jié)點。6.1.2獲取節(jié)點getElementsByName方法，即通過元素的name屬性查找HTML元素節(jié)點。6.1.3創(chuàng)建與插入節(jié)點創(chuàng)建節(jié)點包括創(chuàng)建元素節(jié)點、創(chuàng)建屬性節(jié)點、創(chuàng)建文本節(jié)點三類，對應(yīng)的方法名分別為createElement、createAttribute、createTextNode；插入節(jié)點有appendChild方法，表示向節(jié)點的子節(jié)點列表末尾添加新的子節(jié)點，insertBefore方法表示在已知的子節(jié)點前面插入一個新的子節(jié)點。6.1.3創(chuàng)建與插入節(jié)點創(chuàng)建與插入節(jié)點6.1.4復(fù)制、刪除和替換節(jié)點復(fù)制節(jié)點使用cloneNode方法，其功能是創(chuàng)建指定節(jié)點的副本，該方法接收一個布爾值參數(shù)，當(dāng)參數(shù)為true時，表示復(fù)制當(dāng)前節(jié)點及其所有子節(jié)點，當(dāng)參數(shù)為false時，表示僅復(fù)制當(dāng)前節(jié)點。刪除節(jié)點使用removeChild方法，用來刪除指定的節(jié)點。替換節(jié)點使用replaceChild方法，表示將某個子節(jié)點替換為另一個節(jié)點。6.1.4復(fù)制、刪除和替換節(jié)點使用removeChild方法刪除節(jié)點使用replaceChild方法替換節(jié)點6.1.5獲取、設(shè)置和刪除屬性getAttribute方法用來獲取節(jié)點屬性，該方法以屬性名為參數(shù)，返回屬性名對應(yīng)的屬性值。設(shè)置屬性使用setAttribute方法，對應(yīng)的參數(shù)為屬性名和屬性值，如果指定的屬性名不存在，調(diào)用該方法還可以創(chuàng)建相關(guān)屬性。刪除屬性使用removeAttribute方法。6.1.5獲取、設(shè)置和刪除屬性在DOM中，如果需要修改元素的屬性，除了使用元素節(jié)點.setAttribute(屬性名,屬性值)外，也可以直接設(shè)置document.getElementById(id).屬性="新值"。如果需要修改元素的CSS樣式，可以使用document.getElementById(id).style.樣式名="新值"。6.2DOM級別與DOM事件6.2DOM級別與DOM事件DOM級別一共可以分為4個級別：DOM0級，DOM1級，DOM2級和DOM3級，而DOM事件分為3個級別：DOM0級事件處理，DOM2級事件處理和DOM3級事件處理。DOM0級DOM1級DOM2級DOM3級DOM0級事件無DOM2級事件DOM3級事件

6.2.1DOM0級事件DOM0級事件就是將一個函數(shù)賦值給一個事件處理屬性。代碼給button定義了一個id，通過獲取id的按鈕，并將一個函數(shù)賦值給一個事件處理屬性onclick，這樣的方法便是DOM0級處理事件的體現(xiàn)，也可以通過給事件處理屬性賦值null來解綁事件。DOM0級事件處理程序的缺點在于一個處理程序無法同時綁定多個處理函數(shù)。6.2.2DOM2級事件DOM2級事件在DOM0級事件的基礎(chǔ)上彌補了一個處理程序無法同時綁定多個處理函數(shù)的缺點，允許給一個處理程序添加多個處理函數(shù)。DOM2級事件定義了addEventListener和removeEventListener兩個方法，分別用來綁定和解綁事件，方法中包含3個參數(shù)，表示綁定的事件處理屬性名稱（不包含on）、處理函數(shù)和是否在捕獲時執(zhí)行事件處理函數(shù)。6.2.3DOM3級事件DOM3級事件在DOM2級事件的基礎(chǔ)上添加了更多的事件類型，同時DOM3級事件也允許用戶自定義一些事件。6.2.4DOM事件流DOM結(jié)構(gòu)是一個樹型結(jié)構(gòu)，當(dāng)一個HTML元素產(chǎn)生一個事件時，該事件會在元素節(jié)點與根結(jié)點之間的路徑傳播，路徑所經(jīng)過的結(jié)點都會收到該事件，這個傳播過程可稱為DOM事件流。DOM支持兩種事件模型：捕獲型事件（eventcapture）和冒泡型事件（eventbubbling）6.2.4DOM事件流圖中當(dāng)用戶點擊超鏈接時，a元素為事件目標(biāo)，點擊a元素后同時也會觸發(fā)p、li上的點擊事件，一層一層向上直至最外層的html或document。在JavaScript中，可以通過設(shè)置addEventListener的第三個參數(shù)決定是事件冒泡還是事件捕獲，設(shè)置為true表示事件在捕獲階段執(zhí)行，而設(shè)置為false表示事件在冒泡階段執(zhí)行。事件冒泡，即事件開始是由最具體的元素接收，然后逐級向上傳播到較為不具體的節(jié)點。6.2.4DOM事件流當(dāng)點擊超鏈接時，首先會彈出“我是目標(biāo)事件”提示，然后又彈出“事件冒泡至div”的提示，這一結(jié)果表明事件是自內(nèi)而外向上冒泡。在冒泡過程中通過調(diào)用事件對象上的stopPropagation()方法可以終止事件的冒泡。6.3BOM編程6.3BOM編程BOM是BrowserObjectModel的縮寫，簡稱瀏覽器對象模型。BOM實際上是一系列能夠?qū)g覽器信息進行操作的對象集合，包括window對象、document對象、navigator對象、screen對象、history對象、location對象等，其中window對象是BOM的核心。6.3.1window對象window對象是瀏覽器窗口對文檔提供的一個容器，代表打開的瀏覽器窗口，是每一個加載文檔的父對象。window對象是全局對象，所有在全局作用域中聲明的變量、對象、函數(shù)都會變成window對象的屬性和方法。因此，在調(diào)用window對象的屬性和方法時，可以省略window對象的引用。6.3.1window對象window對象常用方法6.3.1window對象對話框類方法：alert方法僅接收一個字符串參數(shù)，用來彈出相應(yīng)的警告信息框；confirm方法用來顯示帶有確認和取消按鈕的對話框；prompt方法則用來顯示可提示用戶輸入的對話框。6.3.1window對象窗體控制方法：包括打開新窗口（open）和關(guān)閉窗口（close）。6.3.1window對象定時器方法：window對象提供了兩組和定時有關(guān)的方法，其中setInterval用于創(chuàng)建一個定時器，表示間隔指定的毫秒數(shù)重復(fù)執(zhí)行指定的代碼，而clearInterval則用于清除setInterval創(chuàng)建的定時器。6.3.1window對象利用setInterval還可以創(chuàng)建簡單的動畫效果。6.3.2hiostory對象history對象包含用戶（在瀏覽器窗口中）訪問過的URL，它是window對象的一部分，可通過window.history屬性對其進行訪問。history對象有一個屬性length，返回用戶瀏覽器歷史列表中訪問的網(wǎng)頁個數(shù)。history對象有三個方法：back()方法表示加載history列表中的前一個URL，即跳轉(zhuǎn)到當(dāng)前頁的上一頁；forward()表示加載history列表中的下一個URL，即跳轉(zhuǎn)到當(dāng)前頁的下一頁；go()方法則表示加載history列表中的某個具體頁面。6.3.3location對象location對象包含有關(guān)當(dāng)前URL的信息。http:///news/2020/0227/c8158a261461/page.htm#1hash:設(shè)置或返回從井號(#)開始的URLhost：設(shè)置或返回主機名和當(dāng)前URL的端口hostname:設(shè)置或返回當(dāng)前URL的主機名href:設(shè)置或返回完整的URLpathname:設(shè)置或返回當(dāng)前URL的路徑部分protocol:設(shè)置或返回當(dāng)前URL的協(xié)議search:設(shè)置或返回從問號(?)開始的URL(查詢部分)6.3.4screen對象screen對象包含有關(guān)客戶端顯示屏幕的信息。6.3.5navigator對象navigator對象包含有關(guān)瀏覽器的信息。6.4表單編程6.4表單編程一個表單有三個基本組成部分：表單標(biāo)簽<form>，包含了處理表單數(shù)據(jù)所用程序的URL以及數(shù)據(jù)提交到服務(wù)器的方法；表單域，包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等；表單按鈕，包括提交按鈕、復(fù)位按鈕和一般按鈕，用于將數(shù)據(jù)傳送到服務(wù)器上的處理程序或者取消輸入。6.4.1表單元素及其相關(guān)操作在獲取表單對象之前，首先需要定義表單，例如：<formid="form1"name="myForm"></form>。獲取表單對象四種方法：根據(jù)id獲取表單對象，document.getElementById('form1')獲取form元素集合里的第一個元素，document.getElementsByTagName('form')[0]直接使用數(shù)字下標(biāo)，可寫成document.forms[0]使用forms名稱下標(biāo)，即document.forms['myForm']6.4.1表單元素及其相關(guān)操作表單的提交和重置通過定義提交按鈕可以實現(xiàn)表單的提交，例如：<inputtype="submit"value="提交表單">，以這種方式提交表單時，瀏覽器會在將請求發(fā)送給服務(wù)器之前觸發(fā)submit事件，這樣就可以對表單域中的內(nèi)容進行驗證，以決定是否允許表單提交。也可以用編程方式調(diào)用submit方法提交表單。varform=document.getElementById("form1");form.submit();6.4.1表單元素及其相關(guān)操作在表單內(nèi)容驗證無效而不能發(fā)送給服務(wù)器時，可以通過阻止默認的提交事件來阻止表單提交。6.4.2文本框編程表單中有兩種類型的文本框：一種是用<inputtype="text">定義的單行文本框，另一種是用<textarea>定義的多行文本框。獲取文本框內(nèi)容6.4.3列表框編程創(chuàng)建select元素添加選項6.4.3列表框編程刪除所有選項刪除選定選項6.4.3列表框編程獲取選定選項的值及文本修改選項6.4.3列表框編程刪除select元素6.4.4選擇框編程選擇框編程是指利用DOM和JavaScript實現(xiàn)對表單中單選框（radio）和復(fù)選框（checkbox）的操作，其中主要任務(wù)是判斷單選框或復(fù)選框中選項的選擇狀態(tài)，在程序中需要使用循環(huán)遍歷整個選擇框，逐個檢查選擇項的checked屬性。6.5正則表達式6.5.1基本符號正則表達式(regularexpression)是用于匹配字符串中字符組合的模式，其模式規(guī)則是由一個字符序列組成，包括所有字母和數(shù)字在內(nèi)，可以用來檢查一個字符串是否含有某種子串、將匹配的子串替換或者從某個串中取出符合某個條件的子串等。正則表達式的創(chuàng)建按字面量方式進行創(chuàng)建，基本語法為：varpattern=/正則表達式主體/修飾符，其中斜杠稱為定界符，用來表示正則表達式開始和結(jié)束的地方；正則表達式主體由原子和元字符組成；修飾符是可選的，是對正則表達式的擴充，常用取值有g(shù)、i、m，分別表示全局匹配、不區(qū)分大小寫的匹配、多行匹配。6.5.1基本符號正則表達式的創(chuàng)建通過對象方式進行創(chuàng)建

varpattern=newRegExp("正則表達式","修飾符");正則表達式中所有字母和數(shù)字都是按照字面含義進行匹配的，其他非字母的字符需要通過反斜杠（\）作為前綴進行轉(zhuǎn)義，如\n匹配換行符。按照字面含義定義的字母和數(shù)字又叫做原子，這些字符都是精確匹配。如果需要匹配某一類字符，則需要使用元字符，也稱為字符組或字符類，通過將直接量字符放入方括號內(nèi)，可以組成元字符。一個元字符可以匹配它所包含任意一

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論