本博客為學習JavaWeb中的路線筆記，學習地址B站，為了學習專案開發------2021.7.12

文章目錄

** JavaWeb **
- 一、H5、CSS、JavaScript查缺補漏
- - 1. HTML
  - 2. CSS
  - 3. JavaScript
- 二、PHP
- - HTML --》 PHP
  - PHP接收
  - - 1. 讀取資料
    - 2. 插入資料
- 三、jQuery
- - 1. 語法
  - - 1.1 雜
    - 1.2 jQuery物件的方法
    - 1.3 回圈
    - 1.4 確認彈窗
  - 2. 選擇器
  - - 2.1 基本選擇器
    - 2.2 層級選擇器
    - 2.3 過濾選擇器
    - - 1. 基本過濾選擇器
      - 2. 內容過濾器
      - 3. 屬性過濾選擇器
      - 4. 表單過濾器
      - 5. 表單物件屬性
  - 3. 篩選
  - 4. 屬性
  - - 4.1 HTML代碼/文本/值
    - 4.2 屬性
  - 5. 增刪改操作
  - - 5.1 內部插入
    - 5.2 外部插入
    - 5.3 替換
    - 5.4 洗掉
  - 6. CSS
  - 7. 影片操作
  - - 7.1 基本影片
    - 7.2 淡入淡出影片
  - 8. 事件操作
  - - 8.1 事件的冒泡
    - 8.2 事件物件
    - 樣例：圖片跟隨
- 四、XMl
- - 1. 語法

JavaWeb

學習開始日期：2021.7.12

7.12初學

? 復習了HTML前半部

7.13 三個基礎完成

? 完成了js的大部分

7.14 完成js

? 去老家，晚上回來完成js，

7.21 完成js

? 今天才真正完成了js，暫時不準備繼續javaweb了，感覺我現在學微信小程式比較好，因為干活的這邊可以也搞微信小程式，
— 后來還是選中繼續弄javaweb

8.4 完成jQuery的75%

? 這幾天一直在場子，大概一天看5個左右.
8.5 完成jQuery，計劃今天學完xml

一、H5、CSS、JavaScript查缺補漏

1. HTML

1.1 標簽

名稱	作用	備注
<hr/>	水平線
<br/>	換行
<h1>	標題標簽	位置：align=`left center right`
<a>	超鏈接	href 地址 target 新打開視窗= `"_self"`當前視窗 `"_blank"`新視窗
<ul>	串列	type 串列項前面的符號
<img />	圖片	border邊框大小 alt當路徑找不到圖片時，用來代替的文字
<table>	表格	align 表格相對于界面的位置 cellspacing 間距（=0不是重疊，是相鄰） css邊框合并：`border-collapse: collapse;`
<tr>	表格行	align 一行元素在表格中的位置
<td>	表格列	align 某一個元素在表格中的位置 rowspan=“2” 內容跨越兩行 colspan=“2” 內容跨越兩行
<th>	有設定的列標簽	相當于align="center"和<b>
<b>	加粗

**1.2 字符物體

更全的：傳送門

常用的幾個：

顯示結果	描述	物體名稱	物體編號
	空格
<	小于號	<	<
>	大于號	>	>

**1.3 路徑

相對路徑的點的寫法，這個是web的寫法

. 當前檔案所在的目錄

… 當前檔案所在的上一級目錄

檔案名當前檔案所在目錄的檔案，想當于 ./檔案名而./ 可以省略

**1.4 標簽基本屬性

bgcolor – 直接設定背景顏色
onclick – 直接寫javascript的代碼 and 呼叫javascript函式

<body bgcolor="#7fffd4" onclick = "alert('你好');">
	你好
    <div style = "border: 1px solid red">
       123
    </div>
</body>

**1.5 iframe

在頁面上開辟一個小區域顯示一個單獨的界面

利用超鏈接標簽，設定顯示的區域

iframe設定name屬性，a標簽的target設定iframe的name

<iframe src="./other/tao.html" width="1000" height="1000" name="if"></iframe>
<br/>
<a href="other/tao.html" target="if">淘寶</a>
<br/>
<a href="other/index.html" target="if">163郵箱</a>

2. CSS

格式：

選擇器{
    屬性: 值;
	font-size: 30px;
}

引入css檔案：在head中加入link標簽

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

選擇器

標簽名選擇器

應用于所有的"標簽名"

標簽名{
    屬性: 值;
}
div{
    border: 1px solid red;
}

id選擇器

#id名{
    屬性: 值;
}
#id001{
    border: 1px solid red;
}

應用：
<div id = "id001">我是一個div</div>

class選擇器

.class名{
    屬性: 值;
}
.class01{
    border: 1px solid red;
}

應用：
<div class = "class01">我是一個div</div>

組合選擇器

選擇器1,選擇器2,選擇器n{
    屬性: 值;
}
.class01 , #id001{
    border: 1px solid red;
}
應用：
<div id = "id001">我是一個div</div>
<div class = "class01">我是一個div</div>

3. JavaScript

引入JS檔案：

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

3.1 變數

雖然是弱型別，但是其實內部是有型別的區別的，

變數型別：

? 數值型別: number
? 字串型別： string
? 物件型別： object
? 布爾型別： boolean
? 函式型別： function

特殊值：

? undefined 未定義，所有js變數沒有初始值時都是undefined
? null 空值
? NAN Not a Number 非數字，非數值，(假如數字和字串運算)

查看變數的型別：

var i = 1;
typeof(i);

所有變數，都可以作為一個Boolean型別的變數使用，認為是false的情況：
0
null
undefined
"" （空串）

3.2 關系運算

1、

等于	==	簡單的做字面值的比較
全等于	===	還比較兩個變數的資料型別

        var a = 1;
        var b = "1";
        alert(a == b);  // true
        alert(a === b); // false

2、

&&運算式全為真	回傳最后一個運算式的值
&&有一個運算式為假	回傳第一個為假的運算式的值

        alert(true && "abc");   // abc
        alert("abc" && null);  // null

3、

\|\|運算式全為假	回傳最后一個運算式的值
\|\|只有一個是真	回傳第一個為真的運算式的值

其實&&和||也就是，回傳第一個能判斷整個運算值的那個運算式

3.3 陣列

定義格式：

var 陣列名 = [];
var arr = [1,'abc',true];

只要對陣列下標進行賦值，那么就會自動給陣列做擴容操作，

        var arr = ['111'];
        alert( arr.length + "   " + arr[0]); // 111 1
        arr[3] = "123";
        alert(arr.length + "  " + arr[3]);	 // 4 123
        alert(arr[1]);                     	 // undefined

遍歷：

        var a = ['1', 2, false];
        var s = "";
        for (var i = 0; i < a.length; i++) {
            s += "  " + a[i];
        }
        alert(s); //   1  2  false

3.4 函式

兩種定義方法：

function 函式名(引數){    }

function f(a,b){
    alert(a + ' ' + b);
    return a;
}
形參不需要定義，回傳值也不需要

var 函式名 = function(引數){		}

不管是有參無參或者是有回傳值，都和第一種沒有區別

arguments：

如同陣列一樣使用即可，他的值是呼叫時傳的值，

        function f() {
            alert(arguments.length);
            // 像陣列一樣操作
            var ans = "";
            for (var i = 0; i < arguments.length; i++) {
                ans += "  " + arguments[i];
            }
            alert(ans);
        }

        f(1, 2, 3, 4);

3.5 物件

物件的定義：

var 變數名 = new Object();				// 物件實體（空物件）
變數名.屬性 = 值;						  // 定義一個屬性
變數名.函式名 = function(){};			  // 定義一個函式

物件的訪問：

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

        var obj = new Object();
        obj.name = "文仔";
        obj.age = 18;
        obj.f = function () {
            alert("name = " + obj.name + "  age = " + obj.age);
        }
        obj.f();

對于定義，也可以：

var 變數名 = {};		// 空物件
var 變數名 = {
    屬性: 值,			// 定義一個屬性
    屬性: 值,			// 每個之間加“,” 最后一個不加
    函式名: function(){}
};

        var obj = {
            name: "哥哥",
            age: 18,
            fun: function () {
                alert("name = " + obj.name + "  age = " + obj.age);
            }
        };
        obj.fun();

3.6 事件

事件	名稱	備注
onload	加載完成事件	界面加載完成之后，常用于做界面的js代碼初始化操作
onclick	單機事件	常用于按鈕的點擊相應操作
onblur	失去焦點事件	常用于輸入框失去焦點后驗證其輸入內容是否合法
onchange	內容發生變化操作	常用于下拉串列和和輸入框內容發生改變后操作
onsubmit	表單提交事件	常用于表單提交前，驗證所有表單項是否合法

1. 事件的注冊（系結）

告訴瀏覽器，當事件相應后要執行哪一些代碼

分為靜態注冊和動態注冊兩種;

靜態注冊事件：通過html標簽的事件屬性直接賦予事件回應后的代碼，
動態注冊事件：先通過js代碼得到標簽的dom物件，然后再通過dom物件.事件名=function(){}，

動態注冊的步驟：

獲取標簽物件
標簽物件.事件名 = function(){};

2. oncload事件

靜態

 function onloadFun() {
            alert("靜態注冊onload事件");
        }

<body onl oad="onloadFun();"></body>

動態

        window.onload = function () {
            alert("動態注冊");
        }

2. onclick事件

    <script type="text/javascript">
        function onclickFun() {
            alert("靜態注冊");
        }

        window.onload = function () {
            // 1. 獲取標簽物件
            var btnobj = document.getElementById("btn02");			// z
            // 2. 標簽名.事件名 = function(){}
            btnobj.onclick = function () {
                alert("動態注冊");
            }
        }
    </script>
    
    
	<body>
		<button onclick="onclickFun()">按鈕1</button>
		<button id="btn02">按鈕2</button>
	</body>

3. onblur事件

不寫靜態注冊了，簡潔一些；

靜態注冊就是在html標簽里面呼叫；

動態就是在window.onload = function () {} 里面宣告

        window.onload = function () {
            var pass = document.getElementById("pass");
            var text = document.getElementById("text");
            pass.onblur = function (){
                alert(pass.value);
            }
            text.onblur  = function (){
                alert(text.value);
            }
        }
        
<body>
	<form>
   		<input type="text" id="text"/>
    	<input type="password" id="pass"/>
	</form>
</body>

4. onchange事件

        window.onload = function () {
            var onChangeObj = document.getElementById("select");
            onChangeObj.onchange = function () {
                alert(onChangeObj.value);
            }
        }
        
        
	<body>
		<select id="select">
    		<option>國家</option>
    		<option>中國</option>
    		<option>日本</option>
    		<option>美國</option>
		</select>
	</body>

5. onsubmit事件

 <script type="text/javascript">
        <!--靜態注冊-->
        function onsubFun() {
            var text = document.getElementById("text");
            if (text.value.length < 6) {
                alert("不符合規范");
                return false;
            }
        }

        window.onload = function () {
            var formObj = document.getElementById("form02");
            formObj.onsubmit = function () {
                var text = document.getElementById("te");
                if (text.value.length < 6) {
                    alert("不符合規范");
                    return false;
                }
            }
        }
    </script>


<body>
	<form action="http://www.baidu.com" method="get" onsubmit="return onsubFun()">
    	<input type="text" name="text" id="text"/>
    	<input type="submit" value="靜態注冊"/>
	</form>
	<br/>
	<br/>
	<form action="http://www.baidu.com" id="form02">
    	<input type="text" name="text" id="te"/>
    	<input type="submit" value="動態注冊"/>
	</form>
</body>

3.7 DOM 模型

就是把檔案中的標簽，屬性，文本，轉換成物件來管理，

DOM物件常用的方法：

方法	描述
close	關閉用 document.open() 方法打開的輸出流，并顯示選定的資料，
getElementById()	回傳對擁有指定 id 的第一個物件的參考，
getElementsByName	回傳帶有指定名稱的物件集合，
getElementsByTagName	回傳帶有指定標簽名的物件集合，
open	打開一個流，以收集來自任何 document.write() 或 document.writeln() 方法的輸出，
write	向檔案寫 HTML 運算式或 JavaScript 代碼，
writeln	等同于 write() 方法，不同的是在每個運算式之后寫一個換行符

1. 樣例：驗證用戶名

5-12位，且包含下劃線、字母、數字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MOMO的網址</title>
    <script type="text/javascript">
        window.onload = function () {
            var btn = document.getElementById("bt");
            var text = document.getElementById("text");
            btn.onclick = function () {
                var userText = text.value;
                /*
                *   test方法用來測驗字串是否符合自己的規則
                 */
                var patt = /^\w{5,12}$/;
                if (patt.test(userText))
                    alert("提交成功");
                else
                    alert("提交失敗");
            }
        }
    </script>
</head>
<body>
<form>
    <input id="text" type="text"/>
    <input id="bt" type="button" value="校驗"/>
</form>
</body>

</html>

2. 正則運算式物件regexp

傳送門

語法傳送門

創建正則運算式物件：

var patt=new RegExp(pattern運算式,modifiers修飾符);

或更簡單的方法

var patt=/pattern/modifiers;

修飾符

修飾符用于執行區分大小寫和全域匹配:

修飾符	描述
i	執行對大小寫不敏感的匹配，
g	執行全域匹配（查找所有匹配而非在找到第一個匹配后停止），
m	執行多行匹配，

運算式

方括號用于查找某個范圍內的字符：

運算式	描述
[abc]	查找方括號之間的任何字符，
[^abc]	查找任何不在方括號之間的字符，
[0-9]	查找任何從 0 至 9 的數字，
[a-z]	查找任何從小寫 a 到小寫 z 的字符，
[A-Z]	查找任何從大寫 A 到大寫 Z 的字符，
[A-z]	查找任何從大寫 A 到小寫 z 的字符，
[adgk]	查找給定集合內的任何字符，
[^adgk]	查找給定集合外的任何字符，

應該都是是否包含以上的條件；

包含 true

不包含 false

元字符：

是擁有特殊含義的字符：

元字符	描述
.	查找單個字符，除了換行和行結束符，
\w	查找數字、字母及下劃線，
\W	查找非單詞字符，
\d	查找數字，
\D	查找非數字字符，
\s	查找空白字符，
\S	查找非空白字符，
\b	匹配單詞邊界，
\B	匹配非單詞邊界，
\0	查找 NULL 字符，
\n	查找換行符，
\f	查找換頁符，
\r	查找回車符，
\t	查找制表符，
\v	查找垂直制表符，
\xxx	查找以八進制數 xxx 規定的字符，
\xdd	查找以十六進制數 dd 規定的字符，
\uxxxx	查找以十六進制數 xxxx 規定的 Unicode 字符，

量詞：

量詞	描述
n+	匹配任何包含至少一個 n 的字串，例如，/a+/ 匹配 “candy” 中的 “a”，“caaaaaaandy” 中所有的 “a”，
n*	匹配任何包含零個或多個 n 的字串，例如，/bo*/ 匹配 “A ghost booooed” 中的 “boooo”，“A bird warbled” 中的 “b”，但是不匹配 “A goat grunted”，
n?	匹配任何包含零個或一個 n 的字串，例如，/e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”，
n{X}	匹配包含 X 個 n 的序列的字串，例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的兩個 “a”，且匹配 “caaandy.” 中的前兩個 “a”，
n{X,}	X 是一個正整數，前面的模式 n 連續出現至少 X 次時匹配，例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”，
n{X,Y}	X 和 Y 為正整數，前面的模式 n 連續出現至少 X 次，至多 Y 次時匹配，例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，“caandy,” 中的兩個 “a”，匹配 “caaaaaaandy” 中的前面三個 “a”，注意，當匹配 “caaaaaaandy” 時，即使原始字串擁有更多的 “a”，匹配項也是 “aaa”，
n$	匹配任何結尾為 n 的字串，
^n	匹配任何開頭為 n 的字串，
?=n	匹配任何其后緊接指定字串 n 的字串，
?!n	匹配任何其后沒有緊接指定字串 n 的字串，

runoo+b，可以匹配 runoob、runooob、runoooooob 等，+ 號代表前面的字符必須至少出現一次（1次或多次），
runoo*b，可以匹配 runob、runoob、runoooooob 等，* 號代表前面的字符可以不出現，也可以出現一次或者多次（0次、或1次、或多次），
colou?r 可以匹配 color 或者 colour，? 問號代表前面的字符最多只可以出現一次（0次、或1次），

判斷輸入是否符合規范

innerHTML屬性：標識起始標簽和結束標簽中的內容 – 可讀 – 可寫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MOMO的網址</title>
    <script type="text/javascript">
        window.onload = function () {
            var patt = /^\w{5,8}$/;
            var usernameObj = document.getElementById("userid");
            usernameObj.onblur = function () {
                var usernameSpanObj = document.getElementById("useridSpan");
                if (patt.test(usernameObj.value) == false) {
                    usernameSpanObj.innerHTML = "不符合規范";
                }else {
                    usernameSpanObj.innerHTML = "";
                }

            }
        }

    </script>
</head>
<body>
<form>
    <input type="text" id="userid">
    <span id="useridSpan" style="color: red"></span>
</form>
</body>

</html>

后面跟著圖片：

    <script type="text/javascript">
        window.onload = function () {
            var patt = /^\w{5,8}$/;
            var usernameObj = document.getElementById("userid");
            usernameObj.onblur = function () {
                var usernameSpanObj = document.getElementById("useridSpan");
                if (patt.test(usernameObj.value) == false) {
                    usernameSpanObj.innerHTML = "<img src=\"https://z3.ax1x.com/2021/07/21/WU66HO.png\" height='25px'>";
                } else {
                    usernameSpanObj.innerHTML = "<img src=\"https://z3.ax1x.com/2021/07/21/WU6yDK.png\" height='25px'>";
                }

            }
        }

    </script>

