第4章 操作DOM（2）
第1次课
属性操作
prop,attr都可以用于获取元素属性
用法上的相同点：一个参数时都表示获取属性值，二个参数时表示设置属性值
prop,attr区别：
有一些单属性 readonly checked selected disabled必须用prop
其他的按以下原则：
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
关键代码
<img id="img1" src="../../images/2.jpg" height="300" width="500"/>
<input type="button" id="btn1" value="换图"/>
<script>
//在2,3图片间切换
var flag=true;
$(function () {
$("#btn1").click(function () {
if(flag==true){
$("#img1").attr("src","../../images/1.jpg");
flag=false;
}else{
$("#img1").attr("src","../../images/2.jpg");
flag=true;
}
})
})
</script>
第二次课
prop制作全选、单选、反选
//改造之前用js写的全选、单选、反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
//全选、反选思路 单选的选中状态与全选状态保持一致
function selectAll() {
//获取全选按钮的选中状态
var flag=$("#chkall").prop("checked");
$("input[name='chkone']").prop("checked",flag);
}
//chkone的思路
//获取被选中的chkone的个数以及chkone本身的个数
//如果相等，全选点亮
//否则灯亮
function chkOne() {
var len=$("input[name='chkone']").size();
var chk_len=$("input[name='chkone']:checked").size();
if(len==chk_len){
$("#chkall").prop("checked",true);
}else{
$("#chkall").prop("checked",false);
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="chkall" id="chkall" onclick="selectAll(this)"/>全选
<table width="100%" border="1" align="center" bordercolor="#dadada">
<tr align="center">
<td width="44" height="25" valign="middle">选择</td>
<td width="98" height="25" valign="middle">姓名</td>
<td width="132" height="25" valign="middle">证件类型</td>
</tr>
<tr align="center">
<td width="44" height="25" valign="middle"><input type="checkbox" name="chkone" value="1" onclick="chkOne(this)"/></td>
<td width="98" height="25" valign="middle">用户1</td>
<td width="132" height="25" valign="middle">1</td>
</tr>
<tr align="center">
<td width="44" height="25" valign="middle"><input type="checkbox" name="chkone" value="2" onclick="chkOne(this)"/></td>
<td width="98" height="25" valign="middle">用户2</td>
<td width="132" height="25" valign="middle">1</td>
</tr>
</form>
</body>
</html>
val()
<input type="text" name="username" value="wangqj"/>
alert(("input[name='username']").val("wangxiaoyu");
其他：
addClass()
removeClass()
html()
text()
文档操作
第三节课
创建节点
var ("content");
插入append appendTo prepend prependTo 主要用于插入子元素
ul.append(li) 向ul里追加li，从后追加
li.appendTo(ul); 向ul里追加li，从后追加
ul.prepend(li); 向ul里追加li，从前面追加
li.prependTo(ul); 向ul里追加li，从前面追加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-1.11.2.min.js"></script>
<script>
$(function () {
//新建节点
var $li=$("<li>javaweb课程</li>");
//追加，在后面插入
//$("ul").append($li);
//$li.appendTo($("ul"));
//$("ul").prepend($li);
$li.prependTo($("ul"));
})
</script>
</head>
<body>
<h2>java课程</h2>
<ul>
<li>mysql</li>
<li>javase</li>
<li>web前台</li>
</ul>
</body>
</html>
学生试验上面的四个方法和第25页的四个方法 这四个主要用于插入同辈元素
after(content|fn) 在每个匹配的元素之后插入内容。
var $h3=$("<h3>h3333333</h3>");
$("h2").after($h3);
insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
var $h3=$("<h3>h3333333</h3>");
$h3.insertAfter($("h2"));
before(content|fn) 在每个匹配的元素之前插入内容。
var ("<h3>h3333333</h3>");
h3);
insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
var ("<h3>h3333333</h3>");
("h2"));
删除
remove() 操作
替换
replace()
replaceWith() 将所有匹配的元素替换成指定的HTML或DOM元素。
var $li_jquery=$("<li>javaweb</li>");
$("ul li:eq(3)").replaceWith($li_jquery); //用后面括号里的内容替换前面括号里的。
replaceAll(selector) 用匹配的元素替换掉所有selector匹配到的元素。用前面的内容替换掉后面括号里满足条件的所有内容
复制
clone()
//选中要复制的对象，然后调用 clone方法 再追加到ul后面
$("ul li:eq(1)").clone().appendTo("ul");
第四节课
节点删除
empty() 清空子节点
remove() 清空所有内容，包括他自己，事件也删除
detach() 清空所有内容，包括他自己，事件保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-1.11.2.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: darkgreen;
}
</style>
<script>
$(function () {
$("#btn1").click(function () {
var $p=$("p");
$p.remove();
//$p.detach();
$("div").append($p);
});
$("p").click(function () {
alert("p被点击");
})
})
</script>
</head>
<body>
<input type="button" id="btn1" value="测试删除">
<div id="div1">div节点内容</div>
<p>p11111111111</p>
</body>
</html>
学生练习：
动态为表格删除和添加行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-1.11.2.min.js"></script>
<script>
$(function () {
$(".del").click(function () {
$(this).parents('tr').remove();
})
$("#btn2").click(function () {
$("table").append("<tr>\n" +
"<td><input type=\"checkbox\"></td>\n" +
"<td>顾俊宁</td>\n" +
"<td>男</td>\n" +
"<td><span class=\"del\">删除</span></td>\n" +
"</tr>")
})
})
</script>
</head>
<body>
<table>
<tr>
<td><input type="checkbox"></td>
<td>姓名</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>陈昊</td>
<td>男</td>
<td><span class="del">删除</span></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>晓宇</td>
<td>男</td>
<td><span class="del">删除</span></td>
</tr>
<input type="button" id="btn2" value="新增"/>
</table>
</body>
</html>