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