黑马程序员技术交流社区
标题:
【石家庄校区】第四章 JS篇
[打印本页]
作者:
玩玩
时间:
2017-11-19 15:07
标题:
【石家庄校区】第四章 JS篇
本帖最后由 小石姐姐 于 2017-11-20 15:06 编辑
第四章 JS篇
* focus:焦点,使聚焦* blur:模糊,使模糊* node:节点
JS的输出(
innerHTML
)
document.getElementById().innerHTML="";
document.write("");整个页面都重写,不要用
JS的事件(
事件就是我们遇到的情况,事件的双引号中写的是函数名,而函数就是我们写好的脚本,脚本这个词很怪啊,我一直想不出为啥叫脚本,其实script在英语中的意思是手稿,剧本的意思
)
窗口事件
onload : 当文档被
载入
时执行脚本
表单元素事件
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>
```
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2