jQuery 获取/设置
jQuery的一个非常重要的部分是操纵DOM的可能性。
jQuery提供了有效地操作HTML元素和属性的方法。
在本章中，我们将解释jQuery如何获取和设置元素内容以及属性值。
HTML DOM（文档对象模型）
文档对象模型，通常被称为DOM，是使网站交互的一个重要部分。
文档对象模型表示被显示在一个窗口中的HTML文档。
它是一个接口，允许jQuery操纵网站的内容，结构和样式。
jQuery获取或设置内容-html()，text()和val()
使用jQuery，我们可以轻松地操纵HTML元素。
我们有以下用于DOM操作的jQuery方法：
html()
text()
val()
jQuery html()方法
jQuery html()方法获取或设置所选元素的内容（innerHTML）。
下面的示例在单击按钮时获取第一段的内容：
示例
$("button").click(function(){
alert($("p").html());
});
下面的示例在单击按钮更改所有段落的内容：
示例
$("button").click(function(){
$("p").html("我想说: <b>Hello world</b>");
});
jQuery text()方法
jQuery text()方法获取或设置选定元素（包括其后代）的文本内容。
下面的示例在单击按钮时获取所有段落的文本内容：
示例
$("button").click(function(){
alert($("p").text());
});
下面的示例在单击按钮时更改所有段落的文本内容：
示例
$("button").click(function(){
$("p").text("我想说: Hello world");
});
html()和text()之间的区别
html()和text()方法都可以设置或获取HTML元素的内容，但是有以下区别：
html()：
设置或获取所选元素的内容（文本+ HTML标记）
当使用html()方法获取内容时，它将返回第一个选定元素的内容
text()：
设置或获取所选元素的内容（仅文本）
当使用text()方法获取内容时，它将返回所有选定元素的文本内容
下面的示例演示html()方法和text()方法之间的区别：
示例
$("#btn1").click(function(){
$("p").html("我想说: <b>Hello world</b>");
});
$("#btn2").click(function(){
$("p").text("我想说: <b>Hello world</b>");
});
jQuery val()方法
jQuery val()方法获取或设置所选表单元素的value属性。
以下示例获取<input>字段的值：
示例
$("button").click(function(){
$("input:text").val();
});
以下示例设置<input>字段的值：
示例
$("button").click(function(){
$("input").val("Hello world");
});
jQuery获取或设置属性-attr()
jQuery attr()方法获取或设置所选元素的属性和值。
以下示例获取图像的src属性的值：
示例
$("button").click(function(){
$("img").attr("src");
});
以下示例设置图像的src属性的值：
示例
$("button").click(function(){
$("img").attr("src", "logo_jquery.png");
});
下面的示例设置多个属性和值：
示例
$("button").click(function(){
$("img").attr({
alt: "Seagull Icon",
title: "Image by Seagull",
width: "350px",
height: "300px"
});
});
jQuery 添加元素
jQuery的一个非常重要的部分是可以操纵DOM。
jQuery提供了以有效方式添加新HTML元素的方法。
在本章中，我们将解释如何向DOM添加新的HTML元素/内容。
jQuery添加新的HTML内容
使用jQuery，我们可以轻松添加新的HTML元素。
我们有以下用于添加新内容的jQuery方法：
append()
prepend()
after()
before()
wrap()
jQuery append()方法
jQuery append()方法在每个选定元素的末尾（作为最后一个子元素）插入指定的内容。
下面的示例将一些文本内容附加到所有段落中：
示例
$("button").click(function(){
$("p").append("Hello world");
});
下面的示例将HTML附加到所有段落中：
示例
$("button").click(function(){
$("p").append("<b>Hello world</b>");
});
jQuery prepend()方法
jQuery prepend()方法在每个选定元素的开头（作为第一个子元素）插入指定的内容。
以下示例在所有段落之前添加了一些文本内容：
示例
$("button").click(function(){
$("p").prepend("Hello world");
});
以下示例在所有段落之前添加了一些HTML：
示例
$("button").click(function(){
$("p").prepend("<b>Hello world</b>");
});
使用append() 和 prepend()添加多个元素
在上面的示例中，我们仅在所选HTML元素的开始/结尾处插入了一些文本/ HTML。
但是，append()和prepend()方法都可以采用无限数量的新元素作为参数。
可以使用HTML元素（如上述示例），DOM元素或jQuery对象生成新元素。
在以下示例中，我们使用HTML元素，DOM元素和jQuery对象创建几个新元素：
示例
function appendText() {
let x = "<p>示例文本.</p>"; // 用HTML创建元素
let y = $("<p></p>").text("示例文本."); // 用jQuery创建
let z = document.createElement("p");// 用DOM创建
z.innerHTML = "示例文本.";
$("body").append(x, y, z); //添加新元素
}
jQuery after()方法
jQuery after()方法在所选元素之后插入指定的内容。
下面的示例在每个段落之后插入内容：
示例
$("button").click(function(){
$("p").after("<p>Hello world</p>");
});
jQuery before()方法
jQuery before()方法在所选元素之前插入指定的内容。
下面的示例在每个段落之前插入内容：
示例
$("button").click(function(){
$("p").before("<p>Hello world</p>");
});
使用after() 和 before()添加多个元素
同样，after()和before()方法都可以采用无限数量的新元素作为参数。
可以使用HTML元素（如上述示例），DOM元素或jQuery对象生成新元素。
在以下示例中，我们使用HTML元素，DOM元素和jQuery对象创建几个新元素：
示例
function afterText() {
let x = "<p>示例文本.</p>"; // 用HTML创建元素
let y = $("<p></p>").text("示例文本."); // 用jQuery创建
let z = document.createElement("p");// 用DOM创建
z.innerHTML = "示例文本.";
$("h1").after(x, y, z); // 在<h1>之后插入新元素
}
jQuery wrap()方法
jQuery wrap()方法将指定的HTML结构包裹在每个选定的元素前后。
下面的示例将DIV元素包裹在每个<p>元素前后：
示例
<!DOCTYPE html>
<html>
<title>jQuery - wrap()包裹包围元素示例 - 基础教程(nhooo.com)</title>
<head>
<style>
div {
background-color: lightgreen;
padding: 10px 16px;
margin: 10px 0;
border-radius: 6px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").wrap("<div></div>");
});
});
</script>
</head>
<body>
<p>这是第一段。</p>
<p>这是第二段。</p>
<p>这是最后一段。</p>
<button>在每个p元素周围包裹一个DIV元素</button>
</body>
</html>
jQuery 删除元素
jQuery的一个非常重要的部分是操纵DOM。
jQuery提供了许多方法，可以从文档中删除现有的HTML元素或内容。
在本章中，我们将说明如何从DOM中删除HTML元素/内容。
jQuery删除元素/内容
使用jQuery，我们可以轻松删除HTML元素。
我们有以下用于删除元素和内容的jQuery方法：
remove()
empty()
unwrap()
jQuery remove()方法
jQuery remove()方法从DOM中删除选定的元素及其子元素。
下面的示例从DOM中删除所有段落：
示例
$("button").click(function(){
$("p").remove();
});
jQuery remove()方法还接受一个参数，该参数使您可以过滤要删除的元素。
该参数可以是任何jQuery选择器。
下面的示例从DOM中删除所有包含“ Hello”的段落：
示例
$("button").click(function(){
$("p").remove(":contains('Hello')");
});
jQuery empty()方法
jQuery empty()方法从所选元素中删除所有子节点（包括文本节点）。
下面的示例从所有段落中删除所有子节点（包括文本节点）：
注意：此方法不会删除元素本身或其属性。
示例
$("button").click(function(){
$("p").empty();
});
jQuery unwrap()方法
jQuery unwrap()方法删除所选元素的父元素。
下面的示例删除所有段落的父元素：
示例
$("button").click(function(){
$("p").unwrap();
});
jQuery删除属性-removeAttr()
jQuery removeAttr()方法从所选元素中删除一个或多个属性。
下面的示例从所有超链接中删除href属性：
示例
$("button").click(function(){
$("a").removeAttr("href");
});
要删除多个属性，请用空格分隔属性名称。
下面的示例从所有段落中删除多个属性：
示例
$("button").click(function(){
$("p").removeAttr("id class title");
});
jQuery 操作CSS
jQuery的一个非常重要的部分是操纵DOM的可能性。
jQuery提供了有效地操作元素样式的方法。
在本章中，我们将说明如何在DOM中添加或删除CSS类。
jQuery操作CSS
使用jQuery，我们可以轻松地操纵元素的样式。
我们有以下用于CSS操作的jQuery方法：
addClass()
removeClass()
toggleClass()
css()
jQuery addClass()方法
jQuery addClass()方法将一个或多个类名称添加到所选元素。
下面的示例将类名添加到第一个<p>元素：
示例
$("button").click(function(){
$("p:first").addClass("highlight");
});
一次可以将多个类（用空格隔开）添加到所选元素，如下所示：
示例
<!DOCTYPE html>
<html>
<title>jQuery - addClass()添加多个class类示例 - 基础教程(nhooo.com)</title>
<head>
<style>
.highlight {
background-color: yellow;
color: red;
}
.big {
font-size: 3em;
padding: 12px 8px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p:first").addClass("highlight big");
});
});
</script>
</head>
<body>
<p>这是第一段。</p>
<p>这是第二段。</p>
<p>这是第三段。</p>
<p>这是最后一段。</p>
<button>在第一个p元素中添加多个类名</button>
</body>
</html>
jQuery removeClass()方法
jQuery removeClass()方法从所选元素中删除一个或多个类名称。
下面的示例从所有<p>元素中删除一个类名：
示例
$("button").click(function(){
$("p").removeClass("highlight");
});
一次可以从一组选定元素中删除一个以上的类（以空格隔开），如下所示：
示例
$("button").click(function(){
$("p").removeClass("highlight big");
});
如果在参数中未指定类名，则将删除所有类：
示例
$("button").click(function(){
$("p").removeClass();
});
jQuery toggleClass()方法
jQuery toggleClass()方法在添加/删除所选元素中的一个或多个类名称之间切换。
下面的示例在为所有<p>元素添加和删除“ anotherClass”类名称之间切换：
此方法检查每个元素的指定类名称：如果缺少类名，则添加，如果已经设置了类名，则将其删除
示例
<!DOCTYPE html>
<html>
<title>jQuery - toggleClass()在两个类之间切换示例 - 基础教程(nhooo.com)</title>
<head>
<style>
.myClass {
background: lightgreen;
font-size: 3em;
padding: 12px 8px;
margin: 10px 0;
}
.anotherClass {
width: 50%;
background: coral;
font-size: 3em;
padding: 30px 14px;
border-radius: 25px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("anotherClass");
});
});
</script>
</head>
<body>
<button>单击该按钮可在两个类之间切换</button>
<p class="myClass">这是一个段落</p>
</body>
</html>
jQuery CSS() 方法
jQuery css()方法获取或设置所选元素的一个或多个样式属性。
此方法提供了一种将样式（内联样式）直接应用于HTML元素的快速方法。
返回CSS属性值
要返回指定CSS属性的值，请使用以下语法：
$(selector).css(property)
下面的示例返回单击的DIV的背景色：
示例
$("div").click(function(){
$(this).css("background-color");
});
设置CSS属性和值
要设置指定的CSS属性和值，请使用以下语法：
$(selector).css(property, value)
下面的示例设置所有段落的color属性：
示例
$("button").click(function(){
$("p").css("color", "blue");
});
当使用css()方法获取属性值时，它将返回第一个选定元素的值。
使用css()方法设置属性值时，它将为所有选定元素设置一个或多个属性/值对。
设置多个CSS属性和值
要设置多个CSS属性和值，请使用以下语法：
$(selector).css({property:value, property:value, ...})
以下示例为所有段落设置了多个CSS属性和值：
示例
$("button").click(function(){
$("p").css({
"color": "white",
"font-size": "1.3em",
"background-color": "#4285f4",
"padding": "20px"
});
});
jQuery 尺寸
使用jQuery，可以轻松处理元素和浏览器窗口的尺寸。
jQuery提供了有效地操作元素尺寸的方法。
在本章中，我们将解释如何获取或设置HTML元素的尺寸。
jQuery尺寸方法
我们具有以下用于处理尺寸的jQuery方法：
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
jQuery width() 和 height()方法
jQuery width()方法获取或设置所选元素的宽度（不包括内边距，边框和外边距）。
jQuery height()方法获取或设置所选元素的高度（不包括内边距，边框和外边距）。
下面的示例获取DIV元素的宽度和高度：
示例
$("div").click(function(){
let w = $(this).width();
let h = $(this).height();
$(this).html("DIV的宽度: " + w + "<br>" + "DIV的高度: " + h);
});
下面的示例设置所有段落的宽度和高度：
示例
$("button").click(function(){
$("p").width(250);
$("p").height(100);
});
jQuery innerWidth()和innerHeight()方法
jQuery innerWidth()方法获取或设置所选元素的宽度（包括内边距）。
jQuery innerHeight()方法获取或设置所选元素的高度（包括内边距）。
下面的示例获取DIV元素的内部宽度和内部高度：
示例
$("div").click(function(){
let w = $(this).innerWidth();
let h = $(this).innerHeight();
$(this).html("Inner 宽度: " + w + "<br>" + "Inner 高度: " + h);
});
jQuery externalWidth()和outsideHeight()方法
jQuery outerWidth()方法获取或设置所选元素的宽度（包括内边距和边框）。
jQuery outerHeight()方法获取或设置所选元素的高度（包括内边距和边框）。
以下示例获取DIV元素的外部宽度和外部高度：
示例
$("div").click(function(){
let w = $(this).outerWidth();
let h = $(this).outerHeight();
$(this).html("Outer 宽度: " + w + "<br>" + "Outer 高度: " + h);
});
outerWidth(true) 方法获取或设置所选元素的宽度（包括内边距，边框和外边距）。
outerHeight(true) 该方法获取或设置所选元素的高度（包括内边距，边框和外边距）。
以下示例获取DIV元素的外部宽度和外部高度（包括边距）：
示例
$("div").click(function(){
let w = $(this).outerWidth(true);
let h = $(this).outerHeight(true);
$(this).html("Outer 宽度[+margin]:" + w + "<br>" + "Outer 高度[+margin]: " + h);
});
更多示例
显示width()，height()，innerWidth()，innerHeight()，outerWidth()和outerHeight()之间的差异：
示例
$("button").click(function(){
$("div").width();
$("div").innerWidth();
$("div").outerWidth();
$("div").height();
$("div").innerHeight();
$("div").outerHeight();
});
还可以找到窗口和文档的宽度和高度：
示例
$(window).width();// 返回浏览器窗口的宽度
$(document).width(); // 返回HTML文档的宽度
$(window).height();// 返回浏览器窗口的高度
$(document).height(); // 返回HTML文档的高度
网友评论