Python後臺開發(第一章補充: Web前端技術)

CSDN學院發表於2020-01-11

1 Html

1.1 Html介紹

  • HTML是 HyperText Mark-upLanguage 的首字母簡寫,意思是超文字標記語言,
  • HTML不是一種程式語言,而是一種標記語言
  • 超文字指的是超連結,標記指的是標籤,是一種用來製作網頁的語言,這種語言由一個個的標籤組成,
  • 用這種語言製作的檔案儲存的是一個文字檔案,檔案的副檔名為.html或者.htm,
  • html文件也叫Web頁面,其實就是一個網頁,html檔案用編輯器開啟顯示的是文字,可以用文字的方式編輯它,
  • 如果用瀏覽器開啟,瀏覽器會按照標籤描述內容將檔案渲染成網頁,顯示的網頁可以從一個網頁連結跳轉到另外一個網頁。

1.2 Html語法

  • HTML是由:標籤和內容構成
  • HTML標籤(標記)的語法是由 < 和 > 括起來。
  • HTML標籤有兩種:雙標籤:<標籤名>…</標籤名> 和 單標籤:<標籤名/>
  • HTML標籤中還可以新增屬性:<標籤名 屬性名1=“值1” 屬性名2=“值2”屬性名n=“值n”>…</標籤名>
  • HTML標籤規範:標籤名小寫、屬性使用雙引號、標籤要閉合。規範不遵守瀏覽器不會報錯,會盡量解析,大不了不顯示效果

1.3 Html結構

<!DOCTYPE html\> 
<html lang="en"\>     
    <head>       
        <meta charset="UTF-8"\>        
        <title\>網頁標題\</title\> 
        <!-- 此處可以寫各種頁頭屬性設定、CSS樣式和JavaScript指令碼等... --> 
	</head> 
<body>
	網頁顯示內容 
</body> 
</html> 

1.4 Html—Header

說明 程式碼
設定網頁編碼 <meta charset=“utf-8”/>
關鍵字 <meta name=“Keywords” content=“關鍵字” />
描述 <meta name=“Description” content=“簡介、描述” />
網頁標題 <title>本網頁標題</title>
匯入CSS檔案 <link type=“text/css” rel=“stylesheet” href="**.css"/>
CSS程式碼 <style type=“text/css”>嵌入css樣式程式碼</style>
JS檔案或程式碼 <script >。。。</script>

1.5 Html註釋

html文件程式碼中可以插入註釋,註釋是對程式碼的說明和解釋

 <!-- 這就是唯一的一種HTML註釋了 --\> 

注:可以使用ctrl+/對選中內容進行快捷註釋.

1.6 Html常用標籤

1.6.1 title

<head> 
	<title>瀏覽器標題</title> 
<head\> 

1.6.2 標題與段落

<body\> 
<p>p標籤<p\> 
<h1>h1<h1\> 
<h2>h2<h2\> 
<h3>h3<h3\> 
<h4>h4<h4\> 
<h5>h5<h5\> 
<h6>h6<h6\>
<body\> 

效果如下:

在這裡插入圖片描述

1.6.3 水平線與換行符

標籤 命令
水平線 <hr/>
換行符 <br/>

1.6.4 常見的轉義符

字元 程式碼
空格 &nbsp;
> &gt;
< &lt;

1.6.5 a連結

1.6.5.1 格式

<a href=" "\>...\</a\>  超級連結標籤 

1.6.5.2 屬性

  • href:指的是連結跳轉地址
  • target: 表示連結的開啟方式:
    • _blank 新視窗
    • _parent 父視窗
    • _self 本視窗(預設)
    • _top 頂級視窗
    • framename 視窗名
  • title:文字提示屬性(詳情)

1.6.5.3 錨點連線

定義一個錨點:<a id="a1"></a>
使用錨點:<a href="#a1">跳到a1處</a>

1.6.6 圖片 img

1.6.6.1 格式

<img /> 在網頁中插入一張圖片   

1.6.6.2 屬性

  • src: 圖片名及url地址

  • alt: 圖片載入失敗時的提示資訊

  • title:文字提示屬性

  • width:圖片寬度

  • height:圖片高度

  • border:邊框線粗細

