jQuery学习笔记02---jQuery属性、DOM的增删改 1、jQuery 的属性操作 2、jQuery 练习一 3、DOM的增删改 4、jQuery练习二

jQuery学习笔记02---jQuery属性、DOM的增删改
1、jQuery 的属性操作
2、jQuery 练习一
3、DOM的增删改
4、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>