jQuery实现动态添加节点与遍历节点功能示例


Posted in jQuery onNovember 09, 2017

本文实例讲述了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>
  <title></title>
  <script src="jquery-1.10.2.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      var link = $("<a href='http://www.baidu.com'>百度</a>"); //创建一个节点
      $("div:first").append(link); //将link节点添加到第一个div中
      var link = $("<a href='http://www.google.com.hk'>谷歌</a>"); //重新创建一个节点
      $("div:last").append(link); //将link节点添加到最后一个div中
    })
    //======================================================================================
    //定义一个字典风格的数组
    var data = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com.cn", "搜狐": "http://www.sohu.com" };
    $(function () {
      $.each(data, function (key, value) { //遍历这个数组,调用匿名函数进行处理
        var link = $("<tr><td><a href=" + value + " rel="external nofollow" >" + key + "</a></td></tr>"); //创建一个节点
        $("#table1").append(link); //将这个节点加入到table中
      })
    })
  </script>
</head>
<body>
<div></div>
<div></div>
<table id="table1"></table>
</body>
</html>

遍历节点:

HTML部分:

<html>
<head>
  <title></title>
  <script src="jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
<body>
  <div>AA</div>
  <div>BB</div>
  <div>CC</div>
  <p>DD</p>
  <p>EE</p>
  <div>FF</div>
  <div>KK</div>
</body>
</html>

js部分:

<script type="text/javascript">
//节点遍历
/*--next()方法用于获取“节点之后”挨着它的第一个“同类同辈”元素--*/
$(function () {
  $("div").click(function () {
  alert($(this).next("div").text()) //效果:当单击AA的时候会弹出BB,当点击BB的时候会弹出CC,当点击CC的时候会弹出空的警告框(因为CC这个div节点后挨着它的是p元素,所以就弹出一个空的警告框),当点击FF的时候会弹出KK,当点击KK的时候会弹出空的警告框,(因为KK这个div节点后没有同辈的div元素挨着它了,所以就弹出一个空的警告框)
  /*--nextAll()方法用于获取“节点之后”所有的同辈元素--*/
  $("div,p").click(function () {
    alert($(this).nextAll().text()); //当单击div标签或者p标签的时候弹出点击的当前标签后的所有标签的text();
  })
  $("div,p").click(function () {
    alert($(this).nextAll("p").text()); //当单击div标签或者p标签的时候弹出点击的当前标签后的所有p标签的text();
  })
  $("div").click(function () {
    $(this).nextAll("div").css("background", "red"); //当点击div标签的时候将它后面的所有div标签的背景都设为红色
  })
  $("div").click(function () {
    $.each($(this).nextAll("div"), function () { $(this).css("background-color", "red") })
  //当点击div标签的时候将它后面的所有div标签的背景都设为红色,与上面的那一条效果是一样的(解释:先取得当前点击的div标签后面的所有div标签,然后对它进行遍历,然后通过后面的匿名函数将取得的所有div标签的背景设为红色)注意这前后两个this意思是不一样的:前面的this指的是当前点击的div标签,后面的thi是:在获取到当前点击的div标签的“后面的div标签”后,遍历他们的每一个div,后面的thi是:在后面的匿名函数正在处理的“当前遍历到的div标签” 【前面的是当前点击的div,后面的匿名函数的真正处理的当前div】
  })
  $("div,p").click(function () {
    //$(this).css("background", "red"); $(this).siblings().css("background", "yellow"); //将当前点击的div或者P标签背景设为红色,其他的兄弟标签背景设为黄色
    $(this).css("background", "red").siblings().css("background", "yellow");//与上面一句等同
  })
})
</script>

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

jQuery 相关文章推荐
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
jquery实现点击左右按钮切换图片
Jan 27 jQuery
简单实现jquery隔行变色
Nov 09 #jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 #jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 #jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 #jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 #jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 #jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 #jQuery
You might like
利用PHP生成CSV文件简单示例
2016/12/21 PHP
php查询内存信息操作示例
2019/05/09 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
技校教师求职简历的自我评价
2013/10/20 职场文书
毕业生自荐书
2013/12/18 职场文书
开工仪式策划方案
2014/05/23 职场文书
师德模范事迹材料
2014/06/03 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
总经理司机岗位职责
2015/04/10 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
劳动模范获奖感言
2015/07/31 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python