1. 程式人生 > >jquery基本操作

jquery基本操作

3.1.1 dto text 查找 註意 ace name AC ont

3.1.1 基本選擇器

$("*") $("#id") $(".class") $("element") $(".class,p,div")

3.1.2 層級選擇器

$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")


3.1.3 基本篩選器

$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")


3.1.4 屬性選擇器

$(‘[id="div1"]‘) $(‘["alex="sb"][id]‘)


3.1.5 表單選擇器

$("[type=‘text‘]")----->$(":text") 註意只適用於input標簽 : $("input:checked")

查找篩選器
$("div").children(".test") $("div").find(".test")

$(".test").next() $(".test").nextAll() $(".test").nextUntil()

$("div").prev() $("div").prevAll() $("div").prevUntil()

$(".test").parent() $(".test").parents() $(".test").parentUntil()

$("div").siblings()

屬性操作
--------------------------屬性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();
--------------------------CSS類
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------HTML代碼/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("").css("color","red")

文檔處理

//創建一個標簽對象
$("<p>")

//內部插入

$("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo");

//外部插入

$("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo");

//替換
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//刪除

$("").empty()
$("").remove([expr])

//復制

$("").clone([Even[,deepEven]])

css操作
CSS
$("").css(name|pro|[,val|fn])
位置
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
尺寸
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])

jquery基本操作