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实现滑动特效代码
Aug 10 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
js实现图片360度旋转
Jan 22 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
详解微信小程序中组件通讯
Oct 30 Javascript
antd table按表格里的日期去排序操作
Nov 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
smarty中post用法实例
2014/11/28 PHP
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
详解javascript高级定时器
2015/12/31 Javascript
js面向对象的写法
2016/02/19 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
python使用psutil模块获取系统状态
2016/08/27 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
python如何实现视频转代码视频
2019/06/17 Python
关于Python-faker的函数效果一览
2019/11/28 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
椰子猫砂:CatSpot
2018/08/27 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
自我评价200字分享
2013/12/17 职场文书
就业推荐表导师评语
2014/12/31 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏
nginx 添加http_stub_status_module模块
2022/05/25 Servers
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技