3. 方法：getElementsByName()

回傳的是多個，也就是一個包含多個標簽物件的集合

這個集合的操作跟陣列一樣

集合中每個元素都是dom物件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MOMO的網址</title>
    <script type="text/javascript">
        function checkAll() {
            var hobies = document.getElementsByName("hobby");
            for (var i = 0; i < hobies.length; i++) {
                hobies[i].checked = true;
            }
        }

        function checkNo() {
            var hobies = document.getElementsByName("hobby");
            for (var i = 0; i < hobies.length; i++) {
                hobies[i].checked = false;
            }
        }

        function checkReverse() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = !hobbies[i].checked;
            }
        }
    </script>
</head>
<body>
<input type="checkbox" name="hobby" value="cpp">C++
<input type="checkbox" name="hobby" value="JS">JS
<input type="checkbox" name="hobby" value="Java">Java
<br/>
<button onclick="checkAll()">全選</button>
<button onclick="checkNo()">全不選</button>
<button onclick="checkReverse()">反選</button>
</body>

</html>

**getElementsByTagName ：**按照標簽名進行查詢，并回傳集合，

document查詢的方法就是這三個，

    <script type="text/javascript">
        function checkAll() {
            var hobies = document.getElementsByTagName("input");
            for (var i = 0; i < hobies.length; i++) {
                hobies[i].checked = true;
            }
        }

        function checkNo() {
            var hobies = document.getElementsByTagName("input");
            for (var i = 0; i < hobies.length; i++) {
                hobies[i].checked = false;
            }
        }

        function checkReverse() {
            var hobies = document.getElementsByTagName("input");
            for (var i = 0; i < hobies.length; i++) {
                hobies[i].checked = !hobies[i].checked;
            }
        }
    </script>

3.8 節點的常用屬性和方法

節點就是標簽物件

1. 方法

通過具體的元素節點呼叫：

getElementByTagName();

獲取當前節點的指定標簽名孩子節點

appendChild
為當前節點添加一個新的子節點,放在最后的子節點后
cloneNode
回傳當前節點的拷貝
createAttribute
創建新的屬性
createCDATASection
創建包括給定資料的CDATA段
createComment
創建一個注釋節點
createDocumentFragment
創建DocumentFragment物件
createElement 創建一個元素節點
createEntityReference
創建EntityReference物件
createNode
創建給定型別,名字和命名空間的節點
createPorcessingInstruction
創建操作指令節點
createTextNode
創建包括給定資料的文本節點
getElementsByTagName
回傳指定名字的元素集合
hasChildNodes
回傳當前節點是否有子節點
insertBefore
在指定節點前插入子節點
Load
匯入指定位置的XML檔案
loadXML
匯入指定字串的XML檔案
removeChild
從子結點串列中洗掉指定的子節點
replaceChild
從子節點串列中替換指定的子節點
Save
把XML檔案存到指定節點
selectNodes
對節點進行指定的匹配,并回傳匹配節點串列
selectSingleNode
對節點進行指定的匹配,并回傳第一個匹配節點
transformNode
使用指定的樣式表對節點及其后代進行轉換
transformNodeToObject
使用指定的樣式表將節點及其后代轉換為物件

2. 屬性

childNodes

獲取當前節點的所有子節點串列(只讀)
Attributes

獲取節點的屬性串列(只讀)，即HTML中標簽上的屬性值a.attributes[0].value
dataType
回傳此節點的資料型別
Definition
以DTD或XML模式給出的節點的定義(只讀)
Doctype
指定檔案型別節點(只讀)
documentElement
回傳檔案的根元素(可讀寫)
firstChild
回傳當前節點的第一個子節點(只讀)
Implementation
回傳XMLDOMImplementation物件
lastChild
回傳當前節點最后一個子節點(只讀)
nextSibling
回傳當前節點的下一個兄弟節點(只讀)
nodeName
回傳節點的名字(只讀)
nodeType
回傳節點的型別(只讀)
nodeTypedValue
存盤節點值(可讀寫)
nodeValue
回傳節點的文本(可讀寫)
ownerDocument
回傳包含此節點的根檔案(只讀)
parentNode
回傳父節點(只讀)
Parsed
回傳此節點及其子節點是否已經被決議(只讀)
Prefix
回傳名稱空間前綴(只讀)
preserveWhiteSpace
指定是否保留空白(可讀寫)
previousSibling
回傳此節點的前一個兄弟節點(只讀)
Text
回傳此節點及其后代的文本內容(可讀寫)
url
回傳最近載入的XML檔案的URL(只讀)
Xml
回傳節點及其后代的XML表示(只讀)
nextSibling
回傳相領的節點
innerHTML
獲取/設定起始標簽和結束標簽中的內容
innerText
獲取/設定起始標簽和結束標簽中的文本

二、PHP

HTML --》 PHP

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>form提交</title>
		<script>
			function f1() {
				var request = new XMLHttpRequest(); //建立request請求

				request.open('post', 'test.php'); //發送物件是boke.php 發送post

				request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //請求頭 默認即可

				var name = form1.name.value; //獲取文本框內輸入的內容

				request.send("name=" + name); //發送request請求 請求可以有多個post 格式：key1=value1&key2=value2 php端根據key取出value
				//確認接收訊息
				request.onreadystatechange = function() {
					// readyState=4為php收到并回傳值 status為回傳欄位為200火304
					if (request.readyState == 4 && (request.status == 200 || request.status == 304)) {
						//彈出視窗顯示php回傳的值
						alert(request.responseText);
					}
				}

			}
		</script>
	</head>
	<body>
		<form id="form1">
			<input type="text" name="name">
			<!--    點擊按鈕呼叫js的f1方法-->
			<input type="submit" onclick="f1()">
		</form>
	</body>
</html>

PHP接收

$_POST['name']

1. 讀取資料

<?php
$servername = "127.0.0.1";
$username = "root";
$password = "623724";
$dbname = "test_db";

// 創建連接
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("連接失敗: " . $conn->connect_error);
} 
 
