JQuery操作HTML文檔

標籤：

一、JQuery選擇元素

1.$("p").click(function(){$(this).hide();}

點擊HTML頁面的任何p元素都會隱藏該p元素

2.$("#test").hide()

隱藏id=test的元素

3.$(".test").hide()

隱藏class=test的元素

總結為$(selector).action()

jQuery位於document.ready函數裡面

$(document).ready(function(){

jquery goes here

});

二、JQuery元素選取器

1..$("p.test")選取所有class=test的p元素

2.$("p#test")選取所有id=test的p元素

三、JQuery屬性選取器

$("[href]")選取所有帶有href屬性的元素

$("[href=‘#‘]")選取所有href屬性=#的元素

$("[href!=‘#‘]")選取所有帶有href值不等於#的元素

$("[href$=‘.jpg‘]")選取所有href值以“.jpg”結尾的元素

四、JQuery CSS選取器

可以改變HTML元素的CSS屬性

$("p").css("bachground-color","red");

$("ul li:first")每個<ul>中的第一個<li>

$("div#intro .test")選擇id=intro的div中class=test的div元素

五、JQuery獲得內容和屬性

text(),attr("data-date")

$("[data-date=‘2016-10-26‘]").attr("data-date")

六、JQuery css()方法

css()返回被選元素的一個或多個樣式屬性

$("p").css("background-color")返回收個匹配元素的background-color屬性值

設定css屬性

css("propertyname","value")

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

設定多個css屬性

css({"propertyname1":"value1","propertyname2":"value2"})

 

JQuery操作HTML文檔