1.6.6.3 例項

<img src="img/img.png" alt="圖片載入異常顯示的文字" title="滑鼠放在圖片上顯示的文字"/>  

1.6.7 表格

1.6.7.1 屬性

屬性 說明
border 這個整型元素使用畫素,定義了表格邊框的大小。如果設定為1,表示表格具有1px大小的邊框
width 表格的寬度
bgcolor 表格的背景顏色
align 這個屬性指定了包含在文件中的表格必須如何對齊。有如下值: left,表格將在文件左側顯示; center, 表格將在文件中央顯示; right, 表格將在文件右側顯示;
cellpadding 表格單元的內容和邊框之間的空間
cellspacing 單元格之間空間的大小

1.6.7.2 標籤

標籤 說明
<table>…</table> 表格標誌
<caption>…</caption> 表格標題
<tr>…</tr> 行標籤
<th>…</th> 列頭標籤
<td>…</td> 列標籤 : 跨行屬性rowspan 跨列屬性:colspan
<thead>…</thead> 表頭
<tbody>…</tbody> 表體
<tfoot>…</tfoot> 表尾

1.6.8 列表

1.6.8.1 標籤

標籤 說明
ul 無序列表
li 列表項
ol 有序列表

1.6.8.2 例項

<ul> 
    <li>無序列表</li> 
    <li>無序列表</li>
</ul>
<ol> 
    <li>有序列表</li> 
    <li>有序列表</li> 
</ol>

效果如下:

在這裡插入圖片描述

1.6.9 常見的無意義標籤

標籤 說明
<div>…</div> 常用於組合塊級元素,以便通過 CSS 來對這些元素進行格式化
<span>…</span> 常用於包含的文字,您可以使用 CSS 對它定義樣式,或者使用 JavaScript 對它進行操作。

1.6.10 form表單

1.6.10.1 <form>…</form> 表單標籤

屬性 說明
action 交的目標地址(URL)
method 提交方式:get(預設)和post get方式是URL位址列可見,長度 受限制(IE2k 火狐8k),相對不安全. post方式是URL地址不可見,長度不受限制,相對安全.
enctype 提交型別
target 在何處開啟目標 URL

1.6.10.2 input定義輸入欄位

屬性 說明
type 表示表單項的型別,值如下: text:單行文字框 password:密碼輸入框 checkbox:多選框 注意要提供value值 radio:單選框 注意要提供value值 file:檔案上傳選擇框 button:普通按鈕 submit:提交按鈕 image:圖片提交按鈕 reset:重置按鈕, 還原到開始(第一次開啟時)的效果 hidden:主表單隱藏域,要是和表單一塊提交的資訊,但是不需要使用者修改 email 用於應該包含 e-mail 地址的輸入域 url 用於應該包含 URL 地址的輸入域 number 用於應該包含數值的輸入域。 max 規定允許的最大值 min 規定允許的最小值 step 規定合法的數字間隔(如果 step=“3”,則合法的數是 -3,0,3,6 等) value 規定預設值 range 用於應該包含一定範圍內數字值的輸入域,顯示為滑動條 max 規定允許的最大值 min 規定允許的最小值 step 規定合法的數字間隔(如果 step=“3”,則合法的數是 -3,0,3,6 等) value 規定預設值 日期選擇器 Date pickers date - 選取日、月、年 month - 選取月、年 week - 選取周和年 time - 選取時間(小時和分鐘) datetime - 選取時間、日、月、年(UTC 時間) datetime-local - 選取時間、日、月、年(本地時間) search 用於搜尋域,比如站點搜尋或 Google 搜尋 color 顏色選擇
method屬性 提交方式:get(預設)和post get方式是URL位址列可見,長度 受限制(IE2k 火狐8k),相對不安全. post方式是URL地址不可見,長度不受限制,相對安全.
enctype 提交型別
target 在何處開啟目標 URL
name 表單項名,用於儲存內容值的
value 輸入的值(預設指定值)
placeholder 預期值的簡短的提示資訊
size 輸入框的寬度值
maxlength 輸入框的輸入內容的最大長度
readonly 對輸入框只讀屬性
disabled 禁用屬性
checked 對選擇框指定預設選項

