參考資料:菜鳥教程
JQuery HTML
===
JQuery除了可以對HTML內容進行修改之外,還能進行添加刪除。
添加元素
$("p").append("aa") - 在被選元素的結尾插入內容
$("p").prepend() - 在被選元素的開頭插入內容
注意上下這倆個的區別
$("p").after() - 在被選元素之后插入內容
$("p").before() - 在被選元素之前插入內容
這四個方法都可以接收無限數量的新元素
$("p").append("aa",''bb","cc");
append與after方法的不同
append方法在被選元素的結尾添加文本text1,text1還是屬于該元素內。
after方法在被選元素之后添加文本text1,text1不屬于該元素了。
比如:
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
$("ol").append("<li>追加列表項</li>");
$("ol").after("<li>追加列表項</li>");
結果就是(感受一下兩者的不同)
1.List item 1
2.List item 2
3.追加列表項
- 追加列表項
使用append時要注意:由于添加的元素屬于被選元素,所以添加的內容要與被選相符。比如在 $("img").append("< p>無法添加</ p>") ;是無法加入的,因為text與img不一致。
刪除元素
$("#div1").remove();刪除被選元素(及其子元素)
$("#div1").empty();刪除被選元素的子元素
$("p").remove(".italic");刪除class="italic" 的所有 <p> 元素,
remove的參數可以是任何 jQuery 選擇器的語法。
添加刪除CSS類
$("h1,h2,p").addClass("class1 class2") - 向被選元素添加一個或多個類
removeClass() - 從被選元素刪除一個或多個類
toggleClass() - 對被選元素進行添加/刪除類的切換操作
獲取并設置CSS樣式
$("p").css("background-color");返回首個匹配元素的 background-color 值
$("p").css("background-color","yellow");為所有匹配元素設置background-color 值
$("p").css({"background-color":"yellow","font-size":"200%"});同時設置多個樣式
處理窗口尺寸
<img src="http://www.runoob.com/images/img_jquerydim.gif">
在上面這張圖中的八個尺寸都可以獲取和設置
就拿width來說(其他都一樣,就是名稱換了)
txt=$("#div1").width();獲取該尺寸
$("#div1").width("300px");設置該元素的尺寸
JQuery 遍歷
在使用它的方法之前首先知道什么叫遍歷以及它的使用方法。以及掌握DOM文檔樹。
遍歷用于根據其相對于其他元素的關系來"查找"(或選?。〩TML 元素
就是通過某一項開始,選擇向上移動(祖先),向下移動(子孫),水平移動(同胞)的方式來找到想要的元素。
祖先(向上移動)
$("span").parent();返回每個 <span> 元素的的直接父元素(只在上一級遍歷)
$("span").parents();返回所有 <span> 元素的所有祖先(誰叫它是復數呢)
$("span").parents("ul");返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素
$("span").parentsUntil("div");返回介于 <span> 與 <div> 元素之間的所有祖先元素
后代(向下移動)
$("div").children();返回每個 <div> 元素的所有直接子元素,可以使用可
選參數來過濾對子元素的搜索
$("div").children("p.1");返回類名為 "1" 的所有 <p> 元素
$("div").children("p#a");返回id為 "1" 的所有 <p> 元素
$("div").find("*");返回被選元素的所有后代元素,一路向下直到最后一個后代
$("div").find("span");返回屬于 <div> 后代的所有 <span> 元素
同胞(左右移動)
$("h2").siblings("p");返回 <h2> 的所有<p> 元素,如果不加參數則是所有元素
$("h2").next();返回 <h2> 的下一個同胞元素
$("h2").nextAll();返回 <h2> 的所有跟隨的同胞元素
$("h2").nextUntil("h6");返回介于 <h2> 與 <h6> 元素之間的所有同胞元素
prev(), prevAll() & prevUntil()方法與上面相同只是方向相反。