jQuery操作属性和内容

1 jQuery属性

我们可以通过jQuery轻松的操作分配给HTML元素的属性。

比如元素的 href,src,id,class,style 属性。

attr()方法用于获取属性的值。

例如:

HTML:

<a href="https://www.csdn.net/">
   点击这里
</a> 

JavaScript:

$(function() {
  var val = $("a").attr("href");
  alert(val);
});
// 弹出提醒 "https://www.csdn.net/"

在上面的代码中，我们选择并提醒了<a>元素的href属性的值。

2 attr()方法

attr() 方法还允许我们通过第二个参数来给属性设置一个值。

例如：

$(function() {
  $("a").attr("href", "https://www.jquery.com");
});

这将把<a>元素的href属性的值改成 https://www.jquery.com。

3 删除属性

你还可以从HTML元素中删除属性。

removeAttr() 方法用于删除元素的任何属性。

在下面的示例中，我们删除了表的边框和类属性：

$("table").removeAttr("border");
$("table").removeAttr("class"); 

4 获取内容

有几种方法可以通过jQuery操作HTML元素的内容。

html() 方法用于获取所选元素的内容，包括HTML标记。

例如：

HTML：

<p>
  JQuery is <b>fun</b>
</p>

JS:

$(function() {
  var val = $("p").html();
  alert(val);
});
// 弹出 "JQuery is <b>fun</b>"

请注意，HTML标签<b>也被返回。

如果你只需要文本内容，不需要HTML标签，可以使用 text() 方法：

$(function() {
  var val = $("p").text();
  alert(val);
});
// 弹出 "JQuery is fun"

html() 和 text() 方法可以用于包含内容的所有HTML元素。

5 设置内容

可以使用 html() 和 text() 方法来更改HTML元素的内容。

要设置的内容作为方法的参数提供，例如：

HTML：

<div id="test">
   <p>some text</p>
</div>

JS:

$(function() {
  $("#test").text("hello!");
});

 上面的代码将 id="test" 的元素的内容更改为"hello!"。

如果你设置的内容包含HTML标记，则应使用 html() 方法而不是 text()。

6 val()

我们在上一课中已经看到我们如何使用text()和html()方法来操纵HTML元素的内容。

另一个有用的方法是val()方法，它允许我们获取和设置表单字段的值，例如: 文本框(input)，下拉列表(select) 等。

HTML：

<input type="text" id="name" value="你的名字">

JS:

$(function() {
  alert($("#name").val());
});
//弹出 "你的名字"

类似地，你可以在val()方法传入参数来设置该字段的值。

当需要处理表单事件和验证时，获取和设置表单域的值非常有用。

7 总结

以下jQuery方法可用于获取和设置所选HTML元素的内容和属性：

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

html() 设置或返回所选元素的内容（包括HTML标签）。

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

attr() 设置或返回属性的值。

removeAttr() 删除指定的属性。

8 添加内容

正如我们在以前的课程中所看到的，html() 和 text() 方法可以用于获取和设置所选元素的内容。 

然而，这些方法用于设置内容时，现有内容将被覆盖。

jQuery具有用于向所选元素添加新内容而不删除现有内容的方法：

append() 在所选元素的末尾插入内容。

prepend() 在所选元素的开头插入内容。

after() 插入所选元素后的内容。

before() 在所选元素之前插入内容。

append() 方法在所选HTML元素的末尾插入内容。

例如：

HTML：

<p id="demo">Hi </p>

JS:

$(function() {
  $("#demo").append("David");
});
//最终输出 "Hi David"

类似地，prepend()方法将插入所选元素的开始内容。 
你还可以插入带有HTML标签的内容。

before() 方法在被选元素之前插入指定内容。 
after() 方法在被选元素之后插入指定内容。 

例如:

HTML:

<p id="demo">Hi</p>

JS:

$(function() {
  $("#demo").before("<i>Some Title</i>");   
  $("#demo").after("<b>Welcome</b>");
});

 

9 添加新元素

append()，prepend()，before() 和 after() 方法也可用于添加新创建的元素。

使用jQuery创建新HTML元素的最简单方法如下：

var txt = $("<p></p>").text("Hi"); 

上面的代码创建一个新的<p>元素，其中包含文本Hi，并将其分配给一个名为txt的变量。

现在，我们可以将该变量作为上述方法的参数添加到我们的HTML中，例如：

HTML：

<p id="demo">Hello</p>

JS:

$(function() {
  var txt = $("<p></p>").text("Hi");
  $("#demo").after(txt);
});

这将在#demo段落之后插入新创建的<p>元素。

你也可以通过使用逗号分隔来指定多个元素作为 before()，after()，append()，prepend()方法的参数

例如：$("#demo").append(var1,var2,var3)。

上面提到的用于创建元素的语法可以用来创建任何新的HTML元素，例如$("<div></div>")可以创建一个新的div。