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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 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 开发环境配置(Zend Studio)
2010/04/28 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
PHP微信支付开发实例
2016/06/22 PHP
PHP递归算法的简单实例
2019/02/28 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
js 模拟气泡屏保效果代码
2010/07/10 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
js获取form的方法
2015/05/06 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
python中反射用法实例
2015/03/27 Python
进一步探究Python中的正则表达式
2015/04/28 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
Python中的整除和取模实例
2020/06/03 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
优秀小学生家长评语
2014/01/30 职场文书
自我鉴定标准格式
2014/03/19 职场文书
就业协议书
2014/09/12 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
二审代理词范文
2015/05/25 职场文书