jQuery HTML

1.jQuery - 获得内容和属性
（1）获得内容 - 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(){
  alert("Value: " + $("#test").val());
});

（2）获取属性 - attr()

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

2.jQuery - 设置内容和属性
（1）设置内容 - text()、html() 以及 val()

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

（2）text()、html() 以及 val() 的回调函数

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

（3）设置属性 - attr()

$("button").click(function(){
  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});

3.jQuery - 添加元素
（1）jQuery append() 方法-在被选元素的结尾插入内容

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

（2）jQuery prepend() 方法

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

（3）通过 append() 和 prepend() 方法添加若干新元素

var txt1="<p>Text.</p>";              // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");  // 以 jQuery 创建新元素
var txt3=document.createElement("p");
txt3.innerHTML="Text.";               // 通过 DOM 来创建文本
$("body").append(txt1,txt2,txt3);        // 追加新元素
}

（4）jQuery after()-在被选元素之后插入内容 和 before() 方法-在被选元素之前插入内容

$("img").after("Some text after");
$("img").before("Some text before");

（5）通过 after() 和 before() 方法添加若干新元素

4.jQuery - 删除元素
（1）jQuery remove() 方法-删除被选元素及其子元素

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

（2）jQuery empty() 方法-删除被选元素的子元素

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

（3）过滤被删除的元素

$("p").remove(".italic");

5.jQuery - 获取并设置 CSS 类
（1）jQuery addClass() 方法-向被选元素添加一个或多个类

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

（2）jQuery removeClass() 方法-从被选元素删除一个或多个类

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

（3）jQuery toggleClass() 方法-对被选元素进行添加/删除类的切换操作

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

6.jQuery - css() 方法
（1）返回 CSS 属性

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

（2）设置 CSS 属性

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

（3）设置多个 CSS 属性

$("p").css({"background-color":"yellow","font-size":"200%"});

7.jQuery - 尺寸
（1）jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

$("button").click(function(){
  var txt="";
  txt+="Width: " + $("#div1").width() + "</br>";
  txt+="Height: " + $("#div1").height();
  $("#div1").html(txt);
});

（2）jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。

$("button").click(function(){
  var txt="";
  txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
  txt+="Inner height: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

（3）jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。

$("button").click(function(){
  var txt="";
  txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
  txt+="Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

（4）返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度

$("button").click(function(){
  var txt="";
  txt+="Document width/height: " + $(document).width();
  txt+="x" + $(document).height() + "\n";
  txt+="Window width/height: " + $(window).width();
  txt+="x" + $(window).height();
  alert(txt);
});