从零开始学 Web 之 jQuery（四）元素的创建添加与删除，自定义属性
大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......
- github：https://github.com/Daotin/Web
- 微信公众号：Web前端之巅
- 博客园：http://www.cnblogs.com/lvonve/
- CSDN：https://blog.csdn.net/lvonve/
在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
一、元素的创建添加和删除
1、方式一：以对象的方式创建元素
- append，appendTo ：在被选元素所有子元素的结尾插入内容（增加子元素）。
- prepend，prependTo：在被选元素所有子元素的开头插入元素（增加子元素）。
- before：在当前被选元素之后插入内容（相当于增加兄弟元素）。
- after：在当前被选元素之前插入内容（相当于增加兄弟元素）。
语法：
// 元素的创建
$("html代码");
// $("<a herf='http://fengdaoting.com'>Daontin</a>")
// 元素的添加（被动）
父元素.append(子元素); // $("#dv").append($("<a>...</a>"));
// 元素的添加（主动）
子元素.appendTo(父元素); // $("<a>...</a>").appendTo($("#dv"));
案例：动态创建列表
<script>
$("#btn1").click(function () {
var ulObj = $("<ul></ul>");
// 创建ul添加到div
$("#dv").append(ulObj);
// 创建li添加到ul，并设置鼠标进入离开事件
$("<li>鸣人</li><li>卡卡西</li><li>佐助</li>").appendTo(ulObj).mouseenter(function () {
$(this).css("backgroundColor","yellow");
}).mouseleave(function () {
$(this).css("backgroundColor","");
});
});
</script>
注意：获取的元素通过 append 或者 appendTo 的方式添加到另一个元素的时候，相当于剪切。如果要保留获取的元素，可以在 append 或者 appendTo 之前使用克隆 clone() 方法。
2、方式二：以字符串的方式创建元素
语法：
父元素.html("html代码");
// $("#dv").html("<a herf='http://fengdaoting.com'>Dao</a>");
3、元素的删除
3.1、清除父元素中所有的子元素
语法1：
父元素.html("");
语法2：
父元素.empty();
3.2、清除单个子元素
语法：
子元素.remove();
二、元素 value 属性的操作
一般 val() 是获取表单的 value 属性；
val(值); 设置表单的 value 属性。
示例1：获取设置文本框value的值
<input type="text" value="text" id="txt">
//------------------------------------------
<script>
$("#btn1").click(function () {
// 获取文本框的value属性值
console.log($("#txt").val());
// 设置文本框的value属性值
$("#txt").val("text2");
});
</script>
示例2：获取设置单选框value的值
<input type="radio" value="1" name="sex" id="nan">男
<input type="radio" value="2" name="sex">女
//-----------------------------------------------
console.log($("#nan").val());
$("#nan").val("3");
示例3：获取设置复选框value的值
<input type="checkbox" value="1">吃饭
<input type="checkbox" value="2" id="c1">睡觉
<input type="checkbox" value="3">大豆豆
//---------------------------------------
console.log($("#c1").val());
$("#c1").val("33");
示例4：获取设置文本域value的值
<textarea name="text" id="t1" cols="30" rows="10">
等你下课
</textarea>
//------------------------------------------------
console.log($("#t1").val()); // 等你下课
$("#t1").val("Jay");
console.log($("#t1").val()); // Jay
// 成对的标签可以使用 text() 方法来获取和设置
console.log($("#t1").text());// 等你下课
$("#t1").text("Jay");
console.log($("#t1").text());// Jay
1、使用 val() 进行设置之后，在源码中 value 的值没有改变，但是打印出来的值改变了。
2、使用 text() 行设置之后，在源码中 value 的值也改变了。
3、成对的标签可以使用 text() 方法来获取和设置，推荐使用 text();
示例5：获取设置下拉框value的值
<select id="s1">
<option value="1">op1</option>
<option value="2">op2</option>
<option value="3">op3</option>
<option value="4">op4</option>
<option value="5">op5</option>
</select>
//-----------------------------------
console.log($("#s1").val());
$("#s1").val("3");
console.log($("#s1").val());
1、获取下拉框的 value 属性，就是获取 option 的 value 的值
2、设置下拉框的 value 属性，就是选中相应 value 值的 option 标签。
三、自定义属性
1、attr
语法：
元素.attr("自定义属性名"，"自定义属性值");
示例：
<div id="dv"></div>
//-------------------------------------------
$("#dv").attr("hello","world"); //<div id="dv" hello="world"></div>
$("#dv").attr("id","box"); //<div id="box"></div>
1、attr 方法主要操作元素的自定义属性的，但是也可以操作元素的自带属性。但是操作元素是否选中的 checked 属性时不合适。
2、操作元素的选中 checked 属性，推荐使用 prop 方法。
自定义属性的选中问题
元素.attr(); // 获取某个元素是否被选中的状态
元素.attr("checked",true); //设置某个元素为选中
<input type="radio" value="1" name="sex" id="r1">男
<input type="radio" value="2" name="sex">女
//-----------------------------------------------
console.log($("#r1").attr("checked"));
$("#r1").attr("checked", true);
PS：attr 方法针对单选框和复选框的是否选中问题操作复杂（选中返回值为 checked，未选中返回值为 undefined，不是直接显示 true 或者 false 那么简单，并且反复操作多次易失效），几乎不用。
2、prop
主要用于获取元素的选中问题。
语法：
元素.prop("checked"); // 获取这个元素是否选中
元素.prop("checked",true/false); // 设置这个元素选中或不选中
示例：
<input type="checkbox" value="1">吃饭
<input type="checkbox" value="2" id="c1">睡觉
<input type="checkbox" value="3">大豆豆
//--------------------------------------------
console.log($("#c1").prop("checked")); // false
$("#c1").prop("checked", true); // true
案例：全选与全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
}
td {
width: 100px;
height: 30px;
background-color: #f8f8f8;
border: 1px solid #7b7b7b;
text-align: center;
}
.th td {
background-color: #e95d71;
color: #f8f8f8;
}
.little-td {
width: 50px;
}
</style>
</head>
<body>
<div id="dv">
<table class="table">
<thead class="th">
<tr>
<td class="little-td"><input type="checkbox"></td>
<td>Web技术</td>
</tr>
</thead>
<tbody class="tb">
<tr>
<td class="little-td"><input type="checkbox"></td>
<td>Web技术</td>
</tr>
<tr>
<td class="little-td"><input type="checkbox"></td>
<td>Web技术</td>
</tr>
<tr>
<td class="little-td"><input type="checkbox"></td>
<td>Web技术</td>
</tr>
<tr>
<td class="little-td"><input type="checkbox"></td>
<td>Web技术</td>
</tr>
</tbody>
</table>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
// 设置总的复选框对子复选框的影响
$(".th input").click(function () {
$(".little-td input").prop("checked", $(this).prop("checked"));
});
// 设置每一个子复选框事件
$(".little-td input").click(function () {
var childLength = $(".tb").find("input").length;//总的子复选框的个数
var actualLength = $(".tb :checked").length;// 已经选中的子复选框的个数
$(".th input").prop("checked", childLength === actualLength);
});
</script>
</body>
</html>
0、
border-collapse: collapse;细线表格。1、子类复选框的集合在 prop 和 click 中会自动遍历操作。
2、
var actualLength = $(".tb :checked").length;中.tb和:checked中间有空格，表示的是 类 tb 下面的子元素集合中带有 checked 的元素，而没有空格表示，设置了类 tb 的所有元素集合中带有 checked 的元素。一个是 tb 下面的子元素集合中，一个是 tb 自身元素集合中。
