python以前端

時間 2019-11-22

標籤 python 前端欄目 Python 简体版

原文原文鏈接

一.Html總結css

一、Html簡介
　　HTML 是一種標記語言
　　忽略大小寫，語法寬鬆
　　使用 HTML 標記和元素，能夠：
　　控制頁面和內容的外觀
　　發佈聯機文檔
　　使用 HTML 文檔中插入的連接檢索聯機信息
　　建立聯機表單，收集用戶的信息、執行事務等等
　　插入動畫
　　開發幫助文件
　　HTML 標記的格式組成： <ELEMENT ATTRIBUTE = value>
　　ELEMENT: 元素 - 標識標記
　　ATTRIBUTE: 屬性 - 描述標記
　　value: 值 - 分配給屬性的內容 html

二、超連接
<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 用戶必須單擊才能激活連接的文本或圖像
三、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 jquery

使用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不等 &zwj; ==== 空格
" ==== 」雙引 ' ==== ‘ 單引號
© ==== © 版權符號 ® ==== ® 註冊商標
& ==== & 與符號編程

四、使用表<Table>
與表相關的標記
<TABLE>表標記 <tr>指定表格中的一行 <th>指定標題列 <td>指定表格中的單元格
在<TH>或<TD>標記中使用COLSPAN="n"表示跨n列(合併n列)；ROWSPAN="n"表示跨n行(合併n行)
border定義邊框寬；cellSpacing定義單元格間距(單位像素)；cellpadding定義格邊界與格內容的間距 windows

<body bgcolor="#04D4F3" background="背景圖片.jpg">
<form name="form1" action="regiester.jsp" method=post>
<TABLE height=30% cellpadding=5 border=3 align="center">
<caption><h3>User Login</h3></caption> 
<tr bgcolor=blue style =font-size:20> 
<th colspan=2>註冊頁 
<tr><th/>用戶名： 
<td><input type="text" name="username"/></td></tr>
<tr><th/>密 碼：
<td><input type="password" name="password"/></td></tr>
<tr><th/>性別： 
<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/>自我介紹：
<td><textarea cols="17" rows="3"></textarea>
<tr align="center" bgcolor=blue>
<td/><input type="reset"/> 
<td/><input type="submit" value="提交"/> 
</TABLE></form></body> api

五、在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" > 數組

六、表單的使用
用途：收集信息，發送給程序處理
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) 下拉菜單(單選) 瀏覽器

七、框架(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基本介紹app

級聯樣式表（Cascading Style Sheet）簡稱「CSS」，一般又稱爲「風格樣式表（Style Sheet）」，它是用來進行網頁風格設計的。好比，若是想讓連接字未點擊時是藍色的，當鼠標移上去後字變成紅色的且有下劃線，這就是一種風格。經過設立樣式表，能夠統一地控制HTML中各標誌的顯示屬性。級聯樣式表可使人更能有效地控制網頁外觀。使用級聯樣式表，能夠擴充精確指定網頁元素位置，外觀以及建立特殊效果的能力。

CSS是英語CascadingStyle Sheets（層疊樣式表單）的縮寫，它是一種用來表現HTML或XML等文件樣式的計算機語言。CSS目前最新版本爲CSS3，是可以真正作到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言，CSS可以對網頁中的對象的位置排版進行像素級的精確控制，支持幾乎全部的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力，並可以進行初步交互設計，是目前基於文本展現最優秀的表現設計語言。CSS可以根據不一樣使用者的理解能力，簡化或者優化寫法，針對各種人羣，有較強的易讀性。

2．CSS的使用方法

有三種方法能夠在站點網頁上使用樣式表：

外部樣式：將網頁連接到外部樣式表。

內頁樣式：在網頁上建立嵌入的樣式表。

行內樣式：應用內嵌樣式到各個網頁元素。

每一種方法均有其優缺點：

當要在站點上全部或部分網頁上一致地應用相一樣式時，可以使用外部樣式表。在一個或多個外部樣式表中定義樣式，並將它們連接到全部網頁，便能確保全部網頁外觀的一致性。若是人們決定更改樣式，只需在外部樣式表中修改一次，而該更改會反映到全部與該樣式表相連接的網頁上。一般外部樣式表以 .css 作爲文件擴展名，例如牛腩新聞發佈系統中的公共樣式Common.css。而後在須要此樣式的頁面中將其連接進來，如：

當人們只是要定義當前網頁的樣式，可以使用嵌入的樣式表。嵌入的樣式表是一種級聯樣式表，「嵌」在網頁的 <HEAD>標記符內。嵌入的樣式表中的樣式只能在同一網頁上使用。如：

body {background:grey;}

</style>

使用內嵌樣式以應用級聯樣式表屬性到網頁元素上。如：

<pstyle="@importurl('style3.css');">CSS document</p>

若是網頁連接到外部樣式表，爲網頁所建立的內嵌的或嵌入式樣式將擴充或覆蓋外部樣式表中的指定屬性。

要在網頁上使用外部樣式表的樣式，可將該網頁連接到樣式表，方法是使用位於「格式」菜單上的「樣式錶鏈接」命令。能夠連接一個或數個樣式表到網頁視圖模式下的當前網頁，或到在文件夾列表中的所選網頁，或到站點上的所有網頁。

該「樣式」框列出標準 HTML 標記符，例如標題

1，還有嵌入的樣式表或連接到網頁的外部樣式表中所含的類或 ID 選擇器。要應用樣式到網頁元素，請選定該樣式而後單擊「樣式」框中的樣式或選擇器。

在 Microsoft FrontPage 2000中，某些格式設置特性會做爲內嵌樣式自動應用。例如∶若是使用「邊框與陰影」命令（在「格式」菜單上）在普通段落周圍應用框，FrontPage 會寫下格式設置信息，做爲段落標記符的內嵌樣式屬性（例如∶ <pstyle="border-style: solid">）。然而某些屬性的應用須要使用 CSS，其餘則須要使用 HTML 。若是人們只想使用 CSS 應用內嵌樣式，可以使用「樣式」按鈕（位於網頁元素的「屬性」對話框裏）應用類或 ID 選擇器或嵌入式樣式。

三、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;/*文字垂直向下對齊*/

四、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;/*縮進*/

五、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; /*居中對齊*/

六、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;}

