JavaScript入门（二）
来源：互联网 发布：网络新媒体是干什么的 编辑：程序博客网 时间：2024/06/05 19:45
1、标签<thead>和<tbody>的使用，实现不同行不同颜色：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ var tbEle = document.getElementById("tbl"); //获取tbody的行数 var len = tbEle.tBodies[0].rows.length; //body的行数遍历 for(var i = 0;i < len ; i ++){ if (i%2 == 0){ //设置背景色 tbEle.tBodies[0].rows[i].style.backgroundColor = "pink"; }else{ tbEle.tBodies[0].rows[i].style.backgroundColor = "gold"; } } } </script> </head> <body> <table border="1" width="500" height="50" align="center" id="tbl"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr > <td>1</td> <td>张三</td> <td>22</td> </tr> <tr > <td>2</td> <td>李四</td> <td>25</td> </tr> <tr > <td>3</td> <td>王五</td> <td>27</td> </tr> <tr > <td>4</td> <td>赵六</td> <td>29</td> </tr> <tr > <td>5</td> <td>田七</td> <td>30</td> </tr> <tr > <td>6</td> <td>汾九</td> <td>20</td> </tr> </tbody> </table> </body></html>
2、事件onmouseover和onmouseout的使用，实现鼠标移上去的那行，哪行背景颜色变色。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> function changeColor(id,flag){ if(flag == "over"){ document.getElementById(id).style.backgroundColor = "red"; } else if(flag == "out"){ document.getElementById(id).style.backgroundColor = "white"; } } </script> </head> <body> <table border="1" width="500" height="50" align="center"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr onmouseover="changeColor('tr1','over')" onmouseout = "changeColor('tr1','out')" id="tr1"> <td>1</td> <td>张三</td> <td>22</td> </tr> <tr onmouseover="changeColor('tr2','over')" onmouseout = "changeColor('tr2','out')" id="tr2"> <td>2</td> <td>李四</td> <td>25</td> </tr> <tr onmouseover="changeColor('tr3','over')" onmouseout = "changeColor('tr3','out')" id="tr3"> <td>3</td> <td>王五</td> <td>27</td> </tr> <tr onmouseover="changeColor('tr4','over')" onmouseout = "changeColor('tr4','out')" id="tr4"> <td>4</td> <td>赵六</td> <td>29</td> </tr> <tr onmouseover="changeColor('tr5','over')" onmouseout = "changeColor('tr5','out')" id="tr5"> <td>5</td> <td>田七</td> <td>30</td> </tr> <tr onmouseover="changeColor('tr6','over')" onmouseout = "changeColor('tr6','out')" id="tr6"> <td>6</td> <td>汾九</td> <td>20</td> </tr> </tbody> </table> </body></html>3、事件小结 
onfocus/onblur:聚焦/离焦事件，用于表单校验的时候比较合适。
onclick/ondblclick:鼠标单击和双击事件。
onkeydown/onkeypress：搜索引擎使用较多。
onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称，那么在html页面中只能写一个。
onmouseover/onmouseout/onmousemove：。
onsubmit：表单提交事件 ，有返回值，控制表单是否提交。
onchange:当用户改变内容的时候使用这个事件。
4、复选框
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> function checkAll(){ var checkAllEle = document.getElementById("checkAll"); if(checkAllEle.checked == true){//如果选中就都选中 var checkOnes = document.getElementsByName("checkOne"); for(var i = 0; i < checkOnes.length ;i ++){ checkOnes[i].checked = true; } }else{//如果不选中就都不选中 var checkOnes = document.getElementsByName("checkOne"); for(var i = 0; i < checkOnes.length ;i ++){ checkOnes[i].checked = false; } } } </script> </head> <body> <table border="1" width="500" height="50" align="center" > <thead> <tr> <td colspan="4"> <input type="button" value="添加" /> <input type="button" value="删除" /> </td> </tr> <tr> <th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr > <td><input type="checkbox" name="checkOne"/></td> <td>1</td> <td>张三</td> <td>22</td> </tr> <tr > <td><input type="checkbox" name="checkOne"/></td> <td>2</td> <td>李四</td> <td>25</td> </tr> <tr > <td><input type="checkbox" name="checkOne"/></td> <td>3</td> <td>王五</td> <td>27</td> </tr> <tr > <td><input type="checkbox" name="checkOne"/></td> <td>4</td> <td>赵六</td> <td>29</td> </tr> <tr > <td><input type="checkbox" name="checkOne"/></td> <td>5</td> <td>田七</td> <td>30</td> </tr> <tr > <td><input type="checkbox" name="checkOne"/></td> <td>6</td> <td>汾九</td> <td>20</td> </tr> </tbody> </table> </body></html>
5、javascript的DOM
Document:整个html文件都成为一个document文档；
Element:所有的标签都是Element元素；
Attribute：标签里面的属性；
Text：标签中间夹着的内容为text文本；
Node:document、element、attribute、text统称为节点node。
5.1、Document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。 
注意：
getElementsByName()和getElementsByTagName()两个方法获取之后需要遍历！
创建文本节点：document.createTextNode()。
创建元素节点：document.createElement()。
5.2、Element对象
我们所认知的html页面中所有的标签都是element元素。
element.appendChild():向元素添加新的子节点，作为最后一个子节点。element.firstChild:返回元素的首个子节点。element.getAttribute():返回元素节点的指定属性值。element.innerHTML:设置或返回元素的内容。element.insertBefore():在指定的已有的子节点之前插入新节点。element.lastChild:返回元素的最后一个子元素。element.setAttribute():把指定属性设置或更改为指定值。element.removeChild():从元素中移除子节点。element.replaceChild():替换元素中的子节点。5.3、Attribute对象
我们所认知的html页面中所有标签里面的属性都是attribute。
5.4、动态添加城市
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ document.getElementById("btn").onclick = function(){ var ulEle = document.getElementById("ul1"); //创建文本节点 var textNote = document.createTextNode("深圳"); //创建元素节点 var liEle = document.createElement("li"); //添加 liEle.appendChild(textNote); ulEle.appendChild(liEle); } } </script> </head> <body> <input type = "button" value = "添加城市" id = "btn"/> <ul id="ul1"> <li>北京</li> <li>上海</li> <li>广州</li> </ul> </body></html>6、城市二级联动
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> //1.创建一个二维数组用于存储省份和城市 var cities = new Array(3); cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市"); cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市"); cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市"); cities[3] = new Array("郑州市","洛阳市","开封市","安阳市") function changeCity(val){ var cityEle = document.getElementById("city"); cityEle.options.length = 0; for(var i = 0;i < cities.length; i ++ ){ if(val == i){ //省份下的遍历城市 for(var j = 0;j < cities.length; j ++ ){ var textNode = document.createTextNode(cities[i][j]); var opEle = document.createElement("option"); opEle.appendChild(textNode); cityEle.appendChild(opEle); } } } } </script> </head> <body> <table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white"> <form method="get" action="#" onsubmit="return checkForm()" <tr> <td>籍贯</td> <td> <select onchange="changeCity(this.value)"> <option>--请选择--</option> <option value="0">湖北</option> <option value="1">湖南</option> <option value="2">河北</option> <option value="3">河南</option> </select> <select id="city"> </select> </td> </tr> </form> </table> </body></html>
7、javascript内置对象
Js Array, Js Boolean, Js Date, Js Math, Js Number, Js String, Js RegExp7.1、Array对象
数组的特点：长度可变！数组的长度=最大角标+1
7.2、Boolean对象 
如果value 不写，那么默认创建的结果为false.
7.3、Date对象 new Date().getTime()解决浏览器缓存问题
7.4、Math和number对象
与java里面的基本一致。
7.5、String对象
match():找到一个或多个正则表达式的匹配。substr():从起始索引号提取字符串中指定数目的字符。substring():提取字符串中两个指定的索引号之间的字符。<script> var str = "-a-b-c-d-e-f-"; var str1 = str.substr(2,4);//-b-c var str2 = str.substring(2,4);//-b</script>7.6、RegExp对象
正则表达式对象
test : 检索字符串中指定的值。返回 true 或 false。
8、全局函数
全局属性和函数可用于所有内建的 JavaScript 对象。
<script> var str = "张三"; //alert(encodeURI(str));//%E5%BC%A0%E4%B8%89 //alert(encodeURIComponent(str));//%E5%BC%A0%E4%B8%89 //alert(decodeURI(encodeURI(str)));//张三 //alert(decodeURIComponent(encodeURIComponent(str)));//张三 var str1 = "http://www.baidu.com"; //alert(encodeURI(str1));//http://www.baidu.com //alert(encodeURIComponent(str1));//http%3A%2F%2Fwww.baidu.com //alert(decodeURI(encodeURI(str1)));//http://www.baidu.com //alert(decodeURIComponent(encodeURIComponent(str1)));//http://www.baidu.com var str2 = "alert('abc')"; //alert(str2); eval(str2);</script>阅读全文
0 0
- JavaScript入门（二）
- JavaScript入门（二）
- JavaScript入门（二）
- JavaScript入门（二）
- JavaScript入门（二）
- JavaScript入门基础（二）
- 【JavaScript】程序入门（二）
- javascript入门基础（二）
- JSON(JavaScript Object Notation)入门（二）
- JavaScript语法入门系列（二） 变量
- JavaScript入门学习笔记（二）
- JavaScript 简单入门学习笔记（二）
- JavaScript之入门篇（二）
- javaScript笔记（二十） 事件入门
- Arcgis API for Javascript入门（二）
- JavaScript入门指南---（二）、创建脚本
- JavaScript从入门到放弃（二）
- JavaScript入门(二)
- Android手摸手实现一个画板功能（一）——View的拖拽
- 20170612ac-ir_research_en报告记录
- vs-code plugin
- rot13加密和解密
- 八大排序算法对比
- JavaScript入门（二）
- 编程解习题Demo1.
- SpringMVC拓展——利用maven构建springMVC项目
- 3.mybatis三剑客
- LZO算法简介
- JQuery三、
- The REP prefix
- BigDansing: A System for Big Data Cleansing论文笔记
- 自定义Smarty（三）
