javascript
HTML/CSS/JavaScript学习总结(转)
HTML
網(wǎng)站開發(fā)的主要原則是：
–?用標簽元素HTML描述網(wǎng)頁的內(nèi)容結構；
–?用CSS描述網(wǎng)頁的排版布局；
–?用JavaScript描述網(wǎng)頁的事件處理，即鼠標或鍵盤在網(wǎng)頁元素上的動作后的程序
HTML（Hyper?Text?Mark-up?Language?超文本標記語言）的縮寫，是最基礎的網(wǎng)頁語言?。?
Html是通過標簽來定義的語言，代碼都是由標簽所組成?。Html代碼不用區(qū)分大小寫?。
Html代碼由<html>開始</html>結束。里面由頭部分<head></head>和體部分<body></body>兩部分組成。
?
標簽：是由一對尖括號<>和標簽名稱組成。
標簽分為“起始標簽”和“結束標簽”兩種，二者的標簽名稱是相同的，只是結束標簽多了一個斜杠“/”
在元素的起始標簽中，可以包含“屬性”來表示元素的其他特性
<標簽名?屬性名='屬性值'>?數(shù)據(jù)內(nèi)容?</標簽名>
??????????????????<標簽名?屬性名='屬性值'?/>
多個屬性時：<hr??size=“3”??align=“l(fā)eft”??width=”75%”>用空格分開
?
Html?的命名：文件的擴展名要以.html或.html結束。
??文件名中只可由英文字母、數(shù)字或下劃線組成。
??文件名中不要包含特殊符號，比如空格、$等
所有標記都要用尖括號（<>）括起來，這樣，瀏覽器就可以知道，尖括號內(nèi)的標記是HTML命令。
任何空格或回車在代碼中都無效，插入空格或回車有專用的標記，分別是?、<br>。因此，不同的標記間用回車鍵換行再編寫是個不錯的習慣。
@?title元素：文件標題聲明?
@?link元素和style元素常用于CSS?
@?script元素用于腳本
@?meta元素?元信息
@?<base>?超鏈接網(wǎng)址基準參考點?
<meta>?元素可提供有關頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞。
?
name?屬性：網(wǎng)頁的描述信息。當取keywords時，content屬性的內(nèi)容就作為搜索引擎的關鍵字進行搜索。
http-equiv?屬性：模擬HTTP協(xié)議的響應消息頭。
@?body元素是html文件的主體元素，它包含所有要在網(wǎng)頁上顯示的各種元素?。
????????設置頁面背景:bgcolor
????????設置背景圖片:background
????????設計正文顏色:text
設置頁面邊距:topmargin、leftmargin、
??????????????????????????rightmargin、bottomnargin
??????????????設置顯示內(nèi)容與瀏覽器的距離
添加空格——?
?
<b>?…?</b>?粗.<i>?…?</i>斜?<s>?…?</s>?刪<u>?…?</u>?下劃<sub>?…?</sub>?下標??????????<sup>?…?</sup>?上標???????????
?
.<address>?…?</address>?地址????????自動傾斜??
.<big>?…?</big>?大字
<strong>?…?</strong>?加強語氣?(?加粗?
<em>...</em>?加強語氣?(?傾斜?
| ?? | ? |
段落縮進<blockquote>
設置水平線<hr>
向中對齊?<center>?
格式：?<center>?…?</center>
插入定義列表<dl>
<dl>
??<dt>名稱</dt>
??????<dd>說明</dd>
??????<dd>說明</dd>
??????<dd>說明</dd>
??<dt>名稱</dt>
??????<dd>說明</dd>
?????<dd>說明</dd>
?????<dd>說明</dd>
??…
</dl>
插入無序列表<ul>
<ul>
??<li>項目名稱</li>…
??<li>項目名稱</li>…
??<li>項目名稱</li>…
??…
<ul>
<ul>：符號標簽（○●■）
type屬性：disc???●??(?默認)???????circle???○?????????????square??■
<ul?type="circle">
?
?
插入有序列表<ol>
<ol>
??<li>項目名稱</li>…
??<li>項目名稱</li>…
??<li>項目名稱</li>…
??…
</ol>
超鏈接概述
鏈接在網(wǎng)頁制作中是一個必不可少的部分，在瀏覽網(wǎng)頁時，單擊一張圖片或者一段文字就可以彈出一個新的網(wǎng)頁，這些功能都是通過超鏈接來實現(xiàn)的，在HTML文件中，超鏈接的建立是很簡單的，但是掌握超鏈接的原理對網(wǎng)頁的制作是至關重要的。在學習超鏈接之前，需要先了解一下“URL”，所謂URL（Uniform?Resource?Locator）指統(tǒng)一資源定位符，通常包括三個部分：協(xié)議代碼、主機地址、具體的文件名
超鏈接標簽的使用
創(chuàng)建超鏈接的標簽為<a>和</a>，使用格式如下：
<a?href=“資源地址”???target=“是否在新窗口顯示”???title=“指向鏈接時顯示的文字”>
鏈接名稱
</a>
| _parent | 在上一級窗口中打開，一般使用分楨的框架頁會經(jīng)常使用 |
| _blank | 在新窗口打開 |
| _self | 在同一個框架或窗口中打開，該項一般不用設置 |
| _top | 在瀏覽器的整個窗口中打開，忽略任何框架 |
鏈接路徑
–?絕對路徑：包含了標識Internet上的文件所需要的所有信息，包括完整的協(xié)議名稱、主機名稱、文件夾名稱和文件名稱。格式為：
通信協(xié)議://服務器地址:端口號/文件位置…/文件名
http://ww.sina.com.cn/web/index.html
相對路徑：是以當前文件所在路徑為起點，進行相對文件的查找。
鏈接到同一文檔的某個部分
??錨記標簽用于使用戶“跳”到文檔的某個部分?
??HTML?的?NAME?屬性用于創(chuàng)建錨標記??
<A?NAME?=?“marker”>主題名稱</A>
<A?HREF=?“#marker”>主題名稱</A>
為達到這種跳轉(zhuǎn)效果，請在?HREF?參數(shù)中使用該標記
B?發(fā)送E-mail：在html頁面中，可以建立e-mail鏈接，當瀏覽者單擊鏈接后，系統(tǒng)會啟動默認的本地郵件服務系統(tǒng)發(fā)送郵件，格式為：
<a?href=“mailto:e-mail地址?subject=郵件主題”>
描述文字
</a>
<a?href=“mailto:zhangsan@126.com?subject=一個消息”>
聯(lián)系我
</a>
LINK?顏色的設置
??基本格式：<body?link=”顏色”?alink=”顏色”?vlink=”顏色”>
??link?超鏈接尚被選中的文字
??alink?超鏈接點選但未被放開的顏色
??vlink?超鏈接已被點選過的顏色
插入并格式化圖像
B?<img>標簽：用于在網(wǎng)頁中插入圖像內(nèi)容。
–?src屬性：用于設置圖像文件的相對或絕對URL地址。
–?共三種類型：GIF：是圖形和圖片的最佳格式，適用于透明或動畫圖形。
–?JPG或JPEG：更適合存放照片
–?PNG：擁有許多JPEG與GIF的共同優(yōu)點，所以最近越來越流行。
通過設置width屬性和height屬性可以控制圖像的顯示寬度和高度，他們的長度單位可是百分比，也可是像素。
?<a?href="URL"><img?src="URL"></a>
注意點:邊框的問題.
可通過border=“0”去掉邊框
屬性名稱???????????????????????屬性值????????????????????????說明
Align??????????????????????????left???????????????圖像靠左文字靠右
Right????????圖像靠右文字靠左
Top????????文字往上靠
middle?????????文字靠中
bottom??文字靠下
空隙設置
Vspace???垂直上下兩端和物件距離
Hspace??水平左右兩端和物件距離
設置圖像映射
圖像地圖：<map>
map標簽要和img標簽聯(lián)合使用。
<img?src=”URL”?usemap=””></img>
<map?name＝””>
<area?shape=””?cords=”?,?,?,?”?href＝”URL”>
</map>
語法說明
<img>標記表示插入圖像文件，src表示插入圖像的路徑；
???<map>標記表示插入圖像映射；
???<area>標記表示圖像映射區(qū)域；
???rhape屬性表示映射區(qū)域形狀：
?????—?“rect”表示矩形區(qū)域；
?????—?“circle”表示橢圓形區(qū)域；
?????—?“poly”表示多邊形區(qū)域；
???cords表示感應區(qū)域的坐標
創(chuàng)建表格?
<BODY>
<TABLE?BORDER?=?2?>
?<TR>
???<TD>姓名</TD>
???<TD>性別</TD>
???<TD>分數(shù)</TD>
?</TR>
?<TR>
??<TH>姓名</TH>
???<TH>性別</TH>
???<TH>分數(shù)</TH>???<TH>表示行或列標題，粗體顯示?
?
?
?</TR>
?.......
</TABLE>
<TH?align="center">性別</TH>居中
COLSPAN=“n”?屬性表示跨多少列?
ROWSPAN=“n”?屬性表示跨多少行?
表格的顏色設置：
表格的背景色?<TABLE?bgcolor=顏色值>?
行的背景色 <TR?bgcolor=顏色值>?
???列的背景色??<TD?bgcolor=顏色值>
表格的尺寸設置：
<TABLE???width=n1???height=n2>
?
??frame常見屬性
??規(guī)定表格周圍的哪一側的邊框是可見的。
?
??rules常見屬性
???規(guī)定水平或垂直的分界線。
???注釋：必須與?"border"?屬性配合使用！
?
定義表格列的分組。通過此元素，您可以對列進行組合以便進行格式化。?
<colgroup?span="3"?bgcolor=“red”></colgroup>
Span:表格的直列數(shù)，而不是第幾列。?
定義某個表格中針對一個或多個列的屬性值。您只能在表格或?colgroup?中使用此屬性。
<table>
???<col></col>????代表第1列
??<col?span=“2”?bgcolor=“red”></col>???代表第2，3?兩列
??<tr>….</tr>
單元格間距，邊距
<table?cellspacing=””?cellpadding=“”>
表格嵌套
在HTML文件中，第一個<table>標記表示插入第一表格，第二個<table>標記插入在標記<td></td>之間，表示在單元格中插入表格，也就是嵌套表格。
框架標簽
框架就是把一個瀏覽器窗口劃分為若干個小窗口，每個窗口可以顯示不同的URL網(wǎng)頁。
所有的框架標簽要放在一個HTML文檔中，HTML頁面的文檔體標簽<body>被框架集標簽<frameset>所取代，然后通過<frameset>的子窗口標簽<frame>定義每一個子窗口和子窗口的頁面屬性。
B?<frameset>標簽
<frameset?rows=“框架窗口高度,框架窗口高度，…”>
</frameset>?
<html>
<head>
???<title>框架的基本結構<title>
</head>
<frameset>
???<frame>
???<frame>
…
</frameset>
</html>
<frameset?cols=“框架窗口寬度,框架窗口寬度，…”>
</frameset>?
還可設置的屬性包括：
frameborder：是否顯示框架結構的邊框線，取值為0、1或yes、no。取值為1或yes邊框?qū)@示，取值為0或no邊框?qū)[藏。
framespacing：默認邊框線的寬度為1，該屬性可調(diào)整邊框線的寬度。（以像素為單位）
bordercolor：可設置邊框線顏色。
scrolling：設置框架是否顯示滾動條。取值為yes、no或auto。yes表示滾動條一直顯示；no表示無論什么情況都不顯示滾動條；auto是系統(tǒng)的默認值，它是根據(jù)內(nèi)容來調(diào)整的，當頁面長度超過瀏覽器窗口的范圍時就會自動顯示滾動條。
B?<noframes>標簽
如果遇到不支持框架結構的瀏覽器，此時就需要用到該標簽來設置替換的內(nèi)容，并告訴瀏覽者其瀏覽器無法打開框架頁面。
<a?href=“right1.html”?target=“mainFrame”>新聞中心</a>
使用iframe進行頁面內(nèi)的頁面嵌套
可以定義嵌套頁面的大小、位置等
?
用法：
<iframe?name=“ifra1”?scr=“abc.htm”?border=“1”/>
?
可以通過name屬性將鏈接的顯示目標定位到
iframe框架內(nèi)。
??<bgsound>?是用以插入背景音樂，但只適用於?IE，其參數(shù)設定不多。
如下?<bgsound?src="your.mid"?autostart=true?loop=infinite>?
??src="your.mid"?
設定?midi?檔案及路徑，可以是相對或絕對
??autostart=true?
是否在音樂檔傳完之後，就自動播放音樂。true?是，false?否?(內(nèi)定值)。?
??loop=infinite?
是否自動反覆播放。LOOP=2?表示重復兩次，Infinite?表示重復多次。?
??<EMBED>?是用以插入各種多媒體，格式可以是?Midi、Wav、AIFF、AU?等等，Netscape?及?新版的?IE?都支援。其參數(shù)設定多。如下
???<EMBED?src="your.mid"?autostart="true"?loop="true"?hidden="true">?
??src="your.mid"?
設定?midi?檔案及路徑，可以是相對或絕對
??autostart=true?
是否在音樂檔傳完之後，就自動播放音樂。true?是，false?否?(內(nèi)定值)。?
??loop="true"?
是否自動反覆播放。LOOP=2?表示重復兩次，true?是，?false?否。?
??HIDDEN="true"?
是否完全隱藏控制畫面，true?為是，no?為否?(內(nèi)定)。?
??STARTTIME="分:秒"?
設定歌曲開始播放的時間。如?STARTTIME="00:30"?表示從第30秒處開始播放。?
??VOLUME="0-100"?
設定量的大小，數(shù)值是0到100之間。內(nèi)定則為使用者系統(tǒng)本身之設定。?
??WIDTH="整數(shù)"?和?HIGH="整數(shù)"?
設定控制畫面的寬度和高度。(若?HIDDEN="no")?
ALIGN="center"?
設定控制畫面和旁邊文字的對 方式，其值可以是?top、bottom、center、baseline、?left、right、texttop、middle、absmiddle、absbottom。?
controls="smallconsole"?
設定控制畫面的外貌。預設值是?console。?
console?一般正常的面板?
smallconsole?較小的面板?
playbutton?只顯示播放按鈕?
pausecutton?只顯示暫停按鈕?
stopbutton?只顯示停止按鈕?
volumelever?只顯示音量調(diào)整鈕?
<Marquee>滾動的文字</Marquee>
??Direction=”滾動方向”left[左]right[右]up[上]down[下]
??Behavior=”滾動方式”?scroll[一圈一圈繞著走]?slide[只走一次]?alternate[來回的走]
??Loop=”滾動的循環(huán)次數(shù)”?若未指定則循環(huán)不止(loop=”infinite”)
??Bgcolor=”背底顏色”Width=“寬度”Height=“高度”
??onMouseOver=”this.stop()”onMouserOut=”this.start()”
??Scrollamount=”速度”?數(shù)值越大速度越快?
??Scrolldelay=“延時”（走一步，停一停）?
表單Form
??<form?action=處理表單信息的服務器端應用程序?method=處理表單數(shù)據(jù)的方法(POST/GET)?name=表單名稱?target=打開窗口的方式>
??表單元素
??</form
文本框
??<input?name=“文本框名稱”?type=“text”?value=“初始值”?size=“顯示字符數(shù)”?maxlength=“最多容納字符數(shù)”>
–?密碼框
??<input?name=“文本框名稱”?type=“password”?value=“初始值”?size=“顯示字符數(shù)”?maxlength=“最多容納字符數(shù)”>
–?多行文本框
??<textarea?name=“多行文本框名稱”?cols=“每行中的字符數(shù)”?rows=“顯示的行數(shù)”>
???初始內(nèi)容
??</textarea>
單選框、復選框
–?單選框
??<input?name=“單選框名稱”?type=“radio”?value=“選擇名稱”?checked(初始狀態(tài)，如果為默認，則寫checked；否則不寫)>
–?復選框
??<input?name=“復選框名稱”?type=“checkbox”?value=“選擇名稱”?checked(初始狀態(tài)，如果為選中，則寫checked；否則不寫)>
列表框
(A)、菜單式?
??<select?name=“列表框名稱”>
??<option?selected(哪個為初始選擇，就添加selected語句[只有一個])?value=“提交值”>列表1</option>
??<option?value=“提交值”>列表2</option>
??<option?value=“提交值”>列表3</option>
??...
??</select>
??(B)、列表式
??<select?name=“列表框名稱”?size=“顯示的行數(shù)”?multiple(如果允許多選，則有該命令；否則沒有此命令)>
??<option?selected(哪個為初始選擇，就添加selected語句[可有多個，但沒有意義])?value=“提交值”>列表1</option>
??<option?value=“提交值”>列表2</option>
??<option?value=“提交值”>列表3</option>
??...
??</select>
下拉菜單?
<B>誰是?2002?年世界杯冠軍？</B>
<SELECT?NAME?=“myselect">
<OPTION?SELECTED>西班牙</OPTION>
<OPTION>法國</OPTION>
<OPTION>巴西</OPTION>
<OPTION>德國</OPTION>
</SELECT>
按鈕
??<input?type=“按鈕類型(reset、submit、button)”?name=“按鈕名稱”?value=“按鈕顯示文本”>
–?隱藏域
??<input?name=“名稱”?type=“hidden”?value=“提交值”>
–?瀏覽框
??<input?name=“名稱”?type=“file”?size=“顯示字符長度”?maxlength=“最大長度”>
BUTTON（按鈕）
<INPUT?name="button1"?type="submit"?value="提交">
?
??<INPUT?name="button2"?type="reset"?value="重置">
?
??<INPUT?name="button3"?type="button"?value="普通按鈕">
| Type?屬性： | |
| submit： | 提交按鈕 |
| reset： | 重置按鈕 |
| button： | 普通按鈕 |
文本框、按鈕、單選按鈕、復選框等都是輸入元素。
<INPUT?type=“?”?name=“?”?size=”?”???
???value=“?”?maxlength=“?”?checked=“?”>
Type????此屬性指定元素的類型。元素類型可以有多種選擇：TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、FILE、HIDDEN?和?BUTTON。默認選擇為?TEXT。
Name???此屬性指定控件的名稱。例如，如果表單中有幾個文本框，則可以用名稱?TEXT1、TEXT2?或選擇的任何名稱來標識它們。Name?屬性的作用域是在?FORM?元素內(nèi)。
?Value????此屬性是可選屬性，它指定控件的初始值。但是，如果?TYPE?為?RADIO，則必須指定一個值。
Size????此屬性指定控件的初始寬度。如果?TYPE?為?TEXT?或?PASSWORD，則控件的大小以字符為單位。對于其他輸入類型，寬度以像素為單位。???
Maxlength????此屬性用于指定可在?TEXT?或?PASSWORD?元素中輸入的最大字符數(shù)。
Checked?????此屬性是?Boolean?屬性，指定按鈕是否是打開的。當輸入類型為?RADIO?或?CHECKBOX?時，使用此屬性。
CSS
F?CSS的基本概念
??掌握樣式表的語法規(guī)則
??樣式表的分類：
–?行內(nèi)樣式表
–?內(nèi)嵌樣式表
–?外部樣式表
??掌握常用的樣式
指定顯示樣式
<P?style?=?"color:red;font-size:30px;font-family:隸書;">?
F?CSS基礎
@?CSS是Cascading?Style?Sheet的縮寫，翻譯為“層疊樣式表”，簡稱“樣式表”。
@?樣式表的首要目的是為網(wǎng)頁上的元素精確定位。其次，把網(wǎng)頁上的內(nèi)容結構和格式控制相分離。即html的標簽主要是定義網(wǎng)頁的內(nèi)容，而CSS決定這些網(wǎng)頁內(nèi)容如何顯示。
@?優(yōu)點：簡化網(wǎng)頁的格式代碼，加快網(wǎng)頁下載顯示的速度，也減少了需要上傳的代碼數(shù)量，大大減輕了重復勞動的工作量。
| 屬?性 | CSS名稱 | 說?明 |
| 顏色? | color | ? |
| 文本屬性 | font-size | 字體大小 |
| font-family | 字體 | |
| text-align | 文本對齊 | |
| 邊框?qū)傩?/p> (用于表 單元素)? | border-style | 邊框樣式 |
| border-width | 邊框?qū)挾? | |
| border-color | 邊框顏色? | |
| 定位屬性(position) | top | 頂部邊距（上邊距） |
| left | 左邊距 | |
| width | 寬度 | |
| height | 高度 | |
| z-index | z?軸索引號，用于層 |
?
F?使用CSS
@?CSS通過“樣式”來表示網(wǎng)頁的顏色、字體、背景色、邊框線及網(wǎng)頁內(nèi)容的位置及大小尺寸等屬性。
@?一系列的樣式組成了“樣式表”。
@?CSS的語法結構：
選擇符{樣式屬性:取值;樣式屬性:取值;樣式屬性:取值;…}
CSS的基本語法
樣式和樣式表
???1．樣式
????樣式是由成對的屬性名和屬性值以冒號“：”相間組成。?
????????2．樣式表
?????一系列的“樣式”以分號“；”相間組成為“樣式表”。
根據(jù)樣式代碼的位置，分為三類：
q?行內(nèi)樣式
q?內(nèi)嵌樣式
q?外部樣式
q?行內(nèi)樣式：HTML標簽直接使用style屬性，稱為行內(nèi)樣式（Inline?Style）。它適用于只需要簡單地將一些樣式應用于某個獨立的元素的情況。
例如：<table?style="color:red;margin-left:200px">
???????????…
???????????</table>
注意：在使用行內(nèi)樣式的過程中，建議同學們在<head>標簽中添加<meta>標簽，添加的<meta>標簽如下：
<head>
<meta?http-equiv="Content-Style-Type"?content="text/css">
</head>
內(nèi)聯(lián)的樣式比其他方法更加靈活。要使用內(nèi)聯(lián)樣式，必須使用Content-Style-Type?HTTP頁眉擴展對整個文檔進行單獨的樣式表語言聲明。使用內(nèi)聯(lián)CSS的網(wǎng)頁制作者必須將text/css作為Content-Style-Type?HTTP頁眉.
@?內(nèi)嵌樣式表：是在<head>標簽內(nèi)添加<style></style>標簽對，在標簽對內(nèi)定義需要的樣式。
例如，<head>
<style?type=“text/css”>?
td{font-size:9pt;color:red}
.font105{font-size:10.5pt;color:blue}
</style>
</head>
注意：有些低版本的瀏覽器不能識別style標記，這意味著低版本的瀏覽器會忽略style標記里的內(nèi)容，并把style標記里的內(nèi)容以文本直接顯示到頁面上。為了避免這樣的情況發(fā)生，我們用加HTML注釋的方式（<!--?注釋?-->）隱藏內(nèi)容而不讓它顯示?
內(nèi)嵌樣式-2?選擇器
選擇器分為：
??HTML?選擇器
??CLASS?類選擇器
??ID?選擇器
??樣式選擇器
??HTML標簽選擇器：在HTML頁面中使用的標簽，如果在CSS中被定義，那么此網(wǎng)頁的所有該標簽都將按照CSS中定義的樣式顯示。?
??類選擇器：使用HTML標簽的class屬性引入CSS中定義的樣式規(guī)則的名字，稱為類選擇器，class屬性指定的樣式名字必須是以“.”開頭。
??ID選擇器：ID屬性是用來定義某一特定的HTML元素，與class屬性剛好相反，class屬性是用來定義一組功能或格式相同的HTML元素。ID選擇器定義的CSS名稱必須以“#”開頭，
??通用選擇器：是所有選擇器中最強大卻最少使用的。通用選擇器的作用就像是通配符，它匹配所有可用元素。?
??偽類選擇器：是指對同一HTML元素的各種狀態(tài)和其所包括的部分內(nèi)容的一種定義方式。?
Id的優(yōu)先級高于class
外部樣式
@?外聯(lián)樣式表:是將<style>標簽內(nèi)的樣式語句定義在擴展名為.css的文件中。通過使用<link>標簽引入樣式文件。
例如，<head>
<link?href="mystyle.css"?rel="stylesheet"??type=“text/css”>
????</head>
優(yōu)點：一個外部樣式表文件可以應用于多個頁面。當你改變這個樣式表文件時，所有頁面的樣式都隨之而改變。在制作大量相同樣式頁面的網(wǎng)站時，非常有用，不僅減少了重復的工作量，而且有利于以后的修改、編輯，瀏覽時也減少了重復下載代碼。?
使用LINK（鏈接）標簽?，語法：
<HEAD>
<LINK???rel?=?“stylesheet”????type?=?”text/css”????href?=?”樣式表文件.css”?>
</HEAD>
?
可以連接多個html應用到html里面
行內(nèi)樣式表、內(nèi)嵌樣式表、外部樣式表各有優(yōu)勢，實際的開發(fā)中常常
需要混合使用：
??有關整個網(wǎng)站統(tǒng)一風格的樣式代碼，放置在獨立的樣式文件*.css
??某些樣式不同的頁面，除了鏈接外部樣式文件，還需定義內(nèi)嵌樣式
??某張網(wǎng)頁內(nèi)，部分內(nèi)容”與眾不同“，采用行內(nèi)樣式
對于某個HTML標簽：
1）如果有多種樣式，如果規(guī)定的樣式?jīng)]有沖突，則疊加；
2）如果有沖突，則最先考慮行內(nèi)樣式表顯示，如果沒有，再考慮內(nèi)嵌樣式顯示，如果還沒有，最后采用外面樣式表顯示，否則就按HTML的默認樣式顯示；
?
CSS中的注釋
樣式規(guī)則的注釋
樣式規(guī)則是使用/*需要注釋的內(nèi)容*/進行注釋的。即在需要注釋的內(nèi)容前使用“/*”標記開始注釋，在內(nèi)容的結尾使用“*/”結束。注釋可以多行內(nèi)容注釋。其注釋范圍在“/*”與“*/”之間
常用的樣式屬性
??1．文字
??2．背景
??3．邊框線
??4．高度和寬度
??5．間距和邊距
??6．列表
??7．位置和布局
指定“對象”來定義樣式表的語法規(guī)則如下：
對象1,?對象2?……?{?樣式表?}
?
下級對象
用于某一種元素中的下級元素，定義時兩元素名之間用空格相間。
P?em{color:blue;}
?
所以元素對象
?*｛color：blue;
CSS文字與文本
設置字體——font-family
設置字號——font-size
設置字體樣式——font-style
設置字體加粗——font-weight
設置字體變體——font-variant
組合設置字體屬性——font
文本的精細排版
調(diào)整字符間距——letter-spacing
調(diào)整單詞間距——word-spacing
添加文字修飾——text-decoration
設置文本排列方式——text-align
設置段落縮進——text-indent
調(diào)整行高——line-height
轉(zhuǎn)換英文大小寫——text-transform
顏色和背景
設置顏色——color
設置背景顏色——background-color
插入背景圖片——background-image
插入背景附件——background-attachment
設置重復背景圖片——background-repeat
設置背景圖片位置——background-position
設置文本排列方式——text-align
??語法說明
該語法中的4個屬性值可以任意選擇其中一個。其中，left代表左對齊方式；right代表右對齊方式；center代表居中對齊方式；justify代表兩端對齊方式。
轉(zhuǎn)換英文大小寫——text-transform
?
插入背景圖片——background-image
基本語法
background-image:url|none
URL指定要插入的背景圖片路徑或名稱，路徑可以為絕對路徑也可以為相對路徑。第6章有絕對路徑和相對路徑的詳細內(nèi)容講解。圖片的格式一般以GIF、JPG和PNG格式為主。
???none是一個默認值，表示沒有背景圖片
插入背景附件——background-attachment
基本語法
background-attachment:scroll|fixed
???scroll表示背景圖片是隨著滾動條的移動而移動。是瀏覽器的默認值。
???fixed表示背景圖片固定在頁面上不動，不隨著滾動條的移動而移動。
設置重復背景圖片——background-repeat
基本語法
background-repeat:repeat|repeat-x|repeat-y|no-repeat
?
設置背景圖片位置——background-position
??基本語法
background-position：百分比|長度|關鍵字
利用百分比和長度設置圖片位置時，都要指定兩個值，并且這兩個值要用空格隔開。一個代表水平位置，一個代表垂直位置。水平位置的參考點是網(wǎng)頁頁面的左邊，垂直位置的參考點是頁面的上邊。
??關鍵字在水平方向的主要有l(wèi)eft、center、right，表示居左、居中和居右。關鍵字在垂直方向的主要有top、center、bottom，表示頂端、居中和底端。其中水平方向和垂直方向的關鍵字可相互搭配使用。
?使用百分比和關鍵字對比說明background-position屬性的屬性值。
?
邊框和邊距
設計邊框樣式——border-style
調(diào)整邊框?qū)挾取猙order-width
設置邊框顏色——border-color
設置邊框?qū)傩浴猙order
邊距——margin-top?/margin-bottom?/margin-left/?margin-right/margin
填充——padding-top／padding-?bottom?/padding-left?/?padding-?right?/padding
設計邊框樣式——border-style
基本語法
border-style:樣式取值
border-top-style:樣式取值
border-bottom-style:樣式取值
border-left-style:樣式取值
border-right-style:樣式取值
?
邊框樣式屬性中border-style是一個復合屬性，其他4個都是單個邊框的樣式屬性，只能取一個值，而復合屬性border-style可以同時取一到4個值。下面分別說明border-style屬性的4個取值方法：
—?取一個值：四條邊框均使用這一個值。e:s
—?取兩個值：上下邊框使用第一個值，左右邊框使用第二個值，兩個值一定要用空格隔開。
—?取三個值：上邊框使用第一個值，左右邊框使用第二個值，下邊框使用第三個值，取值之間要用空格隔開。
—?取4個值：四條邊框按照上、右、下、左的順序來調(diào)用取值。取值之間也要用空格隔開。
調(diào)整邊框?qū)挾取猙order-width
基本語法
border-width:關鍵字|長度
border-top-width:關鍵字|長度
border-bottom-width:關鍵字|長度
border-right-width:關鍵字|長度
border-left-width:關鍵字|長度
邊框?qū)挾葘傩曰菊Z法中的關鍵字說明
??長度包括長度值和長度單位，不可以使用負數(shù)。長度單位可以使用絕對單位也可使用相對單位，如px、pt、cm等。
??基本語法中邊框?qū)挾葘傩詁order-width是一個復合屬性，可以同時設置四條邊框的寬度。具體使用方法和邊框樣式的復合屬性border-style是一樣的，可以參照上一節(jié)關于border-style的講解
?
設置邊框顏色——border-color
基本語法
border-color:顏色關鍵字|RGB值
border-top-color:顏色關鍵字|RGB值
border-bottom-color:顏色關鍵字|RGB值
border-left-color:顏色關鍵字|RGB值
border-right-color:?顏色關鍵字|RGB值
顏色關鍵字可使用常用的16個關鍵字
???RGB值使用十六進制的RGB值和RGB函數(shù)值都行。
??在使用邊框顏色復合屬性border-color時，如果只設置1種顏色，則四條邊框的顏色一樣；設置2種顏色，則邊框的上下為一個顏色，左右為另一個顏色；設置3種顏色，邊框的顏色順序為上、左右、下；設置4中顏色，邊框的顏色順序為上、右、下、左。
?
設置邊框?qū)傩浴猙order
基本語法
border:<邊框?qū)挾?gt;||<邊框樣式>||<邊框顏色>
border-top:?<上邊框?qū)挾?gt;||<上邊框樣式>||<上邊框顏色>
border-right:?<右邊框?qū)挾?gt;||<右邊框樣式>||<右邊框顏色>
border-bottom:?<下邊框?qū)挾?gt;||<下邊框樣式>||<下邊框顏色>
border-left:?<左邊框?qū)挾?gt;||<左邊框樣式>||<左邊框顏色>
基本語法中每一個屬性都是一個復合屬性，都可以同時設置邊框的寬度、樣式和顏色屬性。但是在用該語法定義邊框?qū)傩詴r，每個屬性間必須用空格隔開。
??這五個屬性語法中，只有border可以同時設置四條邊框的屬性。其他的只能設置單邊框的屬性。
邊距——margin-top?/margin-bottom?/margin-left/?margin-right/margin
??基本語法
margin-top:長度|百分比|auto
margin-bottom:?長度|百分比|auto
margin-left:?長度|百分比|auto
margin-left:?長度|百分比|auto
margin:?長度|百分比|auto
長度包括長度值和長度單位，長度單位可以使用前面多次提到的絕對單位或相對單位。
??百分比是相對于上級元素寬度的百分比，允許使用負數(shù)。
???auto為自動提取邊距值，是默認值。
???margin復合屬性和其他復合屬性的設置方法是一樣的，也可以取1到4個值來同時設置邊框周圍的四個邊距。
填充——padding-top／padding-?bottom?/padding-left?/?padding-?right?/padding
基本語法
padding-top:長度|百分比
padding-bottom:?長度|百分比
padding-left:?長度|百分比
padding-right:?長度|百分比
padding:?長度|百分比
長度包括長度值和長度單位。?
??百分比是相對于上級元素寬度的百分比，不允許使用負數(shù)。
??填充復合屬性padding的取值方法，可以參照邊框樣式border-style的取值方法。
列表
設計列表樣式——list-style-type
添加列表圖像——list-style-image
調(diào)整列表位置——list-style-position
?
?
?
設計列表樣式——list-style-type
基本語法
list-style-type:<屬性值>
?
?
添加列表圖像——list-style-image
基本語法
list-style-image:none|URL
none表示不使用圖像符號。
???URL指定圖像的名稱或者路徑。
調(diào)整列表位置——list-style-position
基本語法
list-style-position:outside|inside
outside表示列表符號不向內(nèi)縮進，是列表的默認屬性值。
???inside表示列表符號向內(nèi)縮進
定位
定位方式——position
設置位置——top、bottom、right、left
浮動——float
清除——clear
定位方式——position
基本語法
position:static|absolute|relative
static表示為靜態(tài)定位，是默認設置。
???absolute表示絕對定位，與下一節(jié)的位置屬性top、bottom、right、left等結合使用可實現(xiàn)對元素的絕對定位。
???relative表示相對定位，對象不可層疊，但也要依據(jù)top、bottom、right、left等屬性來設置元素的具體偏移位置
設置位置——top、bottom、right、left
??基本語法
top:auto|長度值|百分比
bottom:?auto|長度值|百分比
left:?auto|長度值|百分比
right:?auto|長度值|百分比
浮動——float
基本語法
float:left|right|none
???left表示浮動元素在左邊，是居左對齊的。
???right表示浮動元素在右邊，是居右對齊的。
???none表示不浮動，是默認值
清除——clear
基本語法
clear:left|right|both|none
清除——clear
語法說明
??left表示不允許在某元素的左邊有浮動元素。
???right表示不允許在某元素的右邊有浮動元素。
???both表示在某元素左右兩邊都不允許有浮動元素。
???none表示在某元素左右兩邊都允許有浮動元素
層的應用
圖層的創(chuàng)建——<div>
創(chuàng)建嵌套圖層
層的屬性設置
圖層的創(chuàng)建——<div>
基本語法
<body>
<div?id="Layer1"?style="position:absolute;?left:29px;?top:12px;?width:165px;?height:104px;"></div>
</body>
在進行層的定義時，需要將層的樣式同時定義，否則在網(wǎng)頁中不會顯示出來。
創(chuàng)建嵌套圖層
基本語法
<body>
<div?id="Layer1"?style="position:absolute;?z-index:1;?left:29px;?top:12px;?width:165px;?height:104px;"></div>
<div?id="Layer1"?style="position:absolute;?z-index:1;?left:29px;?top:12px;?width:165px;?height:104px;"></div>
</body>
?
?
圖層的嵌套只要插入多個成對的<div></div>，設置好的層的樣式屬性就可以完成層的嵌套。
層的屬性設置
??
??
??圖層定義常見屬性
?
層的屬性設置
基本語法
<body>
<div?id="Layer1"?style="position:absolute;?left:29px;?z-index:1;?top:12px;?width:165px;?height:104px;"></div>
</body>
position屬性將對象從文檔流中拖出，進行絕對定位；
???left、top屬性進行左邊距和頂端間距的設置；
???width、height屬性進行寬度和高度設置；
???層疊通過z-index屬性定義。
CSS層
設置層空間——z-index
設置層裁切——clip
設置層大小—度來—width、height
設置層溢出——overflow
設置層可見——visibility
設置層空間——z-index
基本語法
z-index:auto|數(shù)字
auto表示子層會按照父層的屬性顯示。
??數(shù)字必須是無單位的整數(shù)或負數(shù)，但一般情況下都取正整數(shù)，所以z-index屬性值為1的層位于最下層。
設置層裁切——clip
基本語法
clip:rect{<上>|<右>|<下>|<左>}?|auto
auto表示不裁切。
????rect的4個坐標值表示所裁切矩形的4個頂點位置，其中以網(wǎng)頁左上角為坐標（0，0），而上、右、下、左這4個坐標值則是以左上角為參照點計算的。而且任意一個坐標值都可由auto來代替，表示該邊不裁切。
設置層大小—width、height
??基本語法
??width:auto|長度?
??height:auto|長度
??width表示的是寬度，而height表示的是高度。
?????auto表示自動設置長度。
????長度包括長度值和單位。
????長度也可使用相對值中的百分比。
??對于每個層在設置層大小時，其中只能設置寬度和高度中的一個值，另一個值則自動獲得。如果兩個值都設置了，則還要同時設置層溢出屬性overflow。
設置層溢出——overflow
基本語法
overflow:?visible/hidden/scroll/auto
visible：擴大層的容納范圍，將所有內(nèi)容都顯示出來。
???hidden：隱藏超出范圍的內(nèi)容（超出范圍的內(nèi)容將被裁切掉）。
???scroll：表示一直顯示滾動條。
???auto：當層內(nèi)容超出了層的容納范圍時，則顯示滾動條。
設置層可見——visibility
基本語法
??visibility:visible|hidden|inherit
visible表示該層是可見的。
????hidden表示該層被隱藏，是不可見的。
???inherit表示子層或子元素會繼承父層或父元素的可見性，父級元素可見則子級元素也可見。
鼠標指針——cursor
基本語法
cursor:auto|關鍵字|URL（圖像地址）
auto表示根據(jù)對象元素的內(nèi)容自動選擇鼠標指針形狀。
???URL（圖像地址）表示選取自定義的圖像作為鼠標指針的形狀。
??關鍵字共有16種，是系統(tǒng)預先定義好的鼠標指針形狀，具體說明和形狀見表20-2
?
?
| 屬?性 | CSS名稱 | 說?明 |
| 邊界屬性 | margin-top | 設設置對象的上邊距 |
| m?margin?-right | 設設置對象的右邊距 | |
| m?margin?-bottom | 設設置對象的下邊距 | |
| m?margin?-left | 設設置對象的左邊距 | |
| ? 邊框?qū)傩?/p> | bbborder-style | 設設置邊框的樣式 |
| boborder-width | 設設置邊框的寬度 | |
| boborder-color | 設設置邊框的顏色 | |
| ? 填充屬性 | papadding-top | 設設置內(nèi)容與上邊框之間的距離 |
| papadding-right | 設設置內(nèi)容與右邊框之間的距離 | |
| papadding-bottom | 設設置內(nèi)容與下邊框之間的距離 | |
| papadding-left | 設設置內(nèi)容與左邊框之間的距離 |
偽類
??偽類是一種特殊的類選擇符，用來指定鏈接或者與其相關的選擇符的狀態(tài)；能被支持CSS的瀏覽器自動所識別的特殊選擇符，
??偽類與選擇符間用冒號相連，在CSS中，偽類對文本或圖像處于鏈接狀態(tài)的修飾，故選擇符大部分下是a標記，本章主要對a標記做實例講解，其中偽類有四種常用形式是本章要講解的，內(nèi)容如下：
??“:link”用在為訪問的鏈接上
??“:hover”用于鼠標光標置于其上的鏈接
??“:active”用于獲得焦點（如“被單擊”）的鏈接上
??“:visited”用在已經(jīng)訪問過的鏈接上
??盒子在標準流中的定位原則
??實驗1——行內(nèi)元素之間的水平margin?
span.left{
margin-right:30px;
?
}
span.right{
margin-left:40px;
?
}
??盒子在標準流中的定位原則
–?實驗2——塊級元素之間的豎直margin?
<body>
<div?style="margin-bottom:50px;">塊元素1</div>
<div?style="margin-top:30px;">塊元素2</div>
</body>
CSS+Div?應用實例?????布局
??流體浮動布局
??固定浮動布局
??固定定位布局
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
JavaScript
??Javascript是一種由Netscape的LiveScript發(fā)展而來的；是寫在HTML文件中的一種基于對象和事件驅(qū)動并具有安全性能的腳本語言；區(qū)分大小寫的客戶端腳本語言。
?
??當用戶在客戶端的瀏覽器中顯示該網(wǎng)頁時，瀏覽器就會執(zhí)行JavaScript程序，讓用戶通過交互式的操作變換網(wǎng)頁顯示的內(nèi)容，以實現(xiàn)HTML語言所不能實現(xiàn)的一些功能。?
?
??提供了數(shù)據(jù)驗證的基本功能。
??JS是基于對象，Java是面向?qū)ο蟆?/p>
??JS只需解釋就可以執(zhí)行，Java需要先編譯成字節(jié)碼文件，再執(zhí)行。
??JS是弱類型，Java是強類型。?
??JavaScript???是寫在HTML文檔中的一種基于對象（Object）和事件驅(qū)動（EventDriven)、并具有安全性能的腳本語言。
??當用戶在客戶端的瀏覽器中顯示該網(wǎng)頁時，瀏覽器就會執(zhí)行JavaScript程序，讓用戶通過交互式的操作變換網(wǎng)頁顯示的內(nèi)容，以實現(xiàn)HTML語言所不能實現(xiàn)的一些功能。?
??JavaScript的特點
??解釋性：由瀏覽器直接解釋執(zhí)行
??用于客戶端
??安全性:不允許直接訪問本地硬盤
??簡單易用：腳本式語言最大的優(yōu)點是易學易用，是一種輕量級的程序語言
??動態(tài)性:他可以直接對用戶或客戶輸入作出響應，無須經(jīng)過web服務程序，他對用戶的反映響應，是采用以事件驅(qū)動的方式進行的。
??跨平臺性:只要是可以解釋Js的瀏覽器都可以執(zhí)行，和操作系統(tǒng)無關
JavaScript的局限性：瀏覽器有很多種，每種對JavaScript的支持程度是不一樣的，效果會有一定的差距。
??JavaScript的作用
–?校驗用戶輸入的內(nèi)容：用戶輸入內(nèi)容的校驗常分為兩種
??格式性校驗：JavaScript
??功能性校驗
–?有效地組織網(wǎng)頁內(nèi)容
–?動態(tài)地顯示網(wǎng)頁內(nèi)容：時鐘顯示等
–?動畫顯示
??編寫JavaScript腳本：可以使用任何一種文字編輯器來編寫,我們使用Dreamweaver、EditPlus、UE等。
??執(zhí)行：與HTML文檔配合，將其插入到HTML文檔中，然后通過瀏覽器執(zhí)行HTML文檔即可。瀏覽器可以是IE、firefox等。
–?使用?<script>?標簽將語句嵌入文檔
<html>
<head>
<script?type=”text/javascript”?>
function???showAlert()
{???alert(“web“)；}
</script>
</head>
<body?>?…?…</body>
</html>
當有多個html頁面使用到相同的JS腳本時，可以將js代碼封裝到一個文件中，只要在script標簽的src屬性引入一個js文件。（方便后期維護，擴展）
注意：如果在script標簽中定義了src屬性，那么標簽中的內(nèi)容不會被執(zhí)行。
?
–?將?JavaScript?源文件鏈接到?HTML?文檔中
<html>
<head>
<script?type=”text/javascript”?src=“common.js“></script>
</head>
<body?>web程序設計</body>
</html>
common.js文件內(nèi)容
function?showAlert（）{
alert（“web程序設計“）；
}
–?事件跟隨式
<html>
<head>
</head>
<body?οnlοad=”window.alert(‘hello?web’);”>
???<a?href="javascript:alert(new?Date());">abc</a>
??????<input?type=button?value=test?οnclick="alert(new?Date());">
</body>
</html>
??需注意：
–?JavaScript程序內(nèi)容必須置于<script>?</script>標簽中，type=“text/javascript”用于區(qū)別其他腳本程序語言。
–?對于不支持javascript程序的瀏覽器，標記<!--??//-->之間的內(nèi)容就會被隱藏起來，否則就會被當做html的內(nèi)容顯示出來，而對于支持javascript程序的瀏覽器，這對標簽不起任何作用。
–?Javascript程序?qū)Υ笮懽帜甘敲舾械?#xff0c;即在同一個程序語句中如果使用大寫或小寫字母將代表不同的意義。
–?使用注釋/*多行注釋*/????//單行注釋
–?Javascript程序在html文件中的位置沒有嚴格的規(guī)定，但根據(jù)Javascript程序的功能和作用，一般將其置于3種位置：
??在html<body>標記中的任何位置。如果所編寫的Javascript程序用于輸出網(wǎng)頁內(nèi)容的，應該將Javascript程序置于html文件中需要顯示該內(nèi)容的位置。
??在html<head>標記。如果所編寫的Javascript程序需要在某一個html文件中多次使用，那就應該編寫Javascript函數(shù)，并將函數(shù)置于html文件的<head>標記中。
??在一個單獨的js文件中。如果編寫的Javascript程序需要在多個html文件中使用，或Javascript程序內(nèi)容很長時。
數(shù)據(jù)類型
??JavaScript主要包括3種數(shù)據(jù)類型：簡單數(shù)據(jù)類型、特殊數(shù)據(jù)類型、復合數(shù)據(jù)類型。
??簡單數(shù)據(jù)類型：數(shù)值型、字符型、布爾型
??復合數(shù)據(jù)類型：對象、數(shù)組、函數(shù)
??特殊數(shù)據(jù)類型：null、undefined
轉(zhuǎn)義字符
| 字?符 | 說?明 | 示?例 |
| \b | 退格符 | alert(“這是第一句?\b??這是第二句”) |
| \f | 換頁符 | alert(“這是第一句\f?這是第二句”) |
| \n | 換行符 | alert(“這是第一句\n?這是第二句”) |
| \r | 回車符 | alert(“這是第一句\r?這是第二句”) |
| \t | 制表符? | alert(“這是第一句\t?這是第二句”) |
??常量：不能改變的數(shù)據(jù)。可以為整型、邏輯型、字符串型等。
??變量：在計算機內(nèi)存中暫時保存數(shù)據(jù)的地方。用關鍵字var聲明或用賦值的形式。var??i；i=10；var?count=10；var?i，j；
??變量命名規(guī)則
–?第一個字符必須是字母（大小寫均可）、下劃線（_）或美元符（$）;
–?后續(xù)字符可以是字母、數(shù)字、下劃線或美元符；
–?變量名稱不能是保留字；
–?字符大小寫敏感；
??變量可以不聲明直接使用??k=100；（k沒定義就直接用）
??變量弱類型檢查，且可隨時改變數(shù)據(jù)類型
??變量的數(shù)據(jù)類型及其轉(zhuǎn)換
JavaScript聲明變量時無需定義數(shù)據(jù)類型，因此，其變量又稱為“無類型”變量，也就是說，聲明后的變量名可以隨時被賦值為任意類型的數(shù)據(jù)，?JavaScript將會自動給予轉(zhuǎn)換。
var?count=1;
…
count=“the?count?of?var?is?”+count;
??用typeof()運算符返回表達式的數(shù)據(jù)類型var?a=18;
typeof(a)???---number
“+”連接字符串
運算符和表達式?
??運算符對一個或多個變量或值（操作數(shù)）進行運算，并返回一個新值
??根據(jù)所執(zhí)行的運算，運算符可分為以下類別：
–?算術運算符
–?比較運算符
–?邏輯運算符
–?賦值運算符=、+=、-=、*=、/=、%=
–?位運算符（很少用）
–?算術運算符
| ? | 說?明 | 示?例 | ? |
| + | 加 | a?=?5?+?8 | ? |
| - | 減 | a?=?8?-?5 | ? |
| / | 除 | a?=?20?/?5 | ? |
| * | 乘 | a?=?5*19 | ? |
| % | 取模－兩個數(shù)相除的余數(shù) | 10?%?3?=?1 | ? |
| ++ | 一元自加。該運算符帶一個操作數(shù)，將操作數(shù)的值加?1。返回的值取決于?++?運算符位于操作數(shù)的前面或是后面 | ? | ++x將返回?x?自加運算后的值。 x++?將返回?x?自加運算前的值 |
| -?- | 一元自減。該運算符只帶一個操作數(shù)。返回的值取決于?--?運算符位于操作數(shù)的前面或是后面 | --x?將返回?x?自減運算后的值。 x--?將返回?x?自減運算前的值 | ? |
比較運算符
?
| 運算符 | 說?明 | 示?例 |
| =?=? | 等于。如果兩個操作數(shù)相等，則返回真。 | a?=?=?b |
| != | 不等于。如果兩個操作數(shù)不相等，則返回真。 | Var2?!=?5 |
| > | 大于。如果左邊的操作數(shù)大于右邊的操作數(shù)，則返回真。 | Var1?>?var2 |
| < | 小于。如果左邊的操作數(shù)小于右邊的操作數(shù)，則返回真。 | Var2?<?var1 |
| <= | 小于等于。如果左邊的操作數(shù)小于或等于右邊的操作數(shù)，則返回真。 | Var2?<=?4 Var2?<=?var1 |
| >= | 大于等于。如果左邊的操作數(shù)大于或等于右邊的操作數(shù)，則返回真。 | Var1?>=?5 Var1?>=?var2 |
邏輯運算符
| 運算符 | 值 | 說?明 |
| 與?(?&&) | expr1?&&?expr2 | 只有當?expr1?和?expr2?同為真時，才返回真。否則，返回假。 |
| 或?(?||?) | expr1?||?expr2 | 如果其中一個表達式為真，或兩個表達式同為真，則返回真。否則，返回假。 |
| 非?(!) | !expr | 如果表達式為真，則返回假。如果為假，則返回真。 |
流程控制
??所謂結構化程序設計思想，就是要使所設計的程序給人一種一目了然的感覺，條理清晰，模塊化，書寫層次分明，要求：
–?順序結構：一條接一條，自上而下
–?選擇結構：判斷給定條件，根據(jù)不同情況做不同處理
–?循環(huán)結構：多次重復執(zhí)行同一系列命令
if?語句?
語法：
if(條件)
?{
???JavaScript代碼;
?}
switch?語句?
語法
switch?(表達式)
{
? case?常量1?:?
? ???JavaScript語句;
???break;
? case?常量2?:?
? ???JavaScript語句;
? ???break;
? ...
? ???default?:?
????????JavaScript語句;
}
??網(wǎng)頁中嵌入腳本有兩種方式：使用<Script>標簽或外部?*.?js文件
??JavaScript?中聲明變量：var??變量名?
???“+”可以用于兩個數(shù)相加，還可以用于連接字符串
??parseInt()?和?parseFloat()?函數(shù)將字符串分別轉(zhuǎn)換為整型和小數(shù)
??運算符號分為算術運算符、比較運算符、邏輯運算符
??條件語句分為if語句，if-else語句、if的嵌套
??多分支語句switch根據(jù)表達式的值，進入不同的分支執(zhí)行
循環(huán)?
?
??for循環(huán)
??do-while
??while??
for循環(huán)
var?i;
for?(i=0;?i<10;?i++)
{
??//?語句;?
}
while和do－while循環(huán)
q?while循環(huán)
?????while(循環(huán)條件)
?????{
????????//語句；
?????}
q?do－while循環(huán)
????do
????{
??????//語句；
????}while(循環(huán)條件);
??函數(shù)實際上就是一段有名字的程序，這樣，在整個程序的任何位置，只要使用該名字，就會執(zhí)行由這段名字命名的程序。
內(nèi)置函數(shù)??
??eval?函數(shù)：?用于計算字符串表達式的值?
?????該函數(shù)可以對以字符串形式表示的任意有效的?JavaScript代碼求值。eval()?函數(shù)有一個參數(shù)，該參數(shù)就是想要求值的代碼。
???var?anExpression?=?"6?*?9?%?7";
???var?total?=?eval(anExpression);?//?將變量?total?賦值為?5
?
isNaN?函數(shù)：用于驗證參數(shù)是否為?NaN（非數(shù)字）
?????????isNaN(numValue)
???????????返回一個?Boolean?值，指明提供的值是否是保留值?NaN?（不是數(shù)字）。
????如果值是?NaN，?那么?isNaN?函數(shù)返回?true?，否則返回?false?
自定義函數(shù)
??定義函數(shù)：
function?函數(shù)名([參數(shù)1,參數(shù)2，…]){?
????語句;?
}
??調(diào)用函數(shù)：
函數(shù)調(diào)用一般和表單元素的事件一起使用，調(diào)用格式為：事件名＝“函數(shù)名”?;
??????參數(shù)是由函數(shù)的使用方傳遞到函數(shù)體中的變量，用于為函數(shù)中的操作提供相應的信息和數(shù)據(jù)。
??參數(shù)的傳遞
–?按值傳遞：傳遞的只是原變量的一份拷貝，因此，如果在函數(shù)中改變了這個參數(shù)的值，原變量不會跟著改變，它將保留原有的值。
–?按地址傳遞：這時傳遞的是原變量的內(nèi)存地址，即函數(shù)中的參數(shù)和原變量是同一個變量。因此在函數(shù)中改變了參數(shù)值，原變量也會隨之改變。
??參數(shù)的個數(shù)
當函數(shù)包含多個參數(shù)時，使用arguments.length可以得到使用該函數(shù)時輸入的參數(shù)個數(shù)，而arguments包括了各參數(shù)內(nèi)容。
??注意：調(diào)用有參數(shù)的函數(shù)，但沒有給其傳值，函數(shù)一樣可以運行，或者調(diào)用沒有參數(shù)的函數(shù)，給其傳值，該函數(shù)也一樣運行。
??說的簡單點：只要寫了函數(shù)名后面跟了一對小括號，該函數(shù)就會運行。
其實，在函數(shù)中有一個參數(shù)數(shù)組對象（arguments），該對象將傳遞的參數(shù)都封裝在一個數(shù)組中。
例：
function?demo()//定義函數(shù)。
{
alert(arguments.length);
}
demo(“hello”,123,true);//調(diào)用函數(shù)。
那么彈出的對話框結果是3，如果想得到所有的參數(shù)值，可以通過for循環(huán)遍歷該數(shù)組。
為了增強閱讀性，最好按照規(guī)范，按定義好的形式參數(shù)傳遞實際參數(shù)。
函數(shù)在調(diào)用時的其他寫法：
var?show?=?demo();//show變量接收demo函數(shù)的返回值。
var?show?=?demo;//這種寫法是可以的，意為show和demo代表同一個函數(shù)。
??//那么該函數(shù)也可以通過show()的方式運行
變量的作用域
??JavaScript的變量分為全局變量和局部變量。全局變量是作用在全程序范圍內(nèi)的變量，它聲明在函數(shù)體外；局部變量是定義在函數(shù)體內(nèi)的變量，它僅僅在函數(shù)體內(nèi)起作用。
例如，?var?errorMessage=“”;
function?checkRequired(v,label){
…?…
var?msg=“請輸入”+label;
errorMessage=errorMessage+msg;
}
JavaScript?對象簡介?
??內(nèi)置對象
??瀏覽器對象
??自定義對象
??注意：一個對象在被引用之前，必須存在。另外在JavaScript中對于對象屬性和方法的引用，有兩種情況：
–?該對象為靜態(tài)對象，表示在引用該對象的屬性或方法時不需要為它創(chuàng)建實例；
–?在引用該對象屬性和方法時必須為它創(chuàng)建一個實例，叫做動態(tài)對象。?
創(chuàng)建字符串有兩種不同方法?：
??使用?var?語句??????var?newstr?=?“這是我的字符串"
??創(chuàng)建?String?對象
var?newstr?=?new?String?(“這是我的字符串")
??字符串相加：+或+=??（字符串的連接）
??在字符串中使用特殊字符
“sdfg’????×?????“她說：’今天不出門’”?????√???或使用轉(zhuǎn)義字符????“她說：\”今天不出門\””????“\n”??
??比較字符串是否相等??==??!=???user==null?||?user==“”
??數(shù)字字符串和數(shù)值的相互轉(zhuǎn)換
String相關函數(shù)
??屬性：length
??方法：
–?charAt(index):?返回指定索引位置處的字符。
–?indexOf(subString[,?startIndex]):?返回?String?對象內(nèi)第一次出現(xiàn)子字符串的字符位置。
–?substr(start?[,?length?]):返回一個從指定位置開始的指定長度的子字符串。
–?substring(start,?end):返回位于?String?對象中指定位置的子字符串。
–?toLowerCase:返回一個字符串，該字符串中的字母被轉(zhuǎn)換為小寫字母。
Math?對象?
| ? | 名稱? | 說?明 |
| 屬性 | PI | ∏?的值，?約等于?3.1415 |
| LN10 | 10?的自然對數(shù)的值，約等于?2.302 | |
| E | Euler?的常量的值，約等于?2.718。Euler?的常量用作自然對數(shù)的底數(shù) | |
| ? | abs(y) | 返回?y?的絕對值 |
| sin?(y)? | 返回?y?的正弦，返回值以弧度為單位。 | |
| cos?(y) | 返回?y?的余弦，返回值以弧度為單位 | |
| tan?(y) | 返回?y?的正切，返回值以弧度為單位? | |
| min?(x,?y) | 返回?x?和?y?兩個數(shù)中較小的數(shù)? | |
| max?(x,?y) | 返回?x?和?y?兩個數(shù)中較大的數(shù)? | |
| random | 返回0-1的隨機數(shù) | |
| 方法 | round?(y) | 四舍五入取整 |
| sqrt?(y) | 返回?y?的平方根 |
數(shù)學運算?Math對象
??Math.ceil(x)返回>=x的最小整數(shù)
??Math.floor(x)?返回<=x的最大整數(shù)
??Math.pow(x,y)返回x的y次方
??Math.random()返回0-1之間的隨機小數(shù)
??Math.round(x)返回x的四舍五入的整數(shù)，特定精度的四舍五入見[1.1.htm]
Date?對象
Data?方法的分組
| 方法分組 | 說?明? |
| setxxx | 這些方法用于設置時間和日期值 |
| getxxx? | 這些方法用于獲取時間和日期值 |
| Toxxx | 這些方法用于從?Date?對象返回字符串值 |
| parsexxx?&?UTCxx | 這些方法用于解析字符串 |
用作?Date?方法的參數(shù)的整數(shù)
?
?
?
| 值 | 整?數(shù)? |
| Seconds?和?minutes | 0?至?59? |
| Hours | 0?至?23? |
| Day | 0?至?6（星期幾）? |
| Date | 1?至?31（月份中的天數(shù)）? |
| Months | 0?至?11（一月至十二月）? |
Set?方法
| 方法 | 說明 |
| setDate | 設置?Date?對象中月份中的天數(shù)，其值介于?1?至?31?之間。 |
| setHours | 設置?Date?對象中的小時數(shù)，其值介于?0?至?23?之間。 |
| setMinutes | 設置?Date?對象中的分鐘數(shù)，其值介于?0?至?59?之間。? |
| setSeconds | 設置?Date?對象中的秒數(shù)，其值介于?0?至?59?之間。? |
| setTime | 設置?Date?對象中的時間值。? |
| setMonth | 設置?Date?對象中的月份，其值介于?1?至?12?之間。 |
Get?方法：
| 方法 | 說明 |
| getDate | 返回?Date?對象中月份中的天數(shù)，其值介于?1?至?31?之間 |
| getDay | 返回?Date?對象中的星期幾，其值介于?0?至?6?之間 |
| getHours | 返回?Date?對象中的小時數(shù)，其值介于?0?至?23?之間 |
| getMinutes | 返回?Date?對象中的分鐘數(shù)，其值介于?0?至?59?之間 |
| getSeconds | 返回?Date?對象中的秒數(shù)，其值介于?0?至?59?之間 |
| getMonth | 返回?Date?對象中的月份，其值介于?0?至11?之間 |
| getFullYear | 返回?Date?對象中的年份，其值為四位數(shù) |
| getTime | 返回自某一時刻（1970?年?1?月?1?日）以來的毫秒數(shù) |
To?方法：
| 方?法 | 說?明? |
| ToGMTString | 使用格林尼治標準時間?(GMT)?數(shù)據(jù)格式將?Date?對象轉(zhuǎn)換成字符串表示 |
| ToLocaleString | 使用當?shù)貢r間格式將?Date?對象轉(zhuǎn)換成字符串表示 |
Parse?方法和?UTC?方法?
| 方?法 | 說?明 |
| Date.parse?(date?string?) | 用日期字符串表示自?1970?年?1?月?1?日以來的毫秒數(shù)? |
| Date.UTC?(year,?month,?day,?hours,?min.,?secs.?) | Date?對象中自?1970?年?1?月?1?日以來的毫秒數(shù)? |
數(shù)組
??聲明數(shù)組?
????var?數(shù)組名?=?new?Array(數(shù)組大小);
??例：?var?emp?=?new?Array(3)
??添加元素?
????emp[0]?=?“AA";
????emp[1]?=?“BB";
????emp[2]?=?“CC";
也可以聲明數(shù)組并賦初值：
?????例：?var?emp=new?Array(“AA”，“BB”，“CC”)；
??方案1?：
–?var?objArr?=?new?Array();//創(chuàng)建一個空數(shù)組
–?var?objArr?=?new?Array(10);//創(chuàng)建含10個元素的數(shù)組
–?var?objArr?=?new?Array(“a”,”b”,”c”);//創(chuàng)建數(shù)組并初始化
??方案2：
–?var?objArr?=?[];//通方案1
–?var?objArr?=?[10];//包含一個數(shù)字10的元素，注意：和方案1不一樣
–?var?objArr?=?[“a”,”b”,”c”];//通方案1
??組合數(shù)組的創(chuàng)建
–?var?objArr?=?[[new?Date()],”abc”,1234];//該數(shù)組包含三種數(shù)據(jù)類型，分別是對象類型,字符串類型和數(shù)字類型
??如何引用元素：objArr[index]的形式來使用數(shù)組中的一個元素，index是元素在數(shù)組的索引，從0開始計算
??數(shù)組的length屬性：表示數(shù)組的長度
??多維數(shù)組：js本身是沒有多維數(shù)組概念，要通過組合數(shù)組來創(chuàng)建
–?二維數(shù)組舉例1：創(chuàng)建2*6的二維數(shù)組
var?arr?=?new?Array(4);
for(var?i=0;i<4;i++)
arr[i]=?new?Array(6);
–?二維數(shù)組舉例2：3*3
var?arr?=?[[1,2,3],[4,5,6],[7,8,9]];
常用屬性
length?：返回數(shù)組中元素的個數(shù)
常用方法
| 方?法 | 說?明 |
| join | 將數(shù)組中的元素組合成字符串 |
| reverse | 顛倒數(shù)組元素的順序，使第一個元素成為最后一個，而最后一個元素成為第一個 |
| sort | 對數(shù)組元素進行排序 |
數(shù)組的方法
??objArr.toString():轉(zhuǎn)換成字符串，并用,連接：
–?[1,2,3].toString()?->?“1,2,3”
–?[“a”,”b”,”c”,[1,2,3,4]].toString()?->?“a,b,c,1,2,3,4”
??objArr.join(separator):將separator作為分隔符，將數(shù)組轉(zhuǎn)換成字符串，當separator為逗號時等同于toString()
??objArr.pop()返回數(shù)組最后一個元素值，注意：這里同時會將該元素從數(shù)據(jù)中清除，即objArr.length?減1
??objArr.push(v1,v2,…):將參數(shù)添加到數(shù)組結尾：
–?[1,2,3,4].push(“a”,”b”)?->?[1,2,3,4,”a”,”b”]
??objArr.shift():移出數(shù)組第一個元素，并返回該值
??Array對象常用的屬性是length，排序方法：sort
??循環(huán)語句分為：for?循環(huán)、while循環(huán)、do-while循環(huán)
??Eval(?)函數(shù)可以計算某個計算表達式的值，
???isNaN(?)函數(shù)可用于判斷是否是一個數(shù)字??
??String對象的indexOf(?)方法用于查找子字符串?
??Math對象的random(?)方法可以產(chǎn)生0－1的隨機數(shù)
??Date對象有setxxx(?)方法用于設置日期和時間，getxxx(?)方法用于獲得日期和時間
Window?對象
??窗口對象window是瀏覽器網(wǎng)頁的文檔對象模型結構中的最高級的對象，只要網(wǎng)頁的html標記中包含有<body>或<frameset>標記，該網(wǎng)頁就會包含一個窗口對象。
??window對象的常用屬性和方法
屬性?
| 名稱? | 說明? |
| document | 表示給定瀏覽器窗口中的?HTML?文檔。? |
| history? | 包含有關客戶訪問過的URL的信息。 |
| location | 包含有關當前?URL?的信息。? |
| name | 設置或檢索窗口或框架的名稱。? |
| status? | 設置或檢索窗口底部的狀態(tài)欄中的消息。? |
| screen | 包含有關客戶端的屏幕和顯示性能的信息。? |
方法?
| 名稱? | 說明? |
| alert?(“m提示信息") | 顯示包含消息的對話框。? |
| confirm（“提示信息”） | 顯示一個確認對話框，包含一個確定取消按鈕 |
| prompt（”提示信息“） | 彈出提示信息框 |
| open?("url","name") | 打開具有指定名稱的新窗口，并加載給定?URL?所指定的文檔；如果沒有提供?URL，則打開一個空白文檔 |
| close?(?) | 關閉當前窗口 |
| setTimeout(”函數(shù)”,毫秒數(shù))? | 設置定時器：經(jīng)過指定毫秒值后執(zhí)行某個函數(shù)? |
| clearTimeout(定時器對象)? | 取消setTimeout設置 |
open（”打開窗口的url”，”窗口名”，”窗口特征”）
?
窗口的特征如下，可以任意組合：
height：?窗口高度；?
width：?窗口寬度；?
top：?窗口距離屏幕上方的象素值；?
left：窗口距離屏幕左側的象素值；?
toolbar：?是否顯示工具欄，yes為顯示；?
menubar，scrollbars?表示菜單欄和滾動欄。?
resizable：?是否允許改變窗口大小，yes或1為允許?
location：?是否顯示地址欄，yes或1為允許?
status：是否顯示狀態(tài)欄內(nèi)的信息，yes或1為允許；
screen.width---顯示器屏幕的寬度
??????????????screen.height---顯示屏幕的高度??
定時器函數(shù)setTimeout?()的用法：
?
setTimeout（“調(diào)用的函數(shù)名”，間隔的毫秒數(shù)）
?
表示過多少毫秒，就調(diào)用某個函數(shù)來執(zhí)行
清除某個定時器：clearTimeout()方法。
例如：var?myclock＝setTimeout（”move(?)”,500）;
if?(…)
clearTimeout（myclock）;；
定時器的使用：實現(xiàn)延期執(zhí)行或重復執(zhí)行
??window對象提供了兩種方法來實現(xiàn)定時器：
–?window.?setTimeout(表達式[expression],延時時間[n])?
–?window.?setInterval(表達式[expression],延時時間[n])
注意：expression可以是用引號括起來的代碼，也可以是一個函數(shù)名（不能帶任何參數(shù)的函數(shù)）
??如何取消定時器：
–?取消setTimeout：window.clearTimeout(id);?
–?取消setInterval:window.clearInterval(id);
屏幕（screen）對象
??屏幕對象是JavaScript運行時自動產(chǎn)生的對象
??屏幕對象常用屬性
–?height：返回顯示屏幕的高度。?
–?width?：返回顯示器屏幕的寬度。
–?availHeight?：返回顯示屏幕的高度?(除?Windows?任務欄之外)。?
–?availWidth：返回顯示屏幕的寬度?(除?Windows?任務欄之外)。
–?colorDepth：返回目標設備或緩沖器上的調(diào)色板的比特深度（每像素中用于顏色的位數(shù)，其值為1,4,8,15,16,24,32）。
??網(wǎng)頁可見區(qū)域?qū)?#xff1a;document.body.clientWidth
??網(wǎng)頁可見區(qū)域高：document.body.clientHeight
??網(wǎng)頁可見區(qū)域?qū)?#xff1a;document.body.offsetWidth?(包括邊線的寬)
??網(wǎng)頁可見區(qū)域高：document.body.offsetHeight?(包括邊線的寬)
??網(wǎng)頁正文全文寬：document.body.scrollWidth
??網(wǎng)頁正文全文高：document.body.scrollHeight
??網(wǎng)頁被卷去的高：document.body.scrollTop
??網(wǎng)頁被卷去的左：document.body.scrollLeft
??網(wǎng)頁正文部分上：window.screenTop
??網(wǎng)頁正文部分左：window.screenLeft
??屏幕分辨率的高：window.screen.height
??屏幕分辨率的寬：window.screen.width
??屏幕可用工作區(qū)高度：window.screen.availHeight
??屏幕可用工作區(qū)寬度：window.screen.availWidth
Location對象
??處理地址欄信息：location對象
–?Location對象是wodow對象的子對象，包含了窗口對象的網(wǎng)頁地址內(nèi)容，即URL。例如：
??window.location=“http://www.sohu.com”;//跳轉(zhuǎn)到頁面
??window.loaction.href=“http://www.sohu.com”;//同上
??window.location.reload();//刷新頁面
??Window.location.replace(url);//用url刷新當前網(wǎng)頁
方法1：<a?href=“javascript:window.open(‘http://www.yahoo.com’,’_self’)”>
??????????????????window.open()
?????????????</a>
方法2：<a?href=“javascript:location.href=‘http://www.yahoo.com’”>
??????????????????location.href
?????????????</a>
方法3：<a?href=“javascript:location.?replace(‘http://www.yahoo.com’)”>
??????????????????location.replace()
?????????????</a>
Location?對象屬性?
| 名稱? | 說明? |
| host | 設置或檢索位置或?URL?的主機名和端口號 |
| hostname | 設置或檢索位置或?URL?的主機名部分 |
| href | 設置或檢索完整的?URL?字符串 |
方法?
| 名稱 | 說明 |
| assign("url") | 加載?URL?指定的新的?HTML?文檔。?? |
| reload() | 重新加載當前頁 |
| replace("url")? | 通過加載?URL?指定的文檔來替換當前文檔 |
歷史記錄（history）對象
??歷史記錄對象是窗口對象下的一個子對象。它實際上是一個對象數(shù)組，包含了一系列的用戶訪問過的url地址，用于瀏覽器工具欄中的“前進”和“后退”按鈕。
??常用屬性和方法
–?history.length：歷史對象的個數(shù)
–?history.back();顯示瀏覽器歷史列表中后退一個網(wǎng)址的網(wǎng)頁
–?history.go(n)或者history.go(網(wǎng)址)：顯示瀏覽器的歷史列表中第n個網(wǎng)址的網(wǎng)頁，n>0?前進??n<0??后退
–?history.forward()；//顯示瀏覽器歷史列表中前進一個網(wǎng)址的網(wǎng)頁
Document對象
??document文檔對象是window對象的一個主要部分，它包含了網(wǎng)頁顯示的各個元素對象。
–?document.write(str);//輸出一行
–?document.writeln(str);//輸出一行，并回車
常用屬性
| 名稱? | 說明 |
| alinkColor | 設置或檢索文檔中所有活動鏈接的顏色? |
| bgColor | 設置或檢索?Document?對象的背景色? |
| body | 指定文檔正文的開始和結束 |
| linkColor | 設置或檢索文檔鏈接的顏色 |
| location | 包含關于當前?URL?的信息? |
| title | 包含文檔的標題 |
| url | 設置或檢索當前文檔的?URL |
| vlinkColor | 設置或檢索用戶訪問過的鏈接的顏色? |
常用方法?
| 名稱? | 說明? |
| clear?(?) | 清除當前文檔? |
| close?(?) | 關閉輸出流并強制顯示發(fā)送的數(shù)據(jù) |
| write?("text") | 將文本寫入文檔 |
??JavaScript?程序是事件驅(qū)動程序
??onFocus獲得焦點事件，表示獲得鼠標光標，?onBlur失去焦點事件，剛好與之相反
??瀏覽器對象是一個分層次的結構，window是頂層根對象
??打開窗口使用window對象的open(?)方法
??設置定時器，使用window對象的setTimeout(?)方法
??location對象的back(?)和forward(?)方法等同于前進、后退按鈕
Form對象及其元素對象
??Form對象：是文檔對象的一個主要元素。Form對象中包含有許多用于收集用戶輸入內(nèi)容的元素對象，例如，文本框、按鈕等，通過這些元素對象，form將用戶輸入的數(shù)據(jù)傳遞到服務器端進行處理。
??引用form對象
–?使用form標記中的name屬性值
document.form1???????document.form2
–?使用forms數(shù)組對象
document.forms[0]?????????????????document.forms[1]??
document.forms[“form1”]
??Form對象的常用屬性、方法和事件
?
?
表單的onsubmit事件。事件響應調(diào)用函數(shù)doSubmit()進行驗證，根據(jù)函數(shù)的返回值決定是否提交
??Form中的元素對象
form中的元素對象一般都可以與html的標記一一對應。
??引用form中的元素對象
–?通過元素的名稱
document.form1.username
–?通過form的元素數(shù)組對象的方法
document.form1.elements[0]
document.form1.elements[“username”]
JavaScript?事件處理程序?
事件處理程序的基本語法是：事件名="?JavaScript?代碼函數(shù)"?
<INPUT?type=”BUTTON”?…??onClick=“alert(“單擊我！”);”>
<INPUT?type=”BUTTON”?…??onMouseDown=“check(?)”>
表示鼠標按下時，將調(diào)用執(zhí)行函數(shù)check(?)?。
JavaScript?事件?
| 事件名 | 說明 |
| onClick | 鼠標單擊 |
| onChange? | 文本內(nèi)容或下拉菜單中的選項發(fā)生改變 |
| onFocus? | 獲得焦點，表示文本框等獲得鼠標光標。 |
| onBlur? | 失去焦點，表示文本框等失去鼠標光標。 |
| onMouseOver? | 鼠標懸停，即鼠標停留在圖片等的上方 |
| onMouseOut? | 鼠標移出，即離開圖片等所在的區(qū)域 |
| onMouseMove | 鼠標移動，表示在<DIV>層等上方移動 |
| onLoad? | 網(wǎng)頁文檔加載事件 |
| onSubmit? | 表單提交事件 |
| onMouseDown? | 鼠標按下 |
| onMouseUp? | 鼠標彈起 |
onFocus和onBlur?事件
文本框獲得鼠標焦點時（onFocus）調(diào)用的函數(shù)：
清空卡號文本框?
?
文本框失去鼠標焦點時（onBlur）調(diào)用的函數(shù)：
判斷格式是否正確?
?
focus(?)方法
再次獲得焦點，即鼠標
光標回到卡號文本框
onMouseOver="src='dog2.jpg'"?
表示本圖片的圖片名稱替換為dog2.jpg。
請注意：
由于外面兩端已有雙引號，為區(qū)別起見，dog2.jpg改用為單引號括起來。
文本框?qū)ο?/p>
??文本框元素用于在表單中輸入字、詞或一系列數(shù)字
??可以通過將?HTML?的?INPUT?標簽中的?type?設置為“text”，以創(chuàng)建文本框元素
文本框?qū)ο?–?事件處理程序
| 文 本 框 | 事件 | onBlur | 文本框失去焦點 |
| onChange | 文本框的值被修改 | ||
| onFocus | 光標進入文本框中 | ||
| 方法 | focus(?) | 獲得焦點，即獲得鼠標光標 | |
| select(?) | 選中文本內(nèi)容，突出顯示輸入?yún)^(qū)域 | ||
| 屬性 | readOnly? | 只讀，文本框中的內(nèi)容不能修改? |
onFocus事件調(diào)用的函數(shù)clearText（）清空帳號文本框中的內(nèi)容
?
onBlur事件調(diào)用的函數(shù)check（）檢查輸入的帳號是否是“10”打頭，并且是數(shù)字
?
onChange事件調(diào)用的函數(shù)compute(?)用來計算總價?
命令按鈕對象
命令按鈕對象是網(wǎng)頁中最常用的元素之一
<INPUT?type="submit"?name="button1"??value="提交">
<INPUT?type="reset"?name="button2"??value="重置">
<INPUT?type="button"?name="button3"??value="計算">
按鈕?-?事件處理程序
| 表單元素 | 事件處理程序 | 說明 |
| 命令按鈕 | onSubmit | 表單提交事件，單擊“提交”按鈕時產(chǎn)生，此事件屬于<FORM>元素，不屬于提交按鈕 |
| onClick | 按鈕單擊事件 |
onSubmit事件處理代碼：
<FORM??onSubmit=”return?調(diào)用函數(shù)名”>…</FORM>
如果函數(shù)返回true，則向遠程服務器提交表單；
如果函數(shù)返回false，則取消提交。
復選框?qū)ο?/p>
??當用戶需要在選項列表中選擇多項時，可以使用復選框?qū)ο?/p>
??要創(chuàng)建復選框?qū)ο?#xff0c;請使用?<INPUT>?標簽
復選框?-?事件處理程序
| 復選框 | 事件 | onBlur | 復選框失去焦點 |
| onFocus? | 復選框獲得焦點? | ||
| onClick? | 復選框被選定或取消選定 | ||
| 屬性 | checked | 復選框是否被選中，選中為true，未選中為false。您可以使用此屬性查看復選框的狀態(tài)或設置復選框是否被選中 | |
| ?value | 設置或獲取復選框的值 |
<PRE>是為了原樣顯示字符串中的換行”\n”格式
修改每個復選框的名稱都為mybox，使這4個復選框構成一個數(shù)組mybox?
使用數(shù)組和for循環(huán)大大簡化代碼
單選按鈕對象
??當用戶只需要從選項列表中選擇一個選項時，可以使用單選按鈕對象
??要創(chuàng)建單選按鈕對象，請使用?<INPUT>?標簽
單選按鈕?-?事件和屬性
| 單選按鈕 | 事件 | onBlur | 單選按鈕失去焦點 |
| onFocus? | 單選按鈕獲得焦點? | ||
| onClick? | 單選按鈕被選定或取消選定 | ||
| 屬性 | checked | 單選按鈕是否被選中，選中為true，未選中為false。您可以使用此屬性查看單選按鈕的狀態(tài)或設置單選按鈕是否被選中 | |
| ?value | 設置或獲取單選按鈕的值 |
下拉列表框
<SELECT?name="myselect"?>
??????<OPTION>--請選擇開戶帳號的城市--</OPTION>
??????<OPTION?value="北京市">北京市</OPTION>
??????<OPTION?value="上海市">上海市</OPTION>
??????<OPTION?value="重慶市">重慶市</OPTION>
??????<OPTION?value="天津市">天津市</OPTION>
??????<OPTION?value="四川省">四川省</OPTION>
??????<OPTION?value="山東省">山東省</OPTION>
??????<OPTION?value="湖北省">湖北省</OPTION>
</SELECT>
下拉列表框-事件和屬性
| 下拉列表框 | 事件 | onBlur | 下拉列表框失去焦點 |
| onChange | 當選項發(fā)生改變時產(chǎn)生 | ||
| onFocus | 下拉列表框獲得焦點 | ||
| 屬性 | value | 下拉列表框中，被選選項的值 | |
| options | 所有的選項組成一個數(shù)組，options表示整個選項數(shù)組，第一個選項即為options[0]，第二個即為options[1]，其他以此類推 | ||
| selectedIndex | 返回被選擇的選項的索引號，如果選中第一個返回0，第二個返回1，其他類推 |
表單驗證?
??JavaScript?最常見的用法之一就是驗證表單
??對于檢查用戶輸入是否存在錯誤和是否疏漏了必選項，JavaScript?是一種十分便捷的方法
??<SCRIPT?LANGUAGE="JavaScript">
??function?validate(?)
??{
??var??f=document.reg_form;
??if(f.uname.value=="")
??{
??alert("請輸入姓名");
??f.uname.focus();???檢查姓名
??return?false;
??}??
??if?(f.gender[0].checked==false?&&?f.gender[1].checked==false)
??{
??alert("請指定性別");
??f.gender[0].focus();
??return?false;???檢查性別
??
??}
??if?((f.password.value.length?<?6)?||?(f.password.value?==?""))
??{
??alert("請輸入至少?6?個字符的密碼！");
??f.password.focus();
??return?false;???檢查密碼
??}
??q=f.email.value.indexOf("@");
??if?(q==-1)
??{
??alert("請輸入有效的電子郵件地址");
??f.email.focus();
??return?false;???檢查郵件地址
??}
??<FORM?name="reg_form"?onSubmit="return?validate()"?action="submit.htm">
??
??if?(f.age.value<1?||?f.age.value>?99?||?isNaN(f.age.value))
??{
??alert("請輸入有效的年齡！");
??f.age.focus();
??return?false;???檢查年齡
??}
??</SCRIPT>
??
??OnBlur、onChange?和?OnFocus?是一些與表單對象相關的事件處理程序
??在瀏覽器窗口中，如果文本框獲得焦點，則會調(diào)用?onFocus?事件處理程序
??當對象失去焦點或光標退出對象時，將執(zhí)行?onBlur?事件處理程序??
??當修改文本框內(nèi)容或改寫下拉列表框的選項時，則會調(diào)用?onChange?事件處理程序
??JavaScript的主要功能之一是用于表單驗證
轉(zhuǎn)載于:https://www.cnblogs.com/Vae1990Silence/p/4733080.html
總結
以上是生活随笔為你收集整理的HTML/CSS/JavaScript学习总结(转)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 电大计算机网考选择题多少分,2016年度
- 下一篇： MAC终端安装grunt--javasc