一、前言
JavaScript代码存在形式:
- Head中
<script type="text/javascript">
//javascript代码
</script>
- 文件中
<script src='js文件路径'></script>
PS:js代码需要放置在<body>标签内部的最下方
注释:
当行注释 //
多行注释 /* */
二、基础
http://www.cnblogs.com/wupeiqi/articles/5602773.html
创建一个定时器,每隔5s执行alter(123):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> setInterval("alert(123);",5000) </script> </body> </html>
当然也可以通过函数方式:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> function f1(){ console.log(1); } setInterval("f1();",2000) </script> </body> </html>
走马灯了解一下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1">欢迎苍井空来到中国</div> <script> function func(){ //根据id获取指定标签的内容 var tag = document.getElementById('i1'); //获取标签内部内容 var content = tag.innerText; //获取第一个字 var f = content.charAt(0); //获取第一个字外的其他内容 var k = content.substring(1,content.length); var new_content = k+f; tag.innerText = new_content; } setInterval("func()",1000) </script> </body> </html>
三、Dom基础
http://www.cnblogs.com/wupeiqi/articles/5643298.html
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。
举例,先写一个html,然后操作它:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="ly">你好</div> <a>sfjsk</a> <a>888</a> <a>slfm</a> </body> </html>
可以看到原来的值都已经被改掉了
模拟对话框:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width:500px; height:400px; background-color:white; position:fixed; left:50%; top:50%; margin-left:-250px; margin-top:-200px; z-index:10; } .c2{ position:fixed; left:0; top:0; right:0; bottom:0; background-color:black; opacity:0.6; z-index:9; } .hide{ display:none; } </style> </head> <body style="margin:0;"> <div> <table> <thead> <tr> <th>主机名</th> <th>端口</th> </tr> </thead> <tbody> <tr> <td>1.1.1.1</td> <td>8010</td> </tr> <tr> <td>1.1.1.2</td> <td>8020</td> </tr> <tr> <td>1.1.1.3</td> <td>8030</td> </tr> </tbody> </table> <input type="button" value="添加" onclick="ShowModel();"/> </div> <!--遮罩层开始--> <div id="y1" class="c2 hide"></div> <!--遮罩层结束--> <!--弹出框开始--> <div id="y2" class="c1 hide"> <p><input type="text" /></p> <p><input type="text" /></p> <p> <input type="button" value="确定" /> <input type="button" value="取消" onclick="CancelModel();"/> </p> </div> <!--弹出框结束--> <script> function ShowModel(){ document.getElementById('y1').classList.remove('hide'); document.getElementById('y2').classList.remove('hide'); } function CancelModel(){ document.getElementById('y1').classList.add('hide'); document.getElementById('y2').classList.add('hide'); } </script> </body> </html>
<body style="margin:0;"> 可以让展示页面顶格
注意加分号,这样即使几条代码在一行都不会出错,解释器也能识别
全选 返现 取消功能实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width:500px; height:400px; background-color:white; position:fixed; left:50%; top:50%; margin-left:-250px; margin-top:-200px; z-index:10; } .c2{ position:fixed; left:0; top:0; right:0; bottom:0; background-color:black; opacity:0.6; z-index:9; } .hide{ display:none; } </style> </head> <body style="margin:0;"> <div> <table id="tb"> <thead> <tr> <th>选择</th> <th>主机名</th> <th>端口</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>8010</td> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.2</td> <td>8020</td> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.3</td> <td>8030</td> </tr> </tbody> </table> <input type="button" value="添加" onclick="ShowModel();"/> <input type="button" value="全选" onclick="ChooseAll();"/> <input type="button" value="取消" onclick="CancelAll();"/> <input type="button" value="反选" onclick="ReverseAll();"/> </div> <!--遮罩层开始--> <div id="y1" class="c2 hide"></div> <!--遮罩层结束--> <!--弹出框开始--> <div id="y2" class="c1 hide"> <p><input type="text"/></p> <p><input type="text"/></p> <p> <input type="button" value="确定"/> <input type="button" value="取消" onclick="AddhideModel();"/> </p> </div> <!--弹出框结束--> <script> function ShowModel(){ document.getElementById('y1').classList.remove('hide'); document.getElementById('y2').classList.remove('hide'); } function AddhideModel(){ document.getElementById('y1').classList.add('hide'); document.getElementById('y2').classList.add('hide'); } function ChooseAll(){ var tbodyy = document.getElementById('tb'); var tbodyyy = tbodyy.children[1] //获取所有的tr var tr_list = tbodyyy.children; for(var i=0;i<tr_list.length;i++){ //循环所有的tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = true; } } function CancelAll(){ var tbodyy = document.getElementById('tb'); var tbodyyy = tbodyy.children[1] //获取所有的tr var tr_list = tbodyyy.children; for(var i=0;i<tr_list.length;i++){ //循环所有的tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = false; } } function ReverseAll(){ var tbodyy = document.getElementById('tb'); var tbodyyy = tbodyy.children[1] //获取所有的tr var tr_list = tbodyyy.children; for(var i=0;i<tr_list.length;i++){ //循环所有的tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; if(checkbox.checked){ checkbox.checked = false; } else{ checkbox.checked = true; } } } </script> </body> </html>
有个知识点:反选的时候可以通过checked判断checkbox是否选中,选中true,未选中false
左侧菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .item .header{ height:35px; background-color:blue; color:white; line-height:35px; } .hide{ display:none; } </style> </head> <body> <div style="height:48px"></div> <div style="300px"> <div class="item"> <div id='l1' class="header" onclick="ChangeMenu('l1');">菜单一</div> <div class="content"> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div> </div> <div class="item"> <div id='l2' class="header" onclick="ChangeMenu('l2');">菜单二</div> <div class="content hide"> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div> </div> <div class="item"> <div id='l3' class="header" onclick="ChangeMenu('l3');">菜单三</div> <div class="content hide"> <div>内容3</div> <div>内容3</div> <div>内容3</div> </div> </div> </div> <script> function ChangeMenu(nid){ <!--console.log(123);--> var current_header = document.getElementById(nid); <!--console.log(current_header)--> var item_list = current_header.parentElement.parentElement.children; <!--console.log(item_list)--> for(var i=0;i<item_list.length;i++){ var current_item = item_list[i]; current_item.children[1].classList.add('hide') } current_header.nextElementSibling.classList.remove('hide'); } </script> </body> </html>
心情不好不想写注释,不想看书了,就酱
四、函数基础
普通函数
function func(){
}
匿名函数
function func(arg){
return arg+1
}
setInterval("func()",5000);
setInterval(function(){
console.log(123);
},5000)
自执行函数:创建函数并自动执行
function func(arg){
console.log(arg);
}
//func(1)
(function(arg)){
console.log(arg);
})(1)
五、序列化反序列化
新建数组:
li = [1,4,6,12,56,78]
(6) [1, 4, 6, 12, 56, 78]
序列化:
JSON.stringify(li)
"[1,4,6,12,56,78]"
反序列化:
a = JSON.stringify(li)
"[1,4,6,12,56,78]"
JSON.parse(a)
(6) [1, 4, 6, 12, 56, 78]
六、转义
客户端(cookie) => 服务器端
将数据经过转义后,保存在cookie中
- decodeURI( ) URl中未转义的字符
- decodeURIComponent( ) URI组件中的未转义字符
- encodeURI( ) URI中的转义字符
- encodeURIComponent( ) 转义URI组件中的字符
- escape( ) 对字符串转义
- unescape( ) 给转义字符串解码
- URIError 由URl的编码和解码方法抛出
eval
python :
val = eval(表达式) 不能执行for循环
exec(执行代码)
JavaScript
eval 可以计算表达式也可以执行代码
时间
Date类
var d = new Date() 创建d对象
可以通过d.getxxx 获取具体小时,月份等;也可以通过d.setxxx设置时间