Day04-JavaScript02
来源：互联网 发布：国企 股东是谁 知乎 编辑：程序博客网 时间：2024/05/24 07:00
Day04-JavaScript02
强调注意点 和昨日回顾漏点：
1）关于数组：
js定义的数组
在数组中可以写上任何数据类型的变量；
注意，与java中不同的是，js中定义数组用的是方括号
var arr = [ 1, 2, “哈哈哈” ， true]；
js中定义数组和java中用的符号不一样
java中：
int[ ] a = { 1, 2, 3, 4};
而js中用的是方括号：
var a = [ test, 1, 2, 3];
2）eval（string）；函数
eval 将字符串解析到js脚本 ，只有在有的写框架的地方才能够用到这个东西。 
3）browser对象中的history对象
有三个方法：back（）；forward（）；go（）； 
4）事件不只是可以加在按钮上，也可以加在其他标签或者文本上：
例：将点击事件加在列表中的一个<li>上
</head> <script> window.onload = function(){ dest = document.getElementById("bj"); fank = document.getElementById("fk"); } function deleteBj(){ fank.remove(); } </script> <body> <!--//点击北京节点， 将反恐节点替换--> 您喜欢的城市:<br> <ul id="city"> <li id="bj" value="beijing" onclick="deleteBj()">北京</li> <li id="sh" value="shanghai">上海</li> <li id="cq" value="chongqing"> 重庆</li> </ul> 您喜欢的游戏:<br> <ul> <li id="fk" value="fankong">反恐精英</li> <li id="ms" value="moshou">魔兽</li> <li id="cq" value="chuanqi">传奇</li> </ul> </body>JS的DOM （重点）
DOM的概述 document object model
DOM树：
document、标签（其实就是element）、属性（Attribute）、文本（text）都叫做dom树的节点。
html文档加载到浏览器的内存中后，我们认为形成了一颗DOM树，即html标签按照层级结构而形成了一颗“家谱树”，而任何一个html标签、标签属性和文本都是这个树上的节点元素。 
我们可以通过js的DOM组件中的方法对内存中的DOM树上的结构和内容进行修改，即通过js动态的修改内存中的那一份html及css的代码。
JS的DOM操作（重点！）
一、标签元素的操作
1.获取元素对象
- 根据id获取元素 getElementById(“”)
- 根据标签获取多个元素 getElementsByTagName(“”) 返回的是一个数组
- 根据类名获取多个元素 getElementsByClassName(“”)返回的是一个数组
- 根据name属性获取多个元素 getElementsByName(“”)
2.创建一个新元素：createElement()
一般写成document. createElemet（）3.对子节点进行操作
- hasChildNodes():判断是否有子节点：如果是成对标签的时候，如果标签体中包含了回车符，也算作是存在子节点
- removeChild(子节点):删除子节点，移除后指针自动跳转，在循环体中移除需要注意，指针自动跳转之后不能够i++；会出现各种bug
- replaceChild(新节点,旧节点):替换子节点
调用方法是： 被替换节点的父节点 . replaceChild(新节点，旧节点）；
</head> <script> window.onload = function(){ dest = document.getElementById("bj"); fank = document.getElementById("fk"); father = document.getElementById("city"); } function deleteBj(){ father.replaceChild(fank,dest); } </script> <body> <!--//点击北京节点， 将反恐节点替换--> 您喜欢的城市:<br> <ul id="city"> <li id="bj" value="beijing" onclick="deleteBj()">北京</li> <li id="sh" value="shanghai">上海</li> <li id="cq" value="chongqing"> 重庆</li> </ul> 您喜欢的游戏:<br> <ul> <li id="fk" value="fankong">反恐精英</li> <li id="ms" value="moshou">魔兽</li> <li id="cq" value="chuanqi">传奇</li> </ul> </body>- 4.标签体的获取与设置
- innerHTML 这是属性：所以要注意调用方法；如果是函数的话应该加括号的，在HBuilder中写慢一点的时候弹出的提示应该可以看得出是函数还是属性。
**
- innerHTML 这是属性：所以要注意调用方法；如果是函数的话应该加括号的，在HBuilder中写慢一点的时候弹出的提示应该可以看得出是函数还是属性。
<head> <meta charset="UTF-8"> <title>设置标签中的文本</title> </head> <script> window.onload = function(){ var dest = document.getElementById("test"); dest.innerHTML = "<h1>这是二十</h1>" } </script> <body> <!--//在div层中插入--> <div id="test"> </div> </body>//innerTest部分 <head> <meta charset="UTF-8"> <title>设置标签中的文本</title> </head> <script> window.onload = function(){ var dest = document.getElementById("test"); dest.innerText = "<h1>这是测试</h1>"; } </script> <body> <!--//在div层中插入--> <div id="test"> </div> </body>获取
* 1.获取元素对象和属性：
1） getElementById 根据id获取元素 ,id是唯一表示的。
2）getElementsByTagName 根据标签获取多个元素,返回的是一个数组类型。 
输出选中的option的值，如果被选中，那么该option的selected的值是true； 
* getElementsByClassName根据类名获取多个元素
* getElementsByName根据name属性获取多个元素，通过自定义名字查找
获取属性：
getAttribute（“属性名”）；获取属性
当使用 . 属性名 的方式获取不到的时候，就用getAttribute（）方法获取属性；
例如：在<ul><li></li><ul>中value不是这个标签内置的属性，只能够通过getAttribute（）的方式获得属性。
setAttribute（“属性名”，“属性值”）； 设置属性
例子，容易犯的错误，列表中的value不是自带的属性，要通过getAttribute（“属性名”）来获取
您喜欢的游戏:<br> <ul> <li id="fk" value="fankong">反恐</li> <li id="ms" value="moshou">魔兽</li> <li id="xj" value="xingji" xxx="ooo">星际争霸</li> <input type="button" value="获取星际争霸的value值" onclick="getXJValue()" /> </ul> <script> function getXJValue(){ var x = document.getElementById("xj"); alert(x.getAttribute("value")); } </script>2获取文本
标签体的获取与设置
以下两种方式即可以用于获取文本，也可以用于设置文本。
innerHTML 取出和设置标签中的所有内容，包括格式标签
innerText 只能够取出其中的文本内容；不能取出格式标签
innerHTML：使用innerHTML设置文本，会自动解析其中的HTML标签。
innerText：不能够自动解析HTML标签；
3.创建一个新元素,新节点：createElement()
寻找父节点parentElement；
子节点.parentElement；- 4.对子节点或者本节点进行操作
hasChildNodes():判断是否有子节点，返回值是boolean类型
var ed = document.hasChildNodes(); 自我理解：注意空标签的情况，在成对的标签的时候，如果默认情况下有换行的时候，那么换行符也算作其中的文本，文本节点，所以返回的时候仍然为true；- removeChild(子节点):删除子节点
父节点. removeChild(子节点）；
在循环中特别注意：移除了之后，oldOption.length 会改变，导致不能完全移除其中的元素。下一个元素上移，同时i++，那么就会导致跳过了被删除元素的下一个元素，导致删除不完全。
*移除本节点：remove（）
细节点：
remove和removeChild（）
在循环中特别注意：移除了之后，oldOption.length 会改变，导致不能完全移除其中的元素。下一个元素上移，同时i++，那么就会导致跳过了被删除元素的下一个元素，导致删除不完全。
比如在省市二级联动的表单中会遇到。
function choosePro(){ for(var i=0;i<myOption.length;i++){ if(myOption[i].selected){ myValue = myOption[i].value; break; } } var city = datas[myValue]; var oldOption = addCity.getElementsByTagName("option"); for(var i=0;i<oldOption.length;){ addCity.removeChild(oldOption[i]); } //这个地方的for循环中没有加上i++，因为在做了remove操作之后，指针会自动往下移动的。加上了i++就会出现删除原来节点不完全的情况。 for(var i=0;i<city.length;i++){ var newCity = document.createElement("option"); newCity.value = i; newCity.innerText = city[i]; addCity.appendChild(newCity); } }
- replaceChild(新节点,旧节点):替换子节点
用于替换的节点改变位置，原被替换的节点消失，用于替换的节点改变位置。
案例：创建节点和添加子节点
创建节点：creatElement（“标签名字”）
创建节点之后一般要设置节点的属性，然后再进行添加。
添加节点：appendChild（“节点对象”），这种方式是在所有子节点的最后面的。
节点创建了之后必须添加之后才能够显示在html中，只创建而不添加是不会进行显示的。
<script> function addTj(){ var tianj = document.createElement("li"); var dest = document.getElementById("city"); tianj.setAttribute("value","tianjing"); tianj.setAttribute("id","tj"); tianj.innerText = "天津"; dest.appendChild(tianj); } </script> <body> <!--//增加城市节点 <li id="tj" v="tianjin">天津</li>放置到city下--> 您喜欢的城市:<br> <ul id="city"> <li id="bj" value="beijing">北京</li> <li id="sh" value="shanghai">上海</li> <li id="cq" value="chongqing">重庆</li> </ul> <input type="button" value="点我添加天津" onclick="addTj()" /> <br />添加到指定节点前面：
document .insertBefore（新节点，参考节点）
调用方法： 父类节点 . insertBefore(新节点，参考节点）；
<script> window.onload = function(){ } function addCq(){ var dest = document.getElementById("cq"); var father = document.getElementById("city"); var tianj = document.createElement("li"); tianj.setAttribute("name","tianjin"); tianj.innerText = "天津"; father.insertBefore(tianj,dest); } </script> <body> <!--// 在重庆前面插入新的节点 <li id="tj" name="tianjin">天津</li>--> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="sh" name="shanghai">上海</li> <li id="cq" name="chongqing">重庆</li> </ul> <br /> <input type="button" value="点击我在重庆前面添加天津" onclick="addCq()" /> </body>
没有添加在后面的说法；
注意点：this关键字：
总结：如果需要遍历所有的标签，并给每个标签绑定事件，当事件触发的时候需要获取到当前触发该事件的标签的属性或者文本的话就使用this关键字。
二、属性设置
- 1.获取属性的值：getAttribute(name)
- 2.设置属性的值：setAttribute(name,value)
- 3.删除某个属性：removeAttribute(name)
JS的内置对象（不重要）
与java一样，js也内置一些现成的对象供我们使用，js中内置对象有如下几个：
Array对象
Array对象是数组对象，跟java中的数组一个意思，但是使用语法上稍微有些区别。
在js中数组可以存放各种类型的数据；
在java中数组长度不可变，但是在js中数组的长度可变，类似于java中的集合。没有写的就是undefined。
例如：
var arr = [1, 2, 3, “java” , “s”];
arr[ 5 ] =true;
arr[ 8 ] = “hello”;
其中arr[6]和arr[7]就是undefined；
- 1.创建数组对象
掌握创建方式。
* 创建一个空数组：var arr = new Array();- 创建一个指定大小的数组：var arr = new Array(size);
- 创建数组并填充元素：
var arr = new Array(element0,** element1, ..., elementn); - 直接创建元素数组：
var arr = [ element0, element1, ..., elementn ];**
数组中获取数组元素个数的属性的是length而不是size；
js中数组的下标不仅仅可以为数字，还可以为字符串。
主要方法：
concat（）；
pop（） 出栈，移除尾部的数据并返回出来。
arr.pop();
push() 压栈，往数组最后添加一个数据，可以传入多个数据，并返回数组新的长度。
- 2.数组中的元素获取
- 跟java一样通过索引的方式获得数组中的元素：
获得数组中的一个元素：arr[0]
遍历获得数组中的所有元素：
- 跟java一样通过索引的方式获得数组中的元素：
for(var i=0;i<arr.length;i++){ alert(arr[i]); }- 多维数组的操作
- js中的数组跟java中的集合相似，也就是数组中的元素还是数组
arr = [ [1,2,3], [4,5,6], [7,8,9] ]获取数组中的8数字可以：arr[2][1]String对象
String中与样式相关的函数都已经淘汰，现在使用css样式设置；
- 获取指定位置的字符：charAt()
- 查找某个字符的第一次出现的下标：indexOf()
- 查找某个字符最后一次出现的下标：lastIndexOf
- 切割字符串：split()
- 截取字符：substring(i,j)
- substr(i,j),表示从i下标开始，截取j个字符
例如：substr（1,4）,从1的位置开始截取，截取四个字符；
日期对象
- 创建方式
- 创建当前日期时间：
**var date = new Date();**这样就获取到了当前的时间，只不过比较难以读而已，要通过适当函数的转换，最主要 就是下面方式：
- 创建当前日期时间：
* var date = new Date(); alert(date.toLocaleString());创建指定日期时间：var date = new Date(毫秒值); 其中毫秒值为1970-01-01至今的时间毫秒值
- 时间的获取
- 获得年：getFullYear() 从 Date 对象以四位数字返回年份。
- 获得月：getMonth() 从 Date 对象返回月份 (0 ~ 11)。
- 获得星期：getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
- 获得日：getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
- 获得毫秒值：getTime() 返回 1970 年 1 月 1 日至今的毫秒数。获取时间戳，就是格林威治时间
怎么将时间戳转换成时间
var time = date.getTime();
var date1 = new Date(time);
toLocalString方法：把date转化为本地时间显示。
var date = new Date(); alert( date.toLocalString() );toLocalDateString() 只显示年月日；
toLocalTimeString()只显示时间
Math对象
这是一个工具类，可以直接调用的
Math对象是数学对象，是一个工具对象，因此Math对象不用使用new的方式创建，直接使用Math就可以调用对象内部的方法。
- abs(x) 返回数的绝对值。
- ceil(x) 对数进行上舍入。不论尾数的多少，取比该值打的第一个整数即可。
- floor(x) 对数进行下舍入。取比该值小的第一个整数。
- random() 返回 0 ~ 1 之间的随机数。
- round(x) 把数四舍五入为最接近的整数。
- max（x, y）
*min（x, y）
正则对象RegExp（不重要，直接百度找正则表达式）
各种案例：
隔行换色的案例
全选全不选的案例
隔行换色主要代码：
当鼠标移入单独时候变成绿色，移出的时候变成原来的颜色
全选案例主要代码
调用click（）表示点击；
淘宝秒杀
如果下面的所有按钮都点上了，全选按钮也要点上。
实现子选框控制全选框。
全面代码：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>案例：隔行换色,复选框全部选中，反选</title> <script> window.onload = function() { //设置表格底颜色和鼠标移入移出换色 row = document.getElementsByTagName("tr"); allCheckBox = document.getElementsByTagName("input"); totalCheck = document.getElementById("firstCheck"); for(var i = 2; i < row.length; i++) { if(i % 2 == 0) { row[i].bgColor = "blue"; } else { row[i].bgColor = "yellow"; } var myColor; row[i].onmouseover = function() { myColor = this.bgColor; this.bgColor = "red"; } row[i].onmouseout = function() { this.bgColor = myColor; } } } function chooseAll() { //设置全选，点击全选框后，复选框全部选中 if(totalCheck.checked) { for(var i = 0; i < allCheckBox.length; i++) { if(allCheckBox[i].type == "checkbox") { allCheckBox[i].checked = true; } } }else{ for(var i=0;i<allCheckBox.length;i++){ if(allCheckBox[i].type == "checkbox") { allCheckBox[i].checked = false; } } } } //所有复选框选中后，全选框自动选中 //如果有一个复选框没选，那么就全选框不要选中 function checkAll(){ var chooseNum = 1; for(var i=1;i<allCheckBox.length;i++){ if(allCheckBox[i].type == "checkbox"){ if(!allCheckBox[i].checked){ totalCheck.checked = false; break; } } } for(var i=1;i<allCheckBox.length;i++){ if(allCheckBox[i].type == "checkbox"){ if(allCheckBox[i].checked){ chooseNum++; } } } if(chooseNum == 5){ totalCheck.checked = true; }else{ totalCheck.checked = false; } } //反选函数 function chooseElse(){ for(var i=2;i<allCheckBox.length;i++){ if(allCheckBox[i].type == "checkbox"){ allCheckBox[i].checked = !allCheckBox[i].checked; } } } </script> </head> <body> <table id="tab1" border="1" width="800" align="center"> <tr> <td colspan="5"><input type="button" value="反选" onclick="chooseElse()"></td> </tr> <tr style="background-color: #999999;"> <th><input type="checkbox" id="firstCheck" onchange="chooseAll()">全选<br /> </th> <th>分类ID</th> <th>分类名称</th> <th>分类描述</th> <th>操作</th> </tr> <tr> <td><input type="checkbox" onchange="checkAll()" ></td> <td>1</td> <td>手机数码</td> <td>手机数码类商品</td> <td> <a href="">修改</a>| <a href="">删除</a> </td> </tr> <tr> <td><input type="checkbox" onchange="checkAll()"></td> <td>2</td> <td>电脑办公</td> <td>电脑办公类商品</td> <td> <a href="">修改</a>| <a href="">删除</a> </td> </tr> <tr> <td><input type="checkbox" onchange="checkAll()"></td> <td>3</td> <td>鞋靴箱包</td> <td>鞋靴箱包类商品</td> <td> <a href="">修改</a>| <a href="">删除</a> </td> </tr> <tr> <td><input type="checkbox" onchange="checkAll()"></td> <td>4</td> <td>家居饰品</td> <td>家居饰品类商品</td> <td> <a href="">修改</a>| <a href="">删除</a> </td> </tr> </table> </body></html>省市二级联动的案例
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>省市联动，直接修改innerHTML方法</title> <script type="text/javascript"> // 定义二维数组: window.onload = function(){ datas = [ ["长沙市","岳阳市","衡阳市","益阳市","邵阳市"], ["广州市","深圳市","东莞市","惠州市","佛山市"], ["文山市","昆明市","大理市","玉溪市","西双版纳"], ["武汉市","荆州市","襄阳市","黄冈市","仙桃市"] ] province_select = document.getElementById("provinceId"); } function choosePro(){ var province_option = province_select.getElementsByTagName("option"); var provinceValue = ""; for(var i=0;i<province_option.length;i++){ if(province_option[i].selected){ provinceValue = province_option[i].value; } } var cityArr = datas[provinceValue]; var city_select = document.getElementById("cityId"); city_select.innerHTML = "<option value=''>----请-选-择-市----</option>"; for(var i=0;i<cityArr.length;i++){ var newCity_option = document.createElement("option"); newCity_option.value = i; newCity_option.innerText = cityArr[i]; city_select.appendChild(newCity_option); } } </script> </head> <body> <div class="regist_bg"> <div class="regist"> <form name="userInfo" action="#" method="get" > <table width="600" height="350px"> <tr> <td colspan="3"> <font color="#3164af">会员注册</font> USER REGISTER </td> </tr> <tr> <td align="right">用户名</td> <td colspan="2"><input id="loginnameId" type="text" name="loginname" size="60"/> </td> </tr> <tr> <td align="right">密码</td> <td colspan="2"><input id="loginpwdId" type="password" name="loginpwd" size="60"/> </td> </tr> <tr> <td align="right">确认密码</td> <td colspan="2"><input id="reloginpwdId" type="password" name="reloginpwd" size="60"/> </td> </tr> <tr> <td align="right">Email</td> <td colspan="2"><input id="emailId" type="text" name="email" size="60"/> </td> </tr> <tr> <td align="right">姓名</td> <td colspan="2"><input name="text" name="username" size="60"/> </td> </tr> <tr> <td align="right">性别</td> <td colspan="2"> <input type="radio" name="gender" value="男" checked="checked" />男 <input type="radio" name="gender" value="女" />女 </td> </tr> <tr> <td align="right">出生日期</td> <td colspan="2"><input type="text" name="birthday" size="60"/> </td> </tr> <tr> <td align="right">所在地</td> <td colspan="3"> <select id="provinceId" style="width:150px" onchange="choosePro()"> <option value="">----请-选-择-省----</option> <option value="0">湖南省</option> <option value="1">广东省</option> <option value="2">云南省</option> <option value="3">湖北省</option> </select> <select id="cityId" style="width:150px"> <option value="">----请-选-择-市----</option> </select> </td> </tr> <tr> <td width="80" align="right">验证码</td> <td width="100"><input type="text" name="verifyCode" /> </td> </tr> <tr> <td></td> <td colspan="2"> <input type="submit" value="注册" /> </td> </tr> </table> </form> </div> </div> </body></html>阅读全文
0 0
- Day04-JavaScript02
- JavaScript02
- JavaScript02
- 初学JavaScript02
- day04
- Day04
- day04
- day04
- day04
- day04
- day04
- day04
- day04
- day04
- day04
- day04
- day04
- day04
- 小强学Python+OpenCV之－1.4.5通道拆分(cv2.split)及合并(cv2.merge)
- 如何获取Button的背景颜色
- PHP 简记
- R语言中样本平衡的几种方法
- Log4j配置详解
- Day04-JavaScript02
- 内部排序—冒泡排序
- 【Python】二、Numpy——《用Python做科学计算》
- JAVA: 为什么要使用"抽象类"? 使用"抽象类"有什么好处?
- 小强学Python+OpenCV之－1.5内核Kernel
- pat 甲1
- POJ 1856 Sea Battle 笔记
- Mysql 字段取数字函数实现
- ipython notebook 如何修改一开始打开的文件夹路径
