本帖最后由 小石姐姐 于 2017-11-20 15:06 编辑
第四章 JS篇* focus:焦点,使聚焦* blur:模糊,使模糊* node:节点- JS的输出(innerHTML)
- document.getElementById().innerHTML="";
- document.write("");整个页面都重写,不要用
- JS的事件(事件就是我们遇到的情况,事件的双引号中写的是函数名,而函数就是我们写好的脚本,脚本这个词很怪啊,我一直想不出为啥叫脚本,其实script在英语中的意思是手稿,剧本的意思)
- 窗口事件
- 表单元素事件
- onsubmit : 当表单被提交时执行脚本
- onfocus : 当元素获得焦点时执行脚本
- onblur : 当元素失去焦点时执行脚本
- onchange : 当元素改变时执行脚本(下拉列表改变事件)
- 键盘操作事件:
- onkeydown : 当键盘被按下时执行脚本
- onkeyup : 当键盘被松开时执行脚本
- onkeypress: 当键盘被按下后又松开时执行脚本(有点像鼠标事件中的click)
- 鼠标操作事件：
- onclick : 当鼠标被单击时执行脚本
- ondblclick : 当鼠标被双击时执行脚本
- onmousemove : 当鼠标指针移动时执行脚本
- onmouseout : 当鼠标指针移出某元素时执行脚本
- onmouseover : 当鼠标指针悬停于某元素之上时执行脚本
- onmousedown : 当鼠标按钮被按下时执行脚本
- onmouseup : 当鼠标按钮被松开时执行脚本
``` <html> <head> <meta charset="UTF-8"> <title>表单校验，熟悉onfocus，和onblur事件，还有innerHtml属性的使用</title> </head> <body > <form action=""> username: <input type="text" placeholder="请输入用户名" id="username" /> <span id="usernameSpan" style="color:red;font-size: 12px;"></span><br /> <input type="submit" value="提交" /> <script> function checkForm(){ var username = document.getElementById('username'); if(username.value == ""){ tips('usernameSpan','用户名不能为空'); return false; }else{ return true; } } function tips(id,content){ document.getElementById(id).innerHTML = content; } </script> </form> </body></html>``` - 使用JS获得表格的行数
- 获得到控制的表格元素:
- var tab1 = document.getElementById(“tab1”);
- var len = tab1.rows.length;
- 表格的表头和表体
``` <html> <head> <meta charset="UTF-8"> <title>表格隔行换色,目的学会使用JS获取表格的行数</title> </head> <body> <table id="tb" border="1" style="width: 300px;height: 300px;"> <tr> <td>A</td> <td>A</td> </tr> <tr> <td>B</td> <td>B</td> </tr> <tr> <td>C</td> <td>C</td> </tr> <tr> <td>D</td> <td>D</td> </tr> <tr> <td>E</td> <td>E</td> </tr> </table> <script> function load(){ /*var table = document.getElementById("tb"); for(var i=0; i<table.rows.length; i++){ if(i %2 == 0){ table.rows.style.backgroundColor = 'red'; }else{ table.rows.style.backgroundColor = 'yellow'; } }*/ var rows = document.querySelectorAll("tr");//数组：里面存储的是行对象 for(var i=0; i<rows.length; i++){ var row = rows; if(i%2 == 0){ row.style.backgroundColor = '#eee'; }else{ row.style.backgroundColor = '#ABC'; } } } </script> </body></html>``` - 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(); -- 删除元素
``` <html> <head> <meta charset="UTF-8"> <title>复选框全选全不选，知识点JS操作checked属性</title> </head> <body > <table id="tb" border="1" style="width: 300px;height: 300px;"> <tr> <td><input type="checkbox" id="checkAll"/>全选/全不选 </td> <td>列1</td> <td>列2</td> </tr> <tr> <td> <input type="checkbox" name="cb"/> </td> <td>B</td> <td>B</td> </tr> <tr> <td> <input type="checkbox" name="cb"/> </td> <td>C</td> <td>C</td> </tr> <tr> <td> <input type="checkbox" name="cb"/> </td> <td>D</td> <td>D</td> </tr> <tr> <td> <input type="checkbox" name="cb"/> </td> <td>E</td> <td>E</td> </tr> </table> <script> function checkAll(){ //第一步：获取最上面的checkbox的checked值 var checked = document.getElementById("checkAll").checked; //第二步：将最上面checkbox的值赋值给下面的checkbox的checked属性 var cbs = document.getElementsByName("cb"); for(var i=0; i<cbs.length; i++){ cbs.checked = checked; } } </script> </body></html><html> <head> <meta charset="UTF-8"> <title> 省市级联动 使用onChange事件，熟练遍历数组 removeChild()方法的使用，动态删除和添加option标签 </title> </head> <body> <select id="province" name="province" > <option value="">-请选择-</option> <option value="0">浙江省value=0</option> <option value="1">江苏省value=1</option> </select> <select id="city" name="city"> <option >-请选择-</option> </select> <script> // 定义数组：二维数组.实质上存储的是每个省份包含的市 var arrs = new Array(5); arrs[0] = new Array("杭州市","绍兴市","温州市","义乌市","嘉兴市");//浙江省的市级城市 arrs[1] = new Array("南京市","苏州市","扬州市","无锡市");//江苏省的市级城市 function changeCity(){ var value = document.getElementById("province").value; //1.清除第二个下拉框中的数据 var city = document.getElementById("city"); for(var i=city.options.length-1; i>0; i--){ city.removeChild(city.options); } //2.根据选中的省所对应的value值，获取城市列表 var cities = arrs[value]; //3.将城市列表添加到第二个下拉框 for(var i=0; i<cities.length; i++){ var opEl = document.createElement("option");// <option>xx市</option> // 创建文本节点: var textNode = document.createTextNode(cities); // 将文本的内容添加到option元素中. opEl.appendChild(textNode); // 将option的元素添加到第二个列表中. city.appendChild(opEl); } } </script> </body></html>``` - 内置对象
- 创建数组
- var arr=[];
- var arr=new Array();
- 全局函数
- var numInt=parseInt("123"):字符串转int
- var numFloat=parseFloat("123"):字符串转浮点型
- eval("alert(1)"):把字符串当作是JS命令运行起来
补充- 获取元素
- document.querySelector("选择器")；
- document.querySelectorAll("选择器")
- 获取样式名
- document.getElementsByClassName()
- 伪数组
``` <html> <head> <meta charset="UTF-8"> <title></title> <script> //数组 var arr = []; arr[0] = 'a'; arr[1] = 'b'; //伪数组 var obj = new Object(); obj[0] = 'a'; obj[1] = 'b' console.log(obj[0]) for(var key in obj){ console.log(key+'======'+obj[key]); } var map = new Object(); map.zhangsan = 13; map.lisi = 14; var str = "1"; console.log(parseInt(str) +1); </script> </head> <body> </body></html>``` - 事件冒泡
- 元素里面有元素，且两个元素绑定相同的事件，里面元素触发该事件，外面的元素也会被触发该事件，事件从里到外触发
- event.stopPropagation()停止事件冒泡
``` <html> <head> <meta charset="UTF-8"> <title></title> <!-- 什么是事件冒泡 元素里面有元素，且两个元素绑定相同的事件，里面元素触发该事件，外面的元素也会被触发该事件，事件从里到外触发 --> </head> <body> <div style="background-color: red; height: 400px;width: 400px;position: absolute;top:0"> <div style="background-color: green;height: 200px;width: 200px;margin-left: 100px;margin-top:100px"></div> </div> <script> function clickOuter(){ console.log("外面的div标签被点击了"); } function clickInner(){ event.stopPropagation(); console.log("里面的div标签被点击了"); } </script> </body></html>```
|
|
收藏
淘帖
踩
