jQuery操作元素內容
阿新 • • 發佈:2019-01-13
- 之前發現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完成.