jQuery Html

時間 2019-11-10

標籤 jquery html 欄目 JQuery 简体版

原文原文鏈接

jQuery 獲取
text() - 設置或返回所選元素的文本內容	html() - 設置或返回所選元素的內容（包括 HTML 標記）	val() - 設置或返回表單字段的值

jQuery 設置
text() - 設置或返回所選元素的文本內容	html() - 設置或返回所選元素的內容（包括 HTML 標記）	val() - 設置或返回表單字段的值

text()、html() 以及 val() 的回調函數css

添加新的 HTML 內容
append() - 在被選元素的結尾插入內容	prepend() - 在被選元素的開頭插入內容	after() - 在被選元素以後插入內容	before() - 在被選元素以前插入內容

刪除元素/內容
remove() - 刪除被選元素（及其子元素）	empty() - 從被選元素中刪除子元素

jQuery 操做 CSS html
addClass() - 向被選元素添加一個或多個類	removeClass() - 從被選元素刪除一個或多個類	toggleClass() - 對被選元素進行添加/刪除類的切換操做	css() - 設置或返回樣式屬性

jQuery css() 方法

css() 方法設置或返回被選元素的一個或多個樣式屬性。

jQuery 尺寸方法

width()jquery
height()app
innerWidth()函數
innerHeight()ui
outerWidth()this
outerHeight()spa

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jQuery Html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<script src="jquery-2.1.4.min.js"></script>
	<script src="html.js"></script>
	<link rel=stylesheet href="html.css" type="text/css">
  </head>
  
  <body>
  <hr>
  <p>jQuery 獲取</p>
    <p id="test1">test1這是段落中的<b>粗體</b>文字。</p>
    <input id="input1" type="text" value="input1  hello world"/><br><br>
    <input id="input2" value="input2 attr獲取屬性值"/><br><br>
    
    <button id="button1" type="button">button1  顯示test1中的text</button> 
    <button id="button2" type="button">button2  顯示test1中的html</button>
    <button id="button3" type="button">button3  顯示input1中的val</button>
    <button id="button4" type="button">button4  attr獲取input2中的value屬性值</button><br><br>
    
    <hr>
    <p>jQuery 設置</p>
    <p id="test2">test2 input3 設置屬性值</p><br><br>
    <input id="input3" type="text" value="input3  點擊button7設置value值"/><br><br>
    <button id="button5" type="button">button5  設置test2的text</button>
    <button id="button6" type="button">button6  設置test2的html</button>
    <button id="button7" type="button">button7  設置test2的val</button>
    <br><br>
    
    <hr>
    <p>jQuery 回調</p>
    <p id="test3">text()、html() 以及 val() 的回調函數</p><br><br>
    <p id="test4">text()、<b>html()</b> 以及 val() 的回調函數</p><br><br>
    <input id="input4" type="text" value="input4  點擊button10設置value值"/><br><br>
    <button id="button8" type="button">button8  test3中的text()</button>
    <button id="button9" type="button">button9  test4中的html()</button>
    <button id="button10" type="button" width='500px'>button10  test3中的val()</button>
    
    <hr>
    <p><a href="www.baidu.com" class="a1">www.baidu.com</a></p>
    <button class="button11">button11 點擊該按鈕後，上面的連接會連接到新浪網的連接</button><br><br>
    <button class="button12">button12 點擊該按鈕後，上面的連接會連接到新浪網的連接，這是用的attr回調函數方法</button>
    
    <hr>
    <p>jQuery 添加</p>
    <p class="p5">jQuery 添加  append</p>
    <p class="p5">This is a paragraph.</p>
    <p class="p5">This is another paragraph.</p>
    <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    </ol>
    <button class="button13">button 13 點擊，在後面增長文本</button>
    <button class="button14">button 14 點擊，在後面追加列表項</button><br><br><br>
    <p class="p1">p1 jQuery 添加  prepend</p>
    <button class="button15">button 15 點擊，在前面增長文本</button>
    <p class="p6">p6 經過append(),prepend()添加若干元素</p>
    <button class="button16">button 16 點我，能夠添加不少元素哦</button>
    
    
    <hr>
    <img alt="W3School" src="2.jpg"><br><br>
    <button id="button17">button 17 點擊，在圖片前面添加文本</button>
    <button id="button18">button 18 點擊，在圖片後面添加文本</button>
    <button id="button19">button 19 點擊，在圖片後面添加多個文字文本</button>
    
    <hr>
    <p>jQuery 刪除元素</p>
    <div id="div1" style="background-color:blue;">
    I will be deleted!
    </div>
    <button id="button20">button 20 點擊，刪除div1</button><br>
	
    <div id="div2" style="height:100px;width:300px;background-color:yellow;">
    div2 I will be deleted!
    <p class="p7">p7 @ I will be deleted!</p>
    </div>
    <button id="button21">button 21 點擊，刪除div2的子元素</button><br><br>
    
    <p class="italic"><i>This is italic !</i></p>
    <p class="italic"><i>This is italic !</i></p>
    <button id="button22">button 22 點擊，刪除italic的子元素</button>
    
    <hr>
    <p>jQuery css類</p>
    <h1>標題  1</h1>
    <h2>標題  2</h2>
    <p class="p8">這是一個段落</p>
    <p class="p8">這是另外一個段落</p>
    <div>這是很是重要的文本！</div>
    <button id="button23">button 23 點擊，向元素添加類</button>
    <button id="button24">button 24 點擊，向元素添加多個類</button>
    <button id="button25">button 25 點擊，向元素刪除類</button>
    <button id="button26">button 26 點擊，切換</button>
    
    <hr>
    <p>jQuery css()</p>
    <p id="test5" style="background-color:red">test5  This is a paragraph!</p>
    <p id="test6" style="background-color:blue">test6 This is a paragraph!</p>
    <p id="test7" style="background-color:yellow">test7 This is a paragraph!</p>
    <button id="button27">button 27 點擊，能夠顯示test5背景顏色</button>
    <button id="button28">button 28 點擊，能夠爲test6設置背景顏色</button>
    <button id="button29">button 29 點擊，能夠爲test7設置多個屬性</button>
    
    <hr>
    <p>jQuery 尺寸</p>
    <div id="div3" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;">
	div3
    </div>
    <button id="button30">button 30 點擊，顯示 div3 的尺寸</button>
  </body>
</html>

$(document).ready(function(){
	$("#button1").click(function(){
		alert("Text: "+$("#test1").text());
	});
	$("#button2").click(function(){
		alert("Html: "+$("#test1").html());
	});
	$("#button3").click(function(){
		alert("var: "+$("#input1").val());
	});
	$("#button4").click(function(){
		alert("attr: "+$("#input2").attr("value"));
	});
	$("#button5").click(function(){
		$("#test2").text("text2 after set");
	});
	$("#button6").click(function(){
		$("#test2").html("<b>test2 html after set </b>");
	});
	$("#button7").click(function(){
		$("#input3").val("input3 val after set");
	});
	$("#button8").click(function(){
		$("#test3").text(function(i,origText){
			return "test3: "+origText+" New text:Hello world!"
		});
	});
	$("#button9").click(function(){
		$("#test4").html(function(i,origText){
			return "test4: "+origText+" New html:Hello world!"
		});
	});
	$("#button10").click(function(){
		$("#input4").html(function(i,origText){
			return "input4: "+origText+" New val:Hello world!"
		});
	});
	$(".button11").click(function(){
		$(".a1").attr("href","http://www.sina.com");
	});
	$(".button12").click(function(){
		$(".a1").attr("href",function(){
			return "http://www.sina.com";
		});
	});
	$(".button13").click(function(){
		$(".p5").append("<b>Appended text</b>.");
	});
	$(".button14").click(function(){
		$("ol").append("<li>Appended item</li>")
	});
	$(".button15").click(function(){
		$(".p1").prepend("added before p1  ")
	});
	$(".button16").click(function(){
		var txt1="<p>base html create new elements</p>";
		var txt2=$("<p></p>").text("base jQuery create new elements");
		var txt3=document.createElement("p");
		txt3.innerHTML="Text.";
		$(".p6").append(txt1,txt2,txt3);
	});
	$("#button17").click(function(){
		$("img").before("<b>Before</b>");
	});
	$("#button18").click(function(){
		$("img").after("<b>After</b>");
	});
	$("#button19").click(function(){
		var txt1="<b>I </b>";
		var txt2=$("<i></i>").text("love ");
		var txt3=document.createElement("big");
		txt3.innerHTML="jQuery!";
		$("img").after(txt1,txt2,txt3);
	});
	$("#button20").click(function(){
		$("#div1").remove();
	});
	$("#button21").click(function(){
		$("#div2").empty();
	});
	$("#button22").click(function(){
		$("p").remove(".italic");
	});
	$("#button23").click(function(){
		$("h1,h2,.p8").addClass("blue");
		$("div").addClass("important");
	});
	$("#button24").click(function(){
		$("h1,h2,.p8").addClass("important blue");
	});
	$("#button25").click(function(){
		$("h1,h2,.p8").removeClass("blue");
	});
	$("#button26").click(function(){
		$("h1,h2,.p8").toggleClass("blue");
	});
	$("#button27").click(function(){
		alert("Background color= "+$("#test5").css("background-color"));
	});
	$("#button28").click(function(){
		$("#test6").css("background-color","red");
	});
	$("#button29").click(function(){
		$("#test7").css({"background-color":"red","font-size":"200%"});
	});
	$("#button30").click(function(){
		var txt="";
		txt+="width of div:"+$("#div3").width()+"</br>";
		txt+="Height of div:"+$("#div3").height();
		$("#div3").html(txt);
	});
});

.important
{
	font-weight:bold;
	font-size:xx-large;
}
.blue
{
	color:blue;
}

相關標籤/搜索

jquery+html

html+jquery

html+css+jquery+ajax

html+css+javascript+jquery

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

jQuery Html

jQuery 尺寸 方法

jQuery 尺寸方法