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 12 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
jQuery实现放大镜案例
Oct 19 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 Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
php短址转换实现方法
2015/02/25 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
实现JavaScript中继承的三种方式
2009/10/16 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
Python中的super用法详解
2015/05/28 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
Python中函数参数调用方式分析
2018/08/09 Python
python的faker库用法
2019/11/28 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
python中yield的用法详解
2021/01/13 Python
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
大学毕业生求职自荐信
2014/02/20 职场文书
医药营销个人求职信
2014/04/12 职场文书
学生保证书范文
2014/04/28 职场文书
初中作文评语
2014/12/25 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js