jQuery学习笔记02---jQuery属性、DOM的增删改

1、jQuery 的属性操作

1.1、HTML代码/文本/值：

html()	它可以设置和获取起始标签和结束标签中的内容	和dom属性innerHTML 一样
text()	它可以设置和获取起始标签和结束标签中的文本	和dom属性innerText一样
val()	它可以设置和获取表单项的value属性值	和dom属性value一样

1.2、val 方法同时设置多个表单项的选中状态：

<!DOCTYPE html>

  <html lang="zh_CN">

  <head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>

    <script type="text/javascript">

  

        $(function () {

  /*

            // 批量操作单选

            $(":radio").val(["radio2"]);

            // 批量操作筛选框的选中状态

            $(":checkbox").val(["checkbox3","checkbox2"]);

            // 批量操作多选的下拉框选中状态

            $("#multiple").val(["mul2","mul3","mul4"]);

            // 操作单选的下拉框选中状态

            $("#single").val(["sin2"]);

*/        

 //组合选择器           $("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]);

        });

  

    </script>

  </head>

  <body>

  <body>

    单选：

    <input name="radio" type="radio" value="radio1" />radio1

    <input name="radio" type="radio" value="radio2" />radio2

    <br/>

    多选：

    <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1

    <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2

    <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3

    <br/>

  

    下拉多选 ：

    <select id="multiple" multiple="multiple" size="4">

        <option value="mul1">mul1</option>

        <option value="mul2">mul2</option>

        <option value="mul3">mul3</option>

        <option value="mul4">mul4</option>

    </select>

    <br/>

  

    下拉单选 ：

    <select id="single">

        <option value="sin1">sin1</option>

        <option value="sin2">sin2</option>

        <option value="sin3">sin3</option>

    </select>

  </body>

  </body>

  </html>

1.3、属性:

attr()	可以设置和获取属性的值，不推荐操作checked、readOnly、selected、disabled等等 attr方法还可以操作非标准的属性。比如自定义属性：abc,bbj（因为会有返回undefined值的情况.undefined这个值一般会有歧义，会造用用户不太理解，或者意思不清晰）
removeAttr(name)	从每一个匹配的元素中删除一个属性
prop()	获取在匹配的元素集中的第一个元素的属性值。可以设置和获取属性的值,只推荐操作checked、readOnly、selected、disabled等等
removeProp(name)	用来删除由.prop()方法设置的属性集

2、jQuery 练习一

2.1、全选，全不选，反选

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  <html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>Insert title here</title>

  <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>

  <script type="text/javascript">

   $(function(){

      // 给全选绑定单击事件

      $("#checkedAllBtn").click(function () {

         $(":checkbox").prop("checked",true);

      });

      // 给全不选绑定单击事件

      $("#checkedNoBtn").click(function () {

         $(":checkbox").prop("checked",false);

      });

      // 反选单击事件

      $("#checkedRevBtn").click(function () {

         // 查询全部的球类的复选框

         $(":checkbox[name='items']").each(function () {

            // 在each遍历的function函数中，有一个this对象。这个this对象是当前正在遍历到的dom对象

            this.checked = !this.checked;

         });

         // 要检查 是否满选

         // 获取全部的球类个数

         var allCount = $(":checkbox[name='items']").length;

         // 再获取选中的球类个数

         var checkedCount = $(":checkbox[name='items']:checked").length;

         // if (allCount == checkedCount) {

         //     $("#checkedAllBox").prop("checked",true);

         // } else {

         //     $("#checkedAllBox").prop("checked",false);

         // }

         $("#checkedAllBox").prop("checked",allCount == checkedCount);

      });

      // 【提交】按钮单击事件

      $("#sendBtn").click(function () {

         // 获取选中的球类的复选框

         $(":checkbox[name='items']:checked").each(function () {

            alert(this.value);

         });

      });

      // 给【全选/全不选】绑定单击事件

      $("#checkedAllBox").click(function () {

         // 在事件的function函数中，有一个this对象，这个this对象是当前正在响应事件的dom对象

         // alert(this.checked);

         $(":checkbox[name='items']").prop("checked",this.checked);

      });

      // 给全部球类绑定单击事件

      $(":checkbox[name='items']").click(function () {

         // 要检查 是否满选

         // 获取全部的球类个数

         var allCount = $(":checkbox[name='items']").length;

         // 再获取选中的球类个数

         var checkedCount = $(":checkbox[name='items']:checked").length;

         $("#checkedAllBox").prop("checked",allCount == checkedCount);

      });

   });

   

  </script>

  </head>

  <body>

   <form method="post" action="">

      你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选    

      <br />

      <input type="checkbox" name="items" value="足球" />足球

      <input type="checkbox" name="items" value="篮球" />篮球

      <input type="checkbox" name="items" value="羽毛球" />羽毛球

      <input type="checkbox" name="items" value="乒乓球" />乒乓球

      <br />

      <input type="button" id="checkedAllBtn" value="全　选" />

      <input type="button" id="checkedNoBtn" value="全不选" />

      <input type="button" id="checkedRevBtn" value="反　选" />

      <input type="button" id="sendBtn" value="提　交" />

   </form>

  

  </body>

  </html>

