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

参考：https://www.jb51.net/article/39099.htm

jquery对dom的操作包括了对html内容的添加、删除元素/内容、操作CSS等等，本文整理了一些dom操作的常用方法，感兴趣的朋友可以参考下哈

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() 方法返回元素的高度（包括内边距和边框）。

jquery对dom的操作常用方法整理相关推荐

04-老马jQuery教程-DOM节点操作及位置和大小
1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...
JQuery对DOM的操作【三】
一．jQuery的DOM操作方法所有方法的特点:既可以设置属性,又可以获取属性二. html代码/文本/值:html().text().val() 1. 语法: 1) html() js对象中的i ...
jquery的DOM节点操作(删除元素节点)
1.删除元素节点在操作页面时,删除多余或者指定的页面元素是非常必要的. jquery中提供了remove()方法来删除元素. 其语法格式如下: 删除元素节点示例代码: <!DOCTYPE ht ...
jquery的DOM节点操作(复制元素节点)
1.复制元素节点在页面中,有时候需要复制某个元素节点,可以通过clone()方法轻松实现这一功能. 语法格式如下: 在复制元素节点后,也要将复制的元素节点追加到某元素节点下,这样才会在相应的区域显示 ...
jquery的DOM节点操作(替换元素节点)
1.替换元素节点在jquery中,如果要替换元素中的节点,可以使用replaceWith()和replaceAll()这两种方法.这里我们推荐使用replaceWith()方法,其语法格式分别如下: ...
jquery的DOM节点操作(创建和插入元素节点)
1.创建元素节点 2.插入节点动态创建新元素节点后,需要执行插入或追加操作,否则不会在页面显示出来. 按照元素的层次关系来分,可以分为内部和外部两种方法元素内部插入子节点元素内部插入子节点有两种 ...
JQuery：DOM操作
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构. DO ...
DOM节点操作大全(一)
下面是对DOM节点操作的整理,有创建节点.插入节点.删除节点.复制节点希望可以帮助到有需要的小伙伴哦在下一篇博客小编会整理DOM节点属性的知识点文章目录创建节点插入节点删除节点复制节点 ...
03-老马jQuery教程-DOM操作(上）
jQuery DOM操作在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...

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

jquery对dom的操作常用方法整理相关推荐

最新文章

热门文章