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>