jQuery的复习（2）

最新推荐文章于 2022-11-16 21:12:57 发布

写bug的小气球

最新推荐文章于 2022-11-16 21:12:57 发布

阅读量104

点赞数

分类专栏：自学前端 web前端自学文章标签： html javascript

本文链接：https://blog.csdn.net/weixin_46013619/article/details/103591394

版权

自学前端同时被 3 个专栏收录

42 篇文章 1 订阅

订阅专栏

web前端

36 篇文章 0 订阅

订阅专栏

自学

25 篇文章 0 订阅

订阅专栏

1.补充js部分的问题，分别来看，通过比较可以明白很多
在这里插入图片描述

2.爱好选择器（与前面js（1）第10 那一章节好好比较）

<!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>全选练习</title>
</head>
<body>

<form>
  你爱好的运动是？<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>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
  //功能说明:
  // 1. 点击'全选': 选中所有爱好
  // 2. 点击'全不选': 所有爱好都不勾选
  // 3. 点击'反选': 改变所有爱好的勾选状态
  // 4. 点击'提交': 提示所有勾选的爱好
  // 5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
  // 6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
  var $checkedAllBox = $('#checkedAllBox')
  var $items = $(':checkbox[name=items]')
  // 1. 点击'全选': 选中所有爱好
  $('#checkedAllBtn').click(function () {
    $items.prop('checked',true)
    $checkedAllBox.prop('checked',true)
  })
  // 2. 点击'全不选': 所有爱好都不勾选
  $('#checkedNoBtn').click(function () {
    $items.prop('checked',false)
    $checkedAllBox.prop('checked',false)
  })
  // 3. 点击'反选': 改变所有爱好的勾选状态
  $('#checkedRevBtn').click(function () {
    // for (var i=0 ;i < $items.length; i++){
    //   $items[i].checked = !$items[i].checked
    // }这个也行
    $items.each(function () {
      this.checked = !this.checked
    })
    //这里我们想的和原生js一样，如何让它有一个未选中，
    // 就将checkedAllBox的checked设置为false
    //这里我没有想到可以通过一个变量去改变false还是true，值得思考！
    $checkedAllBox.prop('checked',$items.filter(':not(:checked)').length ===0)
  })
  // 4. 点击'提交': 提示所有勾选的爱好
  $('#sendBtn').click(function () {
    // each()隐式遍历  里面的function代表着：对于每个匹配的元素所要执行的函数
    $items.filter(':checked').each(function () {
      alert(this.value)
    })
  })
  // 5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
   $('#checkedAllBox').click(function () {
     $items.prop('checked',this.checked)
   })
  // 6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
    $items.click(function () {
      //当有一个items的checked为false，就不能全选
      $checkedAllBox.prop('checked',$items.filter(':not(:checked)').length ===0)
    })
</script>
</body>
</html>

3.添加删除记录（与前面js（1）第11 那一章节好好比较）

1.这里可能就是在 $(’’)有点陌生的感觉
2…find(‘a’)
.click(clickDelete)
这里其实用find是在找新创建tr的后代中的a，因为要给新设置的a设置点击监听，如果不这么写，你不设监听，新增的a是没有点击监听的，因为页面一加载，所有的监听都已经绑定好了，后加的当然没有了，
3.这里有两种方法，第一种就是理所当然的思路，第二种后面会总结，利用了事件的委托，先了解，后面再总结

@CHARSET "UTF-8";
#total {
	width: 450px;
	margin-left: auto;
	margin-right: auto;
}

ul {
	list-style-type: none;
}

li {
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float: left;
}

.inner {
	width: 400px;
	border-style: solid;
	border-width: 1px;
	margin: 10px;
	padding: 10px;
	float: left;
}

#employeeTable {
	border-spacing: 1px;
	background-color: black;
	margin: 80px auto 10px auto;
}

th,td {
	background-color: white;
}

#formDiv {
	width: 250px;
	border-style: solid;
	border-width: 1px;
	margin: 50px auto 10px auto;
	padding: 10px;
}

#formDiv input {
	width: 100%;
}

.word {
	width: 40px;
}

.inp {
	width: 200px;
}
#employeeTable, #employeeTable th, #employeeTable td{
	border: 1px solid;
	border-spacing: 0;

}

<!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>添加删除记录练习</title>
  <link rel="stylesheet" type="text/css" href="css.css"/>
</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>


</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>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
 $(function () {
   //首先我们要获取到输入框的值，// 当点击addEmpButton就添加信息，并且清空输入框
   $('#addEmpButton').click(function () {
     var $empName = $('#empName')
     var $email = $('#email')
     var $salary = $('#salary')
     var empName = $empName.val()
     var email = $email.val()
     var salary = $salary.val()
     //   <tr>
     //     <td>Bob</td>
     //     <td>bob@tom.com</td>
     //     <td>10000</td>
     //     <td><a href="deleteEmp?id=003">Delete</a></td>
     //   </tr>
     $('<tr></tr>')
       .append('<td>'+empName+'</td>')
       .append('<td>'+email+'</td>')
       .append('<td>'+salary+'</td>')
       .append('<td><a href="deleteEmp?id="'+Date.now()+'>Delete</a></td>')
       .appendTo('#employeeTable>tbody')
       .find('a')
       .click(clickDelete)
     //清空
     $empName.val('')
     $email.val('')
     $salary.val('')
   })
   $('#employeeTable a').click(clickDelete)
   function clickDelete() {
       //当我点击a时，应该删除这一行个tr，
       //并且应该弹出对话框，点击确定，确认删除
       var $tr = $(this).parent().parent()
       var name = $tr.children(':first').html()
       if(confirm('是否确认删除'+name+'?')){
         $tr.remove()
       }
       return false
     }

 })
</script>
</body>
</html>

 $('#addEmpButton').click(function () {
    //1. 收集输入的数据
    var $empName = $('#empName')
    var $email = $('#email')
    var $salary = $('#salary')
    var empName = $empName.val()
    var email = $email.val()
    var salary = $salary.val()

    //2. 生成对应的<tr>标签结构, 并插入#employeeTable的tbody中
    /*
     <tr>
       <td>Bob</td>
       <td>bob@tom.com</td>
       <td>10000</td>
       <td><a href="deleteEmp?id=003">Delete</a></td>
     </tr>
     */
    var $xxx = $('<tr></tr>')
      .append('<td>'+empName+'</td>') // 拼串
      .append('<td>'+email+'</td>')
      .append('<td>'+salary+'</td>')
      .append('<td><a href="deleteEmp?id="'+Date.now()+'>Delete</a></td>')
      .appendTo('#employeeTable>tbody')

    //3. 清除输入
    $empName.val('')
    $email.val('')
    $salary.val('')
  })

  // 通过table实现对所有a的click事件委托
  $('#employeeTable').delegate('a', 'click', clickDelete)

  /*
  点击删除的回调函数
   */
  function clickDelete () {
    var $tr = $(this).parent().parent()
    var name = $tr.children(':first').html()
    if(confirm('确定删除'+name+'吗?')) {
      $tr.remove()
    }

    return false
  }

下午上课，回来继续写，委托很有趣，委托的监听里的this猜猜是谁，没错，是a而不是table

写bug的小气球

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的复习（2）

1.补充js部分的问题，分别来看，通过比较可以明白很多2.爱好选择器（与js那一张好好比较）<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-...
复制链接

扫一扫

专栏目录