初识JavaScript
参考：http://www.cnblogs.com/wupeiqi/articles/5602773.html
JavaScript是一个独立的语言，浏览器具有JavaScript的解析器
写JavaScript的东西记得加上;（因为一般情况下，会将js文件压缩，导致代码放在同一行，有;就能分段）
写js代码：
HTML文件中编写
临时的在浏览器的终端 console写
存在形式
1.JavaScript代码写在HTML的head里面，要被<script>.....</script>包含;不写type的情况下，默认<script type="text/javascript"> </script>
2.若是.js文件，则直接写上代码即可，HTML引入即可，引入代码如：<script scr = "xxx.js">.....</script>
3.放置到body标签内部的最下方，这样就能先显示HTML内容，再请求js（建议这样做）
点我
JavaScript的注释
单行注释：双斜杠//
多行注释：/* */
学习的过程
变量
基本数据类型：数字，字符串，列表，字典，布尔类型
条件语句
for循环
-
变量
name = “alex” #全局变量
var name = "eric" #局部变量 （一般使用局部变量）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>sadf</h1>
<script>
/*
name = 'alex'; 全局变量
function func(){
var name = 'eric' var开头的是局部变量
}*/
age = "18";
i = parseInt(age);
</script>
</body>
</html>
-
基本数据类型
数字：age = 18
age = "18";
/*
字符串转换为数字类型
*/
i = parseInt(age);
字符串：name = “alex”
常用函数：
obj.length 长度 obj.trim() 移除空白 obj.trimLeft() obj.trimRight) obj.charAt(n) 返回字符串中的第n个字符 obj.concat(value, ...) 拼接 obj.indexOf(substring,start) 子序列位置 obj.lastIndexOf(substring,start) 子序列位置 obj.substring(from, to) 根据索引获取子序列 obj.slice(start, end) 切片 obj.toLowerCase() 大写 obj.toUpperCase() 小写 obj.split(delimiter, limit) 分割 obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效) obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。 obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项， $数字：匹配的第n个组内容； $&：当前匹配的内容； $`：位于匹配子串左侧的文本； $'：位于匹配子串右侧的文本 $$：直接量$符号
name.charAt(1) 根据索引下标取值 结果 l
name.subsring(1,3) 取值下标从1取到3（起始位置到结束位置） 结果lex
name.lenght 获取当前字符串长度
定时器
setInterval("执行的代码或者函数"，间隔时间（毫秒）)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//定义函数f1，console.log意思在浏览器的检查那边打印东西
function f1(){
console.log(1);
}
// 创建一个定时器，第一个参数是执行什么，第二个参数为隔间多少毫秒，下面的意思是，每间隔50秒就弹出123
//setInterval("alert(123);", 5000);
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;
//获取索引为0的字符，这里结果是：欢
var f = content.charAt(0);
//获取开始索引为1，到整个长度的字符串内容，这里结果是：迎老男孩莅临指导
var l = content.substring(1,content.length);
var new_content = l + f;
//赋值给变量tag，显示到HTML页面
tag.innerText = new_content;
}
setInterval('func()', 500);
</script>
</body>
</html>
布尔类型
true false
if(false)
列表（数组）
常用函数：
obj.length 数组的大小 obj.push(ele) 尾部追加元素 obj.pop() 尾部获取一个元素 obj.unshift(ele) 头部插入元素 obj.shift() 头部移除元素 obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素 obj.splice(n,0,val) 指定位置插入元素 obj.splice(n,1,val) 指定位置替换元素 obj.splice(n,1) 指定位置删除元素 obj.slice( ) 切片 obj.reverse( ) 反转 obj.join(sep) 将数组元素连接起来以构建一个字符串 obj.concat(val,..) 连接数组 obj.sort( ) 对数组元素进行排序
a = [11,22,33]
a.length 获取长度
字典
a = {"k1":"v1","k2":"v2"}
for循环
console.log:在浏览器的审查元素可以打印东西
1.循环的时候，循环的元素是索引
a = [11,22,33,44]
for(var item in a){
console.log(a[item]);
}
for(var i = 0;i<10;i++){
....
}
条件语句
if(条件){
...
}
else if(条件){
...
}
else{
...
}
== 比较值相等 != 不等于 === 比较值和类型相等 !=== 不等于 || 或 && 且
name = "3"
switch(name){
case:"1": console.log(123)
case:"2":console.log(456)
default: console.log("999")
}
函数
普通函数：
function 函数名（形式参数）{
...
}
匿名函数：
setInterval(function(){
console.log(123);
})
自执行函数：
(function(arg)){
console.log(arg);
}
序列化
- JSON.stringify(obj) 序列化将对象转换为字符串
- JSON.parse(str) 反序列化 将字符串转换为对象类型
转义
客户端（cookie） 请求 服务器端
这样就能做到，客户端保存密码一个月之类的效果，将cookie拿到其他电脑，也是能访问的
需要将数据经过转义后，保存在cookie
- decodeURI( ) URl中未转义的字符
- decodeURIComponent( ) URI组件中的未转义字符
- encodeURI( ) URI中的转义字符
- encodeURIComponent( ) 转义URI组件中的字符
- escape( ) 对字符串转义
- unescape( ) 给转义字符串解码
- URIError 由URl的编码和解码方法抛出
eval
python那边的话，有两个函数，一个是eval（表达式） 一个是exec（执行代码）无返回值，而JavaScript里面的eval就是python的两个函数的集合：既可以编译代码也可以获取返回值。
时间
Date类
var d = new Date() 当前时间
d.getxxx 获取
d.setxxx 设置
作用域
===================1.以函数作为作用域============================
其他语言：以代码块作为作用域
eg:C#的函数
public void Func(String v){
if(1 == 1){
string name = "java";
}
console.writeline(name);
}
Func() //结果报错
python：以函数为作用域
情况一
def func():
if 1 ==1:
name = "alex"
print(name)
func() //这里是可以正常的
情况二：
def func():
if 1 ==1:
name = "alex"
print(name)
func() /
print(name) //这里就报错了
JavaScript：以函数作为作用域
function func(){
if (1==1){
var name = "alex";
}
console.log(name);
}
func()
=====================2.函数的作用域在函数未被调用之前就已经创建========================
=====================3.函数的作用域存在作用域链，并且也是在被调用之前就被创建============
xo = "alex";
function func(){
var xo = "eric";
function inner(){
var xo = "tony";
console.log(xo);
}
inner()
}
func() //输出tony
这样一个函数套一个函数就是作用域链
xo = "alex";
function func(){
var xo = "eric";
function inner(){
console.log(xo);
}
return inner;
}
var ret = func()
ret() //eric
===================4.函数内局部变量声明提前=======================
例如，这样就会出问题了,不会输出alex，而会输出underfined
function func(){
console.log(xxoo);
var xxoo = "alex";
}
func();
JavaScript面向对象
function foo(){
var xo = "alxe";
}
foo()
下面的this相当于python的self
function Foo(){
this,name = "alex";
}
创建新对象
var obj = new Foo();
所以：
a.this代指对象（python self）
b.创建对象时，new函数()
创建原型之后，就会类似python那样
Dom操作
参考：http://www.cnblogs.com/wupeiqi/articles/5643298.html
1.找到标签
- 直接选择器
document.getElementById("id") #获取单个元素
document.getElementByTagName("div") #根据标签找元素，获取多个元素，这里是列表
document.getElementByClassName("c1") #根据class属性获取标签集合，获取多个元素，这里是列表
- 间接选择器
找到一个标签document.getElementById("id")，然后根据这个找相对位置的标签
parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
2.操作标签
- 获取内容
innerText 文本，包含的内标签页只取值
outerText
innerHTML HTML内容，包含的标签值包含HTML代码
innerHTML
value 值
标签.innerText 获取标签中的文本内容
标签.innerText = "" 对标签内部文本进行重新赋值
value ：
对于input value获取当前标签中的值，或者对其赋值用
对于select标签获取当前选项标签的value值（selectIndex对应select下选项的下标名，例如第一个，获取后的selectIndex显示为0，第二个为1，类似数组下标）
对应textarea value获取当前标签中的值，或者对其赋值用
根据这个，可以做搜索框的示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- margin: 0 auto 上线间距为0，左右则根据宽度自适应相同值 onfocus="Focus();"获取光标就执行函数Focus onblur="Blur();移开光标就执行函数Blur --> <div style=" 600px;margin: 0 auto"> <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字"/> </div> <script> function Focus() { var tag = document.getElementById("i1"); var val = tag.value; if (val == "请输入关键字"){ tag.value = ""; } } function Blur(){ var tag = document.getElementById("i1"); var val = tag.value; if (val.length == 0){ tag.value = "请输入关键字"; } } </script> </body> </html>
现在新的浏览器直接使用这句就能实现
<input type="text" placeholder="请输入关键字"/>
className :对样式操作
tag.className = 直接整体做操作
tag.classList
tag.classList.add(“样式名”) 添加指定样式
tag.classList.remove("样式名") 删除指定样式
obj.style.fontSize = "16px"; 相当于原来是<div class = "c1 c2"> </div>增加了样式变成
<div class = "c1 c2" style = "font-size"16px;"> </div>
- 属性操作
attributes // 获取所有标签属性 setAttribute(key,value) // 设置标签属性 getAttribute(key) // 获取指定标签属性
checkbox
获取值：CheckBox对象.checked
设置值：CheckBox对象.checked = true 或false
创建标签，并添加到HTML中
a.字符串形式
b.对象的方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- onclick="AddEle();点击执行函数AddEle --> <input type="button" onclick="AddEle();" value="方式1" /> <input type="button" onclick="AddEle2();" value="方式2" /> <div id="i1"> <!--<input type="text"/>--> <!--<hr/>--> <p> <input type="text" /> </p> </div> <script> function AddEle(){ //创建一个标签 // 将标签添加到i1里面 // <hr/> 分割线 // var tag = "<input type='text'/> <hr/>" var tag = "<p><input type='text'/> <p/>"; /*将HTML添加到上面结尾处*/ document.getElementById("i1").insertAdjacentHTML("beforeEnd",tag) } function AddEle2(){ //创建一个标签 // 将标签添加到i1里面 // 创建一个input标签 var tag = document.createElement("input"); // 设置input的类型为text tag.setAttribute("type","text"); // 设置input的字体大小为16px tag.style.fontSize="16px"; // 设置input的字体颜色为red tag.style.color="red"; // 建立p标签 var p = document.createElement("p"); // 将input标签加入到p标签之下 p.appendChild(tag); document.getElementById("i1").appendChild(p) } </script> </body> </html>
第一种方式：
document.getElementById("i1").insertAdjacentHTML("beforeEnd",tag)
第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
提交表单
任何标签通过dom都可以提交表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="f1" action="https://www.baidu.com/?"> <input type="text" /> <a onclick="submitForm();">提交</a> </form> <script> function submitForm(){ document.getElementById("f1").submit(); } </script> </body> </html>
其他操作
console.log 输出框
alert 弹出框confirm 弹出确认框，确定则是true，取消就是false
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="f1" action="https://www.baidu.com/?"> <input type="text" /> <a onclick="submitForm();">提交</a> </form> <script> function submitForm(){ // document.getElementById("f1").submit(); var tag = confirm("确定删除吗") console.log(tag) } </script> </body> </html>
// URL和刷新location.href 获取当前URLlocation.href = "url" 重定向，设置当前URLlocation.reload() 重新加载，相当于location.href = location.href，刷新 // 定时器setInterval 多次定时器，一直执行clearInterval 清除多次定时器 setTimeout 单次定时器。只执行一次clearTimeout 清除单次定时器事件
onclick,onblur,onfocus
<div onclick="函数（123）"> </div>
<script>
...
</script>
绑定事件的两种方式：
a.直接标签绑定 onclick = 'xxx()' onfocus
b.先获取Dom对象，然后进行绑定
document.getElemetById('xx').onclick
document.getElemetById('xx').onfocus
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> </style> <body> <table id="i1" border="1" width="300px"> <tr><td>1</td><td>2</td><td>2</td></tr> <tr><td>1</td><td>2</td><td>2</td></tr> <tr><td>1</td><td>2</td><td>2</td></tr> </table> <table id='i2' border="1" width="300px"> <tr><td>1</td><td>2</td><td>2</td></tr> <tr><td>1</td><td>2</td><td>2</td></tr> <tr><td>1</td><td>2</td><td>2</td></tr> </table> <script> var myTrs = document.getElementsByTagName("tr"); var len = myTrs.length; for(var i=0;i<len;i++){ // i=0,i=1,i=2 myTrs[i].onmouseover = function(){ this.style.backgroundColor = "red"; }; // myTrs[i].onmouseout = function(){ this.style.backgroundColor = ""; } } // function t1(n){ // var myTrs = document.getElementsByTagName("tr")[n]; //// console.log(myTrs); // myTrs.style.backgroundColor = "red"; // } // // function t2(n){ // var myTrs = document.getElementsByTagName("tr")[n]; // myTrs.style.backgroundColor = ""; // } </script> </body> </html>
this,当前触发事件的标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .item .header{ height: 35px; background-color: #2459a2; color: white; line-height: 35px; } </style> </head> <body> <div style="height: 48px"></div> <div style=" 300px"> <div class="item"> <div class="header" onclick="ChangeMenu(this);">菜单1</div> <div class="content"> <div>内容1</div> <div>内容1</div> <div>内容1</div> </div> </div> <div class="item"> <div class="header" onclick="ChangeMenu(this);">菜单2</div> <div class="content hide"> <div>内容2</div> <div>内容2</div> <div>内容2</div> </div> </div> <div class="item"> <div class="header" onclick="ChangeMenu(this);">菜单3</div> <div class="content hide"> <div>内容3</div> <div>内容3</div> <div>内容3</div> </div> </div> <div class="item"> <div class="header" onclick="ChangeMenu(this);">菜单4</div> <div class="content hide"> <div>内容4</div> <div>内容4</div> <div>内容4</div> </div> </div> </div> <script> function ChangeMenu(ths){ var current_header = ths var item_list = current_header.parentElement.parentElement.children; 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>
a.第一种绑定方式：
b.第二种绑定方式
作用域的示例：
var myTrs = document.getElementsByTagName("tr");
var len = myTrs.length;
for(var i=0;i<len;i++){
// i=0,i=1,i=2
myTrs[i].onmouseover = function(){
// 这里不能写成myTrs[i]..style.backgroundColor = "red";，因为这里函数未执行，作用域问题导致i只会是特定的数，不会随着鼠标移动而变更
this.style.backgroundColor = "red";
};
//
myTrs[i].onmouseout = function(){
this.style.backgroundColor = "";
}
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> </style> <body> <table id="i1" border="1" width="300px"> <tr><td>1</td><td>2</td><td>2</td></tr> <tr><td>1</td><td>2</td><td>2</td></tr> <tr><td>1</td><td>2</td><td>2</td></tr> </table> <table id='i2' border="1" width="300px"> <tr><td>1</td><td>2</td><td>2</td></tr> <tr><td>1</td><td>2</td><td>2</td></tr> <tr><td>1</td><td>2</td><td>2</td></tr> </table> <script> var myTrs = document.getElementsByTagName("tr"); var len = myTrs.length; for(var i=0;i<len;i++){ // i=0,i=1,i=2 myTrs[i].onmouseover = function(){ // 这里不能写成myTrs[i]..style.backgroundColor = "red";，因为这里函数未执行，作用域问题导致i只会是特定的数，不会随着鼠标移动而变更 this.style.backgroundColor = "red"; }; // myTrs[i].onmouseout = function(){ this.style.backgroundColor = ""; } } // function t1(n){ // var myTrs = document.getElementsByTagName("tr")[n]; //// console.log(myTrs); // myTrs.style.backgroundColor = "red"; // } // // function t2(n){ // var myTrs = document.getElementsByTagName("tr")[n]; // myTrs.style.backgroundColor = ""; // } </script> </body> </html>
事件之捕捉以及冒泡（Dom2）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> #main{ background-color: red; width:300px; height:400px; } #content{ background-color: pink; width:150px; height:200px; } </style> <body> <div id="main"> <div id="content"></div> </div> <script> var mymain = document.getElementById("main"); var mycontent = document.getElementById("content"); // false是冒泡模型，这个先显示的是content，true是捕捉模型，这个先显示的是main // 冒泡的意思是最底层往上，捕捉的意思是从外面往里面抓 mymain.addEventListener("click",function(){console.log("main")},true); mycontent.addEventListener("click",function(){console.log("content")},true); </script> </body> </html>
词法分析解析
函数表达式优先级最高
function t1(age){
console.log(age); // function age()
var age = 27;
console.log(age); // 27
function age(){}
console.log(age); // 27
}
t1(3);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } /* opacity: 0.6;透明度 */ .c1{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; } .c2{ width: 500px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -200px; z-index: 10; } </style> </head> <body style="margin: 0;"> <div> <input type="button" value="添加" onclick="ShowModel();" /> <input type="button" value="全选" onclick="ChooseAll();" /> <input type="button" value="取消" onclick="CancleAll();" /> <input type="button" value="反选" onclick="ReverseAll();" /> <table> <thead> <tr> <th>选择</th> <th>主机名</th> <th>端口</th> </tr> </thead> <tbody id="tb"> <tr> <td> <input type="checkbox" /> </td> <td>1.1.1.1</td> <td>190</td> </tr> <tr> <td><input type="checkbox"f id="test" /></td> <td>1.1.1.2</td> <td>192</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.3</td> <td>193</td> </tr> </tbody> </table> </div> <!-- 遮罩层开始 --> <div id="i1" class="c1 hide"></div> <!-- 遮罩层结束 --> <!-- 弹出框开始 --> <div id="i2" class="c2 hide"> <p><input type="text" /></p> <p><input type="text" /></p> <p> <input type="button" value="取消" onclick="HideModel();"/> <input type="button" value="确定"/> </p> </div> <!-- 弹出框结束 --> <script> function ShowModel(){ document.getElementById('i1').classList.remove('hide'); document.getElementById('i2').classList.remove('hide'); } function HideModel(){ document.getElementById('i1').classList.add('hide'); document.getElementById('i2').classList.add('hide'); } function ChooseAll(){ var tbody = document.getElementById('tb'); // 获取所有的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循环所有的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = true; } } function CancleAll(){ var tbody = document.getElementById('tb'); // 获取所有的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循环所有的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = false; } } function ReverseAll(){ var tbody = document.getElementById('tb'); // 获取所有的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循环所有的tr，current_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>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .item .header{ height: 35px; background-color: #2459a2; color: white; line-height: 35px; } </style> </head> <body> <div style="height: 48px"></div> <div style=" 300px"> <div class="item"> <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div> <div class="content"> <div>内容1</div> <div>内容1</div> <div>内容1</div> </div> </div> <div class="item"> <div id='i2' class="header" onclick="ChangeMenu('i2');">菜单2</div> <div class="content hide"> <div>内容2</div> <div>内容2</div> <div>内容2</div> </div> </div> <div class="item"> <div id='i3' class="header" onclick="ChangeMenu('i3');">菜单3</div> <div class="content hide"> <div>内容3</div> <div>内容3</div> <div>内容3</div> </div> </div> <div class="item"> <div id='i4' class="header" onclick="ChangeMenu('i4');">菜单4</div> <div class="content hide"> <div>内容4</div> <div>内容4</div> <div>内容4</div> </div> </div> </div> <script> function ChangeMenu(nid){ var current_header = document.getElementById(nid); var item_list = current_header.parentElement.parentElement.children; 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>
JavaScript的正则表达式
正则表达式
^ 开始
$结束
两斜杠包含的内容就是表达式 /......./
rep = /^d+$/;
rep.exec() 获取匹配的数据
rep = /^d+$/;
str = "wangshen_67_guoyafa_20"
rep.exec(str) #结果67,只获取一个
正则表达式默认就是多行匹配
加上/n之后，就算有^$开始结束标志，也能多行匹配