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 相关文章推荐
jquery下实现overlay遮罩层代码
Aug 25 Javascript
限制上传文件大小和格式的jQuery插件实例
Jan 24 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
js实现无缝滚动特效
Dec 20 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
js倒计时简单实现代码
Aug 11 Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 Javascript
实例讲解vue源码架构
Jan 24 Javascript
Vue中使用canvas方法总结
Feb 12 Javascript
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
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
PHP类的特性实例分析
2016/09/28 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
js jquery数组介绍
2012/07/15 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
自我评价的写作规则
2014/01/06 职场文书
财务部总监岗位职责
2014/03/12 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
求职信内容怎么写
2014/05/26 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
大国崛起观后感
2015/06/02 职场文书
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python