jQuery修改DOM结构_动力节点Java学院整理


Posted in jQuery onJuly 05, 2017

直接使用浏览器提供的API对DOM结构进行修改,不但代码复杂,而且要针对浏览器写不同的代码。

有了jQuery,我们就专注于操作jQuery对象本身,底层的DOM操作由jQuery完成就可以了,这样一来,修改DOM也大大简化了。

添加DOM

要添加新的DOM节点,除了通过jQuery的html()这种暴力方法外,还可以用append()方法,例如:

<div id="test-div">
  <ul>
    <li><span>JavaScript</span></li>
    <li><span>Python</span></li>
    <li><span>Swift</span></li>
  </ul>
</div>

如何向列表新增一个语言?首先要拿到<ul>节点:

var ul = $('#test-div>ul');

然后,调用append()传入HTML片段:

ul.append('<li><span>Haskell</span></li>');

除了接受字符串,append()还可以传入原始的DOM对象,jQuery对象和函数对象:

// 创建DOM对象:
var ps = document.createElement('li');
ps.innerHTML = '<span>Pascal</span>';
// 添加DOM对象:
ul.append(ps);
// 添加jQuery对象:
ul.append($('#scheme'));
// 添加函数对象:
ul.append(function (index, html) {
  return '<li><span>Language - ' + index + '</span></li>';
});

传入函数时,要求返回一个字符串、DOM对象或者jQuery对象。因为jQuery的append()可能作用于一组DOM节点,只有传入函数才能针对每个DOM生成不同的子节点。

append()把DOM添加到最后,prepend()则把DOM添加到最前。

另外注意,如果要添加的DOM节点已经存在于HTML文档中,它会首先从文档移除,然后再添加,也就是说,用append(),你可以移动一个DOM节点。

如果要把新节点插入到指定位置,例如,JavaScript和Python之间,那么,可以先定位到JavaScript,然后用after()方法:

var js = $('#test-div>ul>li:first-child');
js.after('<li><span>Lua</span></li>');

也就是说,同级节点可以用after()或者before()方法。

删除节点

要删除DOM节点,拿到jQuery对象后直接调用remove()方法就可以了。如果jQuery对象包含若干DOM节点,实际上可以一次删除多个DOM节点:

var li = $('#test-div>ul>li');
li.remove(); // 所有<li>全被删除

以上所述是小编给大家介绍的jQuery修改DOM结构的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
html中两种获取标签内的值的方法
Jun 16 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 #jQuery
jquery拖动改变div大小
Jul 04 #jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 #jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 #jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery简介_动力节点Java学院整理
Jul 04 #jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 #jQuery
You might like
使PHP自定义函数返回多个值
2006/11/26 PHP
PHP 图片文件上传实现代码
2010/12/29 PHP
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
html5唤起app的方法
2017/11/30 HTML / CSS
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
Java如何支持I18N?
2016/10/31 面试题
大学生应聘自荐信
2013/10/11 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
ktv好的活动方案
2014/08/15 职场文书
丽江古城导游词
2015/02/03 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android