jQuery HTML - 捕獲
- 獲得內(nèi)容 - text(), html()以及val()
- text(): 設(shè)置或返回所選元素的文本內(nèi)容
- html(): 設(shè)置或返回所選元素的內(nèi)容(++包括HTML內(nèi)容++)
- val(): 設(shè)置或返回表單字段的值
- 屬性獲取 - attr()
該方法用于獲取屬性值
注意:
prop()函數(shù)的結(jié)果:
1.如果有相應(yīng)的屬性，返回指定屬性值。
2.如果沒有相應(yīng)的屬性，返回值是空字符串。
attr()函數(shù)的結(jié)果:
1.如果有相應(yīng)的屬性，返回指定屬性值。
2.如果沒有相應(yīng)的屬性，返回值是undefined。
對于HTML元素本身就帶有的固有屬性，在處理時(shí)，使用prop方法。
對于HTML元素我們自己自定義的DOM屬性，在處理時(shí)，使用attr方法。
具有 true 和 false 兩個(gè)屬性的屬性，如 checked, selected 或者 disabled 使用prop()
jQuery HTML - 設(shè)置內(nèi)容和屬性
- 設(shè)置內(nèi)容 - text(), html()以及val()
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});
text(), html()以及val()的回調(diào)函數(shù)
上面的三個(gè) jQuery 方法：text()、html() 以及 val()，同樣擁有回調(diào)函數(shù)?；卣{(diào)函數(shù)有兩個(gè)參數(shù)：被選元素列表中當(dāng)前元素的下標(biāo)，以及原始（舊的）值。然后以函數(shù)新值返回您希望使用的字符串
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "舊文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "舊 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
});
});
- 設(shè)置屬性 - attr()
$("button").click(function(){
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
});
attr() 也提供回調(diào)函數(shù), 回調(diào)函數(shù)有兩個(gè)參數(shù): 被選元素列表中當(dāng)前元素的下表, 以及原始(舊的)值
$("button").click(function(){
$("#runoob").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
jQuery HTML - 添加元素
- append() 方法
在被選元素的結(jié)尾插入內(nèi)容(仍然該元素的內(nèi)部) - prepend() 方法
在被選元素的開頭插入內(nèi)容
通過append() 和 prepend() 方法添加若干新元素
在下面的例子中，我們創(chuàng)建若干個(gè)新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建。然后我們通過 append() 方法把這些新元素追加到文本中（對 prepend() 同樣有效)
function appendText(){
var txt1 = "<p>文本<p>";
var txt2 = $("<p></p>").text("文本");
var txt3 = document.createElement("p");
txt3.innerHtml = "文本";
$("body").append(txt1, txt2, txt3);
}
- after() 方法
在被選元素之后插入內(nèi)容 - before() 方法
在被選元素之前插入內(nèi)容
通過 after() 和 before() 方法添加若干新元素
++同上++
jQuery HTML - 刪除元素
- remove() 方法
刪除被選元素++及其子元素++ - empty() 方法
刪除被選元素的子元素
過濾被刪除的元素
remove() 方法可以接受一個(gè)參數(shù), 允許您對被刪元素進(jìn)行過濾
<head>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".italic");
});
});
</script>
</head>
<body>
<p>這是一個(gè)段落。</p>
<p class="italic"><i>這是另外一個(gè)段落。</i></p>
<p class="italic"><i>這是另外一個(gè)段落。</i></p>
<button>移除所有 class="italic" 的 p 元素。</button>
</body>
jQuery HTML - 獲取并設(shè)置css類
- addClass() 方法
$("button").click(function{
//在添加類時(shí), 可以選取多個(gè)元素
//注意: blue和important時(shí)兩個(gè)樣式, 此處已略
$("h1,h2,p").addClass("blue");
//也可以在addClass() 方法中規(guī)定多個(gè)類
$("div").addClass("important blue")
})
- removeClass() 方法
- toggleClass() 方法
該方法對被選元素進(jìn)行添加/刪除類的切換操作
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
})
jQuery HTML - css()方法
css() 方法設(shè)置或返回被選元素的一個(gè)多個(gè)樣式屬性
- 返回 css 屬性
返回指定的 css 屬性的值, 語法如下
css("propertyname");
$("p").css("background-color");
- 設(shè)置 css 屬性
設(shè)置指定的 css 屬性, 語法如下
css("propertyname","value")
$("p").css("background-color","yellow");
- 設(shè)置多個(gè)css屬性
$("p").css({
"background-color": "yellow",
"font_size": "200%"
})
jQuery 遍歷 - 祖先
DOM樹
- parent() 方法
返回被選元素的直接父元素, 該方法只會(huì)向上一級對 DOM 樹進(jìn)行遍歷 - parents() 方法
返回被選元素的所有祖先元素, 它一路向上直到文檔的根元素
你也可以使用可選參數(shù)來過濾對象元素的搜索
$(document).ready(function(){
$("span").parents("ul")
})
- parentsUntil() 方法
返回介于兩個(gè)給定元素之間的所有祖先元素
jQuery 遍歷 - 后代
- children() 方法
返回被選元素的所有直接子元素
你也可以使用可選參數(shù)來過濾對子元素的搜索
$(function(){
//返回類名為 "1" 的所有 <p> 元素, 并且它們是<div>的直接子元素
$("div").children("p.1");
})
- find() 方法
返回被選元素的后代元素, 一路向下直到最后一個(gè)后代
$(function(){
//返回屬于<div>后代的所有<span>元素
$("div").find("span");
})
jQuery 遍歷 - 同胞(siblings)
同胞擁有相同的父元素
- siblings() 方法
返回被選元素的所有同胞元素
你也可以使用可選參數(shù)來過濾對同胞元素的搜索
下面的例子返回屬于 <h2> 的同胞元素的所有 <p> 元素
$(document).ready(function(){
$("h2").siblings("p");
});
- next() 方法
返回被選元素的下一個(gè)同胞元素 - nextAll() 方法
返回被選元素的所有跟隨的同胞元素 - nextUntil() 方法
返回介于兩個(gè)給定參數(shù)之間的所有跟隨的同胞元素
$(function(){
//返回介于 <h2> 與 <h6> 元素之間的所有同胞元素
$("h2").nextUnitl("h6")
})
- prev(), prevAll() 和 prevUntil() 方法
工作方式與上面的方法類似, 只不過方向相反而已: 它們返回的是前面的同胞元素
jQuery 遍歷 - 過濾
- first() 方法
返回被選元素的首個(gè)元素
下面的例子選取首個(gè) <div> 元素內(nèi)部的第一個(gè) <p> 元素
$(function(){
$("div p").first();
})
- last() 方法
方法返回被選元素的最后一個(gè)元素 - eq() 方法
返回被選元素中帶有指定索引號的元素, 其中索引是從0開始的
$(function(){
$("p").eq(1);
})
- filter() 方法
允許你規(guī)定一個(gè)標(biāo)準(zhǔn), 不匹配這個(gè)標(biāo)準(zhǔn)的元素會(huì)被從集合中刪除, 匹配的元素會(huì)被返回
$(function(){
//返回帶有類名"url"的所有<p>元素
$("p").filter(".url");
})
- not() 方法
返回不匹配標(biāo)準(zhǔn)的所有元素, 與 filter() 相反