3、DOM的增删改

3.1、文档处理

3.1.1、内部插入：

append()	向每个匹配的元素内部追加内容。
appendTo()	把所有匹配的元素追加到另一个指定的元素元素集合中	把a插入到b子元素末尾，成为最后一个子元素
prepend()	向每个匹配的元素内部前置内容
prependTo()	把所有匹配的元素前置到另一个、指定的元素元素集合中	把a插到b所有子元素前面，成为第一个子元素

3.1.2、外部插入：

after()	在每个匹配的元素之后插入内容
before()	在每个匹配的元素之前插入内容
insertAfter()	把所有匹配的元素插入到另一个指定的元素元素集合的后面。	a.insertAfter(b) 得到ba
insertBefore()	把所有匹配的元素插入到另一个指定的元素元素集合的前面	a.insertBefore(b) 得到ab

3.1.3、包裹：

wrap()	把所有匹配的元素用其他元素的结构化标记包裹起来
unwrap()	这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素
wrapAll()	将所有匹配的元素用单个元素包裹起来
wrapInner()	将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

3.1.4、替换:

replaceWith()	将所有匹配的元素替换成指定的HTML或DOM元素	a.replaceWith(b) 用b替换掉a
replaceAll()	用匹配的元素替换掉所有 selector匹配到的元素	a.replaceAll(b) 用a替换掉所有b

3.1.5、删除：

empty()

删除匹配的元素集合中所有的子节点

a.empty(); 清空a标签里的内容

remove()

从DOM中删除所有匹配的元素

a.remove(); 删除 a标签

detach()

从DOM中删除所有匹配的元素。

3.1.6、复制:

clone()

克隆匹配的DOM元素并且选中这些克隆的副本

4、jQuery练习二

4.1、从左到右，从右到左练习

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  <html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>Insert title here</title>

   <style type="text/css">

      select {

         width: 100px;

         height: 140px;

      }

      

      div {

         width: 130px;

         float: left;

         text-align: center;

      }

   </style>

   <script type="text/javascript" src="script/jquery-1.7.2.js"></script>

   <script type="text/javascript">

      // 页面加载完成

      $(function () {

         // 第一个按钮 【选中添加到右边】

         $("button:eq(0)").click(function () {

            $("select:eq(0) option:selected").appendTo($("select:eq(1)"));

         });

         // 第二个按钮 【全部添加到右边】

         $("button:eq(1)").click(function () {

            $("select:eq(0) option").appendTo($("select:eq(1)"));

         });

  

         // 第三个按钮 【选中删除到左边】

         $("button:eq(2)").click(function () {

            $("select:eq(1) option:selected").appendTo($("select:eq(0)"));

         });

  

         // 第四个按钮 【全部删除到左边】

         $("button:eq(3)").click(function () {

            $("select:eq(1) option").appendTo($("select:eq(0)"));

         });

      });

   </script>

  </head>

  <body>

  

   <div id="left">

      <select multiple="multiple" name="sel01">

         <option value="opt01">选项1</option>

         <option value="opt02">选项2</option>

         <option value="opt03">选项3</option>

         <option value="opt04">选项4</option>

         <option value="opt05">选项5</option>

         <option value="opt06">选项6</option>

         <option value="opt07">选项7</option>

         <option value="opt08">选项8</option>

      </select>

      

      <button>选中添加到右边</button>

      <button>全部添加到右边</button>

   </div>

   <div id="rigth">

      <select multiple="multiple" name="sel02">

      </select>

      <button>选中删除到左边</button>

      <button>全部删除到左边</button>

   </div>

  

  </body>

  </html>

