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 相关文章推荐
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
JavaScript中出现乱码的处理心得
Dec 24 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
小程序实现单选多选功能
Nov 04 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 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 数组教程 定义数组
2009/10/23 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
让你的网站可编辑的实现js代码
2009/10/19 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
python logging类库使用例子
2014/11/22 Python
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
python怎么提高计算速度
2020/06/11 Python
Django之腾讯云短信的实现
2020/06/12 Python
python dict如何定义
2020/09/02 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
体育教育个人自荐信范文
2013/12/01 职场文书
2013的个人自我评价
2013/12/26 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android