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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
Javascript 继承实现例子
Aug 12 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
JQuery动画与特效实例分析
Feb 02 Javascript
js字符串操作方法实例分析
May 06 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
Vue组件生命周期运行原理解析
Nov 25 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
实现树状结构的两种方法
2006/10/09 PHP
php 生成饼图 三维饼图
2009/09/28 PHP
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
js实现简单扫雷
2020/11/27 Javascript
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
在Python的Django框架中创建和使用模版
2015/07/15 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
Python对文件操作知识汇总
2016/05/15 Python
python 读入多行数据的实例
2018/04/19 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
pyshp创建shp点文件的方法
2018/12/31 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
python中turtle库的简单使用教程
2020/11/11 Python
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
优秀学生干部推荐材料
2014/02/03 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
冬季施工防火方案
2014/05/17 职场文书
求职信结尾怎么写
2014/05/26 职场文书
2019年幼儿园管理条例范本!
2019/07/17 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android