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下利用fso判断文件是否存在的代码
Dec 11 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
jQuery中extend函数详解
Jul 13 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 Javascript
vscode中使用npm安装babel的方法
Aug 02 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
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
mayfish 数据入库验证代码
2010/04/30 PHP
基于php伪静态的实现详细介绍
2013/04/28 PHP
php分页函数完整实例代码
2014/09/22 PHP
PHP+Javascript实现在线拍照功能实例
2015/07/18 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
2013/12/30 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
django迁移文件migrations的实现
2020/03/31 Python
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
EJB发布WEB服务一般步骤
2012/10/31 面试题
ajax是什么及其工作原理
2012/02/08 面试题
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
初中政治教学反思
2014/01/17 职场文书
求职信的最佳写作思路
2014/02/01 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
批评与自我批评材料
2014/02/15 职场文书
读群众路线心得体会
2014/03/07 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书