1. 程式人生 > >jQuery操作元素內容

jQuery操作元素內容

  • 之前發現val()函式可以取得元素內容,但是是加上jQuery之中,也可以利用val設定元素內容
  • 示例設定元素value
<html>
<head>
	<meta charset="UTF-8">
	<title>jquery專案</title>
	<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
	<script type="text/javascript">
		function
fun(){ //取得id為"name"的元素中的內容,並設定元素內容 var str = $(uname).val("你好世界"); }
</script> </head> <body> 請輸入:<input type="text" id="uname" name="uname" /> <input type="button" id="but" name="but" onclick="fun()" value="設定內容"/> </body> </html>
  • 執行結果

在這裡插入圖片描述

  • 自整個jQuery的設計之中,充分考慮到便捷的操作形式
  • val()函式時進行元素內容設定獲取的,但是如果要對元素中的內容進行設定,則也可以使用text()或者html()
  • 所謂的元素內容實際上在講解HTML的時候也強調過,在最早的IE中出現過自己的標準"元素,innerHTML",後來這個標準被保留下來了,但是很多認識也覺得這次操作不標準,所以在jQuery裡面針對於元素內容的設定提供了新的支援.
  • 示例:設定元素文字內容
<html>
<head>
	<meta charset="UTF-8">
	<title
>
jquery專案</title> <script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script> <script type="text/javascript"> function fun(){ //取得id為"name"的元素中的內容,並設定元素內容 $(mydiv).text("mydiv的文字內容"); } </script> </head> <body> <div id="mydiv"></div> <input type="button" id="but" name="but" onclick="fun()" value="設定內容"/> </body> </html>
  • 執行結果

在這裡插入圖片描述

  • 此時的程式使用的是text()函式完成的,但是這個函式只能夠設定文字,無法設定HTML元素內容.

  • 錯誤使用

	<script type="text/javascript">
		function fun(){
			//錯誤設定元素內容
			$(mydiv).text("<h1>想要設定元素中的h1內容</h1>");
			
		}
	</script>
  • 執行結果

在這裡插入圖片描述

  • 如果使用text()函式設定元素內容,元素的只會被認為是普通的文字,只有將這戲標籤進行轉以後才可以進行顯示,當然如果希望可以暴力顯示西歐愛過,就尅使用html()函式處理
  • 示例:使用html()函式進行處理
<script type="text/javascript">
		function fun(){
			//錯誤設定元素內容
			$(mydiv).html("<h1>想要設定元素中的h1內容</h1>");
			
		}
	</script>
  • 顯示效果

在這裡插入圖片描述

  • 實際上這兩個處理函式就屬於加強版的innerHTML操作…實際上所有的dom操作,如果要想簡化處理,就是用innerHTML完成.