$sql = "SELECT col from test";
$result = $conn->query($sql);
 
if ($result->num_rows > 0) {
    // 輸出資料
    while($row = $result->fetch_assoc()) {
        echo "col: " . $row["col"]. "<br>";
    }
} else {
    echo "0 結果";
}
$conn->close();
?>

2. 插入資料



<?php
$servername = "localhost";
$username = "root";
$password = "623724";
$dbname = "test_db";
 
// 創建連接
$conn = new mysqli($servername, $username, $password, $dbname);
// 檢測連接
if ($conn->connect_error) {
    die("連接失敗: " . $conn->connect_error);
} 
 
$sql = "INSERT INTO test VALUES ('".$_POST['name']."')";
 
if ($conn->query($sql) === TRUE) {
    echo "新記錄插入成功";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}
 
$conn->close();
?>

三、jQuery

就是Javascript和查詢（Query）

1. 語法

1.1 雜

頁面加載完之后：

$(function () {})     ------>		window.onload = function () {}

全寫：$(document).ready(  function () {}  )

HelloWord

        <script type="text/javascript">
            // 表示頁面加載完成之后 相當于      window.onload = function () {}
            $(function () {
            // 獲取Id元素
                var $btnObj = $("#btn01");
                $btnObj.click(function (){
                    alert("JQuery單機");
                });

            });
        </script>

JQuery核心函式 $()

傳入引數為【函式】時

? 表示頁面加載完成之后，相當于 window.onload = function () {}

傳入引數為【HTML字串】時

? 根據這個字串創建元素節點物件

        <script type="text/javascript">
            // 表示頁面加載完成之后 相當于      window.onload = function () {}
            $(function () {
                // 新加入btn02
                $("<button id=\"btn02\">測驗按鈕02</button>\n").appendTo("body");

                // 為新加的btn02設定點擊事件
                $("#btn02").click(function () {
                    alert("123");
                });
            });

        </script>

傳入引數為【選擇器字串】時
1. $("#id屬性值")
2. $(“標簽名”)
3. $(".class屬性值")
傳入引數為【DOM物件】時

? 會把DOM物件轉換成jQuery物件

? jQuery物件是dom物件的陣列 + jQuery提供的一系列功能函式

接4：dom物件和jQuery物件使用的區別

dom物件的方法jQuery物件是用不了的
jQuery物件的方法dom物件是用不了的
可以將jQuery物件作為陣列使用，$jq_name[i] 直接就可以呼叫

        <script type="text/javascript">
            $(function () {
                var $btn = $("#btn01");
                // 這樣就是一個dom物件了
                alert($btn[0].innerText);
            });
        </script>

Dom物件和jQuery物件互轉
1. dom --> jQuery
  1. 先有DOM物件
  2. $(DOM物件)就可以轉換成jQuery物件
2. jQuery --> dom
  1. 先有jQuery物件
  2. jQuery物件[下標] 取出相應的DOM物件

除了上面三種基本選擇器，還有一種是組合選擇器

將每一個選擇器匹配到的元素合并后一起回傳，你可以指定任意多個選擇器，并將匹配到的元素合并到一個結果內，

HTML:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>

jQuery:
$("div,span,p.myClass")
div標簽，span標簽，p標簽的class是myClass的元素


結果：
[ <div>div</div>, 
 <p class="myClass">p class="myClass"</p>,
 <span>span</span> ]
 
結果的順序是HTML中的順序！！！

1.2 jQuery物件的方法

css()方法

直接設定css樣式
$("#div01").css("background-color", "#bbffaa");

attr()方法

修改屬性值，.attr(name, value)
val()

可以操作表單項的value屬性值，可以設定和獲取

1.3 回圈

使用each方法：obj.each(套函式);

this就是當前的物件

例子?：獲取當前勾選的多選框

html：

		<button id="btn01">確定</button>
        <input type="checkbox" name="c" value="1">1
        <input type="checkbox" name="c" value="2">2
        <input type="checkbox" name="c" value="3">3
        <input type="checkbox" name="c" value="4">4

js：

 $(function () {
                $("#btn01").click(function ()    {
                    var $checkboxs = $(":checkbox:checked");
                    $checkboxs.each(function () {
                        alert(this.value);			// 當前的物件
                    })
                });
            });

1.4 確認彈窗

點擊“確認”–回傳true

點擊“取消”–回傳false

confirm("你好呀")

2. 選擇器

2.1 基本選擇器

在1.3中

2.2 層級選擇器

在給定的祖先元素下匹配所有的后代元素HTML 代碼:

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery 代碼:

$("form input")

結果:

[ <input name="name" />, <input name="newsletter" /> ]

parent > child ：在給定的父元素下匹配所有的子元素（低一級）

? HTML 代碼:

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />  // 這個不是子級元素
 </fieldset>
</form>
<input name="none" />

jQuery 代碼:

$("form > input")

結果:

[ <input name="name" /> ]

prev + next ：匹配所有緊接在 prev 元素后的 next 元素 (prev后面的一個元素，成對)

HTML 代碼:

<form>
  <label>Name:</label>
  <input name="name" />			// 1
  <input name="name02" />		// 這個不算
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />	// 2
 </fieldset>
</form>
<input name="none" />

jQuery 代碼:

$("label + input")

結果:

[ <input name="name" />, <input name="newsletter" /> ]

prev ~ siblings ：匹配 prev 元素之后的所有 siblings 元素**（同輩的所有）**

HTML 代碼:

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery 代碼:

$("form ~ input")

結果:

[ <input name="none" /> ]

2.3 過濾選擇器

1. 基本過濾選擇器

:first

獲取第一個元素

HTML 代碼:

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery 代碼:

$('li:first');

結果:

[ <li>list item 1</li> ]

:last()

獲取最后個元素

HTML 代碼:

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery 代碼:

$('li:last')

結果:

[ <li>list item 5</li> ]

:not(selector)

去除所有與給定選擇器匹配的元素