1.6.10.3 < select>…</select>下拉選單

屬性 說明
value 下拉項的值
name 定義名稱,用於儲存下拉值的
size 定義選單中可見專案的數目,html5不支援
<option>… </option> 下拉選擇項標籤,用於嵌入到<select>標籤中使用的;
multiple 多選
disabled 當該屬性為 true 時,會禁用該選單

1.6.10.4 <textarea>…</textarea> 多行的文字輸入區域

  1. 大文字基礎格式: <textarea cols=“列數” rows=“行數” > </textarea>
  2. 常用屬性
屬性 說明
name 定義名稱,用於儲存文字區域中的值
cols 規定文字區內可見的列數
rows 規定文字區內可見的行數
readonly 只讀
disabled 是否禁用

2 CSS

2.1 概念

  • CSS:層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等檔案樣式的計算機語言。CSS不僅可以靜態地修飾網頁,還可以配合各種指令碼語言動態地對網頁 各元素進行格式化
  • 樣式定義如何顯示控制 HTML 元素,從而實現美化HTML網頁。
  • 樣式通常儲存在樣式表中,目的也是為了解決內容與表現分離的問題
  • 外部樣式表(CSS檔案)可以極大提高工作效率
  • 多個樣式定義可層疊為一,後者可以覆蓋前者樣式
  • 特點:作用於整個網站
  • 優先順序:當樣式衝突時,就是採用就近原則,是值css屬性離被修飾的內容最近的為主。
  • 若沒有樣式衝突則採用疊加效果。

2.2 語法

2.2.1 格式

選擇器{屬性:值;屬性:值;屬性:值;....}

在這裡插入圖片描述

2.2.2 案例

p{ 
	color:red; 
	text-align:center;
 }

注: 選擇器也叫選擇符

2.3 引入方式

2.3.1 內聯方式(行內樣式)

2.3.1.1 概念

在HTML的標籤中使用style屬性來設定css樣式

2.3.1.2 格式

<html標籤 style="屬性:;屬性:;....">被修飾的內容</html標籤>

2.3.1.3 例項

<p style="color:blue;font-family:隸書">在HTML中如何使用css樣式</p>
<!-- 特點:僅作用於本標籤。--\>

2.3.2 內部方式(內嵌樣式)

2.3.2.1 概念

在head標籤中使用<style type=“text/css”>…</style>標籤來設定css樣式

2.3.2.2 例項

<style type="text/css">     ....css樣式程式碼</style> 
<!-- 特點:作用於當前整個頁面 --\>

2.3.3 外部匯入方式(外部鏈入)

2.3.3.1 概念

在head標籤中使用標籤匯入一個css檔案,在作用於本頁面,實現css樣式設定

2.3.3.2 例項

<link href="檔名.css" type="text/css" rel="stylesheet"/>

2.4 選擇器

2.4.1html選擇符(標籤選擇器)

2.4.1.1定義

把html標籤作為選擇符使用

2.4.1.2例項

如: p{....}  網頁中所有p標籤採用此樣式 
    h2{....}  網頁中所有h2標籤採用此樣式

2.4.2 id選擇符

2.4.2.1 定義

#id名{樣式…}

2.4.2.2 例項

# id選擇符只在網頁中使用一次 
<html標籤 id="id名">...</html標籤>

2.4.3 class類選擇符

2.4.3.1 定義

使用點.將自定義名(類名)來定義的選擇符

2.4.3.2 例項

<html標籤 class="類名"\>...</html標籤>        
.mc{color:blue;} /* 凡是class屬性值為mc的都採用此樣式 */ 
p.ps{color:green;}  /* 只有p標籤中class屬性值為ps的才採用此樣式*/ 

注:類選擇符可以在網頁中重複使用

2.5 常用樣式

2.5.1 color

