day40_jQuery學習筆記_01

day01: jQuery基礎 --> 選擇器、屬性和CSS、文檔處理 day02: jQuery高級 --> 篩選、事件、效果(動畫)、ajax

一、jQuery 的介紹

1.1、JS類庫

JavaScript 庫封裝了很多預定義的對象和`實用函數`。能幫助使用者建立有高難度交互客戶端頁面, 並且兼容各大瀏覽器。

1.2、當前流行的 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.3、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.4、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版本：目前最新版本

如下圖所示：

1.5、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讓開發者編寫插件，有許多成熟的插件可供選擇文檔說明很全

二、jQuery 的基本語法

2.1、jQuery語法：獲得jQuery對象

1-獲得jQuery對象.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>
</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.2、jQuery對象和dom對象的相互轉換

2-dom對象和jQuery對象的相互轉換.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>
</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標籤的下面
        // 1、使用javascript獲得value值
        var username = document.getElementById("username");
        alert(username.value);

        // 2、將 js中的dom對象 轉換成 jQuery對象
        //  語法：$(dom對象)
        //  建議：jQuery對象的變量名，建議以$開頭，方便閱讀
        var $username = $(username);
        alert($username.val());

        // 3、將 jQuery對象 轉換成 js的dom對象
        // 3.1、方式一：jQuery對象內部使用【數組】來存放所有的數據，可以通過數組的索引進行獲取
        var username2 = $username[0];
        alert(username2.value);
        // 3.2、方式二：jQuery 提供函數 get() 轉換成 js的dom對象
        var username3 = $username.get(0);
        alert(username3.value);
    </script>
</body>
</html>

三、jQuery 的【選擇器】

3.1、基本選擇器【掌握】

詳解如下：

#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>

示例動圖如下：

3.2、層級選擇器

詳解如下：

A B     獲得A元素內部所有的B的後代元素。（爺孫）
A>B     獲得A元素內部所有的B的子元素。（父子）
A+B     獲得A元素後面的第一個兄弟元素B。（1個兄弟）
A~B     獲得A元素後面的所有的兄弟元素B。（多個兄弟）

示例代碼如下： 02-層次選擇器.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>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>
......

示例動圖如下：

3.3、基本過濾選擇器

過濾選擇器格式 “:關鍵字”

詳解如下：

:first          獲取第一個元素（因爲jQuery對象的內部是一個數組）
:last           獲取最後一個元素
:eq(index)      獲取指定索引的元素
:gt(index)      獲取大於指定索引的元素
:lt(index)      獲取小於指定索引的元素
:even           獲取偶數索引的元素，從 0 開始計數。例如：查找表格的1、3、5...行（即索引值0、2、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() {
                // 1、先獲得元素的 defaultValue屬性 的默認值
                var dv = $(this).attr("defaultValue");
                // 2、判斷是否獲得焦點
                if ($(this).is(":focus")) {
                    // 2.1 、獲得焦點，如果獲得value屬性的值是默認值 ，就清空value值 ，否則不清空。this表示的是當前執行的對象，是dom對象，需要把 dom對象 轉換成 jQuery對象 
                    if ($(this).val() == dv) {
                        $(this).val("");
                        $(this).css("color", "#000");
                    }
                } else {
                    // 2.2、 失去焦點，如果獲得value屬性的值爲空，就設置value的值爲默認值，否則不設置。即 $(this).val() == "" 或  $(this).val().length == 0
                    if ($(this).val() == "") {
                        $(this).val(dv);
                        $(this).css("color", "#999"); // 字體的顏色
                    }
                }
            });
        }); 
    </script>
</head>
......

示例動圖如下：

3.4、內容過濾選擇器

詳解如下：

: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.5、可見性過濾選擇器[掌握]

詳解如下：

: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.6、屬性選擇器【掌握】

詳解如下：

[屬性名]            獲得指定屬性名的元素
[屬性名=值]         獲得屬性名 等於 指定值的 的元素【用的最多】
[屬性名!=值]        獲得屬性名 不等於 指定值的 的元素
[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.7、子元素過濾選擇器

詳解如下：

: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.8、表單過濾選擇器

詳解如下：

: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.9、表單對象屬性過濾選擇器【掌握】

詳解如下：

: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.10、選擇器小案例

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個開始，不要最後一個，來控制顯示或隱藏
            // 1、隱藏
            var $allLi = $("li:gt(4):not(:last)");
            $allLi.hide();
            // 2、點擊顯示
            $("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>

示例動圖如下：

四、jQuery 的屬性和CSS

4.1、屬性【掌握】

詳解如下：

attr(name)          獲得指定屬性名的值
attr(key, val)      給一個指定屬性名設置值
attr(prop)          給多個屬性名設置值，參數：prop，指的是：json數據，格式：{k:v, k:v, ...}
removeAttr(name)    移除指定屬性

4.2、CSS類【瞭解】

詳解如下：

指的是 <xxx class="a b c d my"> class可以設置多個值，多個值需要用空格隔開

addClass("my")      追加，追加一個類
removeClass("my")   移除，將指定類移除
toggleClass("my")   切換，如果有my類將移除，如果沒有該類將添加

4.3、HTML代碼/文本/值【掌握】

詳解如下：

val()       獲得value的值
val(text)   設置value的值

html()      獲得html代碼，含有標籤，即獲得標籤+文本
html(...)   設置html代碼，如果有標籤，將被解析

text()      獲得文本值，將標籤進行過濾，即只獲得文本
text(...)   設置文本值，如果有標籤，將被轉義，即：< 轉義爲 &lt;     & 轉義爲 &amp;      > 轉義爲 &lt;       空格 轉義爲 &nbsp;

4.4、CSS

詳解如下：

指的是 <xxx style="key:value; key:value;">

css(name)           獲得指定名稱的css值
css(name, value)    設置一對值
css(prop)           設置一組值

4.5、位置

詳解如下：

offset()        獲得座標，返回的是JSON對象，格式：{"top":200, "left":100}
offset(...)     設置座標，例如：$(this).offset({"top":0, "left":0})
scrollTop()        垂直滾動條，滾過的距離
scrollTop(...)     垂直滾動條，滾過的距離
scrollLeft()       水平滾動條，滾過的距離
scrollLeft(...)    水平滾動條，滾過的距離

4.6、尺寸

詳解如下：

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() {
            // 1、屬性 
            // 設置姓名文本框不可用
            // 方式一：
            // $("[name='username']").attr("disabled", "disabled"); // attr(key, val)  給一個指定屬性名設置值
            // 方式二：
            $("[name='username']").attr("disabled", "");
            // 設置姓名文本框可用，則必須移除之前設置的屬性
            $("[name='username']").removeAttr("disabled");

            // 2、CSS類
            $("#buttonId").click(function() {
                // 點擊普通按鈕，給姓名文本框切換樣式
                $("[name='username']").toggleClass("textClass2"); 
            });

            // 3、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>");

            // 4、CSS
            $("div:eq(0)").css("border", "1px solid #999"); // 設置一個值
            $("div:eq(0)").css({
                "width":"150px",
                "height":"100px",
                "font-size":"20px",
                "color":"#f00"          
            }); // 設置一組值

            // 5、位置和尺寸瞭解即可，以後做更炫的網頁的時候再用
        });
    </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>

五、jQuery 的文檔處理

5.1、內部插入【掌握】

詳解如下：

// 方式一：適合編程
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.2、外部插入【掌握】

詳解如下：

// 方式一：適合編程
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.3、刪除[掌握]

詳解如下：

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.4、複製

詳解如下：

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.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.6、包裹

　　詳解如下：

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的父元素刪除，自己留着