jQuery html和遍歷

本文轉載自查看原文 2018-09-09 15:09 1665

jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素和屬性變得很容易。

獲得內容 - text()、html() 以及 val()

三個簡單實用的用於 DOM 操作的 jQuery 方法：

text() - 設置或返回所選元素的文本內容
html() - 設置或返回所選元素的內容（包括 HTML 標記）
val() - 設置或返回表單字段的值

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

上面的三個 jQuery 方法：text()、html() 以及 val()，同樣擁有回調函數。回調函數有兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然后以函數新值返回您希望使用的字符串。

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "舊文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});
 
$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "舊 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
});

Query attr() 方法用於獲取屬性值。

$("button").click(function(){
  alert($("#runoob").attr("href"));// 獲取href值
});

$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",//設置新的href值
        "title" : "jQuery 教程"  //設置title值
    });
});

jQuery 方法 attr()，也提供回調函數。回調函數有兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然后以函數新值返回您希望使用的字符串。

$("button").click(function(){
  $("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
});

我們將學習用於添加新內容的四個 jQuery 方法：

append() - 在被選元素的結尾插入內容
```
$("p").append("追加文本");
```
prepend() - 在被選元素的開頭插入內容

$("p").prepend("在開頭追加文本");

after() - 在被選元素之后插入內容

$("img").after("在后面添加文本");

before() - 在被選元素之前插入內容

$("img").before("在前面添加文本");

append/prepend 是在選擇元素內部嵌入。

after/before 是在元素外面追加。

刪除元素/內容

如需刪除元素和內容，一般可使用以下兩個 jQuery 方法：

remove() - 刪除被選元素（及其子元素）
```
$("#div1").remove();
```
刪除div1元素及子元素
empty() - 從被選元素中刪除子元素

過濾被刪除的元素

jQuery remove() 方法也可接受一個參數，允許您對被刪元素進行過濾。

該參數可以是任何 jQuery 選擇器的語法。

下面的例子刪除 class="italic" 的所有 <p> 元素：

$("p").remove(".italic");

在使用 remove() 的過濾器刪除時，不能刪除帶有過濾器的子元素。

$(selector) 語法的返回結果是一個元素的列表，即：將 $("#div1") 看作一個列表，remove() 中的篩選條件實際上是對這個列表中的元素進行篩選刪除，而不會去刪除這個列表中不存在的元素（子元素不在這個列表中）。

jQuery 操作 CSS

jQuery 擁有若干進行 CSS 操作的方法。我們將學習下面這些：

addClass() - 向被選元素添加一個或多個類

$("button").click(function(){
  $("body div:first").addClass("important blue");
});

removeClass() - 從被選元素刪除一個或多個類

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

toggleClass() - 對被選元素進行添加/刪除類的切換操作

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

css() - 設置或返回樣式屬性

$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery的尺寸

jQuery 提供了多種遍歷 DOM 的方法。

遍歷方法中最大的種類是樹遍歷（tree-traversal）。

jQuery parent() 方法

parent() 方法返回被選元素的直接父元素。

該方法只會向上一級對 DOM 樹進行遍歷。

$(document).ready(function(){
  $("span").parents();
});

jQuery parents() 方法

parents() 方法返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>)。

下面的例子返回所有 <span> 元素的所有祖先，並且是ul元素：

$(document).ready(function(){
  $("span").parents("ul");
});

jQuery parentsUntil() 方法

parentsUntil() 方法返回介於兩個給定元素之間的所有祖先元素。

下面的例子返回介於 <span> 與 <div> 元素之間的所有祖先元素：

$(document).ready(function(){
  $("span").parentsUntil("div");
});

jQuery children() 方法

children() 方法返回被選元素的所有直接子元素。

該方法只會向下一級對 DOM 樹進行遍歷。

下面的例子返回類名為 "1" 的所有 <p> 元素，並且它們是 <div> 的直接子元素：

$(document).ready(function(){
  $("div").children("p.1");
});

jQuery find() 方法

find() 方法返回被選元素的后代元素，一路向下直到最后一個后代。

$(document).ready(function(){
  $("div").find("*");\\返回所有子元素；
});

在 DOM 樹中水平遍歷

有許多有用的方法讓我們在 DOM 樹進行水平遍歷：

siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

jQuery siblings() 方法

siblings() 方法返回被選元素的所有同胞元素。

$(document).ready(function(){
  $("h2").siblings("p"); \\返回同胞中所有的p元素
});

jQuery next() 方法

next() 方法返回被選元素的下一個同胞元素。

該方法只返回一個元素。

jQuery nextAll() 方法

nextAll() 方法返回被選元素的所有跟隨的同胞元素。

$(document).ready(function(){
  $("h2").nextAll();
});

jQuery nextUntil() 方法

nextUntil() 方法返回介於兩個給定參數之間的所有跟隨的同胞元素。

$(document).ready(function(){
  $("h2").nextUntil("h6");\\返回h2與h6之間的同胞元素

});

jQuery prev(), prevAll() & prevUntil() 方法

prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同胞元素（在 DOM 樹中沿着同胞之前元素遍歷，而不是之后元素遍歷）。

jQuery的遍歷過濾：縮小搜索元素的范圍

三個最基本的過濾方法是：first(), last() 和 eq()，它們允許您基於其在一組元素中的位置來選擇一個特定的元素。

其他過濾方法，比如 filter() 和 not() 允許您選取匹配或不匹配某項指定標准的元素。

jQuery first() 方法

first() 方法返回被選元素的首個元素。

jQuery last() 方法

last() 方法返回被選元素的最后一個元素。

$(document).ready(function(){
  $("div p").first();//返回第一個P元素
  $("div p").last();//返回最后一個P元素
});

遇到嵌套的情況時優先級是從里到外，從前到后。last() 也是同理，順序是從里到外，從后到前。

jQuery eq() 方法

eq() 方法返回被選元素中帶有指定索引號的元素。

索引號從 0 開始，因此首個元素的索引號是 0 而不是 1。

$(document).ready(function(){
  $("p").eq(1);//返回索引號為1的p元素，即第二個p元素；
});

jQuery filter() 方法

filter() 方法允許您規定一個標准。不匹配這個標准的元素會被從集合中刪除，匹配的元素會被返回。

下面的例子返回帶有類名 "url" 的所有 <p> 元素：

$(document).ready(function(){
  $("p").filter(".url");
});

jQuery not() 方法

not() 方法返回不匹配標准的所有元素。

提示：not() 方法與 filter() 相反。

下面的例子返回不帶有類名 "url" 的所有 <p> 元素：

$(document).ready(function()

 { $("p").not(".url");
 });

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery屬性遍歷、HTML操作【jQuery】 JQ和HTML以及JQ遍歷元素 jQuery json遍歷渲染到頁面並且拼接html HTML 遍歷 jquery根據(遍歷)html()的內容/根據子元素的內容（元素文本）來選擇（查詢），在子元素前加入元素 jQuery遍歷對象的方法 jQuery遍歷之find() jQuery循環遍歷取值 jquery 對 Json 的各種遍歷 jQuery遍歷之closest()方法