jquery对dom的操作常用方法整理


Posted in Javascript onJune 25, 2013

Jquery对dom的操作也是很总要的。

1.三个简单实用的用于 DOM 操作的 jQuery 方法:

· text() - 设置或返回所选元素的文本内容

· html() - 设置或返回所选元素的内容(包括 HTML 标记)

· val() - 设置或返回表单字段的值

2.attr()获取属性。当然这两也是可以自己设置值来修改的,

3.对html内容的添加。添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法:

· append() - 在被选元素的结尾插入内容

· prepend() - 在被选元素的开头插入内容

· after() - 在被选元素之后插入内容

· before() - 在被选元素之前插入内容

4.删除元素/内容

如需删除元素和内容,一般可使用以下两个 jQuery 方法:

· remove() - 删除被选元素(及其子元素)

· empty() - 从被选元素中删除子元素

5.jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:

· addClass() - 向被选元素添加一个或多个类

· removeClass()- 从被选元素删除一个或多个类

· toggleClass()- 对被选元素进行添加/删除类的切换操作

· css() - 设置或返回样式属性

例子

$("h1,h2,p").addClass("blue");首先我们知道当对多种标签添加样式的时候我们用‘,'分开。Blue一定是一个设置好的.Blue{}类选择器

$("h1,h2,p").removeClass("blue");

$("h1,h2,p").toggleClass("blue");有样式就会移除,没样式就会添加

6.设置多个 CSS 属性

如需设置多个 CSS 属性,请使用如下语法:

css({"propertyname":"value","propertyname":"value",...});

7.jQuery 尺寸 方法

jQuerywidth() 和height() 方法

width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

jQueryinnerWidth() 和innerHeight() 方法

innerWidth() 方法返回元素的宽度(包括内边距)。

innerHeight() 方法返回元素的高度(包括内边距)。

jQueryouterWidth() 和outerHeight() 方法

outerWidth() 方法返回元素的宽度(包括内边距和边框)。

outerHeight() 方法返回元素的高度(包括内边距和边框)。

Javascript 相关文章推荐
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
vue使用video插件vue-video-player的示例
Oct 03 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
Extjs单独定义各组件的实例代码
Jun 25 #Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 #Javascript
Jquery选择子控件"大于号"和" "区别介绍及使用示例
Jun 25 #Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 #Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 #Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 #Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 #Javascript
You might like
利用 window_onload 实现select默认选择
2006/10/09 PHP
用PHP制作的意见反馈表源码
2007/03/11 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
jQuery数组处理方法汇总
2011/06/20 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
小程序实现五星点评效果
2018/11/03 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
python转换摩斯密码示例
2014/02/16 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
python入门教程之基本算术运算符
2020/11/13 Python
Java中compareTo和compare的区别
2016/04/12 面试题
家长会学生家长演讲稿
2013/12/29 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
项目建议书模板
2014/05/12 职场文书
结婚典礼致辞
2015/07/28 职场文书
九年级数学教学反思
2016/02/17 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python
详解redis在微服务领域的贡献
2021/10/16 Redis