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>