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 相关文章推荐
asp.net 30分钟掌握无刷新 Repeater
Sep 16 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
node.js中的fs.readlink方法使用说明
Dec 17 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
Vue中component标签解决项目组件化操作
Sep 04 Javascript
实现vuex原理的示例
Oct 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
php获得文件扩展名三法
2006/11/25 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python 文件与目录操作
2008/12/24 Python
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
浅谈python中get pass用法
2019/03/19 Python
python与字符编码问题
2019/05/24 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
python里反向传播算法详解
2020/11/22 Python
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
新闻专业学生的自我评价
2014/02/13 职场文书
第二课堂活动总结
2014/05/07 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB