jQuery HTML用法

jQuery - 获取内容和属性

获得内容 - text()、html() 以及 val()

 $("#test").text()
 $("#test").html()
 $("#test").val()
 $("#test").attr("href")

jQuery - 设置内容和属性

$("#test1").text("Hello world!");
$("#test2").html("<b>Hello world!</b>");
$("#test3").val("set");

设置属性 - attr()

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").attr("href","http://www.***.com");
  });
});
</script>

设置多个属性

$(document).on('click', '.zhankai',function onoutStat() {
    $("#runoob").attr({
        "href" : "http://www.***.com",
        "title" : "jQuery 教程"
    });
});

jQuery - 添加元素

$("p").append("追加文本");
$("p").prepend("在开头追加文本");
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");

jQuery - 删除元素

$("#div1").remove();//方法删除被选元素及其子元素。
$("#div1").empty();//方法删除被选元素的子元素。
$("p").remove(".italic");//删除 class="italic" 的所有 <p> 元素：

jQuery - 获取并设置 CSS 类

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

$("h1,h2,p").addClass("blue");
$("h1,h2,p").removeClass("blue");
$("h1,h2,p").toggleClass("blue");

jQuery css() 方法

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

jQuery 效果- 隐藏和显示

$("#hide").click(function(){
  $("p").hide();
});
 
$("#show").click(function(){
  $("p").show();
});
//jQuery toggle()
$("button").click(function(){
  $("p").toggle();
});