jQuery HTML

 

获得内容

--text()  html()  val()

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());
});

 

获取属性值

--attr()

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

设置内容

--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");
});

设置属性

--attr()

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

添加元素
append()  --在被选元素的结尾插入内容

prepend() --在被选元素的开头插入内容

after()      --在被选元素之后插入内容

before()    --在被选元素之前插入内容

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

删除元素
remove() --删除被选元素及其子元素

empty()   --从被选元素中清除子元素

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

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

--过滤被删除的元素

--下面的例子删除 class="italic" 的所有 <p> 元素：

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

获取并设置CSS类

addClass()    --向被选元素添加一个或多个类

removeClass() --从被选元素删除一个或多个类

toggleClass() --对被选元素进行添加/删除类的切换操作

css()  --设置或返回样式属性

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

--也可以在 addClass() 方法中规定多个类
$("button").click(function(){
  $("#div1").addClass("important blue");
});


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


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

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


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


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

尺寸

jQuery 提供多个处理尺寸的重要方法：

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()