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 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
关于vue单文件中引用路径的处理方法
Jan 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
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
基于复选框demo(分享)
2017/09/27 Javascript
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
浅谈React中组件间抽象
2018/01/27 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
详解Python的Django框架中的模版相关知识
2015/07/15 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
如何通过python实现全排列
2020/02/11 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
结婚典礼证婚词
2014/01/08 职场文书
销售队伍口号
2014/06/11 职场文书
体育口号大全
2014/06/18 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
培根随笔读书笔记
2015/07/01 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python