4.2、动态添加、删除表格记录

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  <html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>Untitled Document</title>

  <link rel="stylesheet" type="text/css" href="styleB/css.css" />

  <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>

  <script type="text/javascript">

  

   $(function () {

      // 创建一个用于复用的删除的function函数

      var deleteFun = function(){

         // alert("删除 操作 的function : " + this);

         // 在事件响应的function函数中，有一个this对象。这个this对象是当前正在响应事件的dom对象。

         var $trObj = $(this).parent().parent();

         var name = $trObj.find("td:first").text();

         /**

          * confirm 是JavaScript语言提供的一个确认提示框函数。你给它传什么，它就提示什么<br/>

          * 当用户点击了确定，就返回true。当用户点击了取消，就返回false

          */

         if( confirm("你确定要删除[" + name +  "]吗？") ){

            $trObj.remove();

         }

         // return false; 可以阻止 元素的默认行为。

         return false;

      };

      // 给【Submit】按钮绑定单击事件

      $("#addEmpButton").click(function () {

         // 获取输入框，姓名，邮箱，工资的内容

         var name = $("#empName").val();

         var email = $("#email").val();

         var salary = $("#salary").val();

         // 创建一个行标签对象，添加到显示数据的表格中

         var $trObj = $("<tr>" +

               "<td>" + name +  "</td>" +

               "<td>" + email + "</td>" +

               "<td>" + salary + "</td>" +

               "<td><a href=\"deleteEmp?id=002\">Delete</a></td>" +

               "</tr>");

         // 添加到显示数据的表格中

         $trObj.appendTo( $("#employeeTable") );

         // 给添加的行的a标签绑上事件

         $trObj.find("a").click( deleteFun );

      });

      // 给删除的a标签绑定单击事件

      $("a").click( deleteFun );

  

   });  

  </script>

  </head>

  <body>

   <table id="employeeTable">

      <tr>

         <th>Name</th>

         <th>Email</th>

         <th>Salary</th>

         <th>&nbsp;</th>

      </tr>

      <tr>

         <td>Tom</td>

         <td>tom@tom.com</td>

         <td>5000</td>

         <td><a href="deleteEmp?id=001">Delete</a></td>

      </tr>

      <tr>

         <td>Jerry</td>

         <td>jerry@sohu.com</td>

         <td>8000</td>

         <td><a href="deleteEmp?id=002">Delete</a></td>

      </tr>

      <tr>

         <td>Bob</td>

         <td>bob@tom.com</td>

         <td>10000</td>

         <td><a href="deleteEmp?id=003">Delete</a></td>

      </tr>

   </table>

  

   <div id="formDiv">

   

      <h4>添加新员工</h4>

  

      <table>

         <tr>

            <td class="word">name: </td>

            <td class="inp">

               <input type="text" name="empName" id="empName" />

            </td>

         </tr>

         <tr>

            <td class="word">email: </td>

            <td class="inp">

               <input type="text" name="email" id="email" />

            </td>

         </tr>

         <tr>

            <td class="word">salary: </td>

            <td class="inp">

               <input type="text" name="salary" id="salary" />

            </td>

         </tr>

         <tr>

            <td colspan="2" align="center">

               <button id="addEmpButton" value="abc">

                  Submit

               </button>

            </td>

         </tr>

      </table>

  

   </div>

  

  </body>

  </html>

posted @ 2020-04-16 17:44 DKPT 阅读(175) 评论(0) 编辑收藏举报

刷新页面返回顶部

DKPT