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使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 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邮件群发机实现代码
2016/02/16 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
python3图片转换二进制存入mysql
2013/12/06 Python
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
美国第一香水网站:Perfume.com
2017/01/23 全球购物
医学院毕业生自荐信
2013/11/08 职场文书
应届生自我鉴定
2013/12/11 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang