JQuery HTML

選擇了element之後，顯然接下來要改變其內容，有以下方法可選擇:

text(): 設定或傳回element的文字內容，參數可以為callback function。
html(): 設定或傳回element的內容，參數可以為callback function。 >>
<p id="jq2_p1" class = "p12_7">滑鼠點這裡觸發</p> $(document).ready(function() { $("#jq2_p1").click(function(){ console.log($("#jq2_p1").text()); $("#jq2_p1").text("callback()第一個參數是目前element在所選取element的index，第二個參數是原內容"); }); $("#jq2_p1").mouseover(function(){ $("#jq2_p1").text(function(i, ori){ $("#jq2_p1").text("index: " + i + " " + ori + "先按F12，然後click or double click"); }); }); $("#jq2_p1").dblclick(function(){ console.log($("#jq2_p1").html()); $("#jq2_p1").html(function(i, ori){ $("#jq2_p1").html(ori + "<strong>html()可設定html內容</strong>"); }); }); });
滑鼠點這裡觸發
val(): 設定或傳回form裡面的值，參數可以為callback function。 >>
<input type="button" value="Button1" class="jq2_b2"></input> <input type="button" value="Button2" class="jq2_b2"></input> <button class="jq2_b2">Button3</button> $(document).ready(function() { $(".jq2_b2").click(function(){ $(".jq2_b2").val(function(i, ori){ if(i==0){ return "clicked on 1"; } if(i==1){ return "clicked on 2"; } }); }); });
attr(): 設定或傳回屬性值，參數可以為callback function。 >>
<a href="http://www.yahoo.com" id="ya">Yahoo</a> <button id="jq2_b3">Redirect to Google</button> $(document).ready(function() { $("#jq2_b3").click(function(){ var goo = $("#ya"); goo.text("Google"); goo.attr("href", "http://www.google.com"); }); }); Yahoo
append(): 在element內的內容最後插入內容，可加入多個，使用逗點分開。 >>
<ol id="jq2_ol4"> <li>CSS</li> <li>JavaScript</li> </ol> <button id="jq2_b4">Appending</button> $(document).ready(function() { $("#jq2_b4").click(function(){ var ol4first = $("#jq2_ol4>li:first"); ol4first.append("+JavaScript"); var ol4last = $("#jq2_ol4>li:last"); ol4last.text("JQuery"); var ol4 = $("#jq2_ol4"); ol4.append("<li>Node.js</li>"); ol4.prepend("<li>HTML5</li>"); }); });
1. CSS
2. JavaScript
prepend(): 在element內的內容一開始插入內容，可加入多個，使用逗點分開。
after(): 在element後面插入內容，可加入多個，使用逗點分開。
before(): 在element前面插入內容，可加入多個，使用逗點分開。 >>
$(document).ready(function() { $("#jq2_b5").click(function(){ var ol4first = $("#jq2_ol4>li:first"); ol4first.before("<li>Python</li>"); var ol4last = $("#jq2_ol4>li:last"); ol4last.after("<li>Java</li>"); }); });
remove(): 移除element(及其child elements)，可使用css做有條件移除。
empty(): 移除element之child elements。 >>
$(document).ready(function() { $("#jq2_b6").click(function(){ $("#jq2_ol4>li").remove("#jq2_ol4>li:odd"); }); $("#jq2_b7").click(function(){ $("#jq2_ol4").empty(); }); });
addClass(): 增加element的classes。
removeClass(): 移除element的classes。
toggleClass(): 開關element的增加與移除classes。 $(document).ready(function() { $("#jq2_b8a").click(function(){ $("#jq2_p8").addClass("p12_7"); }); $("#jq2_b8r").click(function(){ $("#jq2_p8").removeClass("p12_7"); }); $("#jq2_b8t").click(function(){ $("#jq2_p8").toggleClass("p12_7"); }); });
Inside p(id=jq2_p8)
css(): 設定或傳回css屬性。

	$(document).ready(function() {
		$("#jq2_b9").click(function(){
			console.log($("#jq2_p8").css("background"));
			$("#jq2_p8").css({"background":"green", "border":"1px solid red"});
		});
	});

width(): 設定或傳回element的width。
height(): 設定或傳回element的height。
innerWidth(): 設定或傳回element的innerWidth(指border內邊界)。
innerHeight(): 設定或傳回element的innerHeight(指border內邊界)。
outerWidth(): 設定或傳回element的outerWidth(指margin外邊界)。
outerHeight(): 設定或傳回element的outerHeight(指margin外邊界)。 $(document).ready(function() { $("#jq2_b10g").click(function(){ $("#jq2_p8").css({"background":"green", "border":"5px solid red", "padding":"5px", "margin":"5px"}); var dim = $("#jq2_p8").width() + "x" + $("#jq2_p8").height() + " " +$("#jq2_p8").innerWidth() + "x" + $("#jq2_p8").innerHeight() + " " + $("#jq2_p8").outerWidth() + "x" + $("#jq2_p8").outerHeight(); console.log(dim); }); $("#jq2_b10s").click(function(){ $("#jq2_p8").width(500).height(100); }); });

只在此山中，雲深不知處

聽首歌

JQuery HTML