jQuery初學3(HTML)
阿新 • • 發佈：2018-11-09
-
text(),html(),val().
text()是設定或返回所選元素的文字內容。 html()是 設定或返回所選元素內容，包含標籤。 val()是返回表單欄位中的值。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); });
</script> </head> <body> <p id="test">這是段落中的 <b>粗體</b> 文字。</p> <button id="btn1">顯示文字</button> <button id="btn2">顯示 HTML</button> </body> </html>$("button").click(function(){ alert("值為: " + $("#test").val()); });回撥函式。回撥函式有兩個引數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函式新值返回您希望使用的字串。 $("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "舊文字: " + origText + " 新文字: Hello world! (index: " + i + ")"; }); }); - attr()和prop
- 用於獲取屬性值，對於元素自帶的屬性，用prop，對於我們自定義的屬性，用attr。
$("button").click(function(){ alert($("#runoob").attr("href")); });回撥函式。回撥函式有兩個引數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函式新值返回您希望使用的字串。 $("button").click(function(){ $("#runoob").attr("href", function(i,origValue){ return origValue + "/jquery"; }); }); -
append(),prepend(),after(),before().
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); // 追加新元素 } function afterText(){ var txt1="<b>I </b>"; // 使用 HTML 建立元素 var txt2=$("<i></i>").text("love "); // 使用 jQuery 建立元素 var txt3=document.createElement("big"); // 使用 DOM 建立元素 txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); -
remove()和empty().
remove() - 刪除被選元素（及其子元素） empty() - 從被選元素中刪除子元素。$("#div1").remove() $("#div1").empty() 下面的例子刪除 class="italic" 的所有 <p> 元素 $("p").remove(".italic") -
css類.
addClass() - 向被選元素新增一個或多個類.
removeClass() - 從選元素刪除一個或多個類.
toggleClass() - 對被選元素進行新增/刪除類的切換操作.
css() - 設定或返回樣式屬性.$("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); });$("button").click(function(){ $("body div:first").addClass("important blue"); });下面的例子將展示如何使用 jQuery toggleClass() 方法。該方法對被選元素進行新增/刪除類的切換操作： $("button").click(function(){ $("h1,h2,p").toggleClass("blue"); })如需設定多個 CSS 屬性，請使用如下語法： css({"propertyname":"value","propertyname":"value",...}); $("p").css({"background-color":"yellow","font-size":"200%"}); - 尺寸.
width(),height(),innerWidth(),innerHeight(),outerWidth(),outerHeight().下面的例子返回指定的 <div> 元素的寬度和高度： $("button").click(function(){ var txt=""; txt+="div 的寬度是: " + $("#div1").width() + "</br>"; txt+="div 的高度是: " + $("#div1").height(); $("#div1").html(txt); }); 下面的例子返回指定的 <div> 元素的 inner-width/height： $("button").click(function(){ var txt=""; txt+="div 寬度，包含內邊距: " + $("#div1").innerWidth() + "</br>"; txt+="div 高度，包含內邊距: " + $("#div1").innerHeight(); $("#div1").html(txt); }); 下面的例子返回指定的 <div> 元素的 outer-width/height： $("button").click(function(){ var txt=""; txt+="div 寬度，包含內邊距和邊框: " + $("#div1").outerWidth() + "</br>"; txt+="div 高度，包含內邊距和邊框: " + $("#div1").outerHeight(); $("#div1").html(txt); })