開發工具與關鍵技術：Visual Studio 2015 與 jQuery
作者：一頁紙鳶
撰寫時間：2020年5月2日
1.JavaScript中創建DOM節點
創建流程：
1.創建元素 document.createElement()
2.為節點添加一下屬性 element.setAttribute();
3.可以使用innerText或則innerHTML屬性添加文本或則HTML內容
4.使用parentElement.appendChild()方法將新創建的節點添加到父節點中
javaScript中的節點創建
window.onload = function () {
//創建DIV節點
var div = document.createElement("div");
//給創建的節點添加class屬性
div.setAttribute("class", "box");
//給創建的節點添加HTML內容
div.innerHTML = "這是一個通過JS動態添加的div";
console.log(div);
//將節點添加到body元素中
document.body.appendChild(div);
}
2. jQuery創建節點
語法：
jQuery節點的創建:$()函式處理，$("html結構")
jQuery創建的節點是一個jQuery物件
jQuery中的節點創建
$(document).ready(function () {
//通過jQuery的$()函式創建div節點并添加屬性與文本內容
var div = $("<div class='box'>這是一個通過jQuery動態添加的div</div>");
//$div.attr("class", "box");
//console.log(div);
//通過jQuery中的append()方法將新創建的節點添加到body元素中
$("body").append(div);
//$("body").append("<div class='box'>這是一個通過jQuery動態添加的div</div>");
});
3.jQuery節點(內部)插入
1.append()與appendTo()方法
方法：
append(content|fn):向每個匹配的元素內部追加內容
- $(A).append(B);將B添加到A中
appendTo(content):把所有匹配的元素追加到另一個指定的元素元素集合中。
- $(A).appendTo(B);把A追加到B中
總結：這兩個方法功能相同，主要的不同是語法—>內容和目標的位置不同
陳述句：
//append
function appendFun() {
// $(A).append(B);將B添加到A中
$(".box").append("<p>通過append方法動態添加的P標簽</p>");
}
//appendTo
function appendToFun() {
//$(A).appendTo(B); 把A追加到B中
$("<p>通過appendTo方法動態添加的P標簽</p>").appendTo(".box");
}
2.prepend()與prependTo()方法
方法：
prepend(content):向每個匹配的元素內部前置內容
- $(A).prepend(B);將B添加到A中(和append添加的元素有位置上的區別)
prependTo(content):把所有匹配的元素前置到另一個、指定的元素元素集合中。
- $(A).prependTo(B);把A追加到B中
陳述句：
//prepend
function prependFun() {
//$(A).prepend(B);將B添加到A中(和append添加的元素有位置上的區別)
$(".box").prepend("<p>通過prepend方法動態添加的P標簽</p>");
}
//prependTo
function prependToFun() {
$("<p>通過prepend方法動態添加的P標簽</p>").prependTo(".box");
//$(".btngroup").prependTo(".box");
}
4.jQuery節點(外部)插入
1.after()與before()
方法 ：
after(content|fn):在每個匹配的元素之后插入內容。
- $(A).after(B); 在A后面插入B元素
before(content|fn):在每個匹配的元素之前插入內容。
- $(A).before(B);在A前面插入B元素
陳述句：
function afterFun() {
//$(A).after(B); 在A后面插入B元素
$("#box").after("<p>通過jQuery中的after方法動態的添加P標簽</p>");
}
function beforeFun() {
// $(A).before(B);在A前面插入B元素
$("#box").before("<p>通過jQuery中的before方法動態的添加P標簽</p>");
}
2.insertAfter()與insertBefore()
方法：
insertAfter(content):把所有匹配的元素插入到另一個、指定的元素元素集合的后面。
- $(A).insertAfter(B) 在B后面插入A元素 與$(A).after(B)是相反的操作，但是功能一樣
insertBefore(content):把所有匹配的元素插入到另一個、指定的元素元素集合的前面。
- $(A).insertBefore(B) 在B前面面插入A元素 與$(A).before(B)是相反的操作，但是功能一樣
陳述句：
function insertAfterFun() {
// $(A).insertAfter(B) 在B后面插入A元素
$("<p>通過jQuery中的insertAfter方法動態的添加P標簽</p>").insertAfter("#box");
}
function insertBeforeFun() {
// $(A).insertBefore(B) 在B前面面插入A元素
$("<p>通過jQuery中的insertBefore方法動態的添加P標</p>").insertBefore("#box");
}
5.jQuery節點的洗掉
1.jQuery洗掉節點的方法 remove()與 empty()
方法：
1. empty() 洗掉匹配的元素集合中所有的子節點
2. remove([expr]) 從DOM中洗掉所有匹配的元素。expr:用于篩選元素的jQuery運算式
陳述句：
function emptyFun() {
//清空匹配元素集合中所有的子節點
$("#box").empty();
}
function removeFun() {
var ele= $("#box").remove();
//$("p").remove(":even");
console.log(ele);
$("body").append(ele);
}
2. jQuery洗掉節點的方法 detach()
方法：
detach() 從DOM中洗掉所有匹配的元素。
- 這個方法不會把匹配的元素從jQuery物件中洗掉，因而可以在將來再使用這些匹配的元素。
與remove()不同的是，所有系結的事件、附加的資料等都會保留下來
- $("div").detach()這一句會移除物件，僅僅是顯示效果沒有了。
但是記憶體中還是存在的。當你append之后，又重新回到了檔案流中。就又顯示出來了。
陳述句：
function detachFun(){
var $ele=$("#box").detach();
console.log($ele);
$("body").append($ele);
}
$("#box").click(function () {
alert("div#box被點擊了");
});
6.jQuery 元素的篩選
簡介：
eq(index|-index):獲取當前鏈式操作中第N個jQuery物件，回傳jQuery物件，當引數大于等于0時為正向選取，比如0代表第一個，1代表第二個。當引數為負數時為反向選取，比如-1為倒數第一個，具體可以看以下示例。
類似的有get(index),不過get(index)回傳的是DOM物件
。
引數說明：
index 一個整數，指示元素基于0的位置,這個元素的位置是從0算起。
-index 一個整數，指示元素的位置，從集合中的最后一個元素開始倒數。(-1算起)
first() 獲取第一個元素
last()獲取最后個元素
hasClass(class) 檢查當前的元素是否含有某個特定的類，如果有，則回傳true
這其實就是 is("." + class)。
filter(expr|obj|ele|fn) 篩選出與指定運算式匹配的元素集合。
這個方法用于縮小匹配的范圍。用逗號分隔多個運算式
find(expr|obj|ele)
搜索所有與指定運算式匹配的元素。這個函式是找出正在處理的元素的后代元素的好方法
uj5u.com熱心網友回復：
呃呃呃呃呃呃轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/230020.html
標籤：其他技術討論專區
上一篇：JavaWeb專案添加SpringMVC的支持和使用
下一篇：Axure軟體介紹