010-jQuery獲取和設定內容屬性

lywgames發表於2020-11-22
jQuery

1. jQuery DOM操作

1.1. jQuery擁有可操作html元素和屬性的強大方法。

1.2. jQuery提供一系列與DOM相關的方法, 這使訪問和操作元素和屬性變得很容易。

1.3. jQuery屬性操作方法:

1.4. jQuery文件操作方法:

2. text()方法

2.1. text()方法方法設定或返回被選元素的文字內容。

2.2. 返回文字內容

2.2.1. 當該方法用於返回一個值時, 它會返回所有匹配元素的組合的文字內容(會刪除html標記)。

2.2.2. 語法

$(selector).text()

2.3. 設定文字內容

2.3.1. 當該方法用於設定值時, 它會覆蓋被選元素的所有內容。

2.3.2. 語法

$(selector).text(content)

2.3.3. 引數

2.4. 使用函式設定文字內容

2.4.1. 使用函式設定所有被選元素的文字內容。

2.4.2. 語法

$(selector).text(function(index, oldcontent))

2.4.3. 引數

3. html()方法

3.1. html()方法返回或設定被選元素的內容(inner html)。

3.2. 返回元素內容

3.2.1. 當使用該方法返回一個值時, 它會返回第一個匹配元素的內容。

3.2.2. 語法

$(selector).html()

3.3. 設定元素內容

3.3.1. 當使用該方法設定一個值時, 它會覆蓋所有匹配元素的內容。

3.3.2. 語法

$(selector).html(content)

3.3.3. 引數

3.4. 使用函式來設定元素內容

3.4.1. 使用函式來設定所有匹配元素的內容。

3.4.2. 語法

$(selector).html(function(index,oldcontent))

3.4.3. 引數

4. val()方法

4.1. val()方法返回或設定被選元素的值。

4.2. 元素的值是通過value屬性設定的。該方法大多用於input元素。

4.3. 返回value屬性

4.3.1. 返回匹配的input元素的value屬性的值。

4.3.2. 語法

$(selector).val()

4.4. 設定value屬性的值

4.4.1. 該方法設定一個值, 會覆蓋input元素的value屬性的值。

4.4.2. 語法

$(selector).val(value)

4.4.3. 引數

4.5. 使用函式設定value屬性的值

4.5.1. 使用函式來設定所有匹配元素的value屬性的值。

4.5.2. 語法

$(selector).val(function(index,oldvalue))

4.5.3. 引數

5. attr()方法

5.1. attr()方法設定或返回被選元素的屬性值。設定的時候, 如果屬性不存在, 就是新增。

5.2. 返回屬性值

5.2.1. 返回被選元素的屬性值。

5.2.2. 語法

$(selector).attr(attribute)

5.2.3. 引數

5.3. 設定屬性/值

5.3.1. 設定被選元素的屬性和值。

5.3.2. 語法

$(selector).attr(attribute,value)

5.3.3. 引數

5.4. 使用函式來設定屬性/值

5.4.1. 設定被選元素的屬性和值。

5.4.2. 語法

$(selector).attr(attribute,function(index,oldvalue))

5.4.3. 引數

5.5. 設定多個屬性/值對

5.5.1. 為被選元素設定一個以上的屬性和值。

5.5.2. 語法

$(selector).attr({attribute:value, attribute:value ...})

5.5.3. 引數

6. removeAttr()方法

6.1. removeAttr()方法從被選元素中移除屬性。

6.2. 語法

$(selector).removeAttr(attribute)

6.3. 引數

7. 獲取和設定內容屬性例子

7.1. 程式碼

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery獲取和設定內容屬性</title>
		<meta charset="utf-8" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					alert($("#p1").text());
				});
				$('#btn2').click(function(){
					alert($("#p1").html());
				});
				$('#btn3').click(function(){
					alert($("#input1").val());
				});
				$('#btn4').click(function(){
					alert($("#input2").attr("value"));
				});
				$('#btn5').click(function(){
					$("#p1").text("");
				});
				$('#btn6').click(function(){
					$("#p1").html("請填寫使用者資訊, <big><b>牢記自己的使用者名稱和密碼</b></big>。");
				});
				$('#input1').focus(function(){
					$(this).val("");
				});
				$('#input2').focus(function(){
					$(this).val("").attr("type", "password");
				});
			});
		</script>
	</head>
	<body>
		<p id="p1">請填寫使用者資訊, <big><b>牢記自己的使用者名稱和密碼</b></big>。</p>
		<span>使用者名稱:</span><input id="input1" type="text" name="userName" value="請輸入名字" /><br />
		<span>密碼:</span><input id="input2" type="text" name="password" value="請輸入密碼" /><br /><br />
		<button id="btn1">顯示文字</button> <button id="btn2">顯示html</button> <button id="btn3">顯示第一個input的表單輸入值</button>
		<button id="btn4">顯示第二個input的value屬性的值</button> <br /><br />
		<button id="btn5">設定文字</button> <button id="btn6">設定html</button>
	</body>
</html>

7.2. 效果圖

8. 使用函式設定內容屬性例子

8.1. 程式碼

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery使用函式設定內容屬性</title>
		<meta charset="utf-8" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("#p1").text(function(index, origText){
						return "";
					});
				});
				$('#btn2').click(function(){
					$("#p1").html(function(index, origHtml){
						return "請填寫使用者資訊, <big><b>牢記自己的使用者名稱和密碼</b></big>。";
					});
				});
				$('#btn3').click(function(){
					$("#input2").attr({"type": "password", "value": "123456", "name": "password"});
					alert($("#input2").attr("name"));
				});
				$('#btn4').click(function(){
					$("#input2").removeAttr("value");
					alert($("#input2").attr("value"));
				});
				$('#input1').focus(function(){
					$(this).val(function(index, origVal){
						return "";
					});
				});
				$('#input2').focus(function(){
					$(this).val(function(index, origVal){
						return "";
					}).attr("type", function(index, origValue){
						return "password";
					});
				});
			});
		</script>
	</head>
	<body>
		<p id="p1">請填寫使用者資訊, <big><b>牢記自己的使用者名稱和密碼</b></big>。</p>
		<span>使用者名稱:</span><input id="input1" type="text" value="請輸入名字" /><br />
		<span>密碼:</span><input id="input2" type="text" value="請輸入密碼" /><br /><br />
		<button id="btn1">設定文字</button> <button id="btn2">設定html</button> 
		<button id="btn3">設定多個屬性</button> <button id="btn4">移除屬性</button>
	</body>
</html>

8.2. 效果圖

 

相關文章