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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
简单介绍JavaScript的变量和数据类型
Jun 03 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
PHP SEO优化之URL优化方法
2011/04/21 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
JavaScript中的prototype使用说明
2010/04/13 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
Django实现学员管理系统
2019/02/26 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
在职研究生自我鉴定
2013/10/16 职场文书
主题实践活动总结
2014/05/08 职场文书
大学生作弊检讨书
2014/09/11 职场文书
煤矿安全保证书
2015/02/27 职场文书
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
python图像处理 PIL Image操作实例
2022/04/09 Python
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python