jQuery遍历节点树方法分析


Posted in Javascript onSeptember 08, 2016

本文实例讲述了jQuery遍历节点树方法。分享给大家供大家参考,具体如下:

demo.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
  var $body = $("body").children();
  var $p = $("p").children();
  var $ul = $("ul").children();
  alert( $body.length ); // <body>元素下有2个子元素
  alert( $p.length ); // <p>元素下有0个子元素
  alert( $ul.length ); // <p>元素下有3个子元素
  for(var i=0;i< $ul.length;i++){
    alert( $ul[i].innerHTML );
  }
});
//]]>
</script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
  <li title='苹果'>苹果</li>
  <li title='橘子'>橘子</li>
  <li title='菠萝'>菠萝</li>
</ul>
</body>
</html>

效果图:

jQuery遍历节点树方法分析

demo2.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
  var $p1 = $("p").next();
  alert( $p1.html() ); // 紧邻<p>元素后的同辈元素
  var $ul = $("ul").prev();
  alert( $ul.html() ); // 紧邻<ul>元素前的同辈元素
  var $p2 = $("p").siblings();
  alert( $p2.html() ); // 紧邻<p>元素的唯一同辈元素
});
//]]>
</script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
  <li title='苹果'>苹果</li>
  <li title='橘子'>橘子</li>
  <li title='菠萝'>菠萝</li>
</ul>
</body>
</html>

效果图:

jQuery遍历节点树方法分析

demo3.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
  $(document).bind("click", function (e) {
    $(e.target).closest("li").css("color","red");
  })
});
//]]>
</script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
  <li title='苹果'>苹果</li>
  <li title='橘子'>橘子</li>
  <li title='菠萝'>菠萝</li>
</ul>
</body>
</html>

效果图:

jQuery遍历节点树方法分析

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jqPlot Option配置对象详解
Jul 25 Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
JQuery实现倒计时按钮具体方法
Nov 14 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
利用python分析access日志的方法
Oct 26 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
Vue修改项目启动端口号方法
Nov 07 Javascript
vue实现打地鼠小游戏
Aug 21 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 #Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 #Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 #Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 #Javascript
jQuery事件绑定用法详解
Sep 08 #Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 #Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 #Javascript
You might like
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
JS 常用校验函数
2009/03/26 Javascript
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
python中global与nonlocal比较
2014/11/21 Python
python购物车程序简单代码
2018/04/18 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
Python实现仿射密码的思路详解
2020/04/23 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
应用心理学个人的求职信
2013/12/08 职场文书
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
技校毕业生自荐信
2014/06/03 职场文书
运动会加油稿
2015/07/22 职场文书
任命书格式范文
2015/09/22 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
SpringBoot详解执行过程
2022/07/15 Java/Android