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 相关文章推荐
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
jQuery-App输入框实现实时搜索
Nov 19 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数据加密详解
2013/06/18 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
JavaScript 变量基础知识
2009/11/07 Javascript
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
JavaScript实现alert弹框效果
2020/11/19 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
angular *Ngif else用法详解
2020/12/15 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
毕业生教师求职信
2013/10/20 职场文书
实习自我鉴定
2013/12/15 职场文书
公司员工安全协议书
2014/11/21 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
干部外出学习心得体会
2016/01/18 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript