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插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 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 MYSQL中插入当前时间
2008/04/06 PHP
php在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
基于JQuery的cookie插件
2010/04/07 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
JS之相等操作符详解
2016/09/13 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
Python实现list反转实例汇总
2014/11/11 Python
python函数装饰器用法实例详解
2015/06/04 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
python不同版本的_new_不同点总结
2020/12/09 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
物流经理自我评价
2013/09/23 职场文书
给同学的道歉信
2014/01/16 职场文书
村长贪污检举信
2014/04/04 职场文书
舞蹈教育学专业自荐信
2014/06/15 职场文书
住房抵押登记委托书
2014/09/27 职场文书
公积金接收函格式
2015/01/30 职场文书
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技