HTML、CSS、Javascript、jQuery、Xml

2022 年 1 月 14 日
筆記
JAVA

HTML

HTML簡介

Hyper Text Markup Language （超文本標記語言）簡寫：HTML。通過標籤來標記要顯示的網頁中的各個部分。網頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）

代碼示例：

<!DOCTYPE html> <!--約束，聲明-->
<html lang="en"> <!--htmL標籤表示htmL的開始，lang="zh_CN"表示中文html，lang="en"表示英文html,標籤中一般分為兩部分,分別是: head和body
-->
<head> <!--表示頭部信息，一般包含三部分內容，title標籤，css樣式，js代碼-->
	<meta charset="UTF-8"> <!--表明當前頁面使用UTF
-8字符集-->
	<title>標題</title>
</head>
<body> <!--body標籤是html頁面顯示的主題內容-->
	hello
</body>
</html>

註：Java 文件是需要先編譯，再由 java 虛擬機跑起來。但 HTML 文件它不需要編譯，直接由瀏覽器進行解析執行。

HTML 文件的書寫規範

<html>	表示整個 html 頁面的開始
	<head>	頭信息
		<title>標題</title>	標題
	</head>
	<body>	body 是頁面的主體內容
		頁面主體內容
	</body>
</html>	表示整個 html 頁面的結束

Html 的代碼注釋

HTML 標籤介紹

標籤的格式:

<標籤名>封裝的數據</標籤名>
標籤名大小寫不敏感。
標籤擁有自己的屬性。

i. 分為基本屬性：
```
bgcolor="red"
```
可以修改簡單的樣式效果

ii. 事件屬性：
```
 onclick="alert('你好！')"
```
可以直接設置事件響應後的代碼。
標籤又分為，單標籤和雙標籤。

i. 單標籤格式：
```
<標籤名 />	br 換行	hr 水平線
```
ii. 雙標籤格式:
```
 <標籤名> ...封裝的數據...</標籤名>
```

標籤的語法

<!-- ①標籤不能交叉嵌套 -->

正確：<div><span>早安，瑪卡巴卡</span></div> 
錯誤：<div><span>早安，瑪卡巴卡</div></span>

<hr/>

<!-- ②標籤必須正確關閉 -->

<!-- i.有文本內容的標籤： -->



正確：<div>早安，瑪卡巴卡</div> 
錯誤：<div>早安，瑪卡巴卡

<hr />

<!-- ii.沒有文本內容的標籤： -->正確：<br />錯誤：<br><hr />

<!-- ③屬性必須有值，屬性值必須加引號 -->正確：<font color="blue">早安，瑪卡巴卡</font> 錯誤：<font color=blue>早安，瑪卡巴卡</font> 錯誤：<font color>早安，瑪卡巴卡</font><hr />

<!-- ④注釋不能嵌套 -->正確：<!-- 注釋內容 --> <br/>錯誤：<!--	<!-- 這是錯誤的 html 注釋	-->	--><hr />

注意事項：

html 代碼不是很嚴謹。有時候標籤不閉合，也不會報錯。

常用標籤介紹

font 字體標籤

<body><!-- 字體標籤需求1：在網頁上顯示我是字體標籤，並修改字體為宋體，顏色為紅色。font     標籤是字體標籤,它可以用來修改文本的字體,顏色,大小(尺寸) color 屬性修改顏色face 屬性修改字體size 屬性修改文本大小--><font color="red" face="宋體" size="7">我是字體標籤</font></body>

特殊字符

一些字符在 HTML 中擁有特殊的含義，比如小於號 (<) 用於定義 HTML 標籤的開始。如果我們希望瀏覽器正確地顯示這些字符，我們必須在 HTML 源碼中插入字符實體。

字符實體有三部分：一個和號 (&)，一個實體名稱，或者 # 和一個實體編號，以及一個分號 (😉。

要在 HTML 文檔中顯示小於號，我們需要這樣寫：< 或者 <

使用實體名稱而不是實體編號的好處在於，名稱相對來說更容易記憶。而這麼做的壞處是，並不是所有的瀏覽器都支持最新的實體名稱，然而幾乎所有的瀏覽器對實體編號的支持都很好。

注意：實體對大小寫敏感。

特殊字符表：

標題標籤

<body><!-- 標題標籤需求1：演示標題1 到標題6 的h1 - h6 都是標題標籤h1 最大h6 最小align 屬性是對齊屬性left	左對齊(默認)center	劇中right	右對齊--><h1 align="left">標題 1</h1><h2 align="center">標題 2</h2><h3 align="right">標題 3</h3><h4>標題 4</h4><h5>標題 5</h5><h6>標題 6</h6><h7>標題 7</h7></body>

超鏈接

在網頁中所有點擊之後可以跳轉的內容都是超連接

<body><!-- a 標籤是 超鏈接href 屬性設置連接的地址target 屬性設置哪個目標進行跳轉_self	表示當前頁面(默認值)_blank	表示打開新頁面來進行跳轉--><a href="//localhost:8080">百度</a><br/><a href="//localhost:8080" target="_self">百度_self</a><br/><a href="//localhost:8080" target="_blank">百度_blank</a><br/></body>

列表標籤

<body><!--ul 是無序列表 type 屬性可以修改列表項前面的符號 li 是列表項 --><ul type="none"><li>趙四</li><li>劉能</li><li>小瀋陽</li><li>宋小寶</li></ul></body>

<body><!--ol 是有序列表 type 屬性可以修改列表項前面的符號 li 是列表項 --><ol type="a">    <li>趙四</li>    <li>劉能</li>    <li>小瀋陽</li>    <li>宋小寶</li></ol></body>

img 標籤

img 標籤可以在 html 頁面上顯示圖片。

src 屬性可以設置圖片的路徑
width 屬性設置圖片的寬度
height 屬性設置圖片的高度
border 屬性設置圖片邊框大小
alt 屬性設置當指定路徑找不到圖片時,用來代替顯示的文本內容

在JavaSE 中路徑也分為相對路徑和絕對路徑.

相對路徑:從工程名開始算
絕對路徑:盤符😕目錄/文件名

在web 中路徑分為相對路徑和絕對路徑兩種

相對路徑:

. 表示當前文件所在的目錄
.. 表示當前文件所在的上一級目錄
文件名表示當前文件所在目錄的文件,相當於 ./文件名（./ 可以省略）

絕對路徑:

正確格式是: //ip:port/工程名/資源路徑
錯誤格式是: 盤符😕目錄/文件名

<img src=".\img\圖片1.jpg" width="600" height="500" border="1" alt="美女找不到了"/><img src="img\圖片1.jpg" width="600" height="500" border="1" alt="美女找不到了"/>

表格標籤

table 標籤是表格標籤
border 設置表格邊框
width 設置表格寬度
height 設置表格高度
tr 是行標籤
th 是表頭標籤
td 是單元格標籤
align 設置表格相對於頁面的對齊方式
b 是加粗標籤
cellspacing 設置單元格間距

<table align="center" border="1" height="500" width="500" cellspacing="1">    <tr>        <th>1</th>        <th>2</th>        <th>3</th>    </tr>    <tr>        <td><b>a</b></td>        <td>b</td>        <td>c</td>    </tr></table>

跨行跨列表格

colspan 屬性設置跨列
rowspan 屬性設置跨行

新建一個五行，五列的表格，第一行，第一列的單元格要跨兩列，第二行第一列的單元格跨兩行，第四行第四列的單元格跨兩行兩列。

<table width="500" height="500" cellspacing="0" border="1">    <tr>        <td colspan="2">1.1</td>        <td>1.3</td>        <td>1.4</td>        <td>1.5</td>    </tr>    <tr>        <td rowspan="2">2.1</td>        <td>2.2</td>        <td>2.3</td>        <td>2.4</td>        <td>2.5</td>    </tr>    <tr>        <td>3.2</td>        <td>3.3</td>        <td>3.4</td>        <td>3.5</td>    </tr>    <tr>        <td>4.1</td>        <td>4.2</td>        <td>4.3</td>        <td colspan="2" rowspan="2">4.4</td>    </tr>    <tr>        <td>5.1</td>        <td>5.2</td>        <td>5.3</td>    </tr></table>

iframe框架標籤 (內嵌窗口)

iframe 框架標籤 (內嵌窗口)

ifarme 標籤它可以在一個 html 頁面上,打開一個小窗口,去加載一個單獨的頁面

ifarme 和a 標籤組合使用的步驟:

在 iframe 標籤中使用 name 屬性定義一個名稱
在 a 標籤的 target 屬性上設置iframe 的 name 的屬性值

<iframe src="3.標題標籤.html" width="500" height="500" name="abc"></iframe>    <ol>        <li><a href="4.超鏈接.html" target="abc">超鏈接</a></li>        <li><a href="3.標題標籤.html" target="abc">標題標籤</a></li>    </ol>

表單標籤

表單就是 html 頁面中,用來收集用戶信息的所有元素集合.然後把這些信息發送給服務器.

創建一個個人信息註冊的表單界面。包含用戶名，密碼，確認密碼。性別（單選），興趣愛好（多選），國籍（下拉列表）。

隱藏域，自我評價（多行文本域）。重置，提交。

form 標籤就是表單
input type=text 是文件輸入框 value 設置默認顯示內容
input type=password 是密碼輸入框 value 設置默認顯示內容
input type=radio 是單選框 name 屬性可以對其進行分組 checked=”checked”表示默認選中
input type=checkbox 是複選框 checked=”checked”表示默認選中
input type=reset 是重置按鈕 value 屬性修改按鈕上的文本
input type=submit 是提交按鈕 value 屬性修改按鈕上的文本
input type=button 是按鈕 value 屬性修改按鈕上的文本
input type=file 是文件上傳域input type=hidden 是隱藏域當我們要發送某些信息，而這些信息，不需要用戶參與，就可以使用隱藏域（提交的時候同時發送給服務器）
select 標籤是下拉列表框
option 標籤是下拉列表框中的選項 selected=”selected”設置默認選中
textarea 表示多行文本輸入框（起始標籤和結束標籤中的內容是默認值）

rows 屬性設置可以顯示幾行的高度

cols 屬性設置每行可以顯示幾個字符寬度

   <form>       用戶名稱：<input type="text" value="請輸入姓名"/><br/>       用戶密碼：<input type="password" maxlength="5"/><br/>       性別：<input type="radio" name="sex" checked="checked" />男<input type="radio" name="sex"/>女<br/>       興趣愛好：<input type="checkbox" name="hobby" checked="checked"/>Java<input type="checkbox"  name="hobby"/>C++<input type="checkbox"  name="hobby" checked="checked">Python<br/>       國籍：<select>                <option>請選擇國籍</option>                <option selected="selected">中國</option>                <option>美國</option>                <option>日本</option>            </select><br/>       自我評價：<textarea rows="10" cols="20">愛你喲</textarea><br/><hr>       <input type="reset" value="reset"/><br/>       <input type="submit" value="submit"/><br/>       <input type="button" value="這是一個按鈕"><br/>       <input type="file"><br/>       <input type="hidden" value="avc"/>   </form>

表單格式化

<form>    <h1 align="center">用戶註冊</h1>    <table align="center">        <tr>            <td>用戶名稱：</td>            <td><input type="text" value="請輸入姓名"/></td>        </tr>        <tr>            <td>用戶密碼：</td>            <td><input type="password" maxlength="5"/></td>        </tr>        <tr>            <td>性別：</td>            <td><input type="radio" name="sex" checked="checked" />男                <input type="radio" name="sex"/>女            </td>        </tr>        <tr>            <td>興趣愛好：</td>            <td>                <input type="checkbox" checked="checked" name="hobby"/>Java                <input type="checkbox" name="hobby"/>C++                <input type="checkbox" checked="checked" name="hobby">Python            </td>        </tr>        <tr>            <td>國籍：</td>            <td><select>                <option>請選擇國籍</option>                <option selected="selected">中國</option>                <option>美國</option>                <option>日本</option>            </select></td>        </tr>        <tr>            <td>自我評價：</td>            <td><textarea rows="10" cols="20">愛你喲</textarea></td>        </tr>        <hr>        <tr>            <td><input type="reset" value="reset"/></td>            <td align="center"><input type="submit" value="submit"/></td>            <td><input type="hidden" value="avc"/></td>        </tr>        <tr>            <td><input type="button" value="這是一個按鈕"></td>            <td><input type="file"></td>        </tr>    </table></form>

