jQuery 对HTML的操作（二）
文章目錄
- 一、jQuery獲取、設(shè)置HTML標(biāo)簽的內(nèi)容和屬性
- 獲得內(nèi)容 - text()、html() 以及 val()
- 獲取屬性 - attr()，prop()
- 二、增刪 HTML 的內(nèi)容
- 增加
- 刪除
- 三、操作CSS
- addClass 添加
- removeClass 刪除
- toggleClass 切換
- css 獲取與設(shè)置
- 所有操作html、css方法參考 ☆
- 四、操作元素和瀏覽器窗口的尺寸
- 五、遍歷DOM元素
- 父輩查找
- 同輩查找
- 后代查找
- 過濾查找
- 所有遍歷方法參考 ☆
一、jQuery獲取、設(shè)置HTML標(biāo)簽的內(nèi)容和屬性
tips：括號內(nèi)無參則是獲取，有參則是設(shè)置
-
獲得內(nèi)容 - text()、html() 以及 val()
- text() - 設(shè)置或返回所選元素的文本內(nèi)容
- html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
- val() - 設(shè)置或返回表單字段的值
回調(diào)函數(shù)：回調(diào)函數(shù)有兩個參數(shù)：被選元素列表中當(dāng)前元素的下標(biāo)，以及原始（舊的）值。然后以函數(shù)新值返回你希望使用的字符串。
$("#test1").text(function(i,origText){return "舊文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; });
-
獲取屬性 - attr()，prop()
url = $("#runoob").attr("href") // 獲取href屬性（得到地址） $("#runoob").attr("href","www.baidu.com") // 設(shè)置值 $("#runoob").attr({"href":"www.baidu.com","title":"newTitle"}) // 同時設(shè)置多個屬性回調(diào)函數(shù)：有兩個參數(shù)：被選元素列表中當(dāng)前元素的下標(biāo)，以及原始（舊的）值。然后以函數(shù)新值返回你希望使用的字符串。
$("#runoob").attr("href", function(i,origValue){return origValue + "/jquery"; });tips：attr與prop
prop()函數(shù)的結(jié)果:
1.如果有相應(yīng)的屬性，返回指定屬性值。
2.如果沒有相應(yīng)的屬性，返回值是空字符串。
attr()函數(shù)的結(jié)果:
1.如果有相應(yīng)的屬性，返回指定屬性值。
2.如果沒有相應(yīng)的屬性，返回值是 undefined。對于HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
對于HTML元素我們自己自定義的DOM屬性，在處理時，使用 attr 方法。
具有 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()
二、增刪 HTML 的內(nèi)容
-
增加
append() - 在被選元素的結(jié)尾插入內(nèi)容
prepend() - 在被選元素的開頭插入內(nèi)容
after() - 在被選元素之后插入內(nèi)容
before() - 在被選元素之前插入內(nèi)容tips：
append/prepend 是在選擇元素內(nèi)部嵌入。
after/before 是在元素外面追加。JS實(shí)例：
function appendText() {var txt1="<p>文本。</p>"; // 使用 HTML 標(biāo)簽創(chuàng)建文本var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 創(chuàng)建文本var txt3=document.createElement("p");txt3.innerHTML="文本。"; // 使用 DOM 創(chuàng)建文本 text with DOM$("body").append(txt1,txt2,txt3); // 追加新元素 }function afterText() {var txt1="<b>I </b>"; // 使用 HTML 創(chuàng)建元素var txt2=$("<i></i>").text("love "); // 使用 jQuery 創(chuàng)建元素var txt3=document.createElement("big"); // 使用 DOM 創(chuàng)建元素txt3.innerHTML="jQuery!";$("img").after(txt1,txt2,txt3); // 在圖片后添加文本$("img").after([txt1,txt2,txt3]); // 參數(shù)也可以是list } -
刪除
remove() - 刪除被選元素（及其子元素）
empty() - 從被選元素中刪除子元素可選參數(shù)：選擇器
$("#div1").remove(); $("#div1").empty(); $("p").remove(".italic"); // 刪除 class="italic" 的所有 <p> 元素
三、操作CSS
addClass() - 向被選元素添加一個或多個類
removeClass() - 從被選元素刪除一個或多個類
toggleClass() - 對被選元素進(jìn)行添加/刪除類的切換操作
css() - 設(shè)置或返回樣式屬性
-
addClass 添加
$("button").click(function(){$("div").addClass("important"); // 添加一個類$("h1,h2,p").addClass("blue"); // 給多個標(biāo)簽添加一個類$("body div:first").addClass("important blue"); // 給標(biāo)簽添加多個類 }); -
removeClass 刪除
// 刪除多個標(biāo)簽二的blue類 $("h1,h2,p").removeClass("blue"); -
toggleClass 切換
// 添加、刪除類的切換-若有則刪除，沒有則添加$("h1,h2,p").toggleClass("blue"); -
css 獲取與設(shè)置
css() 方法設(shè)置或返回被選元素的一個或多個樣式屬性。
獲取：
var backgroundColor = $("p").css("background-color");設(shè)置：
$("p").css("background-color","yellow"); // 設(shè)置多個屬性 $("p").css({"background-color":"yellow","font-size":"200%"}); -
所有操作html、css方法參考 ☆
菜鳥教程 - jQuery HTML / CSS 方法
四、操作元素和瀏覽器窗口的尺寸
width() —— 設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距） height() —— 設(shè)置或返回元素的高度（不包括內(nèi)邊距、邊框或外邊距）innerWidth() —— 返回元素的寬度（包括內(nèi)邊距） innerHeight() —— 返回元素的高度（包括內(nèi)邊距）outerWidth() —— 返回元素的寬度（包括內(nèi)邊距和邊框） outerHeight() —— 返回元素的高度（包括內(nèi)邊距和邊框） $("button").click(function(){var txt="";txt+="div 的寬度是: " + $("#div1").width() + "</br>";txt+="div 的高度是: " + $("#div1").height();$("#div1").html(txt);txt+="div 寬度，包含內(nèi)邊距: " + $("#div2").innerWidth() + "</br>";txt+="div 高度，包含內(nèi)邊距: " + $("#div2").innerHeight();$("#div2").html(txt);txt+="div 寬度，包含內(nèi)邊距和邊框: " + $("#div3").outerWidth() + "</br>";txt+="div 高度，包含內(nèi)邊距和邊框: " + $("#div3").outerHeight();$("#div3").html(txt); });tips：width() 獲取的是 css 設(shè)置的 width 減去 padding 和 border 的
五、遍歷DOM元素
三級關(guān)系：
父輩：父、祖父、曾祖父等等
同輩：同胞（擁有相同的父）
后代：子、孫、曾孫等等。
父輩查找
parent() —— 返回被選元素的直接父元素，只會向上一級對 DOM 樹進(jìn)行遍歷
parents() —— 返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 ()
parentsUntil() —— 返回介于兩個給定元素之間的所有祖先元素
同輩查找
siblings() —— 返回被選元素的所有同胞元素
next() —— 返回被選元素的下一個同胞元素，該方法只返回一個元素
nextAll() —— 返回被選元素的所有跟隨的同胞元素
nextUntil() —— 返回介于兩個給定參數(shù)之間的所有跟隨的同胞元素
prev() —— 同上，只不過是向上級遍歷
prevAll()
prevUntil()
后代查找
children() —— 返回被選元素的所有直接子元素，只會向下一級對 DOM 樹進(jìn)行遍歷
find() —— 返回被選元素的后代元素，一路向下直到最后一個后代
過濾查找
first() —— 返回被選元素的首個元素
last() —— 返回被選元素的最后一個元素
eq() —— 返回被選元素中帶有指定索引號的元素，索引號從 0 開始，因此首個元素的索引號是 0 而不是 1
filter() —— 允許你規(guī)定一個標(biāo)準(zhǔn)。不匹配這個標(biāo)準(zhǔn)的元素會被從集合中刪除，匹配的元素會被返回
not() —— 返回不匹配標(biāo)準(zhǔn)的所有元素，not() 方法與 filter() 相反
tips：
$(“p”).last().css(“background-color”,“yellow”);
和
$(“p:last”).css(“background-color”,“yellow”);
效果一樣。
$(“p”).first().css(“background-color”,“yellow”);
和
$(“p:first”).ss(“background-color”,“yellow”);
效果一樣。
$(“p”).not(".url");
和
$(“p:not(.url)”);
效果一樣。
所有遍歷方法參考 ☆
菜鳥教程 - jQuery 遍歷 方法
總結(jié)
以上是生活随笔為你收集整理的jQuery 对HTML的操作（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery初识和常用事件（一）
- 下一篇： 前端个人笔记