屬性 說明
HSL 通過對色調(H)、飽和度(S)、亮度(L)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色. background-color:hsl(240,100%,50%);color:white;
HSLA 色調(H)、飽和度(S)、亮度(L)、透明度(A); background-color: hsla(0,100%,50%,0.2);
RGB 顏色: 紅®、綠(G)、藍(B)三個顏色通道的變化 background-color:rgba(200,100,0)
RGBA 顏色: 紅®、綠(G)、藍(B)、透明度(A) background-color: rgba(0,0,0,0.5);

2.5.2 font

屬性 說明
font-size 字型大小
font-family 字型 比如: 宋體,Arial
font-style 字型格式,引數如下 normal正常; italic斜體; oblique傾斜的字型

2.5.3 文字屬性

屬性 說明
text-indent 首行縮排
text-overflow 文字的溢位是否使用省略標記(…)。clip|ellipsis(顯示省略標記)
text-align 文字的位置:left center right
text-transform 物件中的文字的大小寫:capitalize(首字母)|uppercase大寫|lowercase小寫
text-decoration 字型畫線:none無、underline下畫線,line-through貫穿線
text-shadow 文字的文字是否有陰影及模糊效果
vertical-align 文字的垂直對齊方式
direction 文字流方向。ltr | rtl
white-space:nowrap /* 強制在同一行內顯示所有文字*/
letter-spacing 文字或字母的間距
word-spacing 單詞間距
line-height 行高
color 字型顏色

2.5.4 背景屬性:background

屬性 說明
background- color 背景顏色
background-image 背景圖片
background-repeat: 重複平鋪
background-attachment 是否固定背景 scroll:預設值。背景影象是隨物件內容滾動 fixed:背景影象固定
background-position 定位

3 JavaScript

3.1 JavaScript簡介

  • JavaScript一種直譯式指令碼語言,是一種動態型別、弱型別、基於原型的語言,內建支援型別。它的直譯器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用於客戶端的指令碼語言,最早是在HTML(標準通用標記語言下的一個應用)網頁上使用,用來給HTML網頁增加動態功能
  • JavaScript 通常被直接嵌入 HTML 頁面。
  • JavaScript 是一種解釋性語言(就是說,程式碼執行不進行預編譯)。
  • 特點:弱型別和基於物件。(因為物件導向需要具有封裝、繼承、多型的特徵)
  • JavaScript語言中包含三個核心:ECMAScript基本語法、DOM、BOM

3.2 JavaScript語法

  • 區分大小寫:變數名、函式名、運算子以及其他一切東西都是區分大小寫的。
  • 和Python一樣屬於弱型別語言。
  • 每行結尾的分號可有可無。(js中的每條語句之間的分割符可以是回車換行也可以是";"分號(推薦))
  • 指令碼註釋:// 單行註釋 和 /* 多行註釋 */
  • 括號表示程式碼塊:{ }
  • 變數的定義:使用var關鍵字來宣告。
  • 變數的命名規範是:字母數字,$符和下劃線構成,但是不可以以數字開始。變數名不可以使用關鍵字.
  • typeof函式獲取一個變數的型別
型別 說明
undefined undefined
boolean 布林型別
number Number 型別 (整數、浮點數)
string String 型別(採用""、 ‘’)
object 變數是一種引用型別或 Null 型別
function 函式型別

3.3 JavaScript引入方式

3.3.1 script標籤

  1. 屬性
屬性 說明
charset(可選) 字符集設定、
src(可選) 使用外部的js指令碼檔案
type(必選) 型別:值 text/javascript
  1. 例項
<script type="text/javascript"> 
    <!-- javaScript語言 //--> 
</script>

3.3.2 事件寫入

#在html標籤的事件中,超級連結裡。 
<button onclick="javaScript語言"></button> 
<a href="javascript:alert('aa');alert('bb')">點選</a> 

3.3.3 外部匯入方式(推薦)

<script type="text/javascript" src="my.js"></script> 

3.4 JavaScript資料型別

3.4.1 型別

型別 說明
undefined undefined
null null
boolean boolean
number 八進位制數和十六進位制數 012 浮點數 特殊的 Number 值
string string
object引用型別 引用型別通常叫做類(class),也就是說,遇到引用值,所處理的就是物件。

3.4.2 例項

//數字: 
var numberObject = 1; 

//字串: 
var  stringObject = "1"; 

//布林: 
var booleanObject = true; 

//空: 
var nullObject = null; 

//未定義: 
var undefinedObject = undefined; 

//物件 
var jsObject = Object;

注: Object 物件自身用處不大,不過在瞭解其他類之前,還是應該瞭解它。因為ECMAScript 中的 Object 物件與 Java 中的 java.lang.Object 相似,ECMAScript中的所有物件都由這個物件繼承而來,Object物件中的所有屬性和方法都會出現在其他物件中,所以理解了 Object物件,就可以更好地理解其他物件。

3.5 JavaScript型別轉換

方法 說明
Number() 強轉一個數值(包含整數和浮點數)。
parseInt() 強轉整數
parseFloat() 強轉浮點數
isNaN() 檢測引數是否不是一個數字

3.6 JavaScript—alert對話方塊

  1. 基礎語法:alert([對話方塊內容]);
  2. 例項效果

在這裡插入圖片描述

3.7 JavaScript運算子

3.7.1 算數運算子

運算子 描述 例子 結果
+ x=1+1 x = 2
- x=1-1 x =0
* x=2*3 x = 6
/ x=4/2 x = 2
% 取餘數 x = 5/2 x=1
++ 疊加 x = 2 x ++ x = 3
疊減 x = 2 x – x = 1

3.7.2 賦值運算子

運算子 例子 等價於 結果
= x=5 x=5 x=5
+= x += 2 x = x +2 x =7
-= x -= 2 x = x - 2 x =3
*= x *= 2 x = x * 2 x = 10
% x%2 x = 5/2 x=1
/= x /= 2 x = x / 2 x=2.5
%= x %= 2 x = x % x = 1

3.7.3 比較運算子

運算子 描述
== 值相等
=== 型別和值都相等
!= 不等於
> 大於
< 小於
>= 大於等於
<= 小於等於

3.7.4 邏輯運算子

運算子 描述
&
&& 短路與
|
|| 短路或
!

3.7.5 逗號運算子

#用逗號運算子可以在一條語句中執行多個運算。 var iNum1=1, iNum2=2, iNum3=3 

3.8 判斷迴圈語句

3.8.1 判斷語句

 if... 
 else ...
 
 if ...  
 else if ... 
 else... 

3.8.2 多分支語句

switch(){case :。。。。} 
switch (i) { 
	case 20: alert("20");
	break; case 30: 
	alert("30"); 
	break; 
	case 40: 
	alert("40"); 
	break; 
		default: alert("other");
}

3.8.3 迴圈語句

//for,while,do...while 
//for-in 語句: 語句是嚴格的迭代語句,用於列舉物件的屬性。 
var a = [10,20,30,40,50]; 
//迭代的是陣列的下標。 
for(i in a){
    document.write(a[i]); 
} 
//輸出: 102030405

注:

  1. break 和 continue 語句對迴圈中的程式碼執行提供了更嚴格的控制。
  2. with 語句用於設定程式碼在特定物件中的作用域。

3.9 JavaScript函式和物件

3.9.1 函式的定義

3.9.1.1 function語句定義函式

