jQuery菜鳥教程03

時間 2019-12-13

標籤 jquery 菜鳥教程欄目 JQuery 简体版

原文原文鏈接

jQuery 遍歷

什麼是遍歷？

jQuery 遍歷，意爲"移動"，用於根據其相對於其餘元素的關係來"查找"（或選取）HTML 元素。以某項選擇開始，並沿着這個選擇移動，直到抵達您指望的元素爲止。php

下圖展現了一個家族樹。經過 jQuery 遍歷，您可以從被選（當前的）元素開始，輕鬆地在家族樹中向上移動（祖先），向下移動（子孫），水平移動（同胞）。這種移動被稱爲對 DOM 進行遍歷。html

圖示解析：jquery

<div> 元素是 <ul> 的父元素，同時是其中全部內容的祖先。
<ul> 元素是 <li> 元素的父元素，同時是 <div> 的子元素
左邊的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同時是 <div> 的後代。
<span> 元素是 <li> 的子元素，同時是 <ul> 和 <div> 的後代。
兩個 <li> 元素是同胞（擁有相同的父元素）。
右邊的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同時是 <div> 的後代。
<b> 元素是右邊的 <li> 的子元素，同時是 <ul> 和 <div> 的後代。

jQuery 遍歷 - 祖先

祖先是父、祖父或曾祖父等等。ajax

經過 jQuery，您可以向上遍歷 DOM 樹，以查找元素的祖先。後端

向上遍歷 DOM 樹

這些 jQuery 方法頗有用，它們用於向上遍歷 DOM 樹：服務器

parent()
parents()
parentsUntil()

遍歷元素，以便找到它的父元素和子元素，進行修改標籤內容。好比把後臺數據返回到頁面表格中，用JavaScript創建表格，把數據一個一個放到每一個表格中。（上面是找到元素的父元素）post

jQuery 遍歷 - 後代

後代是子、孫、曾孫等等。url

經過 jQuery，您可以向下遍歷 DOM 樹，以查找元素的後代。spa

向下遍歷 DOM 樹

下面是兩個用於向下遍歷 DOM 樹的 jQuery 方法：code

children()
find()

（上面是找到元素的子元素）

jQuery 遍歷 - 同胞(siblings)

同胞擁有相同的父元素。

經過 jQuery，您可以在 DOM 樹中遍歷元素的同胞元素。

在 DOM 樹中水平遍歷

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

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

jQuery 遍歷- 過濾

縮小搜索元素的範圍

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

其餘過濾方法，好比 filter() 和 not() 容許您選取匹配或不匹配某項指定標準的元素。

好比頁面中有兩個div標籤，用first()能夠獲取第一個div標籤。進行操做。

jQuery - AJAX 簡介

AJAX 是與服務器交換數據的技術，它在不重載所有頁面的狀況下，實現了對部分網頁的更新。

jQuery - AJAX load() 方法

jQuery load() 方法

jQuery load() 方法是簡單但強大的 AJAX 方法。

load() 方法從服務器加載數據，並把返回的數據放入被選元素中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部內容加載成功!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改該文本</h2></div>
<button>獲取外部內容</button>

</body>
</html>

jQuery - AJAX get() 和 post() 方法

jQuery get() 和 post() 方法用於經過 HTTP GET 或 POST 請求從服務器請求數據。

jQuery $.get() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get("/try/ajax/demo_test.php",function(data,status){
            alert("數據: " + data + "\n狀態: " + status);
        });
    });
});
</script>
</head>
<body>

<button>發送一個 HTTP GET 請求並獲取返回結果</button>

</body>
</html>

jQuery $.post() 方法

$.post() 方法經過 HTTP POST 請求向服務器提交數據。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.post("/try/ajax/demo_test_post.php",{
            name:"菜鳥教程",
            url:"http://www.runoob.com"
        },
        function(data,status){
            alert("數據: \n" + data + "\n狀態: " + status);
        });
    });
});
</script>
</head>
<body>

<button>發送一個 HTTP POST 請求頁面並獲取返回內容</button>

</body>
</html>

後端是php.這是菜鳥教程 https://www.runoob.com/jquery/jquery-ajax-get-post.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。