Jquery HTML CSS方法

hasClass()检查被选元素是否包含制定的Class名称

$("button").click(function(){
    alert($("p").hasClass("intro"));
});

prop()设置或返回被选元素的属性、值

$("button").click(function(){
    var $x = $("div");
    $x.prop("color","FF0000");
    $x.append("The color 属性： " + $x.prop("color"));
    $x.removeProp("color");
});

replaceAll()把被选元素替换为新的HTML元素

$("button").click(function(){
    $("Hello world!").replaceAll("p:last");
});

scrollLeft()设置或返回被选元素的水平滚动位置

$("button").click(function(){
    alert($("div").scrollLeft());
});

scrollTop()设置或返回被选元素的垂直滚动位置

$("button").click(function(){
    alert($("div").scrollTop());
});

unwrap()移除被选元素的父元素

$("button").click(function(){
    $("p").unwrap();
});

wrap()在每个被选元素的周围用HTML元素包含起来

$("button").click(function(){
    $("p").wrap("
");
});

wrapAll()在所有被选中元素的周围用HTML元素包含起来

$("button").click(function(){
    $("p").wrapAll("
");
});

wrapInner()在每个被选元素的内容周围用 HTML 元素包裹起来

$("button").click(function(){
    $("p").wrapInner("");
});

节点操作

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

$("button").click(function(){
    $("p").prepend("Prepended text");
});

prependTo()在被元素的开头插入HTML元素

$("button").click(function(){
    $("Hello World!").prependTo("p");
});

detach()移除被选元素（保留数据和事件）

$("button").click(function(){
    $("p").detach();
});
$(document).ready(function(){
    var x;
    $("#btn1").click(function(){
        x=$("p").detach();
    });
    $("#btn2").click(function(){
        $("body").prepend(x);
    });
});

empty()从被选元素移除所有子节点和内容

$("button").click(function(){
    $("div").empty();
});

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

$("button").click(function(){
    $("p").before("
Hello world!
");
});

clone()生成被选元素的副本

$("button").click(function(){
    $("p").clone().appendTo("body");
});

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

$("button").click(function(){
    $("p").after("
Hello world!
");
});

append()在被选元素结尾插入内容

$(document).ready(function(){
    $("#btn1").click(function(){
        $("p").append(" 插入文本.");
    });
    $("#btn2").click(function(){
        $("ol").append("
插入项
");
    });
});

appendTo()在被选元素结尾插入THML元素

$("button").click(function(){
    $("Hello World!").appendTo("p");
});

insertAfter()在被选元素后插入HTML元素

$("button").click(function(){
    $("Hello world!").insertAfter("p");
});

insertBefore()在被选元素前插入HTML元素

$("button").click(function(){
    $("Hello world!").insertBefore("p");
});

属性操作

replaceWidth()把被选元素替换为新的内容

$("button").click(function(){
    $("p:first").replaceWith("Hello world!");
});

toggleClass()再被选中元素中添加、移除一个获多个类之间切换

$("button").click(function(){
    $("p").toggleClass("main");
});

text()设置或返回被选元素的文本位置

$("button").click(function(){
    $("p").text("Hello world!");
});

height()设置或返回元素的高度

$("button").click(function(){
    alert($("div").height());
});

html()设置或返回被选元素的内容

$("button").click(function(){
    $("p").html("Hello world!");
});

innerHeight()返回元素的高度包含padding 不包含border

$("button").click(function(){
    alert($("div").innerHeight());
});

innerWidth()返回元素的宽度包含padding 不包含border

$("button").click(function(){
    alert($("div").innerWidth());
});

addClass()向被选元素添加一个获多个类名

$("button").click(function(){
    $("p:first").addClass("intro");
});

val()设置或返回被选元素的属性值

$("button").click(function(){
    $("input:text").val("Glenn Quagmire");
});

width()设置或返回被选元素的宽度

$("button").click(function(){
    alert($("div").width());
});

position()返回元素的位置（相对于父元素）

$("button").click(function(){
    x=$("p").position();
    alert("Top: " + x.top + " Left: " + x.left);
});

attr()设置或返回被选元素的属性、值

$("button").click(function(){
    $("img").attr("width","500");
});

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

$("button").click(function(){
    $("p").css("color","red");
});

offset()设置或返回被选元素的偏移坐标（相对于文档）

$("button").click(function(){
    var x=$("p").offset();
    alert("Top: " + x.top + " Left: " + x.left);
});

offsetParent()返回第一个定位的祖先元素

$("button").click(function(){
    $("p").offsetParent().css("background-color","red");
});

outerHeight()返回元素的高度包含padding和border

$("button").click(function(){
    alert($("div").outerHeight());
});

outerWidth()返回元素的宽度包含pdding和border

$("button").click(function(){
    alert($("div").outerWidth());
});

删除

remove()移除被选元素（包含数据和事件）

$("button").click(function(){
    $("p").remove();
});

removeAttr()从被选元素移除一个或多个属性

$("button").click(function(){
    $("p").removeAttr("style");
});

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

$("button").click(function(){
    $("p").removeClass("intro");
});

removeProp()移除通过prop()设置的属性

$("button").click(function(){
    var $x = $("div");
    $x.prop("color","FF0000");
    $x.append("The color 属性： " + $x.prop("color"));
    $x.removeProp("color");
});