一.Html總結
1、Html簡介
HTML 是一種標記語言
忽略大小寫,語法寬松
使用 HTML 標記和元素,可以:
控制頁面和內容的外觀
發布聯機文檔
使用 HTML 文檔中插入的鏈接檢索聯機信息
創建聯機表單,收集用戶的信息、執行事務等等
插入動畫
開發幫助文件
HTML 標記的格式組成: <ELEMENT ATTRIBUTE = value>
ELEMENT: 元素 - 標識標記
ATTRIBUTE: 屬性 - 描述標記
value: 值 - 分配給屬性的內容
2、超鏈接
<A HREF = protocol://host.domain:port/path/filename> Hypertext </A>
Protocol 協議類型
http –超文本傳輸協議<a href="http://127.0.0.1:8080/shopcart/index.html">
gopher –搜索文件
telnet –打開 telnet會話
ftp –文件傳輸協議
mailto –發送電子郵件 <A HREF="mailto:daillow@gmail.com">電子郵件連接
Host.domain 服務器的 Internet 地址
Port 目標服務器的端口號
Hypertext 用戶必須單擊才能激活鏈接的文本或圖像
3、Html的基本標記
標題標記 <h1>~<h6> 標題標記,可顯示六種大小的標題(1最大,6最小)
段落級標記 <ADDRESS> 可包含:到主頁的鏈接,搜索字符串功能,版權信息,文檔的作者、地址、簽名等信息
<BLOCKQUOTE> 顯示文檔中的引用文本。用於較長的引用且顯示為縮進式段落。
<PRE> 此元素用於預定義文本的格式。文本在瀏覽器中顯示時遵循在HTML源文檔中定義的格式。
塊標記 <SPAN>定義段落內的內容塊; <DIV>可以定義跨段落的內容塊
字符級標記 (見下面的語法大全,字體效果)
列表 <li type=...> 指定符號type="disc"空心圓/"circle"實心圓/"square"方形
<OL TYPE="a/A/i/I"> 有序號的列表(內嵌<li>)(a/A用字母標示,i/I希臘字母標示)
<UL TYPE="disc/circle/square"> 無序號的列表(內嵌<li>)
從第n個值開始編號<OL START = n> type=數值:從1開始(任何數值都是這樣)
OL與UL沒區別;TYPE="a/A/i/I"就有序號,TYPE="disc/circle/square"就沒序號
定義列表包含在<DL>標記內。<DT>標記用於指定要定義的術語,而<DD>標記用於對術語的定義。
水平標尺標記 <HR> 用於在頁面上繪制一條水平線。它沒有結束標記,且不包含任何內容。
字體標記 <FONT> 可以指定size、color、style(樣式)等屬性。
圖像標記 <IMG> 語法為:<IMG SRC="URL">。 支持GIF(支持圖形漸近,動畫); JPEG(.JPG); PNG
使用META標記
1. 提供關於網頁的信息
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="daillo"> <!--獲得文檔的作者名稱-->
<META NAME="Keywords" CONTENT=""> <!--根據關鍵詞生成響應-->
<META NAME="Description" CONTENT="noting Book"> <!--對網頁的描述-->
2. 應用:關鍵詞生成響應
<META http-equiv="Expires" content="Mon, 15 Sep 2003 14:25:27 GMT">
設置網頁的到期值:響應 Expires: Mon, 15 Sep 2003 14:25:27 GMT
3. 自動刷新頁面
<META http-equiv="Refresh" content="10; url=http://yourlink">
應用:如網上實時新聞報道。 content指每多少秒更新一次
4. 設置網頁所使用的編碼
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
設置網頁使用gb2312: 頁面顯示中文(還可設置utf8等等) 應用:如在不同瀏覽器上正確顯示中文。
在HTML文檔中使用特殊字符(跟XML的一樣)
> ==== > greater 大於 < ==== < litter 小於
&de; ==== ≥ 大於等於 ≤ ==== ≤ litter equal
≠ ==== ≠ not equal不等 ‍ ==== 空格
" ==== ” 雙引 ' ==== ‘ 單引號
© ==== © 版權符號 ® ==== ® 注冊商標
& ==== & 與符號
4、使用表<Table>
與表相關的標記
<TABLE>表標記 <tr>指定表格中的一行 <th>指定標題列 <td>指定表格中的單元格
在<TH>或<TD>標記中使用COLSPAN="n"表示跨n列(合並n列);ROWSPAN="n"表示跨n行(合並n行)
border定義邊框寬;cellSpacing定義單元格間距(單位像素);cellpadding定義格邊界與格內容的間距
<body bgcolor="#04D4F3" background="背景圖片.jpg"><!--定義背景顏色和背景圖片(圖片在上層)-->
<form name="form1" action="regiester.jsp" method=post><!--action 文本要提交的地方-->
<TABLE height=30% cellpadding=5 border=3 align="center"><!-- table可定義整體外觀 -->
<caption><h3>User Login</h3></caption> <!-- 表單的標題 -->
<tr bgcolor=blue style =font-size:20> <!-- tr 定義一行的屬性-->
<th colspan=2>注冊頁 <!--colspan橫向合並單元格,rowspan縱向;部分結束格式可不寫-->
<tr><th/>用戶名:<!-- 單行文本--> <!--th表示一行的標題,稍加粗點;td定義各個單元格-->
<td><input type="text" name="username"/></td></tr>
<tr><th/>密 碼:<!-- 密碼隱藏,不顯示; 是空格-->
<td><input type="password" name="password"/></td></tr>
<tr><th/>性別:<!-- 單選選項--> <!-- checked 是默認值-->
<td>男<input type="radio" name="gender" value="male" checked/>
女<input type="radio" name="gender" value="female"/>
保密<input type="radio" name="gender" value="none"/></tr>
<tr><th/>學歷:<!-- 下拉菜單選項-->
<td><select name="xueli" size="1">
<option value="blank"> <!--這行不寫,顯示空白;不知怎樣定義自寫選項-->
<option value="none">沒上過學</option>
<option value="zxx"/>中小學
<option value="dz">大專
<option value="bk">本科
<option value="ss">碩士
<option value="bs">博士/博士后</option></td></tr>
<tr><th/>愛好:<!-- 多選選項 -->
<td>旅游<input type="checkbox" name="hobby" value="travel"/>
看書<input type="checkbox" name="hobby" value="book"/><br>
音樂<input type="checkbox" name="hobby" value="music"/>
交友<input type="checkbox" name="hobby" value="friends"/></td>
<tr><th/>照片:<!-- 瀏覽文件框 -->
<td><input type="file" name="photo" />
<tr><th/>自我介紹:<!--多行文本,這textarea不能用空標志-->
<td><textarea cols="17" rows="3"></textarea>
<tr align="center" bgcolor=blue>
<td/><input type="reset"/> <!-- 重置/刷新按鈕 -->
<td/><input type="submit" value="提交"/> <!-- 提交按鈕 -->
</TABLE></form></body>
5、在Html中使用多媒體
(在<body>中插入)
插入圖片 <IMG SRC=./picture/cart.gif ALT="購物車">
插入聲音 <BGSOUND SRC="E:\\解決方案\\音樂\\3.mid"> (windows的路徑寫法)
<bgsound src="上海灘.mp3">
音頻/視頻 <EMBED ALIGN=CENTER SRC= "\path\file name" AUTOSTART= "TRUE" >
6、表單的使用
用途:收集信息,發送給程序處理
ACCEPT="Internet media type"
ACTION="URL" 指定處理提交的表單的腳本的位置
METHOD = (GET | POST) 指定向服務器發送數據的方法。
<input>屬性:
TYPE= 此屬性指定表單元素的類型。可用的選項有 TEXT(默認;單行文本)、CHECKBOX(多選)、
RADIO(單選)、SUBMIT(提交)、RESET(重置)、FILE(瀏覽文件)、HIDDEN、
PASSWORD(顯示特定符號的單行文本)、IMAGE(插圖) 和 BUTTON。
VALUE= 此屬性是可選屬性,它指定表單元素的初始值
NAME= 此屬性指定表單元素的名稱。例如,如果表單上有幾個文本框,可以按照名稱來標識它們
MAXLENGHT= 此屬性用於指定在TEXT或PASSWORD表單元素中可以輸入的最大字符數。默認值為無限的
CHECKED= 是Boolean屬性,指定按鈕是否是被選中的。當輸入類型為RADIO或CHECKBOX時使用。
SIZE= 此屬性指定表單元素的顯示長度。用於文本輸入的表單元素即輸入類型是TEXT或PASSWORD的
input-type (見屬性 TYPE= )
除input外,其他輸入元素:
TextArea 元素(屬性:Cols、Rows、Size) 多行文本
BUTTON 元素(屬性:Name、Value、Type)
SELECT 元素(屬性:Name、Size、Multiple、option) 下拉菜單(單選)
7、框架(frame)
框架將 Web 瀏覽器分成多個不同的區域,每個區域都可以顯示獨立、可滾動的頁面。達到多個視圖的效果。
<FRAMESET Rows Cols> 創建框架。 Rows分行;Cols分列。行列都分窗口時需要嵌套
<frameset cols="20%,*,20%"> 分割左中右三個框架;將左邊和右邊框架分割大小為20%;其余的自動調整
<frameset rows="20%,*"> 上下分割,將上面框架分割大小為20%;下面框架的大小瀏覽器會自動調整
<FRAME src="x.html"> 在 FRAMESET 元素內指定單個框架。 屬性有Name、Src、Noresize、
Scrolling=yes|no、 Frameborder、Marginwidth、Marginheight
<NOFRAMES> 對那些不支持 FRAMESET 的瀏覽器使用的 HTML。 定義不出現分割窗口的文字
<IFRAME src="xxx.html"> 內嵌框架,不需要 frameset ,隨處可用。
屬性:Name,Width,Height,scrolling=auto,frameborder
二.CSS基本介紹
級聯樣式表(Cascading Style Sheet)簡稱“CSS”,通常又稱為“風格樣式表(Style Sheet)”,它是用來進行網頁風格設計的。比如,如果想讓鏈接字未點擊時是藍色的,當鼠標移上去后字變成紅色的且有下划線,這就是一種風格。通過設立樣式表,可以統一地控制HTML中各標志的顯示屬性。級聯樣式表可以使人更能有效地控制網頁外觀。使用級聯樣式表,可以擴充精確指定網頁元素位置,外觀以及創建特殊效果的能力。
CSS是英語CascadingStyle Sheets(層疊樣式表單)的縮寫,它是一種用來表現HTML或XML等文件樣式的計算機語言。CSS目前最新版本為CSS3,是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言,CSS能夠對網頁中的對象的位置排版進行像素級的精確控制,支持幾乎所有的字體字號樣式,擁有對網頁對象和模型樣式編輯的能力,並能夠進行初步交互設計,是目前基於文本展示最優秀的表現設計語言。CSS能夠根據不同使用者的理解能力,簡化或者優化寫法,針對各類人群,有較強的易讀性。
2.CSS的使用方法
有三種方法可以在站點網頁上使用樣式表:
外部樣式:將網頁鏈接到外部樣式表。
內頁樣式:在網頁上創建嵌入的樣式表。
行內樣式:應用內嵌樣式到各個網頁元素。
每一種方法均有其優缺點:
當要在站點上所有或部分網頁上一致地應用相同樣式時,可使用外部樣式表。在一個或多個外部樣式表中定義樣式,並將它們鏈接到所有網頁,便能確保所有網頁外觀的一致性。如果人們決定更改樣式,只需在外部樣式表中修改一次,而該更改會反映到所有與該樣式表相鏈接的網頁上。通常外部樣式表以 .css 做為文件擴展名,例如牛腩新聞發布系統中的公共樣式Common.css。然后在需要此樣式的頁面中將其鏈接進來,如:
<link href="/css/Common.css"rel="stylesheet" type="text/css"/>
當人們只是要定義當前網頁的樣式,可使用嵌入的樣式表。嵌入的樣式表是一種級聯樣式表,“嵌”在網頁的 <HEAD>標記符內。嵌入的樣式表中的樣式只能在同一網頁上使用。 如:
<style type="text/css"><!-- /* 把聲明的樣式包含在一個html注釋中,這樣可以解決較老的瀏覽器不識別style的問題 */
body {background:grey;}
</style>
使用內嵌樣式以應用級聯樣式表屬性到網頁元素上。如:
<pstyle="@importurl('style3.css');">CSS document</p>
<!-- 不能在style屬性中使用@import -->
如果網頁鏈接到外部樣式表,為網頁所創建的內嵌的或嵌入式樣式將擴充或覆蓋外部樣式表中的指定屬性。
要在網頁上使用外部樣式表的樣式,可將該網頁鏈接到樣式表,方法是使用位於 “格式” 菜單上的 “樣式表連接” 命令。可以鏈接一個或數個樣式表到網頁視圖模式下的當前網頁,或到在文件夾列表中的所選網頁,或到站點上的全部網頁。
該“樣式” 框列出標准 HTML 標記符,例如標題
1,還有嵌入的樣式表或鏈接到網頁的外部樣式表中所含的類或 ID 選擇器。要應用樣式到網頁元素,請選定該樣式然后單擊 “樣式” 框中的樣式或選擇器。
在 Microsoft FrontPage 2000中,某些格式設置特性會作為內嵌樣式自動應用。例如∶如果使用 “邊框與陰影” 命令(在 “格式” 菜單上)在普通段落周圍應用框,FrontPage 會寫下格式設置信息,作為段落標記符的內嵌樣式屬性(例如∶ <pstyle="border-style: solid">)。然而某些屬性的應用需要使用 CSS,其他則需要使用 HTML 。如果人們只想使用 CSS 應用內嵌樣式,可使用 “樣式”按鈕(位於網頁元素的 “屬性” 對話框里)應用類或 ID 選擇器或嵌入式樣式。
3、CSS文字屬性:
color: #999999; /*文字顏色*/
font-family: 宋體,sans-serif; /*文字字體*/
font-size: 9pt; /*文字大小*/
font-style:itelic;/*文字斜體*/
font-variant:small-caps;/*小字體*/
letter-spacing: 1pt; /*字間距離*/
line-height: 200%; /*設置行高*/
font-weight:bold;/*文字粗體*/
vertical-align:sub;/*下標字*/
vertical-align:super;/*上標字*/
text-decoration:line-through;/*加刪除線*/
text-decoration:overline;/*加頂線*/
text-decoration:underline;/*加下划線*/
text-decoration:none;/*刪除鏈接下划線*/
text-transform: capitalize; /*首字大寫*/
text-transform: uppercase; /*英文大寫*/
text-transform: lowercase; /*英文小寫*/
text-align:right;/*文字右對齊*/
text-align:left;/*文字左對齊*/
text-align:center;/*文字居中對齊*/
text-align:justify;/*文字分散對齊*/
vertical-align屬性
vertical-align:top;/*垂直向上對齊*/
vertical-align:bottom;/*垂直向下對齊*/
vertical-align:middle;/*垂直居中對齊*/
vertical-align:text-top;/*文字垂直向上對齊*/
vertical-align:text-bottom;/*文字垂直向下對齊*/
4、CSS符號屬性:
list-style-type:none;/*不編號*/
list-style-type:decimal;/*阿拉伯數字*/
list-style-type:lower-roman;/*小寫羅馬數字*/
list-style-type:upper-roman;/*大寫羅馬數字*/
list-style-type:lower-alpha;/*小寫英文字母*/
list-style-type:upper-alpha;/*大寫英文字母*/
list-style-type:disc;/*實心圓形符號*/
list-style-type:circle;/*空心圓形符號*/
list-style-type:square;/*實心方形符號*/
list-style-image:url(/dot.gif);/*圖片式符號*/
list-style-position:outside;/*凸排*/
list-style-position:inside;/*縮進*/
5、CSS背景樣式:
background-color:#F5E2EC;/*背景顏色*/
background:transparent;/*透視背景*/
background-image: url(/image/bg.gif); /*背景圖片*/
background-attachment: fixed; /*浮水印固定背景*/
background-repeat: repeat; /*重復排列-網頁默認*/
background-repeat: no-repeat; /*不重復排列*/
background-repeat: repeat-x; /*在x軸重復排列*/
background-repeat: repeat-y; /*在y軸重復排列*/
指定背景位置
background-position: 90% 90%; /*背景圖片x與y軸的位置*/
background-position: top; /*向上對齊*/
background-position: buttom; /*向下對齊*/
background-position: left; /*向左對齊*/
background-position: right; /*向右對齊*/
background-position: center; /*居中對齊*/
6、CSS連接屬性:
a/*所有超鏈接*/
a:link/*超鏈接文字格式*/
a:visited/*瀏覽過的鏈接文字格式*/
a:active/*按下鏈接的格式*/
a:hover/*鼠標轉到鏈接*/
鼠標光標樣式:
鏈接手指 CURSOR: hand
十字體 cursor:crosshair
箭頭朝下 cursor:s-resize
十字箭頭 cursor:move
箭頭朝右 cursor:move
加一問號 cursor:help
箭頭朝左 cursor:w-resize
箭頭朝上 cursor:n-resize
箭頭朝右上 cursor:ne-resize
箭頭朝左上 cursor:nw-resize
文字I型 cursor:text
箭頭斜右下 cursor:se-resize
箭頭斜左下 cursor:sw-resize
漏斗 cursor:wait
光標圖案(IE6) p {cursor:url("光標文件名.cur"),text;}
7、CSS框線一覽表:
border-top: 1px solid #6699cc; /*上框線*/
border-bottom: 1px solid #6699cc; /*下框線*/
border-left: 1px solid #6699cc; /*左框線*/
border-right: 1px solid #6699cc; /*右框線*/
以上是建議書寫方式,但也可以使用常規的方式 如下:
border-top-color: #369 /*設置上框線top顏色*/
border-top-width:1px /*設置上框線top寬度*/
border-top-style: solid/*設置上框線top樣式*/
其他框線樣式
solid/*實線框*/
dotted/*虛線框*/
double/*雙線框*/
groove/*立體內凸框*/
ridge/*立體浮雕框*/
inset/*凹框*/
outset/*凸框*/
8、CSS表單運用:
文字方塊 <input type="text" name="T1"size="15">
按鈕 <input type="submit" value="submit"name="B1">
復選框 <input type="checkbox" name="C1">
選擇鈕 <input type="radio" value="V1" checkedname="R1">
多行文字方塊 <textarea rows="1" name="S1"cols="15"></textarea>
下拉式菜單 <select size="1" name="D1"><option>選項1</option>
<option>選項2</option></select>
9、CSS邊界樣式:
margin-top:10px;/*上邊界*/
margin-right:10px;/*右邊界值*/
margin-bottom:10px;/*下邊界值*/
margin-left:10px;/*左邊界值*/
十、CSS邊框空白
padding-top:10px;/*上邊框留空白*/
padding-right:10px;/*右邊框留空白*/
padding-bottom:10px;/*下邊框留空白*/
padding-left:10px;/*左邊框留空白*/
十一、滾動條樣式
Scrollbar-face-color:#f3f3f3;/*滾動條凸出部分的顏色*/
Scrollbar-highlight-color:#f1f1f1/*滾動條陰影部分的顏色*/
Scrollbar-shadow-color:#fcfcfc/*立體滾動條陰影顏色*/
Scrollbar-3dlight-color:#fcfcfc/*滾動條亮邊的顏色*/
Scrollbar-arrow-color:#34837/*上下按鈕上三角箭頭的顏色*/
Scrollbar-track-color:#fcfcfc/*滾動條的背景顏色*/
Scrollbar-darkshadow-color:#66c0f4/*立體滾動條強陰影顏色*/
Scrollbar-base-color:#fcfcfc/*滾動條的基本顏色*/
三、JQuery概念
A、Jquery是一個優秀的Javascript框架。它是輕量級的js庫 ,它兼容CSS3,還兼容各種瀏覽器,jQuery2.0及后續版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML documents、events、實現動畫效果,並且方便地為網站提供AJAX交互。jQuery還有一個比較大的優勢是,它的文檔說明很全,而且各種應用也說得很詳細,同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁面保持代碼和html內容分離,也就是說,不用再在html里面插入一堆js來調用命令了,只需定義id即可。
B、JavaScript的缺點:控件的操作方式不統一,不同瀏覽器容易出觀兼容問題。為了簡化操作,出現了許多對JavaScript封裝的函數庫比如Prototype、JQuery等。
C、JQuery的優點:小巧、方便、功能強大。插件豐富、開源、免費。
D、VS在VS2010中已經實現自動完成功能,VS2008需要安裝VSSP1補丁和VS90SP1-KB958502-X86補丁才能更好的支持,然后引用jquery-1.4.1.js,jquery-1.4.1-vsdoc.js放在同目錄下,VS2008中才會有自動提示和自動完成功能。
E、JQuery文件說明:
jquery-1.4.2.js是JQuery主文件。
jquery-1.4.2.min.js是壓縮板JQuery主文件。
jquery-1.4.2-vsdoc.js是JQuery在VS中的自動提示功能。
2、JQuery之Ready
A、JQuery的read和Dom onload的區別:onload是所有Dom元素創建完畢觸發,而ready則是Dom元素創建完就觸發,這樣可以提高網頁的響應速度。
3、JQuery內置函數
A、$.map(array, function)函數:對數組array中每個元素調用function函數逐個處理,function函數處理返回一個新的數組。如:
var array = [3, 6, 9];
var arrary2 = $.map(array, function(item) { return item * 2 });
for (var i = 0; i < arrary2.length; i++) {
alert(arrary2[i]);
};
或: alert(arrary2);
注: $.map函數不能處理dictionary風格的數組。
B、$.each(array, function)對array每個元素進行處理,但沒有返回值。
var array = ["TOM", "湯姆", "Jerry", "傑瑞"];
$.each(array, function() { alert(this); });
或:
var dict = { "TOM": 20, "Jerry": 50 };
$.each(dict, function(key, value) { alert(key + "=" + value); });
4、JQuery對象與Dom對象
A、JQuery對象是通過對Dom對象的封裝產生的對象。
B、Dom對象要想通過JQuery進行操作,需要先轉換成JQuery對象。
$(‘#div1’).html等價於:document.getElementByid(‘div1’).innerHTML;
$(‘#div1’)得到的是JQuery對象,JQuery對象可以調用JQuery對象封裝的方法,不能調用Dom對象的方法,Dom對象也不能調用JQuery對象的方法。
C、將Dom對象轉換成JQuery對象的方法,$(Dom對象)。當調用JQuery沒有封裝的方法時必須用Dom對象,轉換方法:var docobj = jqobj[0]或var domobj=jqobj.get(0)。
D、樣式的修改:
JQuery修改樣式方法:$(“#div1”).css(“background”, “red”);
JQuery獲得樣式的方法:$(“#div1”).css(“background”);
修改value值方法:
JQuery修改value方法: $(“#div1”).val(“Dragon”);
JQuery獲得value方法: $(“#div1”).val();
5、JQuery選擇器
A、JQuery選擇器用於查找滿足條件的元素,比如可以使用$(“#控件id”)來根據控件id獲得控件的JQuery對象。相當於getElementByid。
B、$(“TagName”)來獲取所有指定簽名的JQuery對象,相當於getElementsByTagName。
C、CSS選擇器,同時選擇擁有某個樣式的多個元素:
$(“.text”).click(function(){alert($(this).text();)});
D、多條件選擇器:$(“p,div,span.menuitem”),同時選擇p標簽、div標簽和擁有menuitem樣式的span標簽。
E、層次選擇器:
1、$(“div li”)獲取div下的所有li標簽(后代,子、子的子標簽…)。
2、$(“div > li”)獲取div下的直接li子標簽。
3、$(“.menuitem + div”)獲取樣式名為menuitem之后的第一個div標簽。
4、$(“.menuitem ~ div”)獲取樣式名為menuitem之后的所有div標簽。
6、JQuery隱式迭代
A、注:如果用隱式迭代就會不容易發現錯誤。
$(function(){
var elements = $(“#btn1”);
If (elements.length <= 0){
alert(“沒有找到提定對象”);
return;
}
elements.mouseover(function(){ alert(“找到了”)});
7、節點遍歷
A、next()方法用於獲取節點之后的挨着的第一個同輩標簽,$(“.menuitem”).next(“div”)、nextAll()方法用於獲取節點之后的所有同輩標簽。
B、siblings()方法用於獲取所有同級標簽。
8、鏈式編程
A、JQuery可以實現鏈式編程
9、JQuery過濾選擇器
A、:first選擇第一個標簽。$(“div:first”)選取第一個<div>。
B、:last選取最后一個標簽。$(“div:last”)選取最后一個<div>。
C、:not選取不滿足選擇器條件的標簽。$(“input:not(.myclass)”)選取樣式名不是myclass的<input>標簽。
D、:even、:odd,選取索引是奇數、偶數的標簽:$(“input:event”)選取索引是奇數的<input>。
E、:eq、:gt、:lt選取索引等於、大於、小於索引序號的標簽,比如$(“input:lt(1)”)選取索引小於1的<input>。
F、$(“:header”)選取所有的h1…h6標簽。
G、$(“div:animated”)選取正在執行動畫的<div>標簽。
10、屬性過濾選擇器
A、$(“div[id]”)選取有id屬性的<div>。
B、$(“div[title=test]”)選取title屬性為“text”的<div>。
C、$(“div[title!=test]”)選取title屬性不為“text”的<div>。
11、表單對象選擇器
A、$(“#form1:enabled”)選取id為form1的表單內所有啟用的標簽。
B、$(“#form1:disabled”)選取id為form1的表單內所有禁用的標簽。
C、$(“#form1:checked”)選取所有選中的標簽。(checkBox)。
D、$(“#form1:selected”)選取所有選中的選項標簽。(下拉列表)。
12、JQuery的Dom操作
A、使用html()方法讀取或設置標簽的innerHTML:
alert($“a:first”).html());
$(“a:first”).html(“hello”);
B、使用text()方法讀取或設置標簽的innerText:
alert($(“a:first”).text());
$(“a:first”).text(“hello”);
C、使用att()方法讀取或設置標簽的屬性:
alert($(“a:first”).attr(href”));
$(“a:first”).attr(“href”, http://www.rupeng.com);
D、使用removeAttr刪除屬性。
13、動態創建Dom節點
A、使用$(html字符串)來創建Dom節點,返回一個JQuery對象,然后調用append方法將新創建的節點添加到Dom中
var link = $(“<a href=’http://www.baidu.com’>百度</a>”);
$(“div:first”).append(link);
Append方法用來在標簽的末尾追加標簽。
prepend在標簽的開始添加標簽。
after在標簽之后添加標簽。
before在標簽之前添加標簽。
14、刪除節點
A、remove()刪除選擇的節點。
如:清空ul中的項。$(“ul li.testitem”).remove();刪除ul下的li id=testitem的標答。
B、remove()方法返回值是被刪除的節點對象,還可以繼續使用刪除的節點。
var lis = $(“#ulsite li”).remove();
$(“#ulsite2”).append(lis);
C、empty()是將節點清空。
15、設定按鈕的啟用時間
<script type=“text/javescript”>
var leftseconds = 10
var intervalid;
$(function(){
$(“#btnReg”).attr(“disabled”,true);
Intervalid = setInterval(“countDown()”,1000);
}
Function CountDown(){
if(leftseconds <= 0){
$(“#btnReg”).val(“同意”);
$(“#btnReg”).attr(“disabled”,false);
clearIntervalid(Intervalid);
return;
}
Leftseconds--;
$(“#btnReg”).val(“請仔細閱讀”+ Leftseconds + “”);
}
</script>
16、樣式操作
A、獲取樣式attr(“class”),設置樣式attr(“class”, “myclass”)。
B、追加樣式addclass(“myclass”)。
C、移除樣式removeclass(“myclass”)。
D、切換樣式togleclass(“myclass”)。如果存在則去掉樣式,如果不存在則添加。
E、判斷樣式是否存在:hasclass(“myclass”)。
17、RadioButton操作
A、取RadioButton選中值:
$(“input[name=gender]:checked”).val()
<input id= “radio1” checked= “checked” name= “gender” type= “radio” value= “男” />男
<input id= “radio2” checked= “checked” name= “gender” type= “radio” value= “女” />女
<input id= “radio3” checked= “checked” name= “gender” type= “radio” value= “未知” />未知
B、設置RadioButton選中值:
$(“input[name=gender]”).val([“女”]);
18、事件
A、JQuery中事件的綁定:$(“#btn”).bind(“click”,function(){})。
JQuery用$(“#btn”).click(function(){})來簡化。
B、調用事件對象的stopPropagation()方法終止事件冒泡。
C、阻止默認行為: 比如超鏈接點擊后會轉向新的鏈接。如果想阻止默認行為只要調用事件對象的preventDefault()方法。
D、屬性:pageX、pageY、target獲得觸發事件的元素(冒泡的起始,和this不一樣)。
which如果是鼠標事件獲得按鍵(1左鍵,2中鍵,3右鍵)。
altKey、shiftKey、ctrlKey獲得alt、shift、ctrl是否按下,為bool值。
keyCole、charCode屬性發生事件時的keyCode、charCode。
E、移除事件綁定:unbind()方法即可移除元素上綁定的事件,如果bind(“click”)則移除click事件的綁定。
F、一次性事件:如果綁定的事件只想執行一次隨后立即unbind可以使用one()方法進行綁定。