jquery裏面的DOM操作(查找,創建,添加,刪除節點)
一:創建元素節點(添加)
創建元素節點並且把節點作為元素的子節點添加到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操作(查找,創建,添加,刪除節點)