在jQuery 1.3中，已經支持復雜選擇器了（例如:not(div a) 和 :not(div,a)）

HTML 代碼:

<input name="apple" />
<input name="flower" checked="checked" />

jQuery 代碼:

$("input:not(:checked)")

結果:

[ <input name="apple" /> ]

:even

先找到所有此標簽的元素序列，但是只回傳偶數下標的元素(0,2,4…); 也就是第1，3，5個…

HTML 代碼:
```
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
```
jQuery 代碼:
```
$("tr:even")
```

結果:

[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]

:odd

奇數下標：用法同even

:eq(index)

HTML 代碼:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代碼:

$("tr:eq(1)")

結果:

[ <tr><td>Value 1</td></tr> ]

:gt(index)

匹配所有大于給定索引值的元素

HTML 代碼:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代碼:

$("tr:gt(0)")

結果:

[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]

:lt(index)

匹配所有小于給定索引值的元素，用法同gt
:header

匹配如 h1, h2, h3之類的標題元素

$(":header").css("background", "#EEE");

:animated

匹配所有正在執行影片效果的元素

2. 內容過濾器

過濾器	作用	用法
:contains(text)	匹配包含給定文本的元素	`$("div:contains('John')")` 只要包含’John’的div
:empty	匹配所有不包含子元素或者文本的空元素	`$("td:empty")` 空的td
:parent	匹配含有子元素或者文本的元素	就是非空的
:has(selector)	匹配含有選擇器所匹配的元素的元素	`$("div:has(p)")` 查找包含p標簽的div

3. 屬性過濾選擇器

過濾器	作用	用法
[attribute]	匹配包含給定屬性的元素，	`$("div[id]")` 有id屬性的div
[attribute=value]	匹配給定的屬性是某個特定值的元素	`$("input[name='newsletter']").attr("checked", true);` 查找所有 name 屬性是 newsletter 的 input 元素
[attribute!=value]	匹配所有不含有指定的屬性，或者屬性不等于特定值的元素，	同上；注意沒有這個屬性的也被選中
[attribute^=value]	匹配給定的屬性是以某些值開始的元素	下面：

HTML 代碼:
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />

jQuery 代碼:
$("input[name^='news']")

結果:
[ <input name="newsletter" />, <input name="newsboy" /> ]

[attribute$=value]	匹配給定的屬性是以某些值結尾的元素	同上
[attribute=value]*	匹配給定的屬性是以包含某些值的元素	`$("input[name*='man']")` 查找所有 name 包含 ‘man’ 的 input 元素
[selector1][selector2][selectorN]	復合屬性選擇器，需要同時滿足多個條件時使用，	`$("input[id][name$='man']")` 找到所有含有 id 屬性，并且它的 name 屬性是以 man 結尾的

4. 表單過濾器

就是過濾幾個表單，

:input 匹配所有的input元素
:text 匹配type是text的表單元素

其他的表單也是這樣

例子：查找所有文本框

HTML 代碼:

<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

jQuery 代碼:

```js
$(":text")
```

 結果:

```js
[ <input type="text" /> ]
```

5. 表單物件屬性

:enabled

匹配所有可用元素,就是正常元素
```
$("input:enabled")
```
:disabled

匹配所有不可用元素

HTML 代碼:

<form>
  <input name="email" disabled="disabled" />		// 通過disabled設定
  <input name="id" />
</form>

jQuery 代碼:

$("input:disabled")

結果:

[ <input name="email" disabled="disabled" /> ]

:checked

匹配所有選中的被選中元素(復選框、單選框等，不包括select中的option)

:selected

匹配所有選中的option元素

HTML 代碼:

<select>
  <option value="1">Flowers</option>
  <option value="2" selected="selected">Gardens</option>
  <option value="3">Trees</option>
</select>

jQuery 代碼:

$("select option:selected")
層級選擇器 + 過濾選擇器

結果:

[ <option value="2" selected="selected">Gardens</option> ]

樣例：

html:

        <button id="btn01">確定</button>
        <select multiple="multiple"> // 可以多選
            <option>張崇文</option>
            <option selected="selected">齊文欣</option>
            <option>爸爸</option>
            <option>媽媽</option>
        </select>

js:

            $(function () {
                $("#btn01").click(function ()    {
                    $selectes = $("select option:selected");
                    $selectes.each(function () {
                        alert(this.innerText);
                    })
                });
            });

3. 篩選

過濾
- eq(index|-index)
  - $("p").eq(1),p標簽中的第二個
- first()
- last()
- filter(expr|obj|ele|fn)
  - 篩選出與指定運算式匹配的元素集合，
    
    這個方法用于縮小匹配的范圍，用逗號分隔多個運算式
    
    里面就可以寫多個過濾器條件
- is(expr|obj|ele|fn)
  - 根據選擇器、DOM元素或 jQuery 物件來檢測匹配元素集合，如果其中至少有一個元素符合這個給定的運算式就回傳true，也可以寫一個函式，回傳true或false
- has(expr|ele)
  - 回傳含有指定元素的元素
- not(expr|ele|fn)
  - 洗掉所匹配選擇器的元素
查找
- children([expr])
  - 查詢匹配的子元素
- find(expr|obj|ele)
  - 匹配的后代的元素
- next([expr])
  - 回傳當前元素的下一個兄弟元素
- nextall([expr])
  - 回傳當前元素后面的 所有兄弟元素
- nextUntil([exp|ele][,fil])
  - 一個區間：(當前元素, 匹配的元素) 左開右開
- parent([expr])
  - 回傳父元素
- prev([expr])
  - 回傳當前元素的上一個兄弟元素
- prevall([expr])
  - 回傳當前元素的前面全部的的元素
- prevUntil([exp|ele][,fil])
  - (匹配的元素，當前元素)
- siblings([expr])
  - 回傳所有兄弟元素
- add()
  - 將匹配的元素添加到當前的元素集合中，并回傳

4. 屬性

4.1 HTML代碼/文本/值

不傳引數是獲取，傳遞引數是設定