七、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/*凸框*/

八、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>

九、CSS邊界樣式：

margin-top:10px;/*上邊界*/

margin-right:10px;/*右邊界值*/

margin-bottom:10px;/*下邊界值*/

margin-left:10px;/*左邊界值*/

10、CSS邊框空白

padding-top:10px;/*上邊框留空白*/

padding-right:10px;/*右邊框留空白*/

padding-bottom:10px;/*下邊框留空白*/

padding-left:10px;/*左邊框留空白*/

11、滾動條樣式

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/*滾動條的基本顏色*/

3、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中的自動提示功能。

二、JQuery之Ready

A、JQuery的read和Dom onload的區別:onload是全部Dom元素建立完畢觸發，而ready則是Dom元素建立完就觸發，這樣能夠提升網頁的響應速度。

三、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); });

四、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();

五、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、層次選擇器:

一、$(「div li」)獲取div下的全部li標籤(後代，子、子的子標籤…)。

二、$(「div > li」)獲取div下的直接li子標籤。

三、$(「.menuitem + div」)獲取樣式名爲menuitem以後的第一個div標籤。

四、$(「.menuitem ~ div」)獲取樣式名爲menuitem以後的全部div標籤。

六、JQuery隱式迭代

A、注:若是用隱式迭代就會不容易發現錯誤。

$(function(){

var elements = $(「#btn1」);

If (elements.length <= 0){

alert(「沒有找到提定對象」);

return;

}

elements.mouseover(function(){ alert(「找到了」)});

七、節點遍歷

A、next()方法用於獲取節點以後的挨着的第一個同輩標籤，$(「.menuitem」).next(「div」)、nextAll()方法用於獲取節點以後的全部同輩標籤。

B、siblings()方法用於獲取全部同級標籤。

八、鏈式編程

A、JQuery能夠實現鏈式編程

九、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>標籤。

十、屬性過濾選擇器

A、$(「div[id]」)選取有id屬性的<div>。

B、$(「div[title=test]」)選取title屬性爲「text」的<div>。

C、$(「div[title!=test]」)選取title屬性不爲「text」的<div>。

十一、表單對象選擇器

A、$(「#form1:enabled」)選取id爲form1的表單內全部啓用的標籤。

B、$(「#form1:disabled」)選取id爲form1的表單內全部禁用的標籤。

C、$(「#form1:checked」)選取全部選中的標籤。(checkBox)。

D、$(「#form1:selected」)選取全部選中的選項標籤。(下拉列表)。

十二、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刪除屬性。

1三、動態建立Dom節點

A、使用$(html字符串)來建立Dom節點，返回一個JQuery對象，而後調用append方法將新建立的節點添加到Dom中

var link = $(「<a href=’http://www.baidu.com’>百度</a>」);

$(「div:first」).append(link);

Append方法用來在標籤的末尾追加標籤。

prepend在標籤的開始添加標籤。

after在標籤以後添加標籤。

before在標籤以前添加標籤。

1四、刪除節點

A、remove()刪除選擇的節點。

如:清空ul中的項。$(「ul li.testitem」).remove();刪除ul下的li id=testitem的標答。

B、remove()方法返回值是被刪除的節點對象，還能夠繼續使用刪除的節點。

var lis = $(「#ulsite li」).remove();

$(「#ulsite2」).append(lis);

C、empty()是將節點清空。

1五、設定按鈕的啓用時間

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>

1六、樣式操做

A、獲取樣式attr(「class」)，設置樣式attr(「class」, 「myclass」)。

B、追加樣式addclass(「myclass」)。

C、移除樣式removeclass(「myclass」)。

D、切換樣式togleclass(「myclass」)。若是存在則去掉樣式，若是不存在則添加。

E、判斷樣式是否存在:hasclass(「myclass」)。

1七、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([「女」]);

1八、事件

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()方法進行綁定。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。