JQuery中节点遍历方法实例


Posted in Javascript onMay 18, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
Vue-Router的使用方法
Sep 05 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
Jquery实现动态切换图片的方法
May 18 #Javascript
JQuery中基础过滤选择器用法实例分析
May 18 #Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 #Javascript
JQuery中属性过滤选择器用法实例分析
May 18 #Javascript
jquery表单对象属性过滤选择器实例分析
May 18 #Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 #Javascript
JavaScript的9种继承实现方式归纳
May 18 #Javascript
You might like
德生9700DX电路分析
2021/03/02 无线电
PHP开发文件系统实例讲解
2006/10/09 PHP
PHP 采集程序 常用函数
2008/12/18 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
javascript eval函数深入认识
2009/02/21 Javascript
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
python实现转圈打印矩阵
2019/03/02 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
python3注册全局热键的实现
2020/03/22 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
python中reload重载实例用法
2020/12/15 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
PHP如何删除一个Cookie值
2012/11/15 面试题
旅游市场营销方案
2014/03/09 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
停电放假通知
2015/04/14 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL