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>

JQuery入门学习之对元素内容和值进行操作

猜你喜欢