jQuery學習整理--(3)jQueryHTML
1.jQuery - 獲取內容和屬性
jQuery DOM 操作
DOM = Document Object Model(文件物件模型)
DOM 定義訪問 HTML 和 XML 文件的標準:
“W3C 文件物件模型獨立於平臺和語言的介面,允許程式和指令碼動態訪問和更新文件的內容、結構以及樣式。”
獲得內容 - text()、html() 以及 val()
三個簡單實用的用於 DOM 操作的 jQuery 方法:
- text() - 設定或返回所選元素的文字內容
- html() - 設定或返回所選元素的內容(包括 HTML 標記)
- val() - 設定或返回表單欄位的值
下面的例子演示如何通過 jQuery text() 和 html() 方法來獲得內容和val獲得輸入內容:
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
alert("值為: " + $("#test").val());
});
獲取屬性 - attr()
jQuery attr() 方法用於獲取屬性值。
下面的例子演示如何獲得連結中 href 屬性的值:
$("button").click(function(){
alert($("#runoob").attr("href"));
});
2.jQuery - 設定內容和屬性
設定內容 - text()、html() 以及 val()
我們將使用前一章中的三個相同的方法來設定內容:
-
text() - 設定或返回所選元素的文字內容
-
html() - 設定或返回所選元素的內容(包括 HTML 標記)
-
val() - 設定或返回表單欄位的值
$("#btn1").click(function(){
$("#test1").text(“Hello world!”);
});
$("#btn2").click(function(){
$("#test2").html(“Hello world!
});
$("#btn3").click(function(){
$("#test3").val(“RUNOOB”);
});
text()、html() 以及 val() 的回撥函式
上面的三個 jQuery 方法:text()、html() 以及 val(),同樣擁有回撥函式。回撥函式有兩個引數:被選元素列表中當前元素的下標,以及原始(舊的)值。然後以函式新值返回您希望使用的字串。
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "舊文字: " + origText + " 新文字: Hello world! (index: " + i + ")";
});
});
設定屬性 - attr()
$("button").click(function(){
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
});
3.jQuery - 新增元素
- append() - 在被選元素的結尾插入內容
- prepend() - 在被選元素的開頭插入內容
- after() - 在被選元素之後插入內容
- before() - 在被選元素之前插入內容
function appendText()
{
var txt1="<p>文字。</p>"; // 使用 HTML 標籤建立文字
var txt2=$("<p></p>").text("文字。"); // 使用 jQuery 建立文字
var txt3=document.createElement("p");
txt3.innerHTML="文字。"; // 使用 DOM 建立文字 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
4.jQuery - 刪除元素
如需刪除元素和內容,一般可使用以下兩個 jQuery 方法:
- remove() - 刪除被選元素(及其子元素)
- empty() - 從被選元素中刪除子元素
$("#div1").remove();
5.jQuery - 獲取並設定 CSS 類
jQuery 操作 CSS
jQuery 擁有若干進行 CSS 操作的方法。我們將學習下面這些:
- addClass() - 向被選元素新增一個或多個類
- removeClass() - 從被選元素刪除一個或多個類
- toggleClass() - 對被選元素進行新增/刪除類的切換操作
- css() - 設定或返回樣式屬性
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
6.jQuery css() 方法
css() 方法設定或返回被選元素的一個或多個樣式屬性。
$("p").css("background-color"); //返回
$("p").css({"background-color":"yellow","font-size":"200%"}); //設定
7.獲得尺寸
jQuery 尺寸方法
jQuery 提供多個處理尺寸的重要方法:
- width()
- height()
- innerWidth()
- innerHeight() 不包含外邊距
- outerWidth()
- outerHeight()