「jQuery系列」jQuery DOM操作/尺寸

文章目录

一、jQuery DOM操作
- 元素选择
- 元素创建
- 元素插入
- 元素删除
- 元素复制
- 属性操作
- 文本和 HTML 内容操作
- CSS 类操作
- 遍历 DOM
二、jQuery 尺寸
- 案例一：获取元素尺寸
- 案例二：设置元素尺寸
- 案例三：使用内外尺寸方法
三、热门文章

一、jQuery DOM操作

jQuery 提供了丰富的 DOM（文档对象模型）操作方法，使开发者能够轻松地创建、修改和删除页面上的元素。以下是 jQuery 中一些常用的 DOM 操作方法：

元素选择

$()：根据选择器选择元素。

var elements = $('div'); // 选择所有 div 元素

元素创建

$()：也可以用来创建新元素。

var newElement = $('<p>Hello, World!</p>'); // 创建一个新的 p 元素

元素插入

.append()：向每个匹配的元素内部末尾插入内容。
.appendTo()：将所有匹配的元素插入到另一个指定的元素集合中。
.prepend()：向每个匹配的元素内部开头插入内容。
.prependTo()：将所有匹配的元素插入到另一个指定的元素集合的开头。
.after()：在每个匹配的元素之后插入内容。
.insertAfter()：将所有匹配的元素插入到另一个指定的元素集合的每个元素后面。
.before()：在每个匹配的元素之前插入内容。
.insertBefore()：将所有匹配的元素插入到另一个指定的元素集合的每个元素前面。

$('#someElement').append('<p>New paragraph.</p>'); // 在 #someElement 元素内部末尾插入新段落

元素删除

.remove()：移除所有匹配的元素。
.empty()：移除所有匹配的元素内部的子节点。

$('#someElement').remove(); // 移除 #someElement 元素

元素复制

.clone()：复制匹配的元素集合。

var clonedElement = $('#someElement').clone(); // 复制 #someElement 元素

属性操作

.attr()：获取或设置匹配的元素的属性值。
.removeAttr()：从所有匹配的元素中移除一个属性。

$('#someElement').attr('class', 'new-class'); // 设置 #someElement 的 class 属性
$('#someElement').removeAttr('disabled'); // 移除 #someElement 的 disabled 属性

文本和 HTML 内容操作

.text()：获取或设置所有匹配元素的文本内容。
.html()：获取或设置所有匹配元素的 HTML 内容。

$('#someElement').text('New text content'); // 设置 #someElement 的文本内容
$('#someElement').html('<p>New HTML content.</p>'); // 设置 #someElement 的 HTML 内容

CSS 类操作

.addClass()：向所有匹配的元素添加指定的一个或多个类名。
.removeClass()：从所有匹配的元素中删除全部或者指定的类。
.toggleClass()：切换所有匹配的元素的类名。
.hasClass()：检查当前元素是否含有某个特定的类。

$('#someElement').addClass('highlight'); // 给 #someElement 添加 'highlight' 类
$('#someElement').removeClass('highlight'); // 从 #someElement 移除 'highlight' 类

遍历 DOM

.parent()：获取每个匹配元素的父元素。
.children()：获取每个匹配元素的直接子元素。
.siblings()：获取每个匹配元素的所有同胞元素。
.next() 和 .prev()：分别获取每个匹配元素的下一个和上一个同胞元素。
.find()：在匹配的元素集合中查找指定的后代元素。

var parentElement = $('#someElement').parent(); // 获取 #someElement 的父元素

二、jQuery 尺寸

jQuery 提供了多个处理元素尺寸的重要方法，包括：

width()：设置或返回元素的宽度（不包括内边距、边框或外边距）。
height()：设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth()：返回元素的宽度（包括内边距）。
innerHeight()：返回元素的高度（包括内边距）。
outerWidth()：返回元素的宽度（包括内边距和边框）。
outerHeight()：返回元素的高度（包括内边距和边框）。

此外，这两个方法还可以接受一个布尔值参数：

outerWidth(true)：返回元素的宽度，包括内边距、边框以及外边距。
outerHeight(true)：返回元素的高度，包括内边距、边框以及外边距。

案例一：获取元素尺寸

假设你有一个 <div> 元素，你想获取它的宽度和高度。你可以使用 width() 和 height() 方法来实现。

HTML:

<div id="myDiv">Hello, World!</div>
<button id="getSize">获取尺寸</button>
<p id="sizeInfo"></p>

jQuery:

$(document).ready(function() {$('#getSize').click(function() {var width = $('#myDiv').width();var height = $('#myDiv').height();$('#sizeInfo').text('宽度: ' + width + 'px, 高度: ' + height + 'px');});
});

在这个案例中，当用户点击按钮时，会触发一个事件处理函数，该函数获取 #myDiv 元素的宽度和高度，并将这些信息显示在 <p> 元素中。

案例二：设置元素尺寸

如果你想动态地改变元素的尺寸，可以使用 width() 和 height() 方法来设置新的尺寸。

HTML:

<div id="resizableDiv">这个 div 可以调整大小</div>
<button id="resize">调整大小</button>

jQuery:

$(document).ready(function() {$('#resize').click(function() {$('#resizableDiv').width(300).height(200);});
});

在这个案例中，当用户点击按钮时，#resizableDiv 元素的宽度将被设置为 300px，高度将被设置为 200px。

案例三：使用内外尺寸方法

有时你可能需要获取包括内边距、边框或外边距在内的元素尺寸。这时，可以使用 innerWidth(), innerHeight(), outerWidth(), 和 outerHeight() 方法。

HTML:

<div id="styledDiv" style="padding: 10px; border: 2px solid black; margin: 5px;">样式化的 div</div>
<button id="getStyledSize">获取样式化尺寸</button>
<p id="styledSizeInfo"></p>

jQuery:

$(document).ready(function() {$('#getStyledSize').click(function() {var innerWidth = $('#styledDiv').innerWidth();var innerHeight = $('#styledDiv').innerHeight();var outerWidth = $('#styledDiv').outerWidth(true); // 包含外边距var outerHeight = $('#styledDiv').outerHeight(true); // 包含外边距$('#styledSizeInfo').text('内宽: ' + innerWidth + 'px, 内高: ' + innerHeight + 'px, 外宽: ' + outerWidth + 'px, 外高: ' + outerHeight + 'px');});
});