jQuery(2)--HTML

获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

获取

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

设置
$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

　　

jQuery attr() 方法用于获取属性值。设置或返回匹配元素的属性和值

下面的例子演示如何获得链接中 href 属性的值

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");

删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素　

$("#div1").remove();
$("#div1").empty();

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

类
.important
{
font-weight:bold;
font-size:xx-large;
}

.blue
{
color:blue;
}
设置
$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});
删除
$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

css() 方法设置或返回被选元素的一个或多个样式属性

如需返回指定的 CSS 属性的值，请使用如下语法：

$("p").css("background-color");

如需设置指定的 CSS 属性，请使用如下语法：

$("p").css("background-color","yellow");
如需设置多个 CSS 属性
$("p").css({"background-color":"yellow","font-size":"200%"});