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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
aspx中利用js实现确认删除代码
Jul 22 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 Javascript
JavaScript中跨域问题的深入理解
Mar 04 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+MySQL5.0中文乱码解决方法
2006/11/20 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
python threading模块操作多线程介绍
2015/04/08 Python
Django中使用locals()函数的技巧
2015/07/16 Python
小小聊天室Python代码实现
2016/08/17 Python
python如何将图片转换为字符图片
2020/08/19 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
python操作redis方法总结
2018/06/06 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
自我评价格式
2014/01/06 职场文书
车祸赔偿收入证明
2014/01/09 职场文书
教师校本培训方案
2014/02/26 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
住房抵押登记委托书
2014/09/27 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
文明倡议书
2015/01/19 职场文书
分享python函数常见关键字
2022/04/26 Python