一、JavaScript介绍
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
二、JavaScript使用
1、JavaScript脚本定义
(1)head标签内定义
<head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> alert("警告"); </script> </head>
(2)head标签内引入
<head> <meta charset="UTF-8"> <title>Title</title> <script src="js01.js"> </script> </head>
(3)body标签内部末尾
<body> xxx <script src="js01.js"> </script> </body>
2、JavaScript注释
(1)单行注释
//
(2)多行注释
/* xxx */
3、JavaScript常用数据类型
(1)变量声明
全局变量定义：name='Tom'
局部变量： var name='Tom'
(2)数字类型
a=18;
age="18"
parseInt(age); ##转化为整数类型
parseFloat(age); ##转化为浮点数类型
(3)字符串类型
name="Tom"
a.charAt(1) ##根据下标取字符串值,0表示第一个字符
a.substring(1,3) ##获取字符串,起始结束为止,0表示第一个字符，范围是[m,n)，即m=<name<n
a.length ##获取字符串长度
a.trim() ##移除空白
a.trimleft() ##移除左侧空白
a.trimright() ##移除右侧空白
a.concat(value,...) ##字符串拼接
a.indexOf(sub,start)##子序列位置，正数
a.lastIndexOf(sub,start)##子序列位置，倒数
a.slice(start,end) ##切片
a.toLowerCase() ##转换为大写
a.toUpperCase() ##转换为小写
a.split(delimiter,limit) ##分隔
a.search(regexp) ##从头开始匹配，返回匹配成功的第一个位置(g无效)
a.match(regexp) ##全局搜索,如果正则中有g表示找到全部，否则只知道第一个
a.replace(regexp,replace)##替换，有g替换所有，否则只替换第一个，$数字：匹配的第n个组内容，$&当前匹配的内容,$`：位于匹配子串左侧的文本
(4)布尔类型
true
false
(5)数组
a=[1,'a','','tom']
a.length ##数组长度
a.splice(n,0,value) ##从指定位置插入value
a.splice(n,1,value) ##从指定位置替换value
a.splice(n,1) ##从指定位置删除value
a.slice(m,n) ##从指定位置切片
a.join(sep) ##数组值按照指定分隔符拼接成字符串
a.concat(val,...) ##对数组元素进行排序
a.sort() ##对数据元素进行排序
(6)字典
a={'k1':'v1','k2':'v2'}
4、常用语法
(1)函数定义语法
a.普通函数：
function fname(){
函数体
}
b.匿名函数
fsetInterval(function(){
console.log(123);
},5000)
c.自执行函数
(2)if语法
if(条件){
}else if(条件){
}else if(条件){
}else{
}
==：非严格意义等号，1=="1"为true
===:严格意义等号，1==="1"为false
!=:不等号
&&:逻辑与
||:逻辑或
name='1' ;
switch(name){
case '1':
console.log(123);
case '2':
console.log(456);
default:
console.log(789);
}
<script> var name='1'; switch (name){ case '1': age=123; console.log(age) case '2': age=456; console.log(age) default: age=999; console.log(age) } </script>
(3)for循环
1)语法
a=[1,'a','','tom']
for(var item in a){
console.log(a[item]);
}
2)语法
a=[1,'a','','tom']
for(var i=0;i<a.length;i++){
console.log(a[i]);
}
5.其他常用函数
(1)计时器
<body> <script > setInterval("alert('警告')",5000) </script> </body>
(2)console日志记录
<body> <script > function f01() { console.log(123) } setInterval("f01()",5000) </script> </body>
(3)json和字符串转换
JSON.stringify(li) ##将数组转化为字符串
JSON.parse(li) ##将字符串转化为数组
(4)转义
encodeURL() ##URL中转义的字符
decodeURL() ##URL中未转义的字符
encodeURLComponent() ##URL中组件未转义的字符
decodeURLComponent() ##URL中组件转义的字符
escape() ##对字符串转义
unescape() ##给转义字符串解码
URLError() ##给URL编码和解码方法抛出
(5)eval
javascript中eval是可以编译代码，也可以获取返回值
(6)时间
var dt=new Date()
dt.getxxx ##获取时间
dt.setxxx ##设置时间
(7)确认框
confirm('输入信息内容')
(8)重定向
location.href='url' ##重定向
location.reload() ##重新加载
location.href ##获取URL
(9)事件
事件调用有两种方式：
a.一种是通过直接标签绑定
onclick='xx()'
b.先获取Dom对象，然后进行绑定
document.getElementById('xx').onclick
document.getElementById('xx').onfocus
onclick
onblur
onfocus
6、Dom间接选择器
(1)找到标签
a.直接查找
获取单个元素：document.getElementById('i1')
获取多个元素：document.getElementsByTagName('div')
document.getElementsByClassName('c1')
document.getElementsByName('name')
b.间接查找
tag=document.getElementById('i1')
parentElement ##父标签元素
children ##子标签元素
firstElementChild ##第一个子标签元素
lastElementChild ##最后一个子标签元素
nextElementSlibling ##下一个兄弟标签元素
previousElementSlibling ##上一个兄弟标签元素
(2)操作标签
a.innerText
获取标签中的文本内容：标签.innerText
标签内容重新赋值：标签.innerText=''
b.className
tag.className ##直接整体操作
tab.className.add('样式名') ##添加指定样式
tab.className.remove('样式名') ##删除指定样式
7、作用域
(1)作用域范围
a.其他语言：以代码块作为作用域
public void Func(){
if(1==1){
string name='Java';
}
console.writeline(name);
}
Func(); ##此时执行报错，因为name是局部变量，其作用域为{}内
b.python:
def func():
if 1==1:
name='tom'
print(name)
func() ##此时执行成功，因为Python作用域是函数本身
c.javascript
def func(){
if (1==1){
name='tom';
}
console.log(123);
}
func() ##此时执行成功，因为javascript作用域是函数本身
##函数作用域存在作用域链中，并且也是在创建之前被声明
##函数局部变量提前声明
8、JavaScript面向对象
function fo(n){
this.name=n;
}
var obj=new fo('Tom');
a.this 代指对象(python self)
b.创建对象时,new 函数名，表示类实例化
9、JS正则匹配
/../ 用于正则匹配
/../g 全局匹配
/../i 忽略大小写匹配
/../m 多行匹配
(1)test
判断字符串是否符合规定的正则，只要含有匹配内容就返回true
req=/^d+$/
req=/Java/g
(2)exec
获取匹配数据