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 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
jquery对ajax的支持介绍
Dec 10 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
vue实现户籍管理系统
May 29 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
2021年最新CPU天梯图
2021/03/04 数码科技
用在PHP里的JS打印函数
2006/10/09 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
php-fpm配置详解
2014/02/12 PHP
php中__toString()方法用法示例
2016/12/07 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
取得传值的函数
2006/10/27 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
python控制台显示时钟的示例
2014/02/24 Python
python实现定制交互式命令行的方法
2014/07/03 Python
Python中获取对象信息的方法
2015/04/27 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
屈臣氏俄罗斯在线商店:Watsons俄罗斯
2020/08/03 全球购物
投资意向书范本
2014/04/01 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书