jquery DOM操作 基于命令改变页面


Posted in Javascript onMay 06, 2010

操作属性
jQuery提供.attr()方法改变属性值,.removeAttr()方法删除属性

$(document).ready(function(){ 
$('div.character a').each(function(index){ 
$(this).attr({ 
'rel': 'external', 
'id': 'mylink' + index 
}); 
}); 
});

插入新元素
jQuery提供了两种将元素插入到其它元素前面的方法,.insertBefore()方法和.before()方法,而.insertAfter()和.after()方法则用于将元素插入到其它元素后面.

$(document).ready(function(){
/*
*下面两种方法效果一样,使用.insertAfter()方法,可以通过连缀更多方法连续对所创建的a元素进行操作.
*而使用.after()方法,连缀的其它方法的操作对象会变成$('div.chapter p')中选择符匹配的元素
*/
$('<a href="#top">back to top</a>').insertAfter('div.chapter p');
$('div.chapter p').after('<a href="#top">back to top</a>');
});

DOM操作方法简单归纳
(1)要在每个匹配的元素中插入新元素,使用:

.append()
.appendTo()
.prepend()
.prependTo()
(2)要在每个匹配的元素相邻的位置上插入新元素,使用:

after()
.insertAfter()
.before()
.insertBefore()
(3)要在每个匹配元素的外部插入新元素,使用:

.wrap()
(4)要用新元素或文本替换每个匹配的元素,使用:

.html()
.text()
(5)要移除每个匹配的元素中的元素,使用:

.empty()
(6)要从文档中移除每个匹配的元素及其后代元素,但不实际删除它们,使用:

.remove()

Javascript 相关文章推荐
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
理解javascript模块化
Mar 28 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
JQuery 学习笔记01 JQuery初接触
May 06 #Javascript
Jquery 扩展方法
May 06 #Javascript
javascript 获取页面的高度及滚动条的位置的代码
May 06 #Javascript
屏蔽F1~F12的快捷键的js函数
May 06 #Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 #Javascript
picChange 图片切换特效的函数代码
May 06 #Javascript
JS 自定义函数缺省值的设置方法
May 05 #Javascript
You might like
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
Python实现的栈(Stack)
2018/01/26 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
对python中的装包与解包实例详解
2019/08/24 Python
django框架ModelForm组件用法详解
2019/12/11 Python
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
电话销售经理岗位职责
2013/12/07 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
广告语设计及教案
2014/03/21 职场文书
爱心倡议书范文
2014/05/12 职场文书
安全生产宣传标语
2014/06/06 职场文书
迎国庆演讲稿
2014/09/05 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
投标邀请书范本
2015/02/02 职场文书
幼儿园中班班级总结
2015/08/10 职场文书