表單提交細節

form 標籤是表單標籤

action 屬性設置提交的服務器地址

method 屬性設置提交的方式 GET(默認值)或 POST

表單提交的時候，數據沒有發送給服務器的三種情況：

1.表單項沒有 name 屬性值

2.單選、複選（下拉列表中的 option 標籤）都需要添加 value 屬性，以便發送給服務器

3.表單項不在提交的 form 標籤中

GET 請求的特點是：

1.瀏覽器地址欄中的地址是：action 屬性[+?+請求參數] 請求參數的格式是：name=value&name=value

2.不安全

3.它有數據長度的限制

POST 請求的特點是：

1.瀏覽器地址欄中只有 action 屬性值

2.相對於 GET 請求要安全

3.理論上沒有數據長度的限制

<form action="//localhost:8080" method="post">    <h1 align="center">用戶註冊</h1>    <table align="center">        <tr>            <td>用戶名稱：</td>            <td><input type="text" value="請輸入姓名" name="username"/></td>        </tr>        <tr>            <td>用戶密碼：</td>            <td><input type="password" maxlength="5" name="password"/></td>        </tr>        <tr>            <td>性別：</td>            <td><input type="radio" name="sex" checked="checked" value="boy"/>男                <input type="radio" name="sex" value="girl"/>女            </td>        </tr>        <tr>            <td>興趣愛好：</td>            <td>                <input type="checkbox" checked="checked" name="hobby" value="java"/>Java                <input type="checkbox" name="hobby" value="c++"/>C++                <input type="checkbox" checked="checked" name="hobby" value="python">Python            </td>        </tr>        <tr>            <td>國籍：</td>            <td><select>                <option>請選擇國籍</option>                <option selected="selected" name="nation" value="中國">中國</option>                <option name="nation" value="美國">美國</option>                <option name="nation" value="日本">日本</option>            </select></td>        </tr>        <tr>            <td>自我評價：</td>            <td><textarea rows="10" cols="20" name="text">愛你喲</textarea></td>        </tr>        <hr>        <tr>            <td><input type="reset" value="reset"/></td>            <td align="center"><input type="submit" value="submit"/></td>            <td><input type="hidden" value="avc"/></td>        </tr>        <tr>            <td><input type="button" value="這是一個按鈕"></td>            <td><input type="file"></td>        </tr>    </table></form>

其他標籤

div 標籤默認獨佔一行
span 標籤它的長度是封裝數據的長度
p 段落標籤默認會在段落的上方或下方各空出一行來（如果已有就不再空）

<div>div 標籤 1</div><div>div 標籤 2</div><span>span 標籤 1</span><span>span 標籤 2</span><p>p 段落標籤 1</p><p>p 段落標籤 2</p>

CSS

CSS 是「層疊樣式表單」。是用於(增強)控制網頁樣式並允許將樣式信息與網頁內容分離的一種標記性語言。

語法規則

選擇器：瀏覽器根據「選擇器」決定受CSS 樣式影響的HTML 元素（標籤）。

屬性 (property) 是你要改變的樣式名，並且每個屬性都有一個值。屬性和值被冒號分開，並由花括號包圍，這樣就組成了一個完整的樣式聲明（declaration），例如：p {color: blue}

多個聲明：如果要定義不止一個聲明，則需要用分號將每個聲明分開。雖然最後一條聲明的最後可以不加分號(但盡量在每條聲明的末尾都加上分號)

例如：

p{	color:red;	font-size:30px;}

註：一般每行只描述一個屬性

CSS 注釋：/注釋內容/

CSS和 HTML的結合方式

style 標籤專門用來定義 css 樣式代碼

第一種

分別定義兩個 div、span 標籤，分別修改每個 div 標籤的樣式為：邊框 1 個像素，實線，紅色。

solid：實線

px：像素

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <div style="border: 1px solid red;">div標籤1</div>    <div style="border: 1px solid red;">div標籤1</div>    <span style="border: 1px solid red">span標籤</span>    <span style="border: 1px solid red">span標籤</span></body></html>

這種方式的缺點？

如果標籤多了。樣式多了。代碼量非常龐大。
可讀性非常差。
Css 代碼沒什麼復用性可方言

第二種

style標籤內全部都是css的內容。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        /* 需求 1：分別定義兩個 div、span 標籤，分別修改每個 div 標籤的樣式為：邊框 1 個像素，實線，紅色。*/        div{            border: 1px            solid            red;        }        span{            border: 1px            solid            blue        }    </style></head><body>    <div>div標籤1</div>    <div>div標籤1</div>    <span>span標籤</span>    <span>span標籤</span></body></html>

只能在同一頁面內復用代碼，不能在多個頁面中復用 css 代碼。

維護起來不方便，實際的項目中會有成千上萬的頁面，要到每個頁面中去修改。工作量太大了。

第三種

把 css 樣式寫成一個單獨的 css 文件，再通過 link 標籤引入即可復用。

使用 html 的 <link rel=“stylesheet” type=“text/css” href=“./styles.css” /> 標籤導入 css 樣式文件。

css文件內容：

div{    border: 1px solid red;}span{    border: 1px solid blue}

html文件代碼：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" type="text/css" href="cssmode.css"/></head><body>    <div>div標籤1</div>    <div>div標籤1</div>    <span>span標籤</span>    <span>span標籤</span></body></html>

CSS選擇器

標籤名選擇器

標籤名選擇器的格式是：

標籤名{	屬性：值;}

標籤名選擇器，可以決定哪些標籤被動的使用這個樣式。

!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS 選擇器</title><style type="text/css"> div{border: 1px solid yellow; color: blue;font-size: 30px;}span{border: 5px dashed blue; color: yellow;font-size: 20px;}</style></head><body>    <div>div 標籤 1</div>	<div>div 標籤 2</div>	<span>span 標籤 1</span>	<span>span 標籤 2</span></body></html>

id 選擇器

id 選擇器的格式是：

#id 屬性值{	屬性：值;}

id 選擇器，可以讓我們通過 id 屬性選擇性的去使用這個樣式。

但只能用一次，class選擇器可以重複用

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>ID 選擇器</title><style type="text/css">#id001{color: blue; font-size: 30px;border: 1px yellow solid;}#id002{color: red;font-size: 20px;border: 5px blue dotted ;}</style></head><body><div id="id002">div 標籤 1</div><div id="id001">div 標籤 2</div></body></html>

class選擇器（類選擇器）

class 類型選擇器的格式是：

.class 屬性值{	屬性：值;}

class 類型選擇器，可以通過 class 屬性有效的選擇性地去使用這個樣式。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>class 類型選擇器</title><style type="text/css">.class01{color: blue; font-size: 30px;border: 1px solid yellow;}.class02{color: grey; font-size: 26px;border: 1px solid red;}</style></head><body><!--需求 1：修改 class 屬性值為 class01 的 span 或 div 標籤，字體顏色為藍色，字體大小 30 個像素。邊框為 1 像素黃色實線。需求 2：修改 class 屬性值為 class02 的 div 標籤，字體顏色為灰色，字體大小 26 個像素。邊框為 1 像素紅色實線。--><div class="class02">div 標籤 class01</div><div class="class02">div 標籤</div><span class="class02">span 標籤 class01</span><span>span 標籤 2</span></body></html>

組合選擇器

組合選擇器的格式是：

選擇器 1，選擇器 2，選擇器 n{	屬性：值;}

組合選擇器可以讓多個選擇器共用同一個 css 樣式代碼。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>class 類型選擇器</title><style type="text/css">.class01 , #id01{ color: blue; font-size: 20px;border: 1px yellow solid;}</style></head><body><!--需求 1：修改 class="class01" 的 div 標籤 和 id="id01" 所有的 span 標籤， 字體顏色為藍色，字體大小 20 個像素。邊框為 1 像素黃色實線。--><div id="id01">div 標籤 class01</div> <br /><span >span 標籤</span> <br /><div>div 標籤</div> <br /><div>div 標籤id01</div> <br /></body><html/>

常用樣式

字體顏色

顏色可以寫顏色名如：black, blue, red, green 等

顏色也可以寫 rgb 值和十六進制表示值：如 rgb(255,0,0)，#00F6DE，如果寫十六進制值必須加#
寬度

width:19px;

寬度可以寫像素值：19px；也可以寫百分比值：20%；
高度

height:20px;

高度可以寫像素值：19px；也可以寫百分比值：20%；
背景顏色

background-color:#0F2D4C
字體樣式

color：#FF0000；字體顏色紅色

font-size：20px; 字體大小
紅色 1 像素實線邊框

border：1px solid red;
DIV 居中

margin-left: auto;

margin-right: auto;
文本居中

text-align: center;
超連接去下劃線

text-decoration: none;
表格細線

table {

border: 1px solid black; /設置邊框/ border-collapse: collapse; /將邊框合併/

}

td,th {

border: 1px solid black; /設置邊框/

}
列表去除修飾

ul {

list-style: none;

}

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>06-css 常用樣式.html</title><style type="text/css">div{color: red;border: 1px yellow solid; width: 300px;height: 300px; background-color: green; font-size: 30px;margin-left: auto; margin-right: auto; text-align: center;}table{border: 1px red solid; border-collapse: collapse;}td{border: 1px red solid;}a{text-decoration: none;}ul{	list-style: none;}</style></head><body><ul><li>11111111111</li><li>11111111111</li><li>11111111111</li><li>11111111111</li><li>11111111111</li></ul><table><tr><td>1.1</td><td>1.2</td></tr></table><a href="//www.baidu.com">百度</a><div>我是 div 標籤</div></body></html>

JavaScript

Javascript 語言誕生主要是完成頁面的數據驗證。因此它運行在客戶端，需要運行瀏覽器來解析執行 JavaScript 代碼。

JS 是 Netscape 網景公司的產品，最早取名為 LiveScript;為了吸引更多 java 程序員。更名為 JavaScript。

JS 是弱類型，Java 是強類型。

弱類型就是類型可變。
強類型，就是定義變量的時候。類型已確定。而且不可變。

特點：

交互性（它可以做的就是信息的動態交互）
安全性（不允許直接訪問本地硬盤）
跨平台性（只要是可以解釋 JS 的瀏覽器都可以執行，和平台無關）

JavaScript和 html 代碼的結合方式

第一種方式

只需要在 head 標籤中，或者在 body 標籤中，使用 script 標籤來書寫 JavaScript 代碼

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        alert("hello javascript!")    </script></head><body></body></html>

第二種方式

使用 script 標籤引入單獨的 JavaScript 代碼文件

使用引入後就不能在標籤內寫其他語句。

js代碼：

alert("hello world!");

html代碼：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript" src="js.js"></script></head><body></body></html>

變量

什麼是變量？變量是可以存放某些值的內存的命名。

JavaScript 的變量類型：

數值類型： number
字符串類型： string
對象類型： object
布爾類型： boolean
函數類型： function

JavaScript 里特殊的值：

undefined:未定義，所有 js 變量未賦於初始值的時候，默認值都是 undefined.

null :空值

NaN :全稱是：Not a Number。非數字。非數值。

JS 中的定義變量格式：

var 變量名;

var 變量名 = 值;

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"><title>Title</title> <script type="text/javascript">var i; // alert(i); // undefined i = 12; // typeof()是 JavaScript 語言提供的一個函數。// alert( typeof(i) ); // numberi = "abc"; // 它可以取變量的數據類型返回 // alert( typeof(i) );// String var a = 12;var b = "abc";alert( a * b ); // NaN 是非數字，非數值。</script> </head> <body></body> </html>

關係（比較）運算

等於：

等於是簡單的做字面值的比較

全等於：

===

除了做字面值的比較之外，還會比較兩個變量的數據類型

邏輯運算

且運算： &&

或運算： ||

取反運算： !

在 JavaScript 語言中，所有的變量，都可以做為一個 boolean 類型的變量去使用。

0 、null、 undefined、」」(空串) 都認為是 false；

&& 且運算。

有兩種情況：

第一種：當表達式全為真的時候。返回最後一個表達式的值。

第二種：當表達式中，有一個為假的時候。返回第一個為假的表達式的值
|| 或運算

第一種情況：當表達式全為假時，返回最後一個表達式的值

第二種情況：只要有一個表達式為真。就會把回第一個為真的表達式的值

