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程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
节点遍历
jquery遍历子节点、jquery遍历dom节点、jquery遍历节点、jquery遍历兄弟节点、jquery 遍历所有节点,以便于您获取更多的相关知识。

时间: 2024-09-17 04:12:21

JQuery中节点遍历方法实例_jquery的相关文章

JQuery中节点遍历方法实例

  本文实例讲述了JQuery中节点遍历方法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran

jQuery中ajax - get() 方法实例详解_AJAX相关

在jquery中使用get,post和ajax方法给服务器端传递数据,在上篇文章给大家分享了jquery中ajax-post()方法实例,下面通过本文继续学习jQuery中ajax - get() 方法,具体介绍请看下文. jQuery Ajax 参考手册 实例 使用 AJAX 的 GET 请求来改变 div 元素的文本: $("button").click(function(){ $.get("demo_ajax_load.txt", function(resul

jQuery中ajax - get() 方法实例详解

在jquery中使用get,post和ajax方法给服务器端传递数据,在上篇文章给大家分享了jquery中ajax-post()方法实例,下面通过本文继续学习jQuery中ajax - get() 方法,具体介绍请看下文. jQuery Ajax 参考手册 实例 使用 AJAX 的 GET 请求来改变 div 元素的文本: $("button").click(function(){ $.get("demo_ajax_load.txt", function(resul

jQuery中ajax - post() 方法实例详解_AJAX相关

在jquery中的ajax有二个数据发送模式,一种是get,另一种是post(). jQuery Ajax 参考手册 实例 请求 test.php 网页,忽略返回值: $.post("test.php"); TIY 实例 通过 AJAX POST 请求改变 div 元素的文本: $("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp

jQuery中ajax - post() 方法实例详解

在jquery中的ajax有二个数据发送模式,一种是get,另一种是post(). jQuery Ajax 参考手册 实例 请求 test.php 网页,忽略返回值: $.post("test.php"); TIY 实例 通过 AJAX POST 请求改变 div 元素的文本: $("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp

jQuery中change事件用法实例_jquery

本文实例讲述了jQuery中change事件用法.分享给大家供大家参考.具体分析如下: change事件会在匹配元素失去焦点或者其值获得焦点并且改变时触发. 一个完整的事件过程,不但要有能够触发事件的条件,而且还要有事件处理程序.可以通过change()方法为change事件绑定事件处理程序.例如: 复制代码 代码如下: $("input").change(function(){$("input").css("backgroundColor",&

jQuery中mouseover事件用法实例_jquery

本文实例讲述了jQuery中mouseover事件用法.分享给大家供大家参考.具体分析如下: 当鼠标指针位于匹配的元素上方或者调用mouseover()方法时触发mouseover事件. 一个完整的事件过程,不但要有能够触发事件的条件,而且还要有事件处理程序. 可以通过mouseover()方法为mouseover事件绑定事件处理程序.例如: 复制代码 代码如下: $("div").mouseover(function(){$("div").text("欢

jQuery中click事件用法实例_jquery

本文实例讲述了jQuery中click事件用法.分享给大家供大家参考.具体分析如下: 当鼠标指针在匹配元素上方,然后按下并松开鼠标左键或者调用click()方法都会触发click事件. 一个完整的事件过程,不但要有能够触发事件的条件,而且还要有事件处理程序. 可以通过click()方法为click事件绑定事件处理程序.例如: 复制代码 代码如下: $("button").click(function(){$("div").css("color",

jQuery中ready事件用法实例_jquery

本文实例讲述了jQuery中ready事件用法.分享给大家供大家参考.具体分析如下: 此事件会在文档加载就绪以后触发,也就是当DOM对象已经加载,并且网页内容全部呈现时候触发. ready()方法可以为ready事件绑定事件处理方法,并且此方法的选择器是唯一的,那就是document对象.语法形式有三种,后两种是第一种的简写. 语法结构:语法一: 复制代码 代码如下: $(document).ready(function) 语法二: 复制代码 代码如下: $().ready(function)