day40_jQuery學習筆記_01
- 課程計劃：
- day01: jQuery基礎 --> 選擇器、屬性和CSS、文檔處理
- day02: jQuery高級 --> 篩選、事件、效果(動畫)、`ajax`
1、jQuery 的介紹
1.一、JS類庫
- JavaScript 庫封裝了不少預約義的對象和`實用函數`。能幫助使用者創建有高難度交互客戶端頁面, 而且兼容各大瀏覽器。
1.二、當前流行的 JavaScript 庫有：
jQuery，最流行- EXT_JS，版本2.0之後開始收費（不包括版本2.0）。
- Dojo，有不少js單獨文件，須要導入不少的js文件，速度慢。優化：打包。
（常見應用：開發中的小圖標，實際上是一張圖片，用css來定位，這樣網站的請求就會減小） - Prototype，是對js的擴展，作框架開發中使用。
- YUI(Yahoo! User Interface) ，taobao以前使用。
- 淘寶UI：淘寶UI網址
- Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。
Bootstrap 是基於 HTML、CSS、JavaScript 的，它簡潔靈活，使得 Web 開發更加快捷。Bootstrap是基於jQuery 的一個UI工具。
1.三、jQuery 的介紹
- JQuery是繼prototype以後又一個優秀的Javascript庫。它是
輕量級的js庫 ，它兼容CSS3，還兼容各類瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及後續版本將再也不支持IE6/7/8瀏覽器。jQuery 使用戶能更方便地處理HTML（標準通用標記語言下的一個應用）、events、實現動畫效果，而且方便地爲網站提供AJAX交互。jQuery還有一個比較大的優點是，它的文檔說明很全，並且各類應用也說得很詳細，同時還有許多成熟的插件可供選擇。jQuery可以使用戶的html頁面保持代碼和html內容分離，也就是說，不用再在html裏面插入一堆js來調用命令了，只須要定義id便可。 - 輕量級：依賴程序少，佔用的資源少
- 特色：js代碼和html代碼分離
- jQuery已經成爲最流行的 javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery。
- 由美國人 John Resig 在2006年1月發佈
- jQuery 是
免費、開源的 - jQuery 的分類：
- WEB版本：咱們主要學習研究用的
- UI版本：集成了UI組件，作圖形化頁面的
- mobile版本：針對移動端開發的
- qunit版本：用於js測試的
1.四、jQuery 的版本介紹
1.4.2版本：企業開發主流
1.8.3版本：學習研究主流（本次學習使用）
1.11.0版本：學習研究主流
2.1.0版本：再也不支持IE瀏覽器(再也不支持IE6.0\7.0\8.0，支持IE9.0+)
3.3.1版本：目前最新版本
以下圖所示：javascript
1.五、jQuery 的優勢
- 核心理念是：write less,do more（寫得更少，作得更多）
- 輕量級：源碼1.11.js大小是286kb，壓縮班1.11.min.js大小是94.1k。若是使用GZIP壓縮更小。
- 兼容各類瀏覽器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）
- jQuery的語法設計可使開發者更加便捷
例如：操做文檔對象、選擇DOM元素、製做動畫效果、事件處理、使用Ajax以及其餘功能 - jQuery可以使用戶的html頁面保持代碼和html內容分離
不用再在html裏面插入一堆js來調用命令了，只須要定義id便可 - jQuery提供API讓開發者編寫插件，有許多成熟的插件可供選擇
文檔說明很全
2、jQuery 的基本語法
2.一、jQuery語法：得到jQuery對象
1-得到jQuery對象.htmlcss
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://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>
</head>
<!-- 若是標籤script中引入了js(src)，那麼標籤體就不能寫內容了 -->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<body>
<input type="text" id="username" value="jack"/>
<!-- 若是想在標籤體寫內容，就不能使用src了 -->
<script type="text/javascript">
// 若是在標籤體內寫內容，由於js執行時，有加載順序，會從上到下加載，因此想要得到value的值，須要把js代碼放在input標籤的下面
// jQuery 中得到jQuery對象的語法：
// $("選擇器") == jQuery("選擇器")
var username = $("#username");
// val()函數，用於得到 value屬性的值
// alert(username.val());
</script>
</body>
</html>
2.二、jQuery對象和dom對象的相互轉換
2-dom對象和jQuery對象的相互轉換.htmlhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://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>
</head>
<!-- 若是標籤script中引入了js(src)，那麼標籤體就不能寫內容了 -->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<body>
<input type="text" id="username" value="jack"/>
<!-- 若是想在標籤體寫內容，就不能使用src了 -->
<script type="text/javascript">
// 若是在標籤體內寫內容，由於js執行時，有加載順序，會從上到下加載，因此想要得到value的值，須要把js代碼放在input標籤的下面
// 一、使用javascript得到value值
var username = document.getElementById("username");
// alert(username.value);
// 二、將 js中的dom對象 轉換成 jQuery對象
// 語法：$(dom對象)
// 建議：jQuery對象的變量名，建議以$開頭，方便閱讀
var $username = $(username);
// alert($username.val());
// 三、將 jQuery對象 轉換成 js的dom對象
// 3.一、方式一：jQuery對象內部使用【數組】來存放全部的數據，能夠經過數組的索引進行獲取
var username2 = $username[0];
alert(username2.value);
// 3.二、方式二：jQuery 提供函數 get() 轉換成 js的dom對象
var username3 = $username.get(0);
alert(username3.value);
</script>
</body>
</html>
3、jQuery 的【選擇器】
3.一、基本選擇器【掌握】
詳解以下：
#id id選擇器，<xxx id=""> 經過標籤中的id值得到元素(標籤)
element 元素選擇器，<xxx> 經過元素(標籤名)得到元素
.class 類選擇器，<xxx class=""> 經過class值得到元素。注意：使用點開頭
s1,s2,... 多選擇器，將多個選擇器的結果添加到一個數組中
-------------------------------------------------------
* 全部
示例代碼以下：
01-基本選擇器.html前端
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>01-基本選擇器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<script type="text/javascript">
// 在 javascript 中頁面是經過加載 window.onload = function() {......};
// 在jQuery 中頁面是經過加載 $(document).ready(function() {......});
$(document).ready(function() {
// alert("O(∩_∩)O哈哈~");
});
$(document).ready(function() {
// <!-- 控制按鈕 -->
// <input type="button" value="選擇 id值爲 one 的元素" id="btn1"/>
$("#btn1").click(function() {
// alert("O(∩_∩)O哈哈~");
$("#one").css("background-color", "#ff0"); // 網絡三原色：紅綠藍RGB，取值：0-255，格式：#FFFFFF，簡化版：#FFF，不區分大小寫
});
// <input type="button" value="選擇 class值爲 mini 的全部元素" id="btn2"/>
$("#btn2").click(function() {
$(".mini").css("background-color", "#f0f");
});
// <input type="button" value="選擇 元素名是 div 的全部元素" id="btn3"/>
$("#btn3").click(function() {
$("div").css("background-color", "#0ff");
});
// <input type="button" value="選擇 全部的元素" id="btn4"/>
$("#btn4").click(function() {
$("*").css("background-color", "#0ff");
});
// <input type="button" value="選擇 全部的span元素 和 id爲two 的元素" id="btn5"/>
$("#btn5").click(function() {
$("span,#two").css("background-color", "#0ff");
});
});
</script>
</head>
<body>
<button id="reset">手動重置頁面元素</button>
<input type="checkbox" id="isreset" checked="checked"/>
<label for="isreset">點擊下列按鈕時會自動重置頁面</label>
<br/>
<br/>
<h3>基本選擇器</h3>
<!-- 控制按鈕 -->
<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/>
<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="mover">正在執行動畫的span元素</span>
</body>
</html>
示例動圖以下：java
3.二、層級選擇器
詳解以下：
A B 得到A元素內部全部的B的後代元素。（爺孫）
A>B 得到A元素內部全部的B的子元素。（父子）
A+B 得到A元素後面的第一個兄弟元素B。（1個兄弟）
A~B 得到A元素後面的全部的兄弟元素B。（多個兄弟）
示例代碼以下：
02-層次選擇器.htmlnode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>02-層次選擇器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<script type="text/javascript">
$(document).ready(function () {
// <!-- 控制按鈕 -->
// <input type="button" value="選擇 body內的全部div元素" id="btn1"/>
$("#btn1").click(function() {
$("body div").css("background-color", "#ff0"); // 範圍小，某一個區域的全部（本例在body中），實際開發中用第一種方式
// $("div").css("background-color", "#ff0"); // 範圍大，整個頁面的全部，兩種方式效果同樣
});
// <input type="button" value="在body內，選擇子元素是div的" id="btn2"/>
$("#btn2").click(function() {
$("body>div").css("background-color", "#f0f");
});
// <input type="button" value="選擇 id爲one 的下一個div元素" id="btn3"/>
$("#btn3").click(function() {
$("#one+div").css("background-color", "#0ff");
});
// <input type="button" value="選擇 id爲two的元素後面的全部div兄弟元素" id="btn4"/>
$("#btn4").click(function() {
$("#two~div").css("background-color", "#00f");
});
// <input type="button" value="選擇 id爲two的元素的全部div兄弟元素" id="btn5"/>
$("#btn5").click(function() {
$("#two").siblings("div").css("background-color", "#0f0"); // siblings 兄弟姐妹
});
});
</script>
</head>
......
示例動圖以下：jquery
3.三、基本過濾選擇器
- 過濾選擇器格式 「
:關鍵字」
詳解以下：nginx
:first 獲取第一個元素（由於jQuery對象的內部是一個數組）
:last 獲取最後一個元素
:eq(index) 獲取指定索引的元素
:gt(index) 獲取大於指定索引的元素
:lt(index) 獲取小於指定索引的元素
:even 獲取偶數索引的元素，從 0 開始計數。例如：查找表格的一、三、5...行（即索引值0、二、4...）
:odd 獲取奇數索引的元素
:not(selector) 去除全部與給定選擇器匹配的元素
-------------------------------------------------------
:header 獲取全部標題的元素。例如：<h1>...<h6>
:animated 獲取全部正在執行動畫效果的元素
:focus 獲取焦點的元素
示例代碼以下：程序員
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>03-基本過濾選擇器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<script type="text/javascript">
$(document).ready(function () {
// <!-- 控制按鈕 -->
// <input type="button" value="選擇第一個div元素" id="btn1"/>
$("#btn1").click(function() {
$("div:first").css("background-color", "#ff0");
});
// <input type="button" value="選擇最後一個div元素" id="btn2"/>
$("#btn2").click(function() {
$("div:last").css("background-color", "#f0f");
});
// <input type="button" value="選擇class不爲one的 全部div元素" id="btn3"/>
$("#btn3").click(function() {
$("div:not('.one')").css("background-color", "#0ff");
});
// <input type="button" value="選擇索引值爲偶數 的div元素" id="btn4"/>
$("#btn4").click(function() {
$("div:even").css("background-color", "#00f");
});
// <input type="button" value="選擇索引值爲奇數 的div元素" id="btn5"/>
$("#btn5").click(function() {
$("div:odd").css("background-color", "#00f");
});
// <input type="button" value="選擇索引值等於3的元素" id="btn6"/>
$("#btn6").click(function() {
$("div:eq(3)").css("background-color", "#0f0");
});
// <input type="button" value="選擇索引值大於3的元素" id="btn7"/>
$("#btn7").click(function() {
$("div:gt(3)").css("background-color", "#0f0");
});
// <input type="button" value="選擇索引值小於3的元素" id="btn8"/>
$("#btn8").click(function() {
$("div:lt(3)").css("background-color", "#0f0");
});
// <input type="button" value="選擇全部的標題元素" id="btn9"/>
$("#btn9").click(function() {
$(":header").css("background-color", "#f00");
});
// <input type="button" value="選擇當前正在執行動畫的全部元素" id="btn10"/>
$("#btn10").click(function() {
$(":animated").css("background-color", "#f00");
});
// <input type="text" value="請輸入帳號" defaultValue="請輸入帳號" style="color:#999"/><!-- #999 表示灰色 -->
// <input type="text" value="請輸入密碼" defaultValue="請輸入密碼" style="color:#999"/>
// 方案一：分狀況處理
/*
$("input[type='text']").blur(function() {
// 失去焦點的代碼
}).focus(function() {
// 得到焦點的代碼
});
*/
// 方案二：綁定事件
$("input[type='text']").on("blur focus", function() {
// 一、先得到元素的 defaultValue屬性 的默認值
var dv = $(this).attr("defaultValue");
// 二、判斷是否得到焦點
if ($(this).is(":focus")) {
// 2.1 、得到焦點，若是得到value屬性的值是默認值 ，就清空value值 ，不然不清空。this表示的是當前執行的對象，是dom對象，須要把 dom對象 轉換成 jQuery對象
if ($(this).val() == dv) {
$(this).val("");
$(this).css("color", "#000");
}
} else {
// 2.二、 失去焦點，若是得到value屬性的值爲空，就設置value的值爲默認值，不然不設置。即 $(this).val() == "" 或 $(this).val().length == 0
if ($(this).val() == "") {
$(this).val(dv);
$(this).css("color", "#999"); // 字體的顏色
}
}
});
});
</script>
</head>
......
示例動圖以下：ajax
3.四、內容過濾選擇器
詳解以下：
:empty 當前元素是否爲空（便是否有標籤體，標籤體包括子元素或文本）
:has(selector) 當前元素是否含有指定的子元素
:parent 當前元素是不是父元素（不經常使用）
:contains(text) 標籤體是否含有指定的文本（更不經常使用）
示例代碼以下：
04-內容過濾選擇器.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>04-內容過濾選擇器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<script type="text/javascript">
$(document).ready(function() {
// <input type="button" value="選取含有文本「div」的div元素" id="btn1"/>
$("#btn1").click(function() {
$("div:contains('div')").css("background-color", "#ff0");
});
// <input type="button" value="選取不包含子元素(或者文本元素)的div元素" id="btn2"/> 換句話說本身元素是否爲空
$("#btn2").click(function() {
$("div:empty").css("background-color", "#f0f");
});
// <input type="button" value="選取含有class爲mini元素 的div元素" id="btn3"/>
$("#btn3").click(function() {
$("div:has('.mini')").css("background-color", "#0ff");
});
// <input type="button" value="選取含有子元素(或者文本元素)的div元素" id="btn4"/> 換句話說本身是不是父元素
$("#btn4").click(function() {
$("div:parent").css("background-color", "#00f");
});
});
</script>
</head>
......
示例動圖以下：
3.五、可見性過濾選擇器[掌握]
詳解以下：
:hidden 隱藏。特指 <xxx style="display:none;"/>，還能夠指 <input type="hidden">
:visible 可見（默認）
示例代碼以下：
05-可見性過濾選擇器.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>05-可見性過濾選擇器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<script type="text/javascript">
$(document).ready(function() {
// <input type="button" value="選取全部可見的div元素" id="btn1"/>
$("#btn1").click(function() {
$("div:visible").css("background-color", "#ff0");
});
// <input type="button" value="選取全部不可見的元素, 利用 jQuery 中的 show() 方法將它們顯示出來" id="btn2"/>
$("#btn2").click(function() {
$("div:hidden").css("background-color", "#f0f").show(2000);
});
// <input type="button" value="選取全部的文本隱藏域, 並打印它們的值" id="btn3"/>
$("#btn3").click(function() {
// alert($("input:hidden").val()); // val()在獲取值時，默認獲取的是第一個的值
// each函數，最經常使用
$("input:hidden").each(function() {
alert($(this).val());
});
});
// <input type="button" value="選取全部的文本隱藏域, 並打印它們的值" id="btn4"/>
$("#btn4").click(function() {
// alert($("input:hidden").val()); // val()在獲取值時，默認獲取的是第一個的值
// $.each全局函數
// 回調函數function()
// 參數1：index 表示當前遍歷的索引
// 參數2：domEle 表示當前遍歷的對象，即==this
$.each($("input:hidden"), function(index, domEle) { // 注意：function() 回調函數自己是能夠接收參數的
// alert($(this).val());
alert(index + "@" + $(doEle).val());
});
});
});
</script>
</head>
<body>
<h3>可見性過濾選擇器</h3>
<button id="reset">手動重置頁面元素</button>
<input type="checkbox" id="isreset" checked="checked"/>
<label for="isreset">點擊下列按鈕時會自動重置頁面</label>
<br/>
<br/>
<!-- 控制按鈕 -->
<input type="button" value="選取全部可見的div元素" id="btn1"/>
<input type="button" value="選取全部不可見的元素, 利用 jQuery 中的 show() 方法將它們顯示出來" id="btn2"/>
<input type="button" value="選取全部的文本隱藏域, 並打印它們的值" id="btn3"/>
<input type="button" value="選取全部的文本隱藏域, 並打印它們的值" id="btn4"/>
<br/>
<br/>
<!--文本隱藏域-->
<input type="hidden" value="hidden_1"/>
<input type="hidden" value="hidden_2"/>
<input type="hidden" value="hidden_3"/>
<input type="hidden" value="hidden_4"/>
<!-- 測試的元素 -->
<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>
<span id="mover">正在執行動畫的span元素</span>
</body>
</html>
示例動圖以下：
3.六、屬性選擇器【掌握】
詳解以下：
[屬性名] 得到指定屬性名的元素
[屬性名=值] 得到屬性名 等於 指定值的 的元素【用的最多】
[屬性名!=值] 得到屬性名 不等於 指定值的 的元素
[as1][as2][as3]... 複合屬性選擇器，多個條件同時成立。相似 where ... and ... and【用的最多】
-------------------------------------------------------
[屬性名^=值] 得到 以屬性值 開頭 的元素
[屬性名$=值] 得到 以屬性值 結尾 的元素
[屬性名*=值] 得到 含有屬性值 的元素
示例代碼以下：
06-屬性選擇器.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>06-屬性選擇器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<script type="text/javascript">
$(document).ready(function() {
// <input type="button" value="選取含有 屬性title 的div元素" id="btn1"/>
$("#btn1").click(function() {
// <xxx title=""> 或者 <xxx title="yyy"> 或者 <xxx title>
$("div[title]").css("background-color", "#ff0");
});
// <input type="button" value="選取 屬性title值等於「test」的div元素" id="btn2"/>
$("#btn2").click(function() {
$("div[title='test']").css("background-color", "#f0f");
});
// <input type="button" value="選取 屬性title值不等於「test」的div元素(沒有屬性title的也將被選中)" id="btn3"/>
$("#btn3").click(function() {
$("div[title!='test']").css("background-color", "#f0f");
});
// <input type="button" value="選取 屬性title值 以「te」開始 的div元素" id="btn4"/>
$("#btn4").click(function() {
$("div[title^='te']").css("background-color", "#0ff");
});
// <input type="button" value="選取 屬性title值 以「est」結束 的div元素" id="btn5"/>
$("#btn5").click(function() {
$("div[title$='est']").css("background-color", "#0ff");
});
// <input type="button" value="選取 屬性title值 含有「es」的div元素" id="btn6"/>
$("#btn6").click(function() {
$("div[title*='es']").css("background-color", "#0ff");
});
// <input type="button" value="組合屬性選擇器，首先選取有屬性id的div元素，而後在結果中 選取屬性title值 含有「es」的元素" id="btn7"/>
$("#btn7").click(function() {
$("div[id][title*='es']").css("background-color", "#00f");
});
});
</script>
</head>
......
示例動圖以下：
3.七、子元素過濾選擇器
詳解以下：
:nth-child(index) 得到第幾個孩子，從1開始。
:first-child 得到第一個孩子
:last-child 得到最後孩子
:only-child 得到獨生子
示例代碼以下：
07-子元素過濾選擇器.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>07-子元素過濾選擇器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<script type="text/javascript">
$(document).ready(function() {
// <input type="button" value="選取每一個class爲one的div父元素下的第2個子元素" id="btn1"/>
$("#btn1").click(function() {
// 子元素選擇使用前提：表達式前面必須是元素。例如：$("div:nth-child(2)")
// 若是元素上添加條件，則必須使用空格。例如：$("div[class='one'] :nth-child(2)")
// 方式一：
// $("div[class='one'] :nth-child(2)").css("background-color", "#ff0");
// 方式二：
$("div.one :nth-child(2)").css("background-color","#ff0");
// 注意:
// $("div.one") 全部的div，本身的class值也爲one
// $("div .one") 全部的div中後代元素，class值爲one
});
// <input type="button" value="選取每一個class爲one的div父元素下的第一個子元素" id="btn2"/>
$("#btn2").click(function() {
$("div.one :first-child").css("background-color","#f0f");
});
// <input type="button" value="選取每一個class爲one的div父元素下的最後一個子元素" id="btn3"/>
$("#btn3").click(function() {
$("div.one :last-child").css("background-color","#f0f");
});
// <input type="button" value="若是class爲one的div父元素下的僅僅只有一個子元素，那麼選中這個子元素" id="btn4"/>
$("#btn4").click(function() {
$("div.one :only-child").css("background-color","#f0f");
});
});
</script>
</head>
......
示例動圖以下：
3.八、表單過濾選擇器
詳解以下：
:input 得到全部的表單元素（<input> / <select> / <textarea> / <button>）
:text 得到文本框 <input type="text"/>
:password 得到密碼框 <input type=" password"/>
:radio 得到單選框 <input type="radio"/>
:checkbox 得到複選框 <input type="checkbox"/>
:submit 得到提交按鈕 <input type="submit"/>
:image 得到圖片按鈕 <input type="image" src=""/>
:reset 得到重置按鈕 <input type="reset"/>
:file 得到文件上傳 <input type="file"/>
:hidden 得到隱藏域，特指 <input type="hidden"/>，還能夠得到 <xxx style="display:none">
還能夠得到其餘值 <br> <option>，存在瀏覽器兼容問題，沒意義
:button 得到全部普通按鈕 <button > 或 <input type="button"/>
示例代碼以下：
08-表單過濾選擇器.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>09-表單選擇器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var $alltext = $("#form1 :text");
var $allpassword = $("#form1 :password");
var $allradio = $("#form1 :radio");
var $allcheckbox = $("#form1 :checkbox");
var $allsubmit = $("#form1 :submit");
var $allimage = $("#form1 :image");
var $allreset = $("#form1 :reset");
var $allbutton = $("#form1 :button"); // <input type=button/> 和 <button ></button>均可以匹配
var $allfile = $("#form1 :file");
var $allhidden = $("#form1 :hidden"); // <input type="hidden"/> 和 <div style="display:none">test</div> 均可以匹配
var $allselect = $("#form1 select");
var $alltextarea = $("#form1 textarea");
var $AllInputs = $("#form1 :input"); // #form1表單中，全部的表單元素，範圍大，能夠得到input、select、textarea、button等
var $inputs = $("#form1 input"); // #form1表單中，全部的input元素，範圍小
$("div")
.append("有" + $alltext.length + " 個（ :text 元素）<br/>")
.append("有" + $allpassword.length + " 個（ :password 元素）<br/>")
.append("有" + $allradio.length + " 個（ :radio 元素）<br/>")
.append("有" + $allcheckbox.length + " 個（ :checkbox 元素）<br/>")
.append("有" + $allsubmit.length + " 個（ :submit 元素）<br/>")
.append("有" + $allimage.length + " 個（ :image 元素）<br/>")
.append("有" + $allreset.length + " 個（ :reset 元素）<br/>")
.append("有" + $allbutton.length + " 個（ :button 元素）<br/>")
.append("有" + $allfile.length + " 個（ :file 元素）<br/>")
.append("有" + $allhidden.length + " 個（ :hidden 元素）<br/>")
.append("有" + $allselect.length + " 個（ select 元素）<br/>")
.append("有" + $alltextarea.length + " 個（ textarea 元素）<br/>")
.append("表單有 " + $inputs.length + " 個（input）元素。<br/>")
.append("總共有 " + $AllInputs.length + " 個(:input)元素。<br/>")
.css("color", "red")
// 顯示全部的隱藏標籤名稱
$allhidden.each(function() {
// $("div").append("<br/>").append(this.nodeName); // dom對象
$("div").append("<br/>").append($(this).get(0).nodeName); // jQuery對象
});
$("form").submit(function() {
return false;
}); // return false; // 不能提交
});
//]]>
</script>
</head>
<body>
<form id="form1" action="#">
<input type="button" value="Button"/><br/>
<input type="checkbox" name="c"/>1
<input type="checkbox" name="c"/>2
<input type="checkbox" name="c"/>3<br/>
<input type="file"/><br/>
<input type="hidden"/>
<div style="display:none">test</div><br/>
<input type="image" src="haha.png" style="width: 300px; height: 200px"/><br/>
<input type="password"/><br/>
<input type="radio" name="a"/>1
<input type="radio" name="a"/>2<br/>
<input type="reset"/><br/>
<input type="submit" value="提交"/><br/>
<input type="text"/><br/>
<select><option>Option</option></select><br/>
<textarea rows="5" cols="20"></textarea><br/>
<button>Button</button><br/>
</form>
<div></div>
</body>
</html>
示例動圖以下：
3.九、表單對象屬性過濾選擇器【掌握】
詳解以下：
:enabled 可用
:disabled 不可用（指的是 <xxx disabled="disabled"> 或 <xxx disabled=""> 或 <xxx disabled>—）
:checked 選中（指的是 單選框radio、複選框 checkbox）
:selected 選擇（指的是 下拉列表 select 標籤中的 option 標籤）
示例代碼以下：
09-表單對象屬性過濾選擇器.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>09-表單對象屬性過濾選擇器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<script type="text/javascript">
$(document).ready(function() {
// <button id="btn1">對錶單內 可用的input 賦值操做</button>
$("#btn1").click(function() {
$("input:enabled").val("aaa");
});
// <button id="btn2">對錶單內 不可用的input 賦值操做</button>
$("#btn2").click(function() {
$("input:disabled").val("bbb");
});
// <button id="btn3">獲取多選框選中的個數，追加到checkboxDiv中</button>
$("#btn3").click(function() {
// var $s1 = $("input[name='newsletter']:checked").length; // 方式一
var $s2 = $("input[name='newsletter']:checked").size();; // 方式二
// alert($s1);
// alert($s2);
$("#checkboxDivId").append($s1);
});
// <button id="btn4">獲取下拉框選中的內容，追加到selectDiv中</button>
$("#btn4").click(function() {
// 遍歷的是全部選中的 <option value="">text文本</option> 標籤
$(":selected").each(function() {
// $(this).val();
// val() 函數在獲取option時，若是option的value沒有值，則獲取的是option的text文本的值
// html() 函數獲取的是標籤體的內容
$("#selectDivId").append($(this).val());
// $("#selectDivId").append($(this).html());
});
});
});
</script>
</head>
<body>
<h3>表單對象屬性過濾選擇器</h3>
<button type="reset">重置全部表單元素</button>
<input type="checkbox" id="isreset" checked="checked"/>
<label for="isreset">點擊下列按鈕時會自動重置頁面</label>
<br/>
<br/>
<!-- 控制按鈕 -->
<button id="btn1">對錶單內 可用的input 賦值操做</button>
<button id="btn2">對錶單內 不可用的input 賦值操做</button>
<button id="btn3">獲取多選框選中的個數，追加到checkboxDiv中</button>
<button id="btn4">獲取下拉框選中的內容，追加到selectDiv中</button>
<br/>
<br/>
<!-- 測試的元素 -->
可用元素：<input name="add" value="可用文本框"/><br/>
不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
可用元素：<input name="che" value="可用文本框"/><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/>
<div id="checkboxDivId"></div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
下拉列表1：<br/>
<select name="test1" multiple="multiple" style="height:100px">
<option>浙江</option>
<option selected="selected">湖南</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>廣州</option>
<option>湖北</option>
</select>
<br/>
下拉列表2：<br/>
<select name="test2">
<option>浙江</option>
<option>湖南</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>廣州</option>
<option>湖北</option>
</select>
<br/>
<div id="selectDivId"></div>
</body>
</html>
示例動圖以下：
3.十、選擇器小案例
1.動態列表效果.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>動態列表效果.html</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 {
clear: both;
text-align: center;
padding-top: 10px;
}
.showmore 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;
}
.promoted a {
color: #F50;
}
</style>
<!-- 引入jQuery -->
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// 從第5個開始，不要最後一個，來控制顯示或隱藏
// 一、隱藏
var $allLi = $("li:gt(4):not(:last)");
$allLi.hide();
// 二、點擊顯示
$("span").click(function() {
// $allLi.show();
// $allLi.toggle(); // 切換（合併）
// 判斷是否隱藏（分開）
if ($allLi.is(":hidden")) {
$allLi.show(100);
$(this).html("隱藏部分品牌");
} else {
$allLi.hide(100);
$(this).html("顯示所有品牌");
}
});
});
</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="#"><span>顯示所有品牌</span></a>
</div>
</div>
</body>
</html>
示例動圖以下：
4、jQuery 的屬性和CSS
4.一、屬性【掌握】
詳解以下：
attr(name) 得到指定屬性名的值
attr(key, val) 給一個指定屬性名設置值
attr(prop) 給多個屬性名設置值，參數：prop，指的是：json數據，格式：{k:v, k:v, ...}
removeAttr(name) 移除指定屬性
4.二、CSS類【瞭解】
詳解以下：
指的是 <xxx class="a b c d my"> class能夠設置多個值，多個值須要用空格隔開
addClass("my") 追加，追加一個類
removeClass("my") 移除，將指定類移除
toggleClass("my") 切換，若是有my類將移除，若是沒有該類將添加
4.三、HTML代碼/文本/值【掌握】
詳解以下：
val() 得到value的值
val(text) 設置value的值
html() 得到html代碼，含有標籤，即得到標籤+文本
html(...) 設置html代碼，若是有標籤，將被解析
text() 得到文本值，將標籤進行過濾，即只得到文本
text(...) 設置文本值，若是有標籤，將被轉義，即：< 轉義爲 < & 轉義爲 & > 轉義爲 < 空格 轉義爲
4.四、CSS
詳解以下：
指的是 <xxx style="key:value; key:value;">
css(name) 得到指定名稱的css值
css(name, value) 設置一對值
css(prop) 設置一組值
4.五、位置
詳解以下：
offset() 得到座標，返回的是JSON對象，格式：{"top":200, "left":100}
offset(...) 設置座標，例如：$(this).offset({"top":0, "left":0})
scrollTop() 垂直滾動條，滾過的距離
scrollTop(...) 垂直滾動條，滾過的距離
scrollLeft() 水平滾動條，滾過的距離
scrollLeft(...) 水平滾動條，滾過的距離
4.六、尺寸
詳解以下：
height() 得到高度
height(...) 得到高度
width([...]) 得到 或 設置 寬度
示例代碼以下：
demo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://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="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
// 一、屬性
// 設置姓名文本框不可用
// 方式一：
// $("[name='username']").attr("disabled", "disabled"); // attr(key, val) 給一個指定屬性名設置值
// 方式二：
$("[name='username']").attr("disabled", "");
// 設置姓名文本框可用，則必須移除以前設置的屬性
$("[name='username']").removeAttr("disabled");
// 二、CSS類
$("#buttonId").click(function() {
// 點擊普通按鈕，給姓名文本框切換樣式
$("[name='username']").toggleClass("textClass2");
});
// 三、HTML代碼/文本/值
var $t1 = $("div:eq(0)").text(); // 得到文本值，將標籤進行過濾，即只得到文本
// alert($t1);
var $t2 = $("div:eq(1)").html(); // 得到html代碼，含有標籤，即得到標籤+文本
// alert($t2);
// 設置文本值，若是有標籤，將被轉義
// $("div:eq(0)").text("<a href='http://www.itheima.com'>點我啊</a>");
// 設置html代碼，若是有標籤，將被解析
// $("div:eq(1)").html("<a href='http://www.itheima.com'>點我啊</a>");
// 四、CSS
$("div:eq(0)").css("border", "1px solid #999"); // 設置一個值
$("div:eq(0)").css({
"width":"150px",
"height":"100px",
"font-size":"20px",
"color":"#f00"
}); // 設置一組值
// 五、位置和尺寸瞭解便可，之後作更炫的網頁的時候再用
});
</script>
<style type="text/css">
.textClass {
background-color: #999;
}
.textClass2 {
background-color: #ff0;
}
</style>
</head>
<body>
<h3>表單</h3>
<form action="">
<table border="1">
<tr id="tr1">
<td><label>姓名</label></td>
<td><input type="text" name="username" class="textClass" value="jack"/></td>
</tr>
<tr>
<td><span>密碼</span></td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td>性別</td>
<td>
<input type="radio" name="gender" value="男"/>男
<input type="radio" name="gender" value="女"/>女
</td>
</tr>
<tr>
<td>愛好</td>
<td>
<input type="checkbox" name="hobby" value="1"/>抽菸
<input type="checkbox" name="hobby" value="2"/>喝酒
<input type="checkbox" name="hobby" value="3"/>燙頭
</td>
</tr>
<tr>
<td>個人照片</td>
<td><input type="file" name="image"/></td>
</tr>
<tr>
<td>學歷</td>
<td>
<select name="edu">
<option value="1">小班</option>
<option value="2">中班</option>
<option value="3">大班</option>
<option value="4">學前班</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<button id="buttonId" type="button">普通按鈕</button><!-- <button></button>默認不是普通按鈕，而是提交按鈕，須要進行設置 -->
<input type="submit" value="提交按鈕"/>
<input type="reset" value="重置按鈕"/>
<input type="image" value="圖片按鈕" src="../image/0050.jpg" style="height: 30px;width: 50px"/>
</td>
</tr>
</table>
</form>
<h3>公告信息1</h3>
<div>
未滿18慎進
</div>
<h3>公告信息2</h3>
<div>
<a>年滿60勿進</a>
</div>
</body>
</html>
5、jQuery 的文檔處理
5.一、內部插入【掌握】
詳解以下：
// 方式一：適合編程
A.append(B) 將B插入到A的內部後面（以後的串聯操做，操做的是A）
<A>
// A的內容......
<B></B>
<A>
A.prepend(B) 將B插入到A的內部前面
<A>
<B></B>
// A的內容......
<A>
-------------------------------------------------------
// 方式二：適合說話
A.appendTo(B) 將A插入到B的內部後面（以後的串聯操做，操做的也是A）
<B>
// B的內容......
<A></A>
<B>
A.prependTo(B) 將A插入到B的內部前面
<B>
<A></A>
// B的內容......
<B>
示例代碼以下：
01-內部插入節點.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>03_內部插入節點.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重慶</li>
</ul>
<ul id="love">
<li id="fk" name="fankong">反恐</li>
<li id="xj" name="xingji">星際</li>
</ul>
<div id="foo1">Hello1</div>
</body>
<script type="text/javascript">
var $tj = $("#tj");
var $love = $("#love");
// 將 tj 插入到 love 的內部的 前面或者後面
// 後
// $love.append($tj); // 在 love 的內部的後面 插入一個 tj
// $tj.appendTo($love); // 將 tj 插入到 love 的內部的後面
// 前
// $love.prepend($tj); // 在 love 的內部的前面 插入一個 tj
$tj.prependTo($love); // 將 tj 插入到 love 的內部的前面
</script>
</html>
示例動圖以下：
5.二、外部插入【掌握】
詳解以下：
// 方式一：適合編程
A.after(B) 將B插入到A後面（同級）
<A></A>
<B></B>
A.before(B) 將B插入到A前面
<B></B>
<A></A>
-------------------------------------------------------
// 方式二：適合說話
A.insertAfter(B) 將A插入到B後面（同級）
<B></B>
<A></A>
A.insertBefore(B) 將A插入到B前面
<A></A>
<B></B>
示例代碼以下：
02-外部插入節點.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>02_外部插入節點.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重慶</li>
</ul>
<p id="p3">I would like to say: p3</p>
<p id="p2">I would like to say: p2</p>
<p id="p1">I would like to say: p1</p>
</body>
<script type="text/javascript">
// 將 city 插入到 p2 的前面或者後面
var $city = $("#city");
var $p2 = $("#p2");
// 後
// $p2.after($city);
// $city.insertAfter($p2);
// 前
// $p2.before($city);
$city.insertBefore($p2);
</script>
</html>
示例動圖以下：
5.三、刪除[掌握]
詳解以下：
empty() 清空標籤體，沒有孩子了。
remove() 刪除當前對象。若是以後再使用，元素自己保留，綁定的事件 或 綁定的數據 都會被移除。
detach() 刪除當前對象。若是以後再使用，元素自己保留，綁定的事件 或 綁定的數據 都保留。
data(name) 得到綁定的數據
data(name, value) 設置綁定的數據
示例代碼以下：
03-刪除節點.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>03_刪除節點.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京<p>海淀區</p></li>
<li id="tj" name="tianjin">天津<p>河西區</p></li>
<li id="cq" name="chongqing">重慶</li>
</ul>
<p class="hello">Hello</p> how are <p>you?</p>
</body>
<script type="text/javascript">
// 將 city 移除，再將其追加到 body 後面
// 綁定事件
$("#city").click(function() {
alert("O(∩_∩)O哈哈~");
});
// 綁定數據
$("#city").data("itheima", "黑馬程序員就是牛");
// 移除
// var $city = $("#city").remove(); // 刪除當前對象。若是以後再使用，元素自己保留，綁定的事件 或 綁定的數據 都會被移除。
var $city = $("#city").detach(); // 刪除當前對象。若是以後再使用，元素自己保留，綁定的事件 或 綁定的數據 都保留。
// 追加
$("body").append($city);
// 得到綁定的數據
alert($("#city").data("itheima"));
</script>
</html>
5.四、複製
詳解以下：
clone() 克隆
even ：指示事件處理函數是否會被複制。V1.5以上版本默認值是：false
示例代碼以下：
04-複製節點.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>04_複製節點.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
</head>
<body>
<button class="save">保存</button><br>
<p>段落</p>
</body>
<script type="text/javascript">
$(".save").click(function() {
var $new = $(this).clone(true);
$("body").append($new);
});
</script>
</html>
示例動圖以下：
5.五、替換
詳解以下：
A.replaceWith(B) 使用A將B替換掉
A.replaceAll(B) 使用B將A替換掉
示例代碼以下：
05-替換節點.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>05_替換節點.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
</head>
<html>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<button>保存</button>
</html>
<script type="text/javascript">
$("p").replaceWith("<a>點我啊</a></br>");
$("<a>點我啊</a></br>").replaceAll("p");
</script>
</html>
5.六、包裹
詳解以下：
A.wrap(B) 使用B標籤將每個A標籤進行包裹（多個B標籤）
<B>
<A></A>
</B>
<B>
<A></A>
</B>
檢查瀏覽器代碼以下圖所示：
A.wrapAll(B) 使用B標籤將全部A標籤進行包裹（一個B標籤）
<B>
<A></A>
<A></A>
</B>
檢查瀏覽器代碼以下圖所示：
A.wrapInner(B) 使用B標籤將每個A的標籤體包裹
<A><B>......</B></A>
<A><B>......</B></A>
檢查瀏覽器代碼以下圖所示：
A.unwrap() 將A的父元素刪除，本身留着
相關文章
- 1. 學習筆記_01
- 2. SpringMVC學習筆記_01
- 3. day67_Redis學習筆記_01
- 4. day45_Webservice學習筆記_01
- 5. Flask_學習筆記_01
- 6. PYGAME學習筆記_01
- 7. Spring Framework_學習記錄_01
- 8. hive學習_01
- 9. sqlserver學習_01
- 10. [學習任務]_01
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 學習筆記_01
- 2. SpringMVC學習筆記_01
- 3. day67_Redis學習筆記_01
- 4. day45_Webservice學習筆記_01
- 5. Flask_學習筆記_01
- 6. PYGAME學習筆記_01
- 7. Spring Framework_學習記錄_01
- 8. hive學習_01
- 9. sqlserver學習_01
- 10. [學習任務]_01