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 Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
js 小贴士一星期合集
Apr 07 Javascript
js动态设置鼠标事件示例代码
Oct 30 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
浅析Ajax语法
Dec 05 Javascript
js实现楼层导航功能
Feb 23 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 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面向对象学习笔记之一 基础概念
2012/10/06 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
用Python逐行分析文件方法
2019/01/28 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
幼教简历自我评价
2014/01/28 职场文书
施工协议书范本
2014/04/22 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
超市促销活动总结
2014/07/01 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
辞职信如何写
2015/02/27 职场文书
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python