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 相关文章推荐
Google Map Api和GOOGLE Search Api整合实现代码
Jul 18 Javascript
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
javascript 面向对象 function类
May 13 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 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
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
PHP如何得到当前页和上一页的地址?
2006/11/27 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
windows上安装Anaconda和python的教程详解
2017/03/28 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
Delphi软件工程师试题
2013/01/29 面试题
心理学专业毕业生推荐信范文
2013/11/21 职场文书
奉献爱心演讲稿
2014/09/04 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
1000字打架检讨书
2014/11/03 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
出国留学自荐信模板
2015/03/06 职场文书
预备党员群众意见
2015/06/01 职场文书