一、JavaScript介绍
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。二、JavaScript使用1、JavaScript脚本定义(1)head标签内定义Title
(2)head标签内引入
Title
(3)body标签内部末尾
xxx
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); }(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)计时器(2)console日志记录
(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.一种是通过直接标签绑定 οnclick='xx()' b.先获取Dom对象,然后进行绑定 document.getElementById('xx').onclick document.getElementById('xx').onfocus onclick onblur onfocus6、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=/\bJava\b/g(2)exec获取匹配数据