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 相关文章推荐
javascript XML数据显示为HTML一例
Dec 23 Javascript
Js 本页面传值实现代码
May 17 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
js实现下拉框二级联动
Dec 04 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 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
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
Python发展简史 Python来历
2019/05/14 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
C语言编程练习
2012/04/02 面试题
团日活动总结模板
2014/06/25 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
时尚女魔头观后感
2015/06/04 职场文书
严以律己学习心得体会
2016/01/13 职场文书
《假如》教学反思
2016/02/17 职场文书
python基础详解之if循环语句
2021/04/24 Python
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers