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>