|
1.1 案例五：使用JS完成复选框的全选和全不选的效果1.1.1 需求： 在实际的开发中一条记录一条记录进行删除的话，效率很低，有的时候需要一起删除多条记录.需要通过在表格之前设置一个复选框的形式进行勾选复选框.点击一个删除的按钮. 1.1.2 分析:1.1.2.1 技术分析： 1.1.2.2 步骤分析：【步骤一】创建一个HTML页面. 【步骤二】确定事件：复选框的单击事件. 【步骤三】触发一个函数 【步骤四】在函数中,获得上面的复选框是否被选中. 【步骤五】如果选中,下面的所有的复选框都被选中. 【步骤六】如果不选中,下面的所有的复选框都不选中. 1.1.3 代码实现： function checkAll(){ // 获得上面的复选框 var selectAll = document.getElementById("selectAll"); // 判断这个复选框是否被选中. var ids = document.getElementsByName("ids"); if(selectAll.checked == true){ // 上面复选框被选中：获得下面所有的复选框,修改checked属性 for(var i = 0 ;i<ids.length;i++){ ids.checked = true; } }else{ // 上面复选框没有被选中：获得下面所有的复选框,修改checked属性 for(var i = 0 ;i<ids.length;i++){ ids.checked = false; } } } 1.1.4 总结：1.1.4.1 JS中的DOM对象：【DOM的概述】 Ø 什么是DOM DOM：Document Object Model：文档对象模型. 将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子. Ø DOM的使用： 知道document，element，attribute中的属性和方法 【DOM的常用的操作】 Ø 获得元素： * document.getElementById(); -- 通过ID获得元素. * document.getElementsByName(); -- 通过name属性获得元素. * document.getElementsByTagName(); -- 通过标签名获得元素. Ø 创建元素： * document.createElement(); -- 创建元素 * document.createTextNode(); -- 创建文本 Ø 添加节点： * element.appendChild(); -- 在最后添加一个节点. * element.insertBefore(); -- 在某个元素之前插入. Ø 删除节点： * element.removeChild(); -- 删除元素 【使用DOM完成对ul中添加一个li元素】 function addElement(){ var city = document.getElementById("city"); // 创建一个元素: var liEl = document.createElement("li"); // 创建一个文本节点: var text = document.createTextNode("深圳"); // 添加子节点: liEl.appendChild(text); city.appendChild(liEl); }
| 
收藏
淘帖
踩
