JQuery入門學習之對元素內容和值進行操作

1.對元素內容的操作

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery基本選擇器的使用</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<!-- JQuery控制頁面 -->
<script type="text/javascript">
	$(function(){
		//$("div").text("我是新的!");
		//alert($("div").text())	
		//$("div").html("我是HTML!")
		alert($("div").html())	
	});
</script>
</head>
<body>
	<div>
		<span id="lock">當前時間:2018年07月08日 星期日  23:11:50</span>
	</div>
</body>
</html>

注:text()方法可用於XML文檔元素的文本內容,html和html(val)不能用於XML文檔,但可用於XHTML文檔。

 

應用text()方法獲取文本內容時,將獲取全部匹配元素中包含的文本內容;而應用html()方法獲取HTML內容時,則只獲取了第一個匹配元素中包含的HTML內容。如下所示

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery基本選擇器的使用</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#div1").text("<span style='color:#FF0000'>我是通過text()方法設置的HTML內容</span>");
		$("#div2").html("<span style='color:#FF0000'>我是通過html()方法設置的HTML內容</span>");
		alert("通過text()方法獲取:\r\n"+$("div").text()+"通過html()方法獲取:\r\n"+$("div").html());
	});
</script>
</head>
<body>
	應用text()方法設置的內容
	<div id="div1">
		<span id="clock">當前時間:2018.....</span>
	</div><br>
	應用html()方法設置的內容
	<div id="div2">
		<span id="clock">當前時間:2018.....</span>
	</div>
</body>
</html>

2.對元素值的操作

var();             //$("#submit1").val();          //獲取id爲submit1的元素的值

var(val);        //$("input:text").val("這是新值");     //爲全部文本框設置值

var(arrval);   //$("select").val(['列表項1','列表項2']);    //爲下拉列表框設置多選值

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery基本選擇器的使用</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("select").val(['列表項1','列表項2']);
		alert($("select").val());
		
		$("input:text").val("這是新值");
		alert($("input:text").val());
		
		alert($("#submit1").val());
	});
</script>
</head>
<body>
	<select id="like" name="like" size="3" multiple="multiple">
		<option>列表項1</option>
		<option selected="selected">列表項2</option>
		<option selected="selected">列表項3</option>
	</select>
	<br> 
	<input type="text" value="123"/>
	<input type="text" value="123"/>
	<input type="text" value="123"/>
	
	<input id="submit1" type="submit" value="提交">
</body>
</html>

 

=======================================================

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${request.getContextPath}static/js/jquery-1.12.4.min.js"></script>
</head>
<script type="text/javascript">
	$(document).ready(function(){
		$("#btn1").click(function(){
			//設置元素的值
			$("#context").html("這是html()方法改過後的值");
			//顯示元素的值
			alert($("#context").html());
		});
		
		$("#btn2").click(function(){
			//設置元素的值
			$("#context").text("這是text()方法改過後的值");
			//顯示元素的值
			alert($("#context").text());
		});
		
		
		$("#btn3").click(function(){
			//獲取屬性的值
			alert($("p").attr("id"));
		});
	});
</script>
<body>
<p id="context">這是段落中的<b>粗體</b>文本</p>
<!-- 以下不一定要用button控件,當然,一般也不會亂用別的 -->
<button id="btn1">html()方法</button>
<button id="btn2">text()方法</button>
<button id="btn3">獲取屬性值</button>
<!-- <p id="button1">html()方法</p>  
<p id="button2">text()方法</p> -->
</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章