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 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
微信小程序自动客服功能
Nov 02 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
JS简单数组排序操作示例【sort方法】
May 17 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
用header 发送cookie的php代码
2007/03/16 PHP
Session保存到数据库的php类分享
2011/10/24 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
JS 显示当前日期与时间的代码
2010/03/24 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
2016/03/02 DOTA
Python探索之ModelForm代码详解
2017/10/26 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
C语言基础笔试题
2013/04/27 面试题
护理专业优质毕业生自荐书
2014/01/31 职场文书
表演方阵解说词
2014/02/08 职场文书
大型会议策划方案
2014/05/17 职场文书
积极向上的团队口号
2014/06/06 职场文书
2014年实习生工作总结
2014/11/27 职场文书
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA