(1) val属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>val属性操作</title>
</head>
<body>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function () {
alert($("#name").val())
$("#name").val("李四")
alert($("#sel").val())
$("#sel").val(2)
})
</script>
<input type="text" id="name" value="张三">
<select id="sel">
<option value="0">请选择班级</option>
<option value="1">101</option>
<option value="2">102</option>
<option value="3">103</option>
</select>
</body>
</html>
(2) text/html属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text/html属性操作</title>
</head>
<body>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function () {
alert($("#div1").html())
alert($("#div1").text())
alert($("#div2").html())
alert($("#div2").text())
$("#div3").html('<a href="#">这是div3</a>')
$("#div4").text('<a href="#">这是div4</a>')
})
</script>
<div id="div1">你是谁</div>
<div id="div2"><a href="http://www.baidu.com"/>你是谁</div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
(3) class属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class属性值操作</title>
<!--
1.class属性值是追加，可以追加很多个class属性值；
2.attr属性操作也能设置class属性值，但是最后一个class属性操作会覆盖
之前的class操作，即整体操作，不再追加操作。
-->
<style type="text/css">
.div1{background-color: red}
.div2{color: blue}
</style>
</head>
<body>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function () {
alert("添加2个class到div")
$("#div1").addClass("div1")
$("#div1").addClass("div2")
alert("移除一个class")
$("#div1").removeClass("div1")
})
</script>
<div id="div1">这是div1</div>
</body>
</html>
(4) attr属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr属性操作</title>
<!--attr属性操作：可以为节点的任何属性赋值，以后经常用到-->
<style type="text/css">
.div1{background-color: blue}
</style>
</head>
<body>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function () {
alert($("#img").attr("src"));
alert("切换图片");
$("#img").attr("src","QQ浏览器截图20191205162029.png");
alert("修改文本框的内容");
$("#name").attr("value","李四");
alert($("#lj").val())
alert($("#lj").attr("value"));
alert($("#div").attr("class","div1"));
alert($("cb").attr("checked"))
$("#cb").attr("checked",true);
})
</script>
<img alt="" id="img" width="400px" src="JDBC本质.jpg"><br>
<input type="text" value="张三" id="name"><br>
<a value="lianjie" id="lj">连接</a><br>
<input type="checkbox" id="cb">
<div id="div">div值</div>
</body>
</html>
