一, 元素的创建添加和删除
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 自身元素集合中.
来源: https://www.cnblogs.com/lvonve/p/9285462.html