強大的JQuery（三）--操作html與遍曆，jquery--html

最後更新：2014-08-17 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

前兩篇部落格講到了JQuery的基礎知識以及其動畫效果，本篇將為大家介紹jquery操縱html以及jquery的遍曆。

一、jquery操作html1.擷取內容和屬性

text() - 設定或返回所選元素的常值內容
html() - 設定或返回所選元素的內容（包括 HTML 標籤）
val() - 設定或返回表單欄位的值

attr()- 方法用於擷取屬性值。

執行個體：

<span style="font-size:18px;">$("#btn1").click(function(){  alert("Text: " + $("#test").text());});$("#btn2").click(function(){  alert("HTML: " + $("#test").html());});</span>

<pre><span style="font-size:18px;">$("button").click(function(){  alert($("#w3s").attr("href"));});</span>

2、設定內容 - text()、html() 以及 val()

執行個體：

<span style="font-size:18px;">$("#btn1").click(function(){  $("#test1").text("Hello world!");});$("#btn2").click(function(){  $("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){  $("#test3").val("Dolly Duck");});</span>

<pre><span style="font-size:18px;">$("button").click(function(){  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");});</span>

3、添加元素

append() - 在被選元素的結尾插入內容
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素之後插入內容
before() - 在被選元素之前插入內容

執行個體：

<span style="font-size:18px;">function appendText(){var txt1="<p>Text.</p>";               // 以 HTML 建立新元素var txt2=$("<p></p>").text("Text.");   // 以 jQuery 建立新元素var txt3=document.createElement("p");  // 以 DOM 建立新元素txt3.innerHTML="Text.";$("p").append(txt1,txt2,txt3);         // 追加新元素}</span>

<pre><span style="font-size:18px;">function afterText(){var txt1="<b>I </b>";                    <span class="code_comment">// 以 HTML 建立新元素</span>var txt2=$("<i></i>").text("love ");     <span class="code_comment">// 通過 jQuery 建立新元素</span>var txt3=document.createElement("big");  <span class="code_comment">// 通過 DOM 建立新元素</span>txt3.innerHTML="jQuery!";$("img").after(txt1,txt2,txt3);          <span class="code_comment">// 在 img 之後插入新元素</span>}</span>

4、刪除元素

remove() - 刪除被選元素（及其子項目）
empty() - 從被選元素中刪除子項目

5、操作css

addClass() - 向被選元素添加一個或多個類
removeClass() - 從被選元素刪除一個或多個類
toggleClass() - 對被選元素進行添加/刪除類的切換操作
css() - 設定或返回樣式屬性

舉例：

<span style="font-size:18px;">$("button").click(function(){  $("h1,h2,p").addClass("blue");  $("div").addClass("important");});</span>

二、JQuery遍曆1、什麼是遍曆？

jQuery 遍曆，意為“移動”，用於根據其相對於其他元素的關係來“尋找”（或選取）HTML 元素。以某項選擇開始，並沿著這個選擇移動，直到抵達您期望的元素為止。

解釋：

<div> 元素是 <ul> 的父元素，同時是其中所有內容的祖先。

<ul> 元素是 <li> 元素的父元素，同時是 <div> 的子項目

左邊的 <li> 元素是 <span> 的父元素，<ul> 的子項目，同時是 <div> 的後代。

<span> 元素是 <li> 的子項目，同時是 <ul> 和 <div> 的後代。

兩個 <li> 元素是同胞（擁有相同的父元素）。

右邊的 <li> 元素是 <b> 的父元素，<ul> 的子項目，同時是 <div> 的後代。

<b> 元素是右邊的 <li> 的子項目，同時是 <ul> 和 <div> 的後代。

2、向上遍曆

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

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

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

舉例

<span style="font-size:18px;">$(document).ready(function(){  $("span").parentsUntil("div");});</span>

3、向下遍曆

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

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

4、同輩遍曆

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

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

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

5、過濾

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

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

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

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

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

例如

<span style="font-size:18px;">$(document).ready(function(){  $("p").not(".intro");});</span>

<pre><span style="font-size:18px;">$(document).ready(function(){  $("div p").last();});</span>

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

關於jquery遍曆的函數還有很多，我就不一一列舉了，有興趣的朋友請自行查看Query協助文檔。

要想掌握好一門語言，即使是一門非常簡單的語言，實踐和思考都是必不可少的，JQuery強大而簡單，需要我們在以後的工作學習中反覆的運用才能去真正掌握。

jquery遍曆

var str = "";
$("li").each(function(){str += $(this).text()})

jQuery遍曆的問題

<ul>
<li><a herf="1.html">1</a></li>
<li><a herf="2.html">2</a></li>

<li><a herf="3.html">3</a></li>

<li><a herf="4.html">4</a></li>
</ul>
var thisLI=$("ul li");//得到所有LI
thisLI.each(function(i) {
if(i==0)
{
alert( $(this).attr("href"));
}
});
i 是從零開始，你想要哪個就哪個

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

強大的JQuery（三）--操作html與遍曆，jquery--html

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support