bubuko inf urn nbsp tex toggle attr find fin

一：創建元素節點（添加）
創建元素節點並且把節點作為元素的子節點添加到DOM樹上

1.append(): 在元素下添加元素
　　用法：$("id").append("定義的節點"); 例如：var li1 = $("<li>橘子</li>");
　　添加屬性節點：$("<li class=‘test‘>草莓</li>")

2.appendTo(): 將元素添加到元素裏面
　　用法： $(li3).appendTo("#box1");

3.prepend(): 添加節點到元素的最上面

4.prependTo()：將節點添加給指定元素的最上面
　　用法：$(li3).prependTo("#box1");

5.before（）：將節點添加到指定元素的前面（外層）
　　用法： $("#div1").before(div1);

6.insertBefore()：將新建元素添加到目標節點前面左右目標元素的兄弟元素

7.after():將節點添加到指定元素的後面（外層）
　　用法: $("#div1").after(div1);

8.insertAfer(): 將新建的元素添加到目標節點後面作為兄弟元素
　　用法：$(element).insertAfter("目標節點")

二：刪除節點

remove(): 刪除所有匹配到的元素，這個方法能夠刪除元素的所有子節點
　　用法：$(element).remove();

empty(): empty原則上來講它並不是刪除元素，它只是清空節點，它能清空指定元素的所有子節點
　　用法： $(element).empty();

三：修改節點（替換節點，包裹節點，復制節點）

包裹節點：wrap() warpAll()
　　 用法：$(element).wrap("html")
　　註意：wrap()方法是將所有元素進行單獨的包裹，而warpAll()是用一個元素來包裹所有匹配的元素

復制節點：clone(true) 完全復制某一個元素 ：true復制元素的同時也復制它的行為，如果不需要復制行為的時候就不加參數
　　 用法：$(element).clone(true);

四：屬性操作（獲取屬性，設置屬性，刪除屬性）

獲取屬性：1.var $para=$("p");//獲取<p>節點
　　2.varp_txt=$para.attr("title");//獲取<p>元素節點屬性

設置屬性：1.$("p").attr("title","標題")；//設置單個的屬性值
　　　 2.$("p").attr({"title":"標題"，"class":"highlignt"}）；//為同一元素一次設置多個屬性

刪除屬性：removeAttr()
　　用法:$("p").removeAttr("title");//刪除<p>元素的屬性‘title’

五：樣式操作（獲取樣式，設置樣式，追加樣式，移除樣式，切換樣式，判斷是否存在樣式）

獲取樣式和設置樣式：attr()
用法：1.var p_class=$("p").attr("class");//獲取<p>元素的class
　 2.$("p").attr("class","high");//設置<p>元素的class為“high”

追加樣式:addClass()
用法：$("p").addClass("anthor");//給<p>元素的追加“anthor”類

移除樣式：removeClass()
用法：$("p").removeClass("anthor");//移除<p>元素中值為“anthor”的class

移除樣式：toggleClass()（切換即添加和刪除）
用法：$("p").toggleClass("high");//重復切換<p>元素中名為“high”的class

判斷是否存在樣式：hasClass()
用法：$("p").hasClass("high");//判斷<p>元素中是否存在值為“anthor”的class
$("p").hasClass("high") ===》$("p").is(".high"); //is("."+class)

根據這個章節的知識點，做了一個簡單的拼圖，效果圖如下圖：

解決方法如下：（方法一）

代碼：

<script type="text/javascript">

        $(function ()
        {
            function se() {
                //定義空白td的ID
                var tdId = 0;
                //得到當前空白的td的ID
                $("tr td").each(function () {
                    
 
//alert($(this).attr("id"));
                    //判斷td是否存在子元素
                    if ($(this).children().length <= 0) {
                        tdId = parseInt($(this).attr("id"));
                    }
                });
                return tdId;
            }
            
            //圖片的點擊事件
            $("img").click(function ()
            {
                //得到當前點擊圖片的ID
                var imgId = $(this).parent().attr("id");
                imgId = parseInt(imgId);
                var tdId = se();//空白td的ID
                //alert(imgId+"  "+tdId)
                //判斷當前點擊圖片周圍是否存在空白td，如果有，則移動圖片到空白位置
                if ( ((imgId - 1) != tdId) && ((imgId + 1) != tdId) && ((imgId + 3) != tdId) && ((imgId - 3) != tdId) ) 
                {
                    alert("該圖片不能被移動");
                }
                else
                {
                    if ((tdId % 3 == 1 && imgId % 3 == 0) || (tdId % 3 == 0 && imgId % 3 == 1)) {
                        alert("該圖片不能被移動");
                    }
                    else
                    {
                        $(this).appendTo("td[id=" + tdId + "]");
                    }
                }

            });
        });

    </script>

方法二：

代碼：

 $(function () {

            alert($("#1").width());

            $("td").click(function () {

                var id = $(this).prop("id"); //得到當前點擊的這個td的ID

                if (parseInt(id) + 3 < 10 && $("td[id=" + (parseInt(id) + 3) + "]").children().length == 0) { //向下移動

                    $(this).find("img").appendTo($("td[id=" + (parseInt(id) + 3) + "]"));
                }
                else if (parseInt(id) % 3 != 0 && $("td[id=" + (parseInt(id) + 1) + "]").children().length == 0) { //向右

                    $(this).find("img").appendTo($("td[id=" + (parseInt(id) + 1) + "]"));
                }
                else if (parseInt(id) % 3 != 1 && $("td[id=" + (parseInt(id) - 1) + "]").children().length == 0) { //向左
                    $(this).find("img").appendTo($("td[id=" + (parseInt(id) - 1) + "]"));
                }
                else if (parseInt(id) - 3 > 0 && $("td[id=" + (parseInt(id) - 3) + "]").children().length == 0) { //向上

                    $(this).find("img").appendTo($("td[id=" + (parseInt(id) - 3) + "]"));
                }

            })

        });

    </script>

jquery裏面的DOM操作（查找，創建，添加，刪除節點）