function 函式名([引數列表..]{
    函式體。。。 [return 返回值;] 
}

3.9.1.2 Function()建構函式定義函式(不常用)

//格式: 
var 函式名 = new Function(“引數1”,”引數2”,”引數3”……”函式體”); 
//如: 
var 函式名 = new Function(”x”,”y”,var z=x+y;return z;);

3.9.1.3 表示式定義函式

//格式:var 函式名 = function(引數1,引數2,…){函式體}; 
//例如: 
//定義函式 
var add = function(a,b){ 
    return a+b;           
} 
//呼叫函式 document.write(add(50,20));

3.9.1.4 arguments物件

  • 在函式程式碼中,使用特殊物件arguments,開發者無需明確指出引數名,就能訪問它們。
  • 例如,在函式 sayHi() 中,第一個引數是 message。
  • 用 arguments[0] 也可以訪問這個值,即第一個引數的值(第一個引數位於位置0,第二個引數位於位置 1,依此類推)。

3.9.1.5 變數和引數

  • 函式外面定義的變數是全域性變數,函式內可以直接使用。
  • 在函式內部沒有使用var定義的=變數則為全域性變數,
  • 在函式內使用var關鍵字定義的變數是區域性變數,即出了函式外邊無法獲取。

3.9.2 常用的內建函式

方法 說明
escape() 字串編碼
unescape() 字串反編碼
eval() 將引數字串作為指令碼程式碼來執行
isNaN() 檢測引數是否不是一個數字

3.9.3 物件的定義和使用

3.9.3.1 原始方式構建物件

var myObject = new Object(); 
myObject.name = “lijie”; 
myObject.age = 20; 
myObject.say = function(){...}

3.9.3.2 建立自定義物件

var 物件名 = {屬性名1:屬性值,屬性名2:屬性值2,…….}

3.9.3.3 自定義構建函式建立物件

function pen(name,color,price){ 
    //物件的name屬性 
    this.name = name; 
    //物件的color屬性 
    this.color = color; 
    //物件的piece屬性 
    this.price = price; 
    //物件的say方法 
    this.say = function(){}; } 
    var pen = new pen(“鉛筆”,”紅色”,20);
    pen.say(); 

3.9.3.4 檢測常用的方法

  1. typeof() //global物件的其中一個方法,typeof()
  2. 物件.constructor; //檢視當前物件的建構函式是誰
if(arr.constructor==Array){ alert("陣列"); 
//陣列推薦用這種方法,因為typeof得到是object } 

3.10 JavaScript—DOM

3.10.1 基本概念

  • HTML DOM 定義了訪問和操作HTML文件的標準方法。
  • HTML DOM 把 HTML文件呈現為帶有元素、屬性和文字的樹結構(節點樹)。
  • DOM 被分為不同的部分:
    • Core DOM 定義了一套標準的針對任何結構化文件的物件
    • XML DOM 定義了一套標準的針對 XML 文件的物件
    • HTML DOM 定義了一套標準的針對HTML 文件的物件。
  • 節點:根據 DOM,HTML 文件中的每個成分都是一個節點。 DOM 是這樣規定的:
    • 整個文件是一個文件節點
    • 每個 HTML標籤是一個元素節點
    • 包含在 HTML 元素中的文字是文字節點
    • 每一個HTML 屬性是一個屬性節點
    • 註釋屬於註釋節點
  • 節點彼此間都存在關係。
    • 除文件節點之外的每個節點都有父節點。
    • 大部分元素節點都有子節點。
    • 當節點分享同一個父節點時,它們就是同輩(同級節點)。
    • 節點也可以擁有後代,後代指某個節點的所有子節點,或者這些子節點的子節點
    • 節點也可以擁有先輩。先輩是某個節點的父節點,或者父節點的父節點
  • 查詢並訪問節點 你可通過若干種方法來查詢您希望操作的元素:
    • 通過使用 getElementById()和 getElementsByTagName() 方法
    • 通過使用一個元素節點的parentNode、firstChild 以及 lastChild childNodes屬性
    • nextSibling返回節點之後緊跟的同級節點。previousSibling返回節點之前緊跟的同級節點。
  • 節點資訊 每個節點都擁有包含著關於節點某些資訊的屬性。這些屬性是:
    • nodeName(節點名稱)
    • nodeValue(節點值)
    • nodeType(節點型別)
  • nodeName 屬性含有某個節點的名稱。
    • 元素節點的nodeName 是標籤名稱
    • 屬性節點的 nodeName 是屬性名稱
    • 文字節點的nodeName 永遠是 #text
    • 文件節點的 nodeName 永遠是 #document

3.10.2 DOM物件參考

方法 說明
Document 代表整個 HTML 文件,可被用來訪問頁面中的所有元素 常用集合屬性:forms
Anchor 代表 <a> 元素
Area 代表影象對映中的 <area> 元素
Base 代表 <base> 元素
Body 代表 <body> 元素
Button 代表 <button> 元素
Event 代表某個事件的狀態
Form 代表 <form> 元素
Frame 代表 <frame> 元素
Frameset 代表 <frameset> 元素
Iframe 代表 <iframe> 元素
Image 代表 <img> 元素
Input button 代表 HTML 表單中的一個按鈕
Input checkbox 代表 HTML 表單中的核取方塊
Input file 代表 HTML 表單中的檔案上傳
Input hidden 代表 HTML 表單中的隱藏域
Input password 代表 HTML 表單中的密碼域
Input radio 代表 HTML 表單中的單選按鈕
Input reset 代表 HTML 表單中的重置按鈕
Input submit 代表 HTML 表單中的確認按鈕
Input text 代表 HTML 表單中的文字輸入域(文字框)
Link 代表 <link> 元素
Meta 代表 <meta> 元素
Object 代表 <Object> 元素
Option 代表 <option> 元素
Select 代表 HTML 表單中的選擇列表
Style 代表單獨的樣式宣告
Table 代表 <table> 元素
TableData 代表 <td> 元素
TableRow 代表 <tr> 元素
Textarea 代表 <textarea> 元素

4 JQuery

4.1 概念

  • JQuery是一個快速、簡潔的JavaScript框架,是繼Prototype之後又一個優秀JavaScript程式碼庫(或JavaScript框架)。
  • JQuery設計的宗旨是“write Less,DoMore”,即倡導寫更少的程式碼,做更多的事情。
  • 它封裝JavaScript常用的功能程式碼,提供一種簡便的JavaScript設計模式,優化HTML文件操作、事件處理、動畫設計和Ajax互動。

4.2 引入方式

  1. jquery檔案下載地址: https://jquery.com/

在這裡插入圖片描述

注: 在開發或除錯過程中使用未壓縮的檔案

  1. 引入方式:

<head> <script type=“text/javascript” src="【本地JQuery地址】"></script>
</head>

  1. 使用例項

程式碼部分:

<!DOCTYPE html\>
<html\>    
<head\>       
    <meta charset="utf-8"/\>        
    <title\>jQuery例項\</title\>        
    <script type="text/javascript" src="jquery-1.8.3.min.js"\></script>        		<script type="text/javascript"\>          
       //兩種使用方式:           
    $(document).ready(function(){              
       // 在這裡寫你的程式碼...           
    });            
       //簡寫           
    $(function(\$) {              
       // 你可以在這裡繼續使用\$作為別名...           
    });         
     </script>    
</head>    
<body>        
    <!--  HTML程式碼... -->    
</body>
</html> 

4.3 JQuery選擇器

4.3.1 基本選擇器

格式 說明
$("#id") ID選擇器
$(“div”) 元素選擇器
$(".classname") 類選擇器
$(".classname,.classname1,#id1") 組合選擇器

4.3.2 層級選擇器

格式 說明
$("#id>.classname ") 子元素選擇器
$("#id .classname ") 後代元素選擇器
$("#id + .classname ") 緊鄰下一個元素選擇器
$("#id ~ .classname ") 兄弟元素選擇器

4.3.3 過濾選擇器

格式 說明
$(“li:first”) 第一個li
$(“li:last”) 最後一個li
$(“li:even”) 挑選下標為偶數的li
$(“li:odd”) 挑選下標為奇數的li
$(“li:eq(4)”) 下標等於 4 的li(第五個 li 元素)
$(“li:gt(2)”) 下標大於 2 的li
$(“li:lt(2)”) 下標小於 2 的li
$(“li:not(#runoob)”) 挑選除 id=“runoob” 以外的所有li

4.3.4 內容過濾選擇器

格式 說明
$(“div:contains(‘Runob’)”) 包含 Runob文字的元素
$(“td:empty”) 不包含子元素或者文字的空元素
$(“div:has(selector)”) 含有選擇器所匹配的元素
$(“td:parent”) 挑選下標為奇數的li

4.3.5 可見性過濾選擇器

格式 說明
$(“li:hidden”) 匹配所有不可見元素,或type為hidden的元素
$(“li:visible”) 匹配所有可見元素

4.3.6 屬性選擇過濾選擇器

格式 說明
$(“div[id]”) 所有含有 id 屬性的 div 元素
$(“div[id=‘123’]”) 匹id屬性值為123的div 元素
$ (“div[id!=‘123’]”) id屬性值不等於123的div 元素
$ (“div[id^=‘qq’]”) id屬性值以qq開頭的div 元素
$(“div[id$=‘zz’]”) id屬性值以zz結尾的div 元素
$(“div[id*=‘bb’]”) id屬性值包含bb的div 元素
$(“input[id][name$=‘man’]”) 多屬性選過濾,同時滿足兩個屬性的條件的元素

4.3.7 狀態過濾選擇器

格式 說明
$(“input:enabled”) 匹配可用的 input
$(“input:disabled”) 匹配不可用的 input
$(“input:checked”) 匹配選中的 input
$(“option:selected”) 匹配選中的 option

4.3.8 表單選擇器

格式 說明
$(":input") 匹配所有 input, textarea, select 和 button 元素
$(":text") 所有的單行文字框,$(":text") 等價於$("[type=text]"),推薦使用$(“input:text”)效率更高,下同
$(":password") 所有密碼框
$(":radio") 所有單選按鈕
$(":checkbox" 所有核取方塊
$(":submit") 所有提交按鈕
$(":reset") 所有重置按鈕
$(":button") 所有button按鈕
$(":file") 所有檔案域

4.4 JQuery物件

4.4.1 概念

Query物件是擁有0—length-1的屬性,並且包含length屬性的維陣列在JQuery庫中,可以通過本身自帶的方法獲取頁面DOM 元素的物件叫做JQuery物件。物件用var開頭定義。

4.4.2 規範

1.JQuery物件習慣性採用$開口,

例如: $div = $(“div”);

  1. JQuery物件的格式是[Object]
  2. JQuery物件轉JS物件

jsObject = $jqueryObject[0];

jsObject = $jqueryObject.get(0);

4.JS物件 轉JQuery物件

$jqueryObject = $(jsObject);

4.4.3 常用方法

方法 說明
get() 取得所有匹配的元素
get(index); 取得其中一個匹配的元素 $(this).get(0) 等同於 $(this)[0]
Number index(jqueryObj); 搜尋子物件
each(callback) 類似foreach,不過遍歷的是元素陣列

4.5 JQuery事件

4.5.1 概念

頁面對不同訪問者的響應叫做事件。事件處理程式指的是當 HTML中發生某些事件時所呼叫的方法。

4.5.2 語法

#頁面中指定一個點選事件: 
\$("p").click(); 
#下一步是定義什麼時間觸發事件。您可以通過一個事件函式實現: 
\$("p").click(function(){ // 動作觸發後執行的程式碼!! });

4.5.3 例項

<input type="button" value="按鈕" id="button_id"> 
<script type="text/javascript"> 
    //1.得到按鈕物件 $buttonElement = $("#button_id"); 
    //2.繫結點選事件 $buttonElement.click(function(){ alert("按鈕被被點選了"); }); 
</script>

4.5.4 事件命令

命令 說明
click() 滑鼠點選
dblclick() 滑鼠雙擊
keydown() 鍵盤按下
keypress() 鍵盤按住
keyup() 鍵盤抬起
focus() 得到焦點
blur() 失去焦點
scroll() 滾動
select() 被選中
submit() 提交
load() 載入成功
unload() 離開頁面
resize() 視窗調整尺寸
mousedown() 滑鼠按下
mouseup() 滑鼠抬起
mouseenter() 滑鼠穿過
mouseleave() 滑鼠離開
mousemove() 滑鼠移動
mouseover() 滑鼠位於元素

4.6 JQuery動畫

4.6.1 顯示和隱藏

命令 說明
show(speed,callback) 顯示
hide(speed,callback) 隱藏

4.6.2 淡入淡出

命令 說明
fadeIn(speed,callback) 淡入
fadeOut(speed,callback) 淡出

4.6.3 滑動

命令 說明
slideDown(speed,callback) 向下滑動
slideUp(speed,callback) 向上滑動

4.7 更多JQuery方法查詢文件:

http://jquery.cuishifeng.cn/

相關文章