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图片放大镜功能的实例代码
Mar 26 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
微信小程序 扎金花简单实例
Feb 21 Javascript
浅谈Vue.js
Mar 02 Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 Javascript
vuejs2.0子组件改变父组件的数据实例
May 10 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
vue里使用create, mounted调用方法
Apr 26 Vue.js
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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
PHP中的reflection反射机制测试例子
2014/08/05 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
JavaScript实现单例模式实例分享
2017/12/22 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
python实现在windows服务中新建进程的方法
2015/06/30 Python
python统计日志ip访问数的方法
2015/07/06 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
python版飞机大战代码分享
2018/11/20 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
工业自动化毕业生自荐信范文
2014/01/04 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript
Python list列表删除元素的4种方法
2021/11/01 Python
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis
「月刊Action」2022年5月号封面公开
2022/03/21 日漫