屬性	作用	備注
html()	設定和獲取起始標簽和結束標簽中的內容	和dom屬性 innerHTML 一樣
text()	設定和獲取起始標簽和結束標簽中本文	和dom屬性 innerText 一樣
val()	設定和獲取表單項的value值	和dom屬性 value 一樣

val()例子：

html：

    <body>
        <button id="btn01">確定</button>
        <form>
            <!--            單選-->
            <input type="radio" value="1" name="1">1
            <input type="radio" value="2" name="1">2
            <input type="radio" value="3" name="1">3
            <br/>
            <br/>
            <!--    復選-->
            <input type="checkbox" value="4" name="1">4
            <input type="checkbox" value="5" name="1">5
            <input type="checkbox" value="6" name="1">6
        </form>
    </body>

js：

            $(function () {
                $("#btn01").click(function () {
                    // $(":radio").val(['1']);
                    // $(":checkbox").val(['4','5']);
                //    同時設定多個
                    $(":radio,:checkbox").val(['1','6', '5']);
                });
            });

4.2 屬性

屬性	作用	備注
attr()	可以設定和獲取屬性的值	一個引數：獲取指定引數的屬性值，兩個引數：設定指定引數的屬性值當前引數沒有設定的情況下回傳undefined(官方認為這是錯誤的) 不推薦操作：checked、readOnly、selected、disabled
prop()	可以設定和獲取屬性的值	當前引數沒有設定的情況下回傳false 選中的時候回傳true 只推薦操作：checked、readOnly、selected、disabled


HTML：
	<body>
        <button id="btn01">確定</button>
        <input type="text" name="text">
    </body>

JS：
			$(function () {
                $("#btn01").click(function () {
                    // 獲取
                    alert($(":text").attr("name"));
                    //    設定
                    $(":text").attr("name", "changeName");
                });
            });

    <body>
        <button id="btn01">確定</button>
        <input type="checkbox" checked="checked" >多選
    </body>




            $(function () {
                $("#btn01").click(function () {
                    $(":checkbox").prop("checked", false);
                });
            });

5. 增刪改操作

5.1 內部插入

方法	作用	備注
appendTo	把a插入到b的子元素末尾，成為最后一個子元素	a.appendTo(b)
prependTo	把a插入到b的子元素前面，成為第一個子元素	a.prependTo(b)

5.2 外部插入

方法	作用	備注
insertAfter()	得到ba	a.insertAfter(b)
insertBefore()	得到ab	a.insertBefore(b)

5.3 替換

方法	作用	備注
replaceWith()	用一個b替換掉所有的a	a.replaceWith(b)
replaceAll()	用a替換掉b（一個換一個）	a.replaceAll(b)

5.4 洗掉

方法	作用	備注
remove()	洗掉a標簽	a.remove()
empty()	清空a標簽內的內容	a.empty()

6. CSS

方法	作用	備注
addClass	添加樣式
removeClass	洗掉樣式	洗掉全部獲取其中幾個
toggleClass	添加/洗掉樣式	當前樣式，有就添加，沒有洗掉
offset	獲取/改變坐標

<!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 () {
                var $d = $("div");
                // 增加樣式
                $("#btn01").click(function () {
                    // 多個樣式用空格分開
                    $d.addClass("redColor border");
                });

                //  洗掉樣式
                $("#btn02").click(function () {
                    // 不加引數是洗掉全部的樣式
                    $d.removeClass("redColor");
                });

                //  洗掉或者添加樣式
                $("#btn03").click(function () {
                    // 有就洗掉 沒有就添加
                    // 沒有引數的時候，看以前的樣式，一開始設定為空，再點就還原
                    $d.toggleClass("blackColor");
                });

                $("#btn04").click(function () {
                    console.log($d.offset());
                    $d.offset({
                        top: 100,
                        left: 50
                    });
                    console.log($d.offset());

                });
            });


        </script>
        <style type="text/css">
            div.redColor {
                background: red;
            }

            div.border {
                border: yellow 30px solid;
            }

            div.blackColor {
                background: black;
            }
        </style>
    </head>
    <body>
        <div style="height: 300px; width: 300px">3</div>
        <button id="btn01">addClass</button>
        <button id="btn02">removeClass</button>
        <button id="btn03">toggleClass</button>
        <button id="btn04">offset</button>

    </body>
</html>

7. 影片操作

以下影片操作都可以添加引數：

第一個引數是時長，以毫秒為單位：1000ms=1s，（寬高慢慢變化）
第二個引數是影片完成后的回呼函式（影片完成后自動呼叫的函式）；

7.1 基本影片

方法	作用	備注
show	隱藏元素顯示
hide	可見元素隱藏
toggle	可見就隱藏；不可見就顯示

7.2 淡入淡出影片

方法	作用	備注
fadeIn	淡入
fadeOut	淡出
fadeTo	在指定時長內將透明度修改到指定的值	0透明 0.5半透明 1可見三個引數：時間、透明度、回呼函式
fadeTOggle	淡入/淡出

<!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 () {
                var $d = $("div");
                $("#btn01").click(function () {
                    $d.show();
                });

                $("#btn02").click(function () {
                    $d.hide();
                });

                $("#btn03").click(function () {
                    $d.toggle(1000, f);
                });

                $("#btn04").click(function () {
                    $d.fadeIn();
                });

                $("#btn05").click(function () {
                    $d.fadeOut();
                });
                $("#btn06").click(function () {
                    $d.fadeIn();
                });
                $("#btn07").click(function () {
                    $d.fadeTo(1000, 0.5, function () {
                        alert("fadeTo完成");
                    });
                });

                // 回圈
                function f() {
                    $d.toggle(1000, f);
                }
            });


        </script>
        <style type="text/css">
        </style>
    </head>
    <body>
        <div style="height: 300px; width: 300px; background: antiquewhite; border: aqua 10px solid">3</div>
        <button id="btn01">show</button>
        <button id="btn02">hide</button>
        <button id="btn03">toggle</button>
        <button id="btn04">fadeIn</button>
        <button id="btn05">fadeOut</button>
        <button id="btn06">fadeTo</button>
        <button id="btn07">fadeToggle</button>

    </body>
</html>

8. 事件操作

頁面加載完成之后的區別：

js原生：頁面加載完成之后，除了需要等瀏覽器內核決議完便簽創建好DOM物件，還要等標簽顯示時需要的內容加載完成，如果是多個，只會執行最后一個，
jQuery：頁面加載完成之后，等瀏覽器內核決議完便簽創建好DOM物件就會馬上執行，如果是多個，會依次執行，

方法	作用	備注
click		傳function函式是系結事件不傳引數是觸發事件
mouseover	滑鼠移入事件
mouseout	滑鼠移出使事件
bind	可以給元素一次性系結一個或多個事件	多個事件用空格分開 .bind(“click mouseover”, function(){});
one	使用上和bind一樣，但是只會相應一次	設定的事件，只運行一次
unbind	和bind方法相反：解除事件的系結	可以解除一個或者多個
live	也是用來系結事件，它可以用來系結選擇器匹配的所有元素的事件，以后創建的（動態創建）也會系結

<!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 () {
                $("h3:eq(0)").bind("click mouseover mouseout", function () {
                    console.log("這是bind系結的事件");
                });
                $("button:eq(0)").click(function () {
                    $("h3").click();
                });
                $("h3:eq(1)").one("click mouseover mouseout", function () {
                    console.log("這是one系結的事件");
                });

                $("button:eq(1)").click(function () {
                    $("h3").unbind("click");
                });

                $("h2").live("click", function () {
                    console.log("這是live系結的事件");
                });
				// 由于上面設定了live 所以新設定的事件也是有效的
                $("button:eq(2)").click(function () {
                    $("<h2>新的H2</h2>").appendTo( $("h2").first());
                });

            });


        </script>
        <style type="text/css">
        </style>
    </head>
    <body>
        <h3 style="background: aqua">h3的事件</h3>
        <button>觸發h3的事件</button>
        <h3 style="background: aqua">h3的事件</h3>
        <button>移出h3的事件</button>
        <br/>
        <br/>
        <h2>live事件</h2>
        <button>新建h2</button>
    </body>
</html>

8.1 事件的冒泡

就是在父元素和子元素系結了相同的事件，如果子元素觸發，那么父元素也會觸發，這就是冒泡，

可以在子元素中return false; 來組織冒泡的發生，

<!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 () {
                $("div").click(function () {
                    alert("這是div事件");
                });
                $("span").click(function () {
                    alert("這是span事件");
                    //    在子元素中return false;  可以阻止冒泡
                    return false;
                });
            });
        </script>
        <style type="text/css">
        </style>
    </head>
    <body>
        <div style="height: 300px; width: 200px; background: antiquewhite">
            這是一個div
            <br/>
            <span>
                這是一個span
            </span>
        </div>
    </body>
</html>

8.2 事件物件

事件物件是封裝觸發的事件資訊的一個js物件

獲取：在事件的fucntion(event){}引數串列中添加一個引數，引數名習慣取為event

event就是事件物件

<!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">
            //  原生js事件物件
            window.onload = function () {
                document.getElementById("div01").onclick = function (event) {
                    console.log(event);
                };

            }
            $(function () {
                //  jQuery事件物件
                $("#div02").click(function (event) {
                    console.log(event);
                });
                //  獲取事件物件，判斷是何種事件
                $("#div03").bind("click mouseover", function (event) {
                    if (event.type == "click")
                        console.log("滑鼠點擊事件");
                    if (event.type == "mouseover")
                        console.log("滑鼠移入事件");
                })
            });


        </script>
        <style type="text/css">
        </style>
    </head>
    <body>
        <div id="div01" style="height: 300px; width: 200px; background: antiquewhite">
            原生js事件物件
        </div>
        <div id="div02" style="height: 300px; width: 200px; background: darkred">
            jQuery事件物件
        </div>
        <div id="div03" style="height: 300px; width: 200px; background: yellow">
            bind事件系結，然后獲取是何種事件觸發
        </div>
    </body>
</html>

樣例：圖片跟隨

<!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 () {
                var $img = $("#img02");
                $img.hide();
                $("#img01").bind("mouseover mouseout mousemove", function (event) {
                    if (event.type == "mouseover") {
                        $img.show();
                    } else if (event.type == "mouseout") {
                        $img.hide();
                    } else if (event.type == "mousemove") {
                        $img.offset({
                            left: event.pageX + 3,
                            top: event.pageY + 3
                        });
                    }
                });
            });
        </script>
        <style type="text/css">
        </style>
    </head>
    <body>
        <img id="img01" src="../imagin/niu.jpg" height="100px">
        <div>
            <img id="img02" src="../imagin/niu.jpg">
        </div>
    </body>
</html>

四、XMl

1. 語法

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/292193.html

標籤：其他

上一篇：【已解決】jQuery+ajax+Go上傳Excel檔案

下一篇：JavaScript入門第十二章（陣列回圈嵌套）

JavaWeb學習筆記

文章目錄

** JavaWeb **

一、H5、CSS、JavaScript查缺補漏

1. HTML

2. CSS

3. JavaScript

二、PHP

HTML --》 PHP

PHP接收

1. 讀取資料

2. 插入資料

三、jQuery

1. 語法

1.1 雜

1.2 jQuery物件的方法

1.3 回圈

1.4 確認彈窗

2. 選擇器

2.1 基本選擇器

2.2 層級選擇器

2.3 過濾選擇器

1. 基本過濾選擇器

2. 內容過濾器

3. 屬性過濾選擇器

4. 表單過濾器

5. 表單物件屬性

3. 篩選

4. 屬性

4.1 HTML代碼/文本/值

4.2 屬性

5. 增刪改操作

5.1 內部插入

5.2 外部插入

5.3 替換

5.4 洗掉

6. CSS

7. 影片操作

7.1 基本影片

7.2 淡入淡出影片

8. 事件操作

8.1 事件的冒泡

8.2 事件物件

樣例：圖片跟隨

四、XMl

1. 語法

JavaWeb