JQuery中節點遍曆方法執行個體，jquery節點執行個體

JQuery中節點遍曆方法執行個體，jquery節點執行個體

本文執行個體講述了JQuery中節點遍曆方法。分享給大家供大家參考。具體如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery節點遍曆</title><script src="jquery-1.6.2.min.js" type="text/javascript"></script><script type="text/javascript">$(function () {  //-----舉例1.擷取節點之前的挨著的第一個兄弟元素  //var $divs = $("#div2").prev("div");   //只擷取div  //ShowArraysID($divs);  //-----舉例2.擷取節點之前的所有兄弟元素  //var $divs = $("#div2").prevAll("div"); //只擷取div  //var $divs = $("#div2").prevAll(); //擷取所有兄弟元素  //ShowArraysID($divs);  //-----舉例3.擷取節點之後的挨著的第一個兄弟元素  //var $divs = $("#div2").next("div"); //只擷取div div2後緊挨著的是input所以返回零個元素  //ShowArraysID($divs);  //-----舉例4.擷取節點之後的所有兄弟元素  類似prevAll 方向相反  //var $divs = $("#div2").nextAll(); //擷取所有兄弟元素  //ShowArraysID($divs);  //-----舉例4.siblings()方法用於擷取所有同輩元素(前後都拿到)  //$(".menuitem").siblings("li")。siblings、next等所有能傳遞選取器的地方能夠使用的文法都和$()文法一樣。  //var $divs = $("#div2").siblings("div"); //擷取id為div2前後的所有div元素  //ShowArraysID($divs);  var $divs = $("#div2").siblings(); //擷取id為div2前後的所有元素  ShowArraysID($divs);});function ShowArraysID($jqueryArr) {  var output = "";  for (var i = 0; i < $jqueryArr.length; i++) {    if (output == "") {      output = $jqueryArr.eq(i).attr("id");    }    else {      output += "," + $jqueryArr.eq(i).attr("id");    }  }  alert(output);}</script></head><body><div id="div1">我是div1</div><input id="Text3" type="text" value="我是text1" /><div id="div2">我是div2</div><input id="txt1" type="text" value="我是text1" /><div id="div3">我是div3</div><input id="Text1" type="text" value="我是text2" /><div id="div4">我是div4</div><input id="Text2" type="text" value="我是text3" /><div id="div5">我是div5</div></body></html>

希望本文所述對大家的jQuery程式設計有所協助。