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 相关文章推荐
取键盘键位ASCII码的网页
Jul 30 Javascript
优化 JavaScript 代码的方法小结
Jul 16 Javascript
一些实用的jQuery代码片段收集
Jul 12 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
jquery validation验证表单插件
Jan 07 Javascript
详解用node编写自己的cli工具
May 23 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
详解Vue3使用axios的配置教程
Apr 29 Vue.js
深入理解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
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
JavaScript实现随机五位数验证码
2019/09/27 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
python中enumerate函数用法实例分析
2015/05/20 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
如何在pycharm中安装第三方包
2020/10/27 Python
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
C语言中break与continue的区别
2012/07/12 面试题
个人实习生的自我评价
2014/02/16 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
python字典的元素访问实例详解
2021/07/21 Python