並且 && 與運算和 ||或運算有短路。

短路就是說，當這個&&或||運算有結果了之後。後面的表達式不再執行

數組

數組定義方式

JS 中數組的定義：

var 數組名 = []; // 空數組var 數組名 = [1 , 』abc』 , true]; // 定義數組同時賦值元素

javaScript 語言中的數組，只要我們通過數組下標賦值，那麼最大的下標值，就會自動的給數組做擴容操作。

<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><script type="text/javascript">var arr = [true,1]; // 定義一個空數組 // alert( arr.length ); // 0 arr[0] = 12; // alert( arr[0] );//12 // alert( arr.length ); // 0 // javaScript 語言中的數組，只要我們通過數組下標賦值，那麼最大的下標值，就會自動的給數組做擴容操作。 arr[2] = "abc"; alert(arr.length); //3 // alert(arr[1]);// undefined // 數組的遍歷 for (var i = 0; i < arr.length; i++){	alert(arr[i]); }</script></head><body></body> </html>

函數

二種定義方式

第一種

可以使用 function 關鍵字來定義函數

function 函數名(形參列表){	函數體 }

在 JavaScript 語言中，如何定義帶有返回值的函數？

只需要在函數體內直接使用 return 語句返回值即可！

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        function fun(){            alert("無參函數被調用！");        }        fun();        function fun2(a,b){            alert("有參函數fun2被調用 a="+a+",b="+b);        }        fun2(2,4);        function sum(a,b){            return a+b;        }        alert("求和函數被調用，所求結果為："+sum(1,1));    </script></head><body></body></html>

第二種

var 函數名 = function(形參列表) { 函數體 }

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        var fun = function (){            alert("無參函數！");        }        fun();        var fun1 = function (a,b){            alert("有參函數：a="+a+",b="+b);        }        fun1(20,50);        var fun2 = function (a,b){            return a+b;        }        alert(fun2(15,20));    </script></head><body></body></html>

註：在 Java 中函數允許重載。但是在 JS 中函數的重載會直接覆蓋掉上一次的定義

函數的 arguments隱形參數（只在 function 函數內）

就是在 function 函數中不需要定義，但卻可以直接用來獲取所有參數的變量。我們管它叫隱形參數。隱形參數特別像 java 基礎的可變長參數一樣。

public void fun( Object ... args );

可變長參數其他是一個數組。那麼 js 中的隱形參數也跟 java 的可變長參數一樣。操作類似數組。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        function sum(num1,num2){            var result = 0;            for(var i = 0; i < arguments.length; i++){                if(typeof(arguments[i]) == "number")                    result += arguments[i];           }            return result;        }        alert(sum(10,20,"abc"));    </script></head><body></body></html>

JS中的自定義對象

Object 形式的自定義對象

對象的定義：

var 變量名 = new Object(); // 對象實例（空對象） 變量名.屬性名 = 值; // 定義一個屬性 變量名.函數名 = function(){} // 定義一個函數

對象的訪問：

變量名.屬性 / 函數名();

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>  <script type="text/javascript">      var oj = new Object();      oj.name = "馬牛逼";      oj.age = 18;      oj.fun = function (){          alert("姓名："+this.name+" 年齡："+this.age);      }      oj.fun();  </script></head><body></body></html>

花括號形式的自定義對象

var 變量名 = {// 空對象 屬性名：值, // 定義一個屬性 屬性名：值, // 定義一個屬性 函數名：function(){} // 定義一個函數 };

對象的訪問：

變量名.屬性 / 函數名();

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>  <script type="text/javascript">      var oj = {          name:"馬牛逼",          age:18,          fun:function (){              alert("姓名："+this.name+" 年齡："+this.age)          }      }      oj.fun();  </script></head><body></body></html>

js中的事件

什麼是事件？事件是電腦輸入設備與頁面進行交互的響應。我們稱之為事件。

常用的事件：

onload 加載完成事件：頁面加載完成之後，常用於做頁面 js 代碼初始化操作
onclick 單擊事件：常用於按鈕的點擊響應操作。
onblur 失去焦點事件：常用用於輸入框失去焦點後驗證其輸入內容是否合法。
onchange 內容發生改變事件：常用於下拉列表和輸入框內容發生改變後操作
onsubmit 表單提交事件：常用於表單提交前，驗證所有表單項是否合法。

事件的註冊又分為靜態註冊和動態註冊兩種：

什麼是事件的註冊（綁定）？

其實就是告訴瀏覽器，當事件響應後要執行哪些操作代碼，叫事件註冊或事件綁定。

靜態註冊事件：通過 html 標籤的事件屬性直接賦於事件響應後的代碼，這種方式我們叫靜態註冊。
動態註冊事件：是指先通過 js 代碼得到標籤的 dom 對象，然後再通過 dom 對象.事件名 = function(){} 這種形式賦於事件響應後的代碼，叫動態註冊。

動態註冊基本步驟：

獲取標籤對象
標籤對象.事件名 = fucntion(){}

onload加載完成事件

靜態：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        function onloadfun(){            alert("靜態註冊函數");        }    </script></head><body onload="alert('靜態註冊')"></body></html>

動態：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        window.onload = function(){            alert("動態態註冊函數");        }    </script></head><body></body></html>

onclick單擊事件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        function onclickfun(){            alert("靜態註冊");        }        window.onload = function() {            //1.獲取標籤對象             /*             * document 是 JavaScript 語言提供的一個對象（文檔）<br/>             * get 獲取             * Element 元素（就是標籤）             * By 通過。。 由。。經。。。             * Id id 屬性             * getElementById 通過 id 屬性獲取標籤對象             */            var btnObj = document.getElementById("btn02");            // 2.通過標籤對象.事件名 = function(){}            btnObj.onclick = function () {                alert("動態註冊的 onclick 事件");            }        }    </script></head><body><button onclick="onclickfun()">按鈕1</button><button id="btn02">按鈕2</button></body></html>

onblur失去焦點事件

按F12打開控制台

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        // 靜態註冊失去焦點事件        function onblurFun() {            // console 是控制台對象，是由 JavaScript 語言提供，專門用來向瀏覽器的控制器打印輸出， 用於測試使用            // log() 是打印的方法            console.log("靜態註冊失去焦點事件");        }        // 動態註冊 onblur 事件        window.onload = function () {            //1 獲取標籤對象            var passwordObj = document.getElementById("password");            //2 通過標籤對象.事件名 = function(){};            passwordObj.onblur = function () {                console.log("動態註冊失去焦點事件");            }        }    </script><head/><body>    用戶名：<input type="text" onblur="onblurFun()"><br/>    密&nbsp&nbsp&nbsp碼：<input type="text" id="password"><br/></body></html>

onchange內容發生改變事件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        function onchangeFun() {            alert("語言已經改變了");        }        window.onload = function () {            //1.獲取標籤            var sel2 = document.getElementById("select2");            //2.通過標籤對象.事件名 = function(){};            sel2.onchange = function () {                alert("數字已經改變了")            }        }    </script></head><body>請選擇你認為最好的語言：<select onchange="onchangeFun()">    <option>C</option>    <option>C++</option>    <option>Java</option>    <option>Python</option></select>請選擇你最喜歡的數字：<select id="select2">    <option>1</option>    <option>2</option>    <option>3</option>    <option>4</option></select></body></html>

onsubmit表單提交事件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        function onsubmitfun(){            // 要驗證所有表單項是否合法，如果，有一個不合法就阻止表單提交            alert("靜態註冊表單提交事件->發現不合法")            return false;        }        window.onload = function () {            var formobj = document.getElementById("form2");            formobj.onsubmit = function (){                alert("動態註冊表單提交事件----發現不合法");                return false;            }        }    </script></head><body>    <!--return false 可以阻止 表單提交 -->    <form action="//localhost:8080" method="get" onsubmit="return onsubmitfun()">    <input type="submit" value="靜態註冊提交">    </form>    <form action="//localhost:8080" method="get" id="form2" onsubmit="return onsubmitfun()">        <input type="submit" value="動態註冊提交">    </form></body></html>

DOM 模型

DOM 全稱是 Document Object Model 文檔對象模型

大白話，就是把文檔中的標籤，屬性，文本，轉換成為對象來管理。

那麼它們是如何實現把標籤，屬性，文本轉換成為對象來管理呢。這就是我們馬上要學習的重點。

Document 對象

Document 對象的理解：

第一點：Document 它管理了所有的 HTML 文檔內容。

第二點：document 它是一種樹結構的文檔。有層級關係。

第三點：它讓我們把所有的標籤都對象化

第四點：我們可以通過 document 訪問所有的標籤對象。

那麼 html 標籤要對象化怎麼辦？

<body><div id="div01">div01</div></body>

模擬對象化，相當於：

class Dom{private String id;	// id 屬性private String tagName; //表示標籤名private Dom parentNode; //父親private List<Dom> children; // 孩子結點private String innerHTML; // 起始標籤和結束標籤中間的內容}

Document對象中的方法介紹

document.getElementById(elementId)

通過標籤的 id 屬性查找標籤 dom 對象，elementId 是標籤的 id 屬性值
document.getElementsByName(elementName)

通過標籤的 name 屬性查找標籤 dom 對象，elementName 標籤的 name 屬性值
document.getElementsByTagName(tagname)

通過標籤名查找標籤 dom 對象。tagname 是標籤名
document.createElement(tagName)

方法，通過給定的標籤名，創建一個標籤對象。tagName 是要創建的標籤名

註：

document 對象的三個查詢方法，如果有 id 屬性，優先使用 getElementById 方法來進行查詢如果沒有 id 屬性，則優先使用 getElementsByName 方法來進行查詢，如果 id 屬性和 name 屬性都沒有最後再按標籤名查 getElementsByTagName

關於正則表達式，可以前往JavaScript RegExp 對象 | 菜鳥教程 (runoob.com)查看。

getElementById 方法示例代碼：

校驗用戶名：紅字彈出提示

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        function onclickFun(){            //1.當我們要操作一個標籤的時候，一定要先獲取這個標籤對象。            var usernameObj = document.getElementById("username");            //獲取輸入框的值            var userNameText = usernameObj.value;            //2.驗證字符串，符合某個規則，需要使用正則表達式技術            var patt = /^\w{5,12}$/;            /*            *test()方法用於測試某個字符串，是不是匹配我的規則，            *匹配就返回true。不匹配就返回false.            * */            var spanObj = document.getElementById("usernamespan");            // innerHTML 表示起始標籤和結束標籤中的內容            // innerHTML 這個屬性可讀，可寫            if(patt.test(userNameText)){               spanObj.innerHTML = "用戶名合法！";            }else{                spanObj.innerHTML = "用戶名非法！";            }        }    </script></head><body>用戶名：<input type="text" value="12345" id="username"><span id="usernamespan" style="color: red"></span><br/><button onclick="onclickFun()">校驗</button></body></html>

校驗用戶名：✔❌提示

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        function onclickFun(){            //1.當我們要操作一個標籤的時候，一定要先獲取這個標籤對象。            var usernameObj = document.getElementById("username");            //獲取輸入框的值            var userNameText = usernameObj.value;            //2.驗證字符串，符合某個規則，需要使用正則表達式技術            var patt = /^\w{5,12}$/;            /*            *test()方法用於測試某個字符串，是不是匹配我的規則，            *匹配就返回true。不匹配就返回false.            * */            var spanObj = document.getElementById("usernamespan");            // innerHTML 表示起始標籤和結束標籤中的內容            // innerHTML 這個屬性可讀，可寫            if(patt.test(userNameText)){               spanObj.innerHTML = "<img src=\"right.png\" height=\"14\" width=\"14\"/>";            }else{                spanObj.innerHTML = "<img src=\"wrong.png\" height=\"14\" width=\"14\"/>";            }        }    </script></head><body>用戶名：<input type="text" value="12345" id="username"><span id="usernamespan" style="color: red"></span><br/><button onclick="onclickFun()">校驗</button></body></html>

getElementsByName 方法示例代碼：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        function checkAll(){            // document.getElementsByName();是根據指定的name 屬性查詢返回多個標籤對象集合            // 這個集合的操作跟數組 一樣            // 集合中每個元素都是dom 對象            // 這個集合中的元素順序是他們在html 頁面中從上到下的順序            var hobbies = document.getElementsByName("hobby");            // checked 表示複選框的選中狀態。如果選中是true，不選中是false            // checked 這個屬性可讀，可寫            for(var i = 0;i < hobbies.length;i++){                hobbies[i].checked = true;            }        }        function checkNone(){            var hobbies = document.getElementsByName("hobby");            for(var i = 0;i < hobbies.length;i++){                hobbies[i].checked = false;            }        }        function checkReserve(){            var hobbies = document.getElementsByName("hobby");            for(var i = 0;i < hobbies.length;i++){                if(hobbies[i].checked == false){                    hobbies[i].checked = true;                }                else{                    hobbies[i].checked = false;                }            }        }    </script></head><body>興趣愛好：<input type="checkbox" name="hobby" value="C++">C++<input type="checkbox" name="hobby" value="Java">Java<input type="checkbox" name="hobby" value="Python">Python<input type="checkbox" name="hobby" value="C">C<br/><button onclick="checkAll()">全選</button><button onclick="checkNone()">全不選</button><button onclick="checkReserve()">反選</button></body></html>

getElementsByTagName 方法示例代碼：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        function checkAll(){            var inputs = document.getElementsByTagName("input");            // 是按照指定標籤名來進行查詢並返回集合            // 這個集合的操作跟數組 一樣            // 集合中都是dom 對象            // 集合中元素順序 是他們在html 頁面中從上到下的順序。            for(var i = 0;i < inputs.length;i++){                inputs[i].checked = true;            }        }    </script></head><body><input type="checkbox" value="C++">C++<input type="checkbox" value="Java">Java<input type="checkbox" value="Python">Python<input type="checkbox" value="C">C<br/><button onclick="checkAll()">全選</button></body></html>

CreateElement 和appendChild方法示例代碼：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        window.onload = function (){            //方式1            var divObj1 = document.createElement("div");            divObj1.innerHTML = "我是馬牛逼！";            document.body.appendChild(divObj1);            //方式2 說明文本也是一個結點            var divObj2 = document.createElement("div");            var text = document.createTextNode("今年18");            divObj2.appendChild(text);            document.body.appendChild(divObj2);        }    </script></head><body></body></html>

節點的常用屬性和方法

節點就是標籤對象

方法

通過具體的元素節點調用

getElementsByTagName()

方法，獲取當前節點的指定標籤名孩子節點
appendChild( oChildNode )

方法，可以添加一個子節點，oChildNode 是要添加的孩子節點

屬性

childNodes

屬性，獲取當前節點的所有子節點
firstChild

屬性，獲取當前節點的第一個子節點
lastChild

屬性，獲取當前節點的最後一個子節點
parentNode

屬性，獲取當前節點的父節點
nextSibling

屬性，獲取當前節點的下一個節點
previousSibling

屬性，獲取當前節點的上一個節點
className

用於獲取或設置標籤的 class 屬性值
innerHTML

屬性，表示獲取/設置起始標籤和結束標籤中的內容
innerText

屬性，表示獲取/設置起始標籤和結束標籤中的文本

dom對象查詢練習

css：

@CHARSET "UTF-8";body {	width: 800px;	margin-left: auto;	margin-right: auto;}button {	width: 300px;	margin-bottom: 10px;}#btnList {	float:left;}#total{	width: 450px;	float:left;}ul{	list-style-type: none;	margin: 0px;	padding: 0px;}.inner li{	border-style: solid;	border-width: 1px;	padding: 5px;	margin: 5px;	background-color: #99ff99;	float:left;}.inner{	width:400px;	border-style: solid;	border-width: 1px;	margin-bottom: 10px;	padding: 10px;	float: left;}

html:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>dom查詢</title><link rel="stylesheet" type="text/css" href="style/css.css" /><script type="text/javascript">	window.onload = function(){		//1.查找#bj節點		document.getElementById("btn01").onclick = function () {			var bjObj = document.getElementById("bj");			alert(bjObj.innerText);		}		//2.查找所有li節點		var btn02Ele = document.getElementById("btn02");		btn02Ele.onclick = function(){			var lis = document.getElementsByTagName("li");			alert(lis.length);		};		//3.查找name=gender的所有節點		var btn03Ele = document.getElementById("btn03");		btn03Ele.onclick = function(){			var genders = document.getElementsByName("gender");			alert(genders.length)		};		//4.查找#city下所有li節點		var btn04Ele = document.getElementById("btn04");		btn04Ele.onclick = function(){			//1. 獲取id 為city 的節點			//2. 通過city 節點.getElementsByTagName 按標籤名查子節點			var lis = document.getElementById("city").getElementsByTagName("li");			alert(lis.length);		};		//5.返回#city的所有子節點		var btn05Ele = document.getElementById("btn05");		btn05Ele.onclick = function(){			//1. 獲取id 為city 的節點			//2. 通過city 獲取所有子節點			alert(document.getElementById("city").childNodes.length);		};		//6.返回#phone的第一個子節點		var btn06Ele = document.getElementById("btn06");		btn06Ele.onclick = function(){			alert(document.getElementById("phone").firstChild.innerText);		};		//7.返回#bj的父節點		var btn07Ele = document.getElementById("btn07");		btn07Ele.onclick = function(){			//1. 查詢id 為bj 的節點			var bjObj = document.getElementById("bj");			//2. bj 節點獲取父節點			alert(bjObj.parentNode.innerHTML);		};		//8.返回#android的前一個兄弟節點		var btn08Ele = document.getElementById("btn08");		btn08Ele.onclick = function(){			alert(document.getElementById("android").previousSibling.innerHTML);		};		//9.讀取#username的value屬性值		var btn09Ele = document.getElementById("btn09");		btn09Ele.onclick = function(){			alert(document.getElementById("username").value);		};		//10.設置#username的value屬性值		var btn10Ele = document.getElementById("btn10");		btn10Ele.onclick = function(){			document.getElementById("username").value = "我是馬牛逼";		};		//11.返回#bj的文本值		var btn11Ele = document.getElementById("btn11");		btn11Ele.onclick = function(){			alert(document.getElementById("bj").innerHTML);		};	};</script></head><body><div id="total">	<div class="inner">		<p>			你喜歡哪個城市?		</p>		<ul id="city">			<li id="bj">北京</li>			<li>上海</li>			<li>東京</li>			<li>首爾</li>		</ul>		<br>		<br>		<p>			你喜歡哪款單機遊戲?		</p>		<ul id="game">			<li id="rl">紅警</li>			<li>實況</li>			<li>極品飛車</li>			<li>魔獸</li>		</ul>		<br />		<br />		<p>			你手機的操作系統是?		</p>		<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>	</div>	<div class="inner">		gender:		<input type="radio" name="gender" value="male"/>		Male		<input type="radio" name="gender" value="female"/>		Female		<br>		<br>		name:		<input type="text" name="name" id="username" value="abcde"/>	</div></div><div id="btnList">	<div><button id="btn01">查找#bj節點</button></div>	<div><button id="btn02">查找所有li節點</button></div>	<div><button id="btn03">查找name=gender的所有節點</button></div>	<div><button id="btn04">查找#city下所有li節點</button></div>	<div><button id="btn05">返回#city的所有子節點</button></div>	<div><button id="btn06">返回#phone的第一個子節點</button></div>	<div><button id="btn07">返回#bj的父節點</button></div>	<div><button id="btn08">返回#android的前一個兄弟節點</button></div>	<div><button id="btn09">返回#username的value屬性值</button></div>	<div><button id="btn10">設置#username的value屬性值</button></div>	<div><button id="btn11">返回#bj的文本值</button></div></div></body></html>

jQuery

什麼是 jQuery ?

jQuery，顧名思義，也就是 JavaScript 和查詢（Query），它就是輔助 JavaScript 開發的 js 類庫。

jQuery 核心思想

它的核心思想是 write less,do more(寫得更少,做得更多)，所以它實現了很多瀏覽器的兼容問題。

jQuery 流行程度

jQuery 現在已經成為最流行的 JavaScript 庫，在世界前 10000 個訪問最多的網站中，有超過 55%在使用 jQuery。

jQuery 好處

jQuery 是免費、開源的，jQuery 的語法設計可以使開發更加便捷，例如操作文檔對象、選擇 DOM 元素、

製作動畫效果、事件處理、使用 Ajax 以及其他功能

使用 jQuery 給一個按鈕綁定單擊事件?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">	//使用$()代替window.onload	$(function(){		//使用選擇器獲取按鈕對象，隨後綁定單擊響應函數		$("#btnId").click(function(){			//彈出Hello			alert('Hello');		});	});</script></head><body>	<button id="btnId">SayHello</button></body></html>

1.使用 jQuery 一定要引入 jQuery 庫嗎？

答案：是，必須

2.jQuery 中的$到底是什麼？

答案：它是一個函數

3.怎麼為按鈕添加點擊響應函數的？

答案：

1.使用 jQuery 查詢到標籤對象

2.使用標籤對象.click( function(){} );

jQuery 核心函數

在DOM加載完成時運行的代碼，可以這樣寫：

$(document).ready(function(){  // 在這裡寫你的代碼...});

使用 $(document).ready() 的簡寫，同時內部的 jQuery 代碼依然使用 $ 作為別名，而不管全局的 $ 為何。

$(function($) {  // 你可以在這裡繼續使用$作為別名...});

$ 是 jQuery 的核心函數，能完成 jQuery 的很多功能。$()就是調用$這個函數

1.傳入參數為 [ 函數 ] 時：

表示頁面加載完成之後。相當於 window.onload = function(){}

2.傳入參數為 [ HTML 字符串 ] 時：

會對我們創建這個 html 標籤對象

3.傳入參數為 [ 選擇器字符串 ] 時：

$(「#id 屬性值」);

id 選擇器，根據 id 查詢標籤對象

$(「標籤名」);

標籤名選擇器，根據指定的標籤名查詢標籤對象

$(「.class 屬性值」); 類型選擇器，可以根據 class 屬性查詢標籤對象

4.傳入參數為 [ DOM 對象 ] 時：

會把這個 dom 對象轉換為 jQuery 對象

jQuery 對象和 dom對象區分

Dom對象

通過 getElementById()查詢出來的標籤對象是 Dom 對象
通過 getElementsByName()查詢出來的標籤對象是 Dom 對象
通過 getElementsByTagName()查詢出來的標籤對象是 Dom 對象
通過 createElement() 方法創建的對象，是 Dom 對象
DOM 對象 Alert 出來的效果是：[object HTML 標籤名 Element]

jQuery 對象

通過 JQuery 提供的 API 創建的對象，是 JQuery 對象
通過 JQuery 包裝的 Dom 對象，也是 JQuery 對象
通過 JQuery 提供的 API 查詢到的對象，是 JQuery 對象
jQuery 對象 Alert 出來的效果是：[object Object]

jQuery對象的本質

jQuery 對象是 dom 對象的數組 + jQuery 提供的一系列功能函數。

jQuery對象和Dom對象使用區別

jQuery 對象不能使用 DOM 對象的屬性和方法

DOM 對象也不能使用 jQuery 對象的屬性和方法

Dom對象和 jQuery對象互轉

dom對象轉化為jQuery對象

1.先有 DOM 對象

2.$( DOM 對象 ) 就可以轉換成為 jQuery 對象

jQuery對象轉為dom對象

1.先有 jQuery 對象

2.jQuery 對象[下標]取出相應的 DOM 對象

jQuery選擇器

基本選擇器

#ID 選擇器：根據 id 查找標籤對象
.class 選擇器：根據 class 查找標籤對象
element 選擇器：根據標籤名查找標籤對象
*選擇器：表示任意的，所有的元素
selector1，selector2 組合選擇器：合併選擇器 1，選擇器 2 的結果並返回
p.myClass 表示標籤名必須是 p 標籤，而且 class 類型還要是 myClass，若標籤名為空，表示只指定myClass標籤名

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd"><html>	<head>		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">		<title>Untitled Document</title>		<style type="text/css">			div, span, p {			    width: 140px;			    height: 140px;			    margin: 5px;			    background: #aaa;			    border: #000 1px solid;			    float: left;			    font-size: 17px;			    font-family: Verdana;			}						div.mini {			    width: 55px;			    height: 55px;			    background-color: #aaa;			    font-size: 12px;			}						div.hide {			    display: none;			}		</style>		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>		<script type="text/javascript">							$(function (){					//1.選擇 id 為 one 的元素 "background-color","#bbffaa"					$("#btn1").click(function (){						$("#one").css("background-color","#bbffaa");					});					//2.選擇 class 為 mini 的所有元素					$("#btn2").click(function (){						$(".mini").css("background-color","#bbffaa");					});					//3.選擇 元素名是 div 的所有元素					$("#btn3").click(function (){						$("div").css("background-color","#bbffaa");					});					//4.選擇所有的元素					$("#btn4").click(function (){						$("*").css("background-color","#bbffaa");					})					//5.選擇所有的 span 元素和id為two的元素					$("#btn5").click(function (){						$("span,#two").css("background-color","#bbffaa");					});				});								</script>	</head>	<body><!-- 	<div>		<h1>基本選擇器</h1>	</div>	 -->			<input type="button" value="選擇 id 為 one 的元素" id="btn1" />		<input type="button" value="選擇 class 為 mini 的所有元素" id="btn2" />		<input type="button" value="選擇 元素名是 div 的所有元素" id="btn3" />		<input type="button" value="選擇 所有的元素" id="btn4" />		<input type="button" value="選擇 所有的 span 元素和id為two的元素" id="btn5" />				<br>		<div class="one" id="one">			id 為 one,class 為 one 的div			<div class="mini">class為mini</div>		</div>		<div class="one" id="two" title="test">			id為two,class為one,title為test的div			<div class="mini" title="other">class為mini,title為other</div>			<div class="mini" title="test">class為mini,title為test</div>		</div>		<div class="one">			<div class="mini">class為mini</div>			<div class="mini">class為mini</div>			<div class="mini">class為mini</div>			<div class="mini"></div>		</div>		<div class="one">			<div class="mini">class為mini</div>			<div class="mini">class為mini</div>			<div class="mini">class為mini</div>			<div class="mini" title="tesst">class為mini,title為tesst</div>		</div>		<div style="display:none;" class="none">style的display為"none"的div</div>		<div class="hide">class為"hide"的div</div>		<div>			包含input的type為"hidden"的div<input type="hidden" size="8">		</div>		<span class="one" id="span">^^span元素^^</span>	</body></html>

層級選擇器

ancestor descendant 後代選擇器：在給定的祖先元素下匹配所有的後代元素
parent > child 子元素選擇器：在給定的父元素下匹配所有的子元素
prev + next 相鄰元素選擇器：匹配所有緊接在 prev 元素後的 next 元素
prev ~ sibings 之後的兄弟元素選擇器：匹配 prev 元素之後的所有 siblings 元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd"><html>	<head>		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">		<title>Untitled Document</title>		<style type="text/css">			div, span, p {			    width: 140px;			    height: 140px;			    margin: 5px;			    background: #aaa;			    border: #000 1px solid;			    float: left;			    font-size: 17px;			    font-family: Verdana;			}						div.mini {			    width: 55px;			    height: 55px;			    background-color: #aaa;			    font-size: 12px;			}						div.hide {			    display: none;			}					</style>		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>		<script type="text/javascript">			$(document).ready(function(){				//1.選擇 body 內的所有 div 元素 				$("#btn1").click(function(){					$("body div").css("background", "#bbffaa");				});				//2.在 body 內, 選擇div子元素  				$("#btn2").click(function(){					$("body > div").css("background", "#bbffaa");				});				//3.選擇 id 為 one 的下一個 div 元素 				$("#btn3").click(function(){					$("#one+div").css("background", "#bbffaa");				});				//4.選擇 id 為 two 的元素後面的所有 div 兄弟元素				$("#btn4").click(function(){					$("#two~div").css("background", "#bbffaa");				});			});		</script>	</head>	<body>		<!-- 	<div>		<h1>層級選擇器:根據元素的層級關係選擇元素</h1>		ancestor descendant  ：		parent > child 		   ：		prev + next 		   ：		prev ~ siblings 	   ：	</div>	 -->		<input type="button" value="選擇 body 內的所有 div 元素" id="btn1" />		<input type="button" value="在 body 內, 選擇div子元素" id="btn2" />		<input type="button" value="選擇 id 為 one 的下一個 div 元素" id="btn3" />		<input type="button" value="選擇 id 為 two 的元素後面的所有 div 兄弟元素" id="btn4" />		<br><br>		<div class="one" id="one">			id 為 one,class 為 one 的div			<div class="mini">class為mini</div>		</div>		<div class="one" id="two" title="test">			id為two,class為one,title為test的div			<div class="mini" title="other">class為mini,title為other</div>			<div class="mini" title="test">class為mini,title為test</div>		</div>		<div class="one">			<div class="mini">class為mini</div>			<div class="mini">class為mini</div>			<div class="mini">class為mini</div>			<div class="mini"></div>		</div>		<div class="one">			<div class="mini">class為mini</div>			<div class="mini">class為mini</div>			<div class="mini">class為mini</div>			<div class="mini" title="tesst">class為mini,title為tesst</div>		</div>		<div style="display:none;" class="none">style的display為"none"的div</div>		<div class="hide">class為"hide"的div</div>		<div>			包含input的type為"hidden"的div<input type="hidden" size="8">		</div>		<span id="span">^^span元素^^</span>	</body></html>

過濾選擇器

:first 獲取第一個元素
:last 獲取最後個元素
:not(selector) 去除所有與給定選擇器匹配的元素
:even 匹配所有索引值為偶數的元素，從 0 開始計數
:odd 匹配所有索引值為奇數的元素，從 0 開始計數
:eq(index) 匹配一個給定索引值的元素
:gt(index) 匹配所有大於給定索引值的元素
:lt(index) 匹配所有小於給定索引值的元素
:header 匹配如 h1, h2, h3 之類的標題元素
:animated 匹配所有正在執行動畫效果的元素

內容過濾器

:contains(text) 匹配包含給定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:parent 匹配含有子元素或者文本的元素
:has(selector) 匹配含有選擇器所匹配的元素的元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd"><html>	<head>		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">		<title>Untitled Document</title>		<style type="text/css">			div, span, p {			    width: 140px;			    height: 140px;			    margin: 5px;			    background: #aaa;			    border: #000 1px solid;			    float: left;			    font-size: 17px;			    font-family: Verdana;			}						div.mini {			    width: 55px;			    height: 55px;			    background-color: #aaa;			    font-size: 12px;			}						div.hide {			    display: none;			}					</style>		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>		<script type="text/javascript">			$(document).ready(function(){				function anmateIt(){					$("#mover").slideToggle("slow", anmateIt);				}					anmateIt();							});						/** 			:contains(text)   			:empty 			  			:has(selector) 				:parent 						*/			$(document).ready(function(){				//1.選擇 含有文本 'di' 的 div 元素				$("#btn1").click(function(){					$("div:contains(di)").css("background", "#bbffaa");				});				//2.選擇不包含子元素(或者文本元素) 的 div 空元素				$("#btn2").click(function(){					$("div:empty").css("background", "#bbffaa");				});				//3.選擇含有 class 為 mini 元素的 div 元素				$("#btn3").click(function(){					$("div:has(.mini)").css("background", "#bbffaa");				});				//4.選擇含有子元素(或者文本元素)的div元素				$("#btn4").click(function(){					$("div:parent").css("background", "#bbffaa");				});			});		</script>	</head>	<body>				<input type="button" value="選擇 含有文本 'di' 的 div 元素" id="btn1" />		<input type="button" value="選擇不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />		<input type="button" value="選擇含有 class 為 mini 元素的 div 元素" id="btn3" />		<input type="button" value="選擇含有子元素(或者文本元素)的div元素" id="btn4" />				<br><br>		<div class="one" id="one">			id 為 one,class 為 one 的div			<div class="mini">class為mini</div>		</div>		<div class="one" id="two" title="test">			id為two,class為one,title為test的div			<div class="mini" title="other">class為mini,title為other</div>			<div class="mini" title="test">class為mini,title為test</div>		</div>		<div class="one">			<div class="mini">class為mini</div>			<div class="mini">class為mini</div>			<div class="mini">class為mini</div>			<div class="mini"></div>		</div>		<div class="one">			<div class="mini">class為mini</div>			<div class="mini">class為mini</div>			<div class="mini">class為mini</div>			<div class="mini" title="tesst">class為mini,title為tesst</div>		</div>		<div style="display:none;" class="none">style的display為"none"的div</div>		<div class="hide">class為"hide"的div</div>		<div>			包含input的type為"hidden"的div<input type="hidden" size="8">		</div>		<div id="mover">正在執行動畫的div元素.</div>	</body></html>

屬性過濾器

[attribute] 匹配包含給定屬性的元素。

[attribute=value] 匹配給定的屬性是某個特定值的元素

[attribute!=value] 匹配所有不含有指定的屬性，或者屬性不等於特定值的元素。

[attribute^=value] 匹配給定的屬性是以某些值開始的元素

[attribute$=value] 匹配給定的屬性是以某些值結尾的元素

[attribute*=value] 匹配給定的屬性是以包含某些值的元素

[attrSel1] [attrSel2] [attrSelN] 複合屬性選擇器，需要同時滿足多個條件時使用。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">div,span,p {	width: 140px;	height: 140px;	margin: 5px;	background: #aaa;	border: #000 1px solid;	float: left;	font-size: 17px;	font-family: Verdana;}div.mini {	width: 55px;	height: 55px;	background-color: #aaa;	font-size: 12px;}div.hide {	display: none;}</style><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">	/**[attribute] 			[attribute=value] 		[attribute!=value] 		 [attribute^=value] 		[attribute$=value] 		[attribute*=value] 		[attrSel1][attrSel2][attrSelN]  			*/	$(function() {		//1.選取含有 屬性title 的div元素		$("#btn1").click(function() {			$("div[title]").css("background", "#bbffaa");		});		//2.選取 屬性title值等於'test'的div元素		$("#btn2").click(function() {			$("div[title='test']").css("background", "#bbffaa");		});		//3.選取 屬性title值不等於'test'的div元素(*沒有屬性title的也將被選中)		$("#btn3").click(function() {			$("div[title!='test']").css("background", "#bbffaa");		});		//4.選取 屬性title值 以'te'開始 的div元素		$("#btn4").click(function() {			$("div[title^='te']").css("background", "#bbffaa");		});		//5.選取 屬性title值 以'est'結束 的div元素		$("#btn5").click(function() {			$("div[title$='est']").css("background", "#bbffaa");		});		//6.選取 屬性title值 含有'es'的div元素		$("#btn6").click(function() {			$("div[title*='es']").css("background", "#bbffaa");		});				//7.首先選取有屬性id的div元素，然後在結果中 選取屬性title值 含有'es'的 div 元素		$("#btn7").click(function() {			$("div[id][title*='es']").css("background", "#bbffaa");		});		//8.選取 含有 title 屬性值, 且title 屬性值不等於 test 的 div 元素		$("#btn8").click(function() {			$("div[title][title!='test']").css("background", "#bbffaa");		});	});</script></head><body>	<input type="button" value="選取含有 屬性title 的div元素." id="btn1" />	<input type="button" value="選取 屬性title值等於'test'的div元素." id="btn2" />	<input type="button"		value="選取 屬性title值不等於'test'的div元素(沒有屬性title的也將被選中)." id="btn3" />	<input type="button" value="選取 屬性title值 以'te'開始 的div元素." id="btn4" />	<input type="button" value="選取 屬性title值 以'est'結束 的div元素." id="btn5" />	<input type="button" value="選取 屬性title值 含有'es'的div元素." id="btn6" />	<input type="button"		value="組合屬性選擇器,首先選取有屬性id的div元素，然後在結果中 選取屬性title值 含有'es'的 div 元素."		id="btn7" />	<input type="button"		value="選取 含有 title 屬性值, 且title 屬性值不等於 test 的 div 元素." id="btn8" />	<br>	<br>	<div class="one" id="one">		id 為 one,class 為 one 的div		<div class="mini">class為mini</div>	</div>	<div class="one" id="two" title="test">		id為two,class為one,title為test的div		<div class="mini" title="other">class為mini,title為other</div>		<div class="mini" title="test">class為mini,title為test</div>	</div>	<div class="one">		<div class="mini">class為mini</div>		<div class="mini">class為mini</div>		<div class="mini">class為mini</div>		<div class="mini"></div>	</div>	<div class="one">		<div class="mini">class為mini</div>		<div class="mini">class為mini</div>		<div class="mini">class為mini</div>		<div class="mini" title="tesst">class為mini,title為tesst</div>	</div>	<div style="display: none;" class="none">style的display為"none"的div</div>	<div class="hide">class為"hide"的div</div>	<div>		包含input的type為"hidden"的div<input type="hidden" value="123456789"			size="8">	</div>	<div id="mover">正在執行動畫的div元素.</div></body></html>

表單過濾器

:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有文本輸入框
:password 匹配所有的密碼輸入框
:radio 匹配所有的單選框
:checkbox 匹配所有的複選框
:submit 匹配所有提交按鈕
:image 匹配所有 img 標籤
:reset 匹配所有重置按鈕
:button 匹配所有 input type=button
:file 匹配所有 input type=file 文件上傳
:hidden 匹配所有不可見元素 display:none 或 input type=hidden

表單對象屬性過濾器

:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有選中的單選，複選，和下拉列表中選中的 option 標籤對象
:selected 匹配所有選中的 option

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd"><html>   <head>      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">      <title>Untitled Document</title>      <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>      <script type="text/javascript">         $(function(){                              /**      :input              :text           :password        :radio              :checkbox        :submit          :image              :reset              :button          :file           :hidden                表單對象的屬性      :enabled            :disabled           :checked            :selected           */                                          //1.對錶單內 可用input 賦值操作            $("#btn1").click(function(){               $(":text:enabled").val("New Value");            });            //2.對錶單內 不可用input 賦值操作            $("#btn2").click(function(){               $(":text:disabled").val("New Value Too");            });            //3.獲取多選框選中的個數  使用size()方法獲取選取到的元素集合的元素個數            $("#btn3").click(function(){               alert($(":checkbox:checked").size())            });            //4.獲取多選框，每個選中的value值            $("#btn4").click(function(){               var str = "";               var eles = $(":checkbox:checked");               console.log(eles);               // eles.each(function (){               //     alert(this.value)               // });               for(var i=0;i<eles.size();i++){                  str += "【"+$(eles[i]).val()+"】";               }               alert(str)            });            //5.獲取下拉框選中的內容              $("#btn5").click(function(){               var str = "";               //注意這個選擇器的特殊，因為select裏面的option是真正的被選擇項，               //所以 :selected 選擇器和 select[name='test']選擇器的關係是子父關係               //必須按照基本選擇器選擇後代的方法選               var els = $("select option:selected");               console.log(els);               for(var i=0;i<els.size();i++){                  str += "【"+$(els[i]).val()+"】";               }               alert(str)            });         })       </script>   </head>   <body>      <h3>表單對象屬性過濾選擇器</h3>       <button id="btn1">對錶單內 可用input 賦值操作.</button>       <button id="btn2">對錶單內 不可用input 賦值操作.</button><br /><br />       <button id="btn3">獲取多選框選中的個數.</button>       <button id="btn4">獲取多選框選中的內容.</button><br /><br />         <button id="btn5">獲取下拉框選中的內容.</button><br /><br />             <form id="form1" action="#">                  可用元素: <input name="add" value="可用文本框1"/><br>         不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>         可用元素: <input name="che" value="可用文本框2"/><br>         不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>         <br>                  多選框: <br>         <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1         <input type="checkbox" name="newsletter" value="test2" />test2         <input type="checkbox" name="newsletter" value="test3" />test3         <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4         <input type="checkbox" name="newsletter" value="test5" />test5                  <br><br>         下拉列表1: <br>         <select name="test" multiple="multiple" style="height: 100px" id="sele1">            <option>浙江</option>            <option selected="selected">遼寧</option>            <option>北京</option>            <option selected="selected">天津</option>            <option>廣州</option>            <option>湖北</option>         </select>                  <br><br>         下拉列表2: <br>         <select name="test2">            <option>浙江</option>            <option>遼寧</option>            <option selected="selected">北京</option>            <option>天津</option>            <option>廣州</option>            <option>湖北</option>         </select>      </form>          </body></html>

jQuery元素篩選

eq() 獲取給定索引的元素,功能跟:eq()一樣
first() 獲取第一個元素,功能跟:first一樣
last() 獲取最後一個元素,功能跟:last一樣
filter(exp) 留下匹配的元素
is(exp) 判斷是否匹配給定的選擇器，只要有一個匹配就返回，true
has(exp) 返回包含有匹配選擇器的元素的元素,功能跟 :has 一樣
not(exp) 刪除匹配選擇器的元素,功能跟 :not 一樣
children(exp) 返回匹配給定選擇器的子元素,功能跟 parent>child 一樣
find(exp) 返回匹配給定選擇器的後代元素,功能跟 ancestor descendant 一樣
next() 返回當前元素的下一個兄弟元素功能跟 prev + next 功能一樣
nextAll() 返回當前元素後面所有的兄弟元素功能跟 prev ~ siblings 功能一樣
nextUntil() 返回當前元素到指定匹配的元素為止的後面元素
parent() 返回父元素
prev(exp) 返回當前元素的上一個兄弟元素
prevAll() 返回當前元素前面所有的兄弟元素 prevUnit(exp) 返回當前元素到指定匹配的元素為止的前面元素siblings(exp) 返回所有兄弟元素
add() 把 add 匹配的選擇器的元素添加到當前 jquery 對象中

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd"><html>   <head>      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">      <title>DOM查詢</title>      <style type="text/css">         div, span, p {             width: 140px;             height: 140px;             margin: 5px;             background: #aaa;             border: #000 1px solid;             float: left;             font-size: 17px;             font-family: Verdana;         }                  div.mini {             width: 55px;             height: 55px;             background-color: #aaa;             font-size: 12px;         }                  div.hide {             display: none;         }              </style>      <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>      <script type="text/javascript">         $(document).ready(function(){            function anmateIt(){               $("#mover").slideToggle("slow", anmateIt);            }            anmateIt();               /**                  過濾   eq(index|-index)            first()                   last()                       hasClass(class)             filter(expr|obj|ele|fn)       is(expr|obj|ele|fn)1.6*       has(expr|ele)              not(expr|ele|fn)            slice(start,[end])                 查找   children([expr])            closest(expr,[con]|obj|ele)1.6*      find(expr|obj|ele)                 next([expr])                  nextall([expr])                nextUntil([exp|ele][,fil])1.6*        parent([expr])                    parents([expr])                parentsUntil([exp|ele][,fil])1.6*     prev([expr])                  prevall([expr])                prevUntil([exp|ele][,fil])1.6*        siblings([expr])                  串聯   add(expr|ele|html|obj[,con])                              */                        //(1)eq()  選擇索引值為等於 3 的 div 元素            $("#btn1").click(function(){               $("div").eq(3).css("background-color","#bfa");            });            //(2)first()選擇第一個 div 元素             $("#btn2").click(function(){                //first()   選取第一個元素               $("div").first().css("background-color","#bfa");            });            //(3)last()選擇最後一個 div 元素            $("#btn3").click(function(){               //last()  選取最後一個元素               $("div").last().css("background-color","#bfa");            });            //(4)filter()在div中選擇索引為偶數的            $("#btn4").click(function(){               //filter()  過濾   傳入的是選擇器字符串               $("div").filter(":even").css("background-color","#bfa");            });             //(5)is()判斷#one是否為:empty或:parent            //is用來檢測jq對象是否符合指定的選擇器            $("#btn5").click(function(){               alert($("#one").is(":empty"));            });                        //(6)has()選擇div中包含.mini的            $("#btn6").click(function(){               //has(selector)  選擇器字符串    是否包含selector               $("div").has(".mini").css("background-color","#bfa");            });            //(7)not()選擇div中class不為one的            $("#btn7").click(function(){               //not(selector)  選擇不是selector的元素               $("div").not(".class").css("background-color","#bfa");            });            //(8)children()在body中選擇所有class為one的div子元素            $("#btn8").click(function(){               //children()  選出所有的子元素               $("body").children(".one").css("background-color","#bfa");            });                                    //(9)find()在body中選擇所有class為mini的div元素            $("#btn9").click(function(){               //find()  選出所有的後代元素               $("body").find("div.mini").css("background-color","#bfa");            });            //(10)next() #one的下一個div            $("#btn10").click(function(){               //next()  選擇下一個兄弟元素               $("#one").next("div").css("background-color","#bfa");            });            //(11)nextAll() #one後面所有的span元素            $("#btn11").click(function(){               //nextAll()   選出後面所有的元素               $("#one").nextAll("span").css("background-color","#bfa");            });            //(12)nextUntil() #one和span之間的元素            $("#btn12").click(function(){               //               $("#one").nextUntil("span").css("background-color","#bfa")            });            //(13)parent() .mini的父元素            $("#btn13").click(function(){               $(".mini").parent().css("background-color","#bfa");            });            //(14)prev() #two的上一個div            $("#btn14").click(function(){               //prev()                 $("#two").prev("div").css("background-color","#bfa")            });            //(15)prevAll() span前面所有的div            $("#btn15").click(function(){               //prevAll()   選出前面所有的元素               $("span").prevAll("div").css("background-color","#bfa")            });            //(16)prevUntil() span向前直到#one的元素            $("#btn16").click(function(){               //prevUntil(exp)   找到之前所有的兄弟元素直到找到exp停止               $("span").prevUntil("#one").css("background-color","#bfa")            });            //(17)siblings() #two的所有兄弟元素            $("#btn17").click(function(){               //siblings()    找到所有的兄弟元素，包括前面的和後面的               $("#two").siblings().css("background-color","#bfa")            });                                    //(18)add()選擇所有的 span 元素和id為two的元素            $("#btn18").click(function(){                  //   $("span,#two,.mini,#one")               $("span").add("#two").css("background-color","#bfa");            });                     });                        </script>   </head>   <body>          <input type="button" value="eq()選擇索引值為等於 3 的 div 元素" id="btn1" />      <input type="button" value="first()選擇第一個 div 元素" id="btn2" />      <input type="button" value="last()選擇最後一個 div 元素" id="btn3" />      <input type="button" value="filter()在div中選擇索引為偶數的" id="btn4" />      <input type="button" value="is()判斷#one是否為:empty或:parent" id="btn5" />      <input type="button" value="has()選擇div中包含.mini的" id="btn6" />      <input type="button" value="not()選擇div中class不為one的" id="btn7" />      <input type="button" value="children()在body中選擇所有class為one的div子元素" id="btn8" />      <input type="button" value="find()在body中選擇所有class為mini的div後代元素" id="btn9" />      <input type="button" value="next()#one的下一個div" id="btn10" />      <input type="button" value="nextAll()#one後面所有的span元素" id="btn11" />      <input type="button" value="nextUntil()#one和span之間的元素" id="btn12" />      <input type="button" value="parent().mini的父元素" id="btn13" />      <input type="button" value="prev()#two的上一個div" id="btn14" />      <input type="button" value="prevAll()span前面所有的div" id="btn15" />      <input type="button" value="prevUntil()span向前直到#one的元素" id="btn16" />      <input type="button" value="siblings()#two的所有兄弟元素" id="btn17" />      <input type="button" value="add()選擇所有的 span 元素和id為two的元素" id="btn18" />            <h3>基本選擇器.</h3>      <br /><br />      文本框<input type="text" name="account" disabled="disabled" />      <br><br>      <div class="one" id="one">         id 為 one,class 為 one 的div         <div class="mini">class為mini</div>      </div>      <div class="one" id="two" title="test">         id為two,class為one,title為test的div         <div class="mini" title="other"><b>class為mini,title為other</b></div>         <div class="mini" title="test">class為mini,title為test</div>      </div>            <div class="one">         <div class="mini">class為mini</div>         <div class="mini">class為mini</div>         <div class="mini">class為mini</div>         <div class="mini"></div>      </div>      <div class="one">         <div class="mini">class為mini</div>         <div class="mini">class為mini</div>         <div class="mini">class為mini</div>         <div class="mini" title="tesst">class為mini,title為tesst</div>      </div>      <div style="display:none;" class="none">style的display為"none"的div</div>      <div class="hide">class為"hide"的div</div>      <span id="span1">^^span元素 111^^</span>      <div>         包含input的type為"hidden"的div<input type="hidden" size="8">      </div>      <span id="span2">^^span元素 222^^</span>      <div id="mover">正在執行動畫的div元素.</div>   </body></html>

jQuery 的屬性操作

html() 它可以設置和獲取起始標籤和結束標籤中的內容。跟 dom 屬性 innerHTML 一樣。
text() 它可以設置和獲取起始標籤和結束標籤中的文本。跟 dom 屬性 innerText 一樣。

val() 它可以設置和獲取表單項的 value 屬性值。跟 dom 屬性 value 一樣

val 方法同時設置多個表單項的選中狀態：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>    <script type="text/javascript">        $(function () {            /*            // 批量操作單選            $(":radio").val(["radio2"]);            // 批量操作篩選框的選中狀態            $(":checkbox").val(["checkbox3","checkbox2"]);            // 批量操作多選的下拉框選中狀態            $("#multiple").val(["mul2","mul3","mul4"]);            // 操作單選的下拉框選中狀態            $("#single").val(["sin2"]);            */            //  混合選擇            $("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]            );        });    </script></head><body>單選：<input name="radio" type="radio" value="radio1" />radio1<input name="radio" type="radio" value="radio2" />radio2<br/>多選：<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3<br/>下拉多選 ：<select id="multiple" multiple="multiple" size="4">    <option value="mul1">mul1</option>    <option value="mul2">mul2</option>    <option value="mul3">mul3</option>    <option value="mul4">mul4</option></select><br/>下拉單選 ：<select id="single">    <option value="sin1">sin1</option>    <option value="sin2">sin2</option>    <option value="sin3">sin3</option></select></body></html>

attr() 可以設置和獲取屬性的值，不推薦操作 checked、readOnly、selected、disabled 等等

attr 方法還可以操作非標準的屬性。比如自定義屬性：abc,bbj
prop() 可以設置和獲取屬性的值,只推薦操作 checked、readOnly、selected、disabled 等等

<script type="text/javascript" src="script/jquery-1.7.2.js"></script>  <script type="text/javascript">    $(function (){      alert($(":checkbox:first").attr("name"));      $(":checkbox:first").attr("name","abc")    });  </script>//prop同理

選中練習

全選、全不選、反選

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="../../script/jquery-1.7.2.js"></script><script type="text/javascript">		$(function(){		//全選		$("#checkedAllBtn").click(function (){			$(":checkbox").prop("checked",true);		})		//全不選		$("#checkedNoBtn").click(function (){			$(":checkbox").prop("checked",false);		})		//反選		$("#checkedRevBtn").click(function (){			$(":checkbox[name='items']").each(function (){				this.checked = !this.checked;			})			//檢查是否滿選			//總的個數			var allCount = $(":checkbox[name='items']").length;			//選中的個數			var checkedCount = $(":checkbox[name='items']:checked").length;			$("#checkedAllBox").prop("checked",allCount==checkedCount);		})		//提交		$("#sendBtn").click(function (){			$(":checkbox[name='items']:checked").each(function (){				alert(this.value);			});		})		//全選/全不選框		$("#checkedAllBox").click(function (){			//在事件的function函數中，有一個this對象，這個this對象是當前正在響應事件的dom對象			$(":checkbox[name='items']").prop("checked",this.checked);		})		//給全部球類綁上單擊事件		$(":checkbox[name='items']").click(function (){			//檢查是否滿選			//總的個數			var allCount = $(":checkbox[name='items']").length;			//選中的個數			var checkedCount = $(":checkbox[name='items']:checked").length;			$("#checkedAllBox").prop("checked",allCount==checkedCount);		})	});	</script></head><body>	<form method="post" action="">			你愛好的運動是？<input type="checkbox" id="checkedAllBox" />全選/全不選 				<br />		<input type="checkbox" name="items" value="足球" />足球		<input type="checkbox" name="items" value="籃球" />籃球		<input type="checkbox" name="items" value="羽毛球" />羽毛球		<input type="checkbox" name="items" value="乒乓球" />乒乓球		<br />		<input type="button" id="checkedAllBtn" value="全　選" />		<input type="button" id="checkedNoBtn" value="全不選" />		<input type="button" id="checkedRevBtn" value="反　選" />		<input type="button" id="sendBtn" value="提　交" />	</form></body></html>

DOM的增刪改

內部插入


appendTo()	a.appendTo(b)	把 a 插入到 b 子元素末尾，成為最後一個子元素
prependTo()	a.prependTo(b)	把 a 插到 b 所有子元素前面，成為第一個子元素

外部插入


insertAfter()	a.insertAfter(b)	得到 ba
insertBefore()	a.insertBefore(b)	得到 ab

替換


replaceWith()	a.replaceWith(b)	用 b 替換掉 a
replaceAll()	a.replaceAll(b)	用 a 替換掉所有 b

刪除


remove()	a.remove();	刪除 a 標籤
empty()	a.empty();	清空 a 標籤里的內容

移動練習

從左到右、從右到左

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title>	<style type="text/css">		select {			width: 100px;			height: 140px;		}				div {			width: 130px;			float: left;			text-align: center;		}	</style>	<script type="text/javascript" src="script/jquery-1.7.2.js"></script>	<script type="text/javascript">		$(function (){			//選中的添加到右邊			$("button:eq(0)").click(function (){				$("select:eq(0) option:selected").appendTo($("select:eq(1)"));			})			//全部添加到右邊			$("button:eq(1)").click(function (){				$("select:eq(0) option").appendTo($("select:eq(1)"));			})			//選中的添加到右邊			$("button:eq(2)").click(function (){				$("select:eq(1) option:selected").appendTo($("select:eq(0)"));			})			//全部添加到左邊			$("button:eq(3)").click(function (){				$("select:eq(1) option").appendTo($("select:eq(0)"));			})		})		</script></head><body>	<div id="left">		<select multiple="multiple" name="sel01">			<option value="opt01">選項1</option>			<option value="opt02">選項2</option>			<option value="opt03">選項3</option>			<option value="opt04">選項4</option>			<option value="opt05">選項5</option>			<option value="opt06">選項6</option>			<option value="opt07">選項7</option>			<option value="opt08">選項8</option>		</select>				<button>選中添加到右邊</button>		<button>全部添加到右邊</button>	</div>	<div id="rigth">		<select multiple="multiple" name="sel02">		</select>		<button>選中刪除到左邊</button>		<button>全部刪除到左邊</button>	</div></body></html>

動態添加和刪除行記錄練習

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="styleB/css.css" /><script type="text/javascript" src="../../script/jquery-1.7.2.js"></script><script type="text/javascript">	$(function () {		var deleteFun = function () {			//confirm是JavaScript語言提供的一個確認提示函數，你傳什麼就提示什麼			var obj = $(this).parent().parent();			var name = obj.find("td:first").text();			//當用戶點擊確定返回true，否則返回false			if (confirm("你確定要刪除" + name + "嗎？")) {				//function函數中this對象是當前響應事件的dom對象				obj.remove();			}			//return false 可以阻止元素的默認行為			return false;		}		//添加		$("#addEmpButton").click(function () {			var name = $("#empName").val();			var email = $("#email").val();			var salary = $("#salary").val();			var obj = $("<tr>" +					"<td>" + name + "</td>" +					"<td>" + email + "</td>" +					"<td>" + salary + "</td>" +					"<td><a href=\"deleteEmp?id=003\">Delete</a></td>" +					"</tr>");			obj.appendTo($("#employeeTable"));			obj.find("a").click(deleteFun);		})		//刪除		$("a").click(deleteFun);	})</script></head><body>	<table id="employeeTable">		<tr>			<th>Name</th>			<th>Email</th>			<th>Salary</th>			<th>&nbsp;</th>		</tr>		<tr>			<td>Tom</td>			<td>[email protected]</td>			<td>5000</td>			<td><a href="deleteEmp?id=001">Delete</a></td>		</tr>		<tr>			<td>Jerry</td>			<td>[email protected]</td>			<td>8000</td>			<td><a href="deleteEmp?id=002">Delete</a></td>		</tr>		<tr>			<td>Bob</td>			<td>[email protected]</td>			<td>10000</td>			<td><a href="deleteEmp?id=003">Delete</a></td>		</tr>	</table>	<div id="formDiv">			<h4>添加新員工</h4>		<table>			<tr>				<td class="word">name: </td>				<td class="inp">					<input type="text" name="empName" id="empName" />				</td>			</tr>			<tr>				<td class="word">email: </td>				<td class="inp">					<input type="text" name="email" id="email" />				</td>			</tr>			<tr>				<td class="word">salary: </td>				<td class="inp">					<input type="text" name="salary" id="salary" />				</td>			</tr>			<tr>				<td colspan="2" align="center">					<button id="addEmpButton" value="abc">						Submit					</button>				</td>			</tr>		</table>	</div></body></html>

CSS樣式操作

addClass() 添加樣式
removeClass() 刪除樣式
toggleClass() 有就刪除，沒有就添加樣式。
offset() 獲取和設置元素的坐標。

<script type="text/javascript" src="script/jquery-1.7.2.js"></script><script type="text/javascript">		$(function(){		/*CSScss(name|pro|[,val|fn])       讀寫匹配元素的樣式屬性。 								a.css('color')取出a元素的color								a.css('color',"red")設置a元素的color為redCSS 類addClass(class|fn) 			為元素添加一個class值;<div class="mini big">removeClass([class|fn]) 	刪除元素的class值；傳遞一個具體的class值，就會刪除具體的某個class							a.removeClass()：移除所有的class值**/				var $divEle = $('div:first');				$('#btn01').click(function(){			//addClass() - 向被選元素添加一個或多個類			$divEle.addClass("redDiv blackDiv");		});				$('#btn02').click(function(){			//removeClass() - 從被選元素刪除一個或多個類 			$divEle.removeClass()		});				$('#btn03').click(function(){			//toggleClass() - 對被選元素進行添加/刪除類的切換操作 			//切換就是如果具有該類那麼刪除，如果沒有那麼添加上			$divEle.toggleClass("redDiv");		});				$('#btn04').click(function(){			//offset() - 返回第一個匹配元素相對於文檔的位置。			var os = $divEle.offset();			//注意通過offset獲取到的是一個對象，這個對象有兩個屬性top表示頂邊距，left表示左邊距			alert("頂邊距："+os.top+" 左邊距："+os.left);						//調用offset設置元素位置時，也需要傳遞一個js對象，對象有兩個屬性top和left			//offset({ top: 10, left: 30 });			 $divEle.offset({				 top:50,				 left:60			 }); 		});			})</script>

jQuery 動畫

基本動畫

show() 將隱藏的元素顯示
hide() 將可見的元素隱藏。
toggle() 可見就隱藏，不可見就顯示。

以上動畫方法都可以添加參數。

1.第一個參數是動畫執行的時長，以毫秒為單位

2.第二個參數是動畫的回調函數 (動畫完成後自動調用的函數)

淡入淡齣動畫

fadeIn() 淡入（慢慢可見）
fadeOut() 淡出（慢慢消失）
fadeTo() 在指定時長內慢慢的將透明度修改到指定的值。0 透明，1 完成可見，0.5 半透明
fadeToggle() 淡入/淡出切換

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd"><html>	<head>		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">		<title>Untitled Document</title>		<link href="css/style.css" type="text/css" rel="stylesheet" />		<script type="text/javascript" src="script/jquery-1.7.2.js"></script>	<script type="text/javascript">	/* 			基本		show([speed,[easing],[fn]]) 		hide([speed,[easing],[fn]]) 		toggle([speed],[easing],[fn]) 		滑動		slideDown([spe],[eas],[fn]) 		slideUp([speed,[easing],[fn]]) 		slideToggle([speed],[easing],[fn]) 		淡入淡出		fadeIn([speed],[eas],[fn]) 		fadeOut([speed],[eas],[fn]) 		fadeTo([[spe],opa,[eas],[fn]]) 		fadeToggle([speed,[eas],[fn]])		*/		$(function(){			//顯示   show()			$("#btn1").click(function(){				$("#div1").show(1000);			});					//隱藏  hide()			$("#btn2").click(function(){				$("#div1").hide(1000);			});				//切換   toggle()			$("#btn3").click(function(){				$("#div1").toggle(1000);			});										//淡入   fadeIn()			$("#btn4").click(function(){				$("#div1").fadeIn(500);			});				//淡出  fadeOut()			$("#btn5").click(function(){				$("#div1").fadeOut(500);			});							//淡化到  fadeTo()			$("#btn6").click(function(){				$("#div1").fadeTo("slow",Math.random());			});				//淡化切換  fadeToggle()			$("#btn7").click(function(){				$("#div1").fadeToggle("slow","linear");			});			})</script>		</head>	<body>		<table style="float: left;">			<tr>				<td><button id="btn1">顯示show()</button></td>			</tr>			<tr>				<td><button id="btn2">隱藏hide()</button></td>			</tr>			<tr>				<td><button id="btn3">顯示/隱藏切換 toggle()</button></td>			</tr>			<tr>				<td><button id="btn4">淡入fadeIn()</button></td>			</tr>			<tr>				<td><button id="btn5">淡出fadeOut()</button></td>			</tr>			<tr>				<td><button id="btn6">淡化到fadeTo()</button></td>			</tr>			<tr>				<td><button id="btn7">淡化切換fadeToggle()</button></td>			</tr>		</table>				<div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;">			jquery動畫定義了很多種動畫效果，可以很方便的使用這些動畫效果		</div>	</body></html>

品牌展示練習

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>品牌展示練習</title><style type="text/css">* {	margin: 0;	padding: 0;}body {	font-size: 12px;	text-align: center;}a {	color: #04D;	text-decoration: none;}a:hover {	color: #F50;	text-decoration: underline;}.SubCategoryBox {	width: 600px;	margin: 0 auto;	text-align: center;	margin-top: 40px;}.SubCategoryBox ul {	list-style: none;}.SubCategoryBox ul li {	display: block;	float: left;	width: 200px;	line-height: 20px;}.showmore , .showless{	clear: both;	text-align: center;	padding-top: 10px;}.showmore a , .showless a{	display: block;	width: 120px;	margin: 0 auto;	line-height: 24px;	border: 1px solid #AAA;}.showmore a span {	padding-left: 15px;	background: url(img/down.gif) no-repeat 0 0;}.showless a span {	padding-left: 15px;	background: url(img/up.gif) no-repeat 0 0;}.promoted a {	color: #F50;}</style><script type="text/javascript" src="script/jquery-1.7.2.js"></script><script type="text/javascript">	$(function() {		//基本初始狀態		$("li:gt(5):not(:last)").hide();		//		$("div div a").click(function (){			//讓其消失或出現			$("li:gt(5):not(:last)").toggle();			//判斷品牌當前是否可見			if($("li:gt(5):not(:last)").is(":hidden")){				//更改圖片				$("div div").removeClass();				$("div div").addClass("showmore");				//更改文字				$("div div a span").text("顯示全部品牌");				//刪除高亮				$("li:contains('愛國者')").removeClass();				$("li:contains('佳能')").removeClass();			}else{				//更改圖片				$("div div").removeClass();				$("div div").addClass("showless");				//更改文字				$("div div a span").text("顯示精簡品牌");				//添加高亮				$("li:contains('愛國者')").addClass("promoted");				$("li:contains('佳能')").addClass("promoted");			}			//避免跳轉			return false;		})	});</script></head><body>	<div class="SubCategoryBox">		<ul>			<li><a href="#">佳能</a><i>(30440) </i></li>			<li><a href="#">索尼</a><i>(27220) </i></li>			<li><a href="#">三星</a><i>(20808) </i></li>			<li><a href="#">尼康</a><i>(17821) </i></li>			<li><a href="#">松下</a><i>(12289) </i></li>			<li><a href="#">卡西歐</a><i>(8242) </i></li>			<li><a href="#">富士</a><i>(14894) </i></li>			<li><a href="#">柯達</a><i>(9520) </i></li>			<li><a href="#">賓得</a><i>(2195) </i></li>			<li><a href="#">理光</a><i>(4114) </i></li>			<li><a href="#">奧林巴斯</a><i>(12205) </i></li>			<li><a href="#">明基</a><i>(1466) </i></li>			<li><a href="#">愛國者</a><i>(3091) </i></li>			<li><a href="#">其它品牌相機</a><i>(7275) </i></li>		</ul>		<div class="showmore">			<a href="more.html"><span>顯示全部品牌</span></a>		</div>	</div></body></html>

jQuery事件操作

$(function(){});和window.onload=function(){}的區別？

他們分別是在什麼時候觸發？

jQuery 的頁面加載完成之後是瀏覽器的內核解析完頁面的標籤創建好 DOM 對象之後就會馬上執行。
原生js 的頁面加載完成之後，除了要等瀏覽器內核解析完標籤創建好 DOM 對象，還要等標籤顯示時需要的內容加載完成。

他們觸發的順序？

jQuery 頁面加載完成之後先執行
原生 js 的頁面加載完成之後

他們執行的次數？

原生 js 的頁面加載完成之後，只會執行最後一次的賦值函數。
jQuery 的頁面加載完成之後是全部把註冊的 function 函數，依次順序全部執行。

jQuery 中其他的事件處理方法

click() 它可以綁定單擊事件，以及觸發單擊事件
mouseover() 鼠標移入事件
mouseout() 鼠標移出事件
bind() 可以給元素一次性綁定一個或多個事件。
one() 使用上跟 bind 一樣。但是 one 方法綁定的事件只會響應一次。
unbind() 跟 bind 方法相反的操作，解除事件的綁定
live() 也是用來綁定事件。它可以用來綁定選擇器匹配的所有元素的事件。哪怕這個元素是後面動態創建出來的也有效

事件的冒泡

什麼是事件的冒泡？

事件的冒泡是指，父子元素同時監聽同一個事件。當觸發子元素的事件的時候，同一個事件也被傳遞到了父元素的事件里去響應。

那麼如何阻止事件冒泡呢？

在子元素事件函數體內，return false; 可以阻止事件的冒泡傳遞。

javaScript 事件對象

事件對象，是封裝有觸發的事件信息的一個 javascript 對象。

我們重點關心的是怎麼拿到這個 javascript 的事件對象。以及使用。

如何獲取呢 javascript 事件對象呢？

在給元素綁定事件的時候，在事件的 function( event ) 參數列表中添加一個參數，這個參數名，我們習慣取名為 event。這個 event 就是 javascript 傳遞參事件處理函數的事件對象。

1.原生 javascript 獲取事件對象

window.onload = function () {document.getElementById("areaDiv").onclick = function (event) {	console.log(event);}}

2.jQuery 代碼獲取事件對象

$(function () {$("#areaDiv").click(function (event) {console.log(event);});});

3.使用 bind 同時對多個事件綁定同一個函數。怎麼獲取當前操作是什麼事件。

$("#areaDiv").bind("mouseover mouseout",function (event) {if (event.type == "mouseover") {console.log("鼠標移入");} else if (event.type == "mouseout") {console.log("鼠標移出");}});

圖片跟隨練習

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css">	body {		text-align: center;	}	#small {		margin-top: 150px;	}	#showBig {		position: absolute;		display: none;	}</style><script type="text/javascript" src="script/jquery-1.7.2.js"></script><script type="text/javascript">	$(function(){		$("#small").bind("mouseover mouseout mousemove",function (event){			if(event.type=="mouseover"){				$("#showBig").show();			}else if(event.type=="mouseout"){				$("#showBig").hide();			}else if(event.type=="mousemove"){				$("#showBig").offset({					left:event.pageX+10,					top:event.pageY+10				})			}		})	});</script></head><body>	<img id="small" src="img/small.jpg" />		<div id="showBig">		<img src="img/big.jpg">	</div></body></html>

XML

什麼是 xml？

xml 是可擴展的標記性語言。

xml的作用?

1、用來保存數據，而且這些數據具有自我描述性

2、它還可以做為項目或者模塊的配置文件

3、還可以做為網絡傳輸數據的格式（現在 JSON 為主）

xml 語法

文檔聲明。
元素（標籤）
xml 屬性
xml 注釋
文本區域（CDATA 區）

Xml命名規則

1、元素的名字可以包含字母、數字、和其他字符

2、元素的名字不能以xml（XML、Xml、xML等）開頭

3、元素的名字不能以數字或者標點符號開頭

4、元素的名字不能包含空格

5、XML文檔除了XML以外，沒有其他所謂的保留字，任何的名字都可以使用，但是應該盡量使元素名字具有可讀性，名字使用下劃線是個不錯的選擇

6、盡量避免使用”-“和”.”，因為可能引起混亂。

7、在XML元素命名中不要使用」:」,因為XML命名空間需要用到這個十分特殊的字符。

xml 屬性

xml 的標籤屬性和 html 的標籤屬性是非常類似的，屬性可以提供元素的額外信息

在標籤上可以書寫屬性：

一個標籤上可以書寫多個屬性。每個屬性的值必須使用引號引起來。

屬性的規則和標籤的書寫規則一致。

語法規則

所有 XML 元素都須有關閉標籤（也就是閉合）

XML 標籤對大小寫敏感
XML 必須正確地嵌套
XML 文檔必須有根元素
1. 根元素就是頂級元素，
2. 沒有父標籤的元素，叫頂級元素。
3. 根元素是沒有父標籤的頂級元素，而且是唯一一個才行。
XML 的屬性值須加引號
文本區域（CDATA 區）

CDATA 語法可以告訴 xml 解析器，我 CDATA 里的文本內容，只是純文本，不需要 xml 語法解析

CDATA 格式：
```
<![CDATA[ 這裡可以把你輸入的字符原樣顯示，不會解析 xml ]]>
```

xml解析技術

xml 可擴展的標記語言。

不管是 html 文件還是 xml 文件它們都是標記型文檔，都可以使用 w3c 組織制定的 dom 技術來解析。

document 對象表示的是整個文檔（可以是 html 文檔，也可以是 xml 文檔）

早期 JDK 為我們提供了兩種 xml 解析技術 DOM 和 Sax 簡介（已經過時，但我們需要知道這兩種技術）

dom 解析技術是 W3C 組織制定的，而所有的編程語言都對這個解析技術使用了自己語言的特點進行實現。

Java 對 dom 技術解析標記也做了實現。

sun 公司在 JDK5 版本對 dom 解析技術進行升級：SAX（ Simple API for XML ）

SAX 解析，它跟 W3C 制定的解析不太一樣。它是以類似事件機制通過回調告訴用戶當前正在解析的內容。它是一行一行的讀取 xml 文件進行解析的。不會創建大量的 dom 對象。

所以它在解析 xml 的時候，在內存的使用上。和性能上。都優於 Dom 解析。

第三方的解析：

jdom 在 dom 基礎上進行了封裝、dom4j 又對 jdom 進行了封裝。

pull 主要用在 Android 手機開發，是在跟 sax 非常類似都是事件機制解析 xml 文件。

這個 Dom4j 它是第三方的解析技術。我們需要使用第三方給我們提供好的類庫才可以解析 xml 文件。

dom4j 解析技術

dom4j 編程步驟

先加載 xml 文件創建 Document 對象
通過 Document 對象拿到根元素對象
通過根元素.elelemts(標籤名); 可以返回一個集合，這個集合里放着。所有你指定的標籤名的元素對象
找到你想要修改、刪除的子元素，進行相應在的操作
保存到硬盤上

 @Test    public void test1() throws DocumentException {        // 要創建一個 Document 對象，需要我們先創建一個 SAXReader 對象        SAXReader saxReader = new SAXReader();        // 這個對象用於讀取 xml 文件，然後返回一個 Document。        Document document = saxReader.read("src/books.xml");        System.out.println(document);    }    @Test    public void test2() throws DocumentException {        //1.讀取books.xml        SAXReader saxReader = new SAXReader();        //2.在junit測試中，相對路徑是從模塊開始算 獲取document對昂        Document document = saxReader.read("src/books.xml");        //通過document獲取根元素        Element rootElement = document.getRootElement();        //通過根元素獲取book標籤對象        //element和elements都是通過標籤名查找子元素 多個用s        List<Element> books = rootElement.elements("book");        //遍歷輸出        for(Element book:books){            //asxml()把標籤對象轉換為標籤字符串            Element nameElement = book.element("name");            //System.out.println(nameElement.asXML());            //getText()可以獲取標籤中的文本內容           String nameText = nameElement.getText();            //System.out.println(name);            //elementText 直接獲取指定標籤名的文本內容            String priceText =  book.elementText("price");            String authorText = book.elementText("name");            String snValue = book.attributeValue("sn");            System.out.println(new Book(snValue,nameText,authorText,Double.parseDouble(priceText)));        }    }

Tags: JAVA