前端开发之Javascript
一、JavaScript引入方式
1、在<script>标签内直接写
2、在<script src=''>标签的src属性中填写JavaScript文件路径
二、JavaScript变量定义
一般情况下推荐使用var关键字进行变量定义，比如
var i; //var 变量名;
i=10
可以在一行中定义多个变量，只需要以逗号进行分隔即可，比如
var name='yuan',age=18;
当不用var关键字声明变量时，该变量为全局变量，比如
name='yuan' console.log(name,typeof name)
变量名定义规则如下
1、只能以下划线、字母、美元符号($)开头
2、余下部分可以是下划线、美元符号、字母、数字中的任意字符，需要注意的是字母区分大小写
3、JavaScript中一些保留字不允许作为变量名包括函数名等
4、JavaScript中的常量相当于python的变量值
三、JavaScript数据类型
number 数值类型，不区分整型和浮点型，最大值±1.7976931348623157 x 10308，最小值±5 x 10 -324
string 字符串类型
Boolean 布尔类型
undefined 只有一个值undefined，表示变量定义但没有赋值
null 只有一个值null，表示对象不存在
四、JavaScript运算符
+ - * / % ++（自增） --（自减）
> >= < <= != == === !==
&& || ！ &&--》and ||--》or !--》not
= += -= *= /=
+号两边有一边是字符串就进行连接操作，与python类似
注意1、NaN属于number，在将字符串转换为数字无效时会得到这个值，该值参与的所有运算除!=外结果都为false
注意2、比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型；比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续取第二位比较；比较运算符两侧如果一个是Boolean值，会将Boolean值转换为数字，false转换为0，true转换为1；比较运算符两侧一个是对象，一个是字符串，会将对象转换为字符串；null与undefined相等；null和undefined不能被转换为其他类型；如果比较运算符两侧都是对象，比较的是它们的引用值。
注意3、逻辑运算中的返回值就是能够决定表达式真假的那个参数
五、JavaScript流程控制
1、顺序结构，从上到下执行
2、分支结构，if语句和switch语句，if语句语法如下
if (表达式1) { 语句1; }else if (表达式2){ 语句2; }else if (表达式3){ 语句3; } else{ 语句4; }
switch语句语法如下
switch (表达式) { case 值1:语句1;break; case 值2:语句2;break; case 值3:语句3;break; default:语句4; }
3、循环结构，for循环和while循环，while循环语法如下
while (条件){ 语句1； ... }
for循环的条件循环语法如下，推荐使用
for(初始表达式;条件表达式;自增或自减) { 执行语句 …… }
for循环的遍历循环语法如下
for( 变量 in 数组或对象) { 执行语句 …… }
4、异常处理，语法如下
try { //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行 } catch (e) { // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。 //e是一个局部变量，用来指向Error对象或者其他抛出的对象 } finally { //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。 } //主动抛出异常 throw Error('xxxx')
六、JavaScript对象
JavaScript中除null和undefined之外其他的数据类型都被定义成了对象，其中常用的为String对象、Array对象、Date对象、Math对象、Function对象。
6.1、String对象
创建方式
1）变量="字符串"
2）字符串对象名称=new String("字符串")
字符串对象常用属性和方法
1）属性
x.length 获取字符串的字符个数 //length属性属于源类中的属性，任何对象都可以使用该属性
2）方法
x.toLowerCase() 大写转小写
x.toUpperCase() 小写转大写
x.trim() 去除两边的空格
x.charAt(index) 获取指定索引的字符
x.indexOf(字符,索引) 只传入字符时获取指定字符第一次出现的索引位置，同时传入字符和索引时为判断指定索引位置的字符是否为指定的字符，是就返回指定的索引，不是就返回-1
x.lastIndexOf(字符) 获取指定字符最后出现的索引位置
x.match(正则) 返回符合正则的字符串数组，没有匹配的返回null
x.search(正则) 返回符合正则的字符串首字母的索引位置
x.substr(起始索引,截取长度) 获取从起始索引开始 到指定长度的子字符串
x.substring(起始索引,结束索引) 获取从起始索引到结束索引前的子字符串
x.slice(起始索引,结束索引) 作用同substring
x.replace(就字符,新字符) 将第一次出现的指定的字符替换为新的字符
x.split(分割符) 按照指定分割符将字符串分割
x.concat(字符) 字符串拼接
6.2、Array对象
创建方式
1）变量=[元素1,元素2,......]
2) 数组对象名称=new Array(元素1,元素2,......)
3) 数组对象名称=new Array(长度)
数组对象常用属性和方法
1）属性
略
2）方法
x.join(拼接字符) 将数组中的元素用指定的拼接字符拼接在一起
x.concat(元素1,元素1,.....) 将指定元素拼接到数组中
x.reverse() 将数组的元素位置颠倒
x.sort() 将数组的元素按照ASC码从小到大排序，可以将自定义的排序函数的函数名传入即按自定义规则排序，其中函数返回负数表示前一个元素比后一个元素小，正数表示前一个元素比后一个元素大，0表示两个元素相等
x.slice(起始索引,结束索引) 作用同String的slice方法
x.splice(起始索引,删除个数,插入元素) 用于从开始索引开始删除指定个数的元素，然后在开始索引位置插入指定元素
x.push(元素) 在数组尾部插入指定元素
x.pop() 删除数组尾部的一个元素并返回
x.unshift(元素) 在数组头部插入指定元素
x.shift() 删除数组头部的一个元素并返回
6.3、Date对象
创建方式
1）变量=new Date() //获取当前的日期时间
2) 变量=new Date('2004/3/20 11:20')
3) 变量=new Date(5000) //参数为毫秒数，当传入0时，获取的是Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)
4）变量=new Date(2004,3,20,11,25,0,355) //最后的毫秒数不显示
Date对象常用属性和方法
1）属性
略
2）方法
x.getDate() 获取日
x.getDay () 获取星期 （0-6）
x.getMonth () 获取月（0-11）
x.getFullYear () 获取完整年份
x.getYear () 获取年
x.getHours () 获取小时
x.getMinutes () 获取分钟
x.getSeconds () 获取秒
x.getMilliseconds () 获取毫秒
x.getTime () 返回累计毫秒数(从1970/1/1午夜)
--------------------------------------------------------------------------
x.setDate() 设置日
x.setDay () 设置星期
x.setMonth () 设置月（0-11）
x.setFullYear () 设置完整年份
x.setYear () 设置年
x.setHours () 设置小时
x.setMinutes () 设置分钟
x.setSeconds () 设置秒
x.setMilliseconds () 设置毫秒
x.setTime () 设置累计毫秒数(从1970/1/1午夜)
--------------------------------------------------------------------------
getTimezoneOffset():8个时区×15度×4分/度=480; 返回本地时间与GMT的时间差，以分钟为单位
toUTCString() 返回国际标准时间字符串
toLocalString() 返回本地格式时间字符串
Date.parse(x) 返回累计毫秒数(从1970/1/1午夜到本地时间)
Date.UTC(x) 返回累计毫秒数(从1970/1/1午夜到国际时间)
6.4、Math对象
创建方式
不需要创建
Math对象常用属性和方法
1）属性
略
2）方法
Math.abs(x) 返回数的绝对值。
Math.exp(x) 返回 e 的指数。
Math.floor(x) 对数进行下舍入。
Math.ceil(x) 对数进行上舍入
Math.log(x) 返回数的自然对数（底为e）。
Math.max(x,y) 返回 x 和 y 中的最高值。
Math.min(x,y) 返回 x 和 y 中的最低值。
Math.pow(x,y) 返回 x 的 y 次幂。
Math.random() 返回 0 ~ 1 之间的随机数。
Math.round(x) 把数四舍五入为最接近的整数。
Math.sin(x) 返回数的正弦。
Math.sqrt(x) 返回数的平方根。
Math.tan(x) 返回角的正切。
6.5、Function对象
创建方式
1）function 函数名（形参）{}
2）变量=function （形参）{}
3）函数名=new Function('参数1','参数2',....,'函数体')
注意：JavaScript加载执行顺序与python不同，JavaScript是所有代码编译并加载到内存后再去执行，所以函数的调用放在函数声明前后都不影响代码执行
函数属性
函数名.length 返回函数的形参个数
函数调用
JavaScript函数在调用时只要函数名写对，参数传多少个都不会报错，传少了返回NaN，传多了多余的参数不管
面试题
function a(a,b){ alert(a+b); } var a=1; var b=2; a(a,b) //这段代码执行时报错，因为a被重新赋值为1，number类型不可调用
函数内置对象arguments
arguments的作用类似python的*args，用于接收传入的所有实参
匿名函数
函数的第二种创建方式定义的就是匿名函数，一般匿名函数的用法如下(function （形参）{})(参数)
七、JavaScript的BOM对象
BOM对象中最常用的对象是window对象，window对象常用方法如下
alert(字符串) 显示带有一段消息和一个确认按钮的警告框。
confirm(字符串) 显示带有一段消息以及确认按钮和取消按钮的对话框，该操作有返回值，用户点击确认返回true，点击取消返回false
prompt(字符串,默认值) 显示可提示用户输入的对话框,该操作的返回值是用户输入的内容
open('url','窗口名','width=..,resizable=no,height=...') 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setInterval(函数名,时间间隔) 按照指定的周期（以毫秒计）来调用函数或计算表达式，第一次执行在指定的时间间隔之后，其返回值为定时器的ID值。
clearInterval(定时器ID值) 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标。
location href属性获取或设置当前页面的完整URL，pathname属性获取或设置当前页面URL的路径，search属性获取或设置当前页面URL中？号开始的部分
八、DOM对象
8.1、通过document文档节点直接查找标签
document.getElementById(标签ID属性值) 返回为标签对象
document.getElementsByTagName(标签名) 返回标签对象集合,可以通过索引取出标签对象
document.getElementsByClassName(标签Class属性值) 返回标签对象集合
document.getELementsByName(标签name属性值) 返回标签对象集合
8.2、间接查找标签
标签对象.parentElement 获取该标签的父标签
标签对象.children 获取该标签的所有子标签
标签对象.firstElementChild 获取该标签的第一个子标签
标签对象.lastElementChild 获取该标签的最后一个子标签
标签对象.nextElementSibling 获取该标签的下一个兄弟标签
标签对象.previousElementSibling 获取该标签的上一个兄弟标签
8.3、标签操作
创建标签
document.createElement(标签名)
添加标签
标签对象.appendChild(标签对象)
插入标签
标签对象.insertBefore(插入的标签对象,标签对象)
删除标签
父标签对象.removeChild(子标签对象)
替换标签
父标签对象.replaceChild(标签对象,子标签对象)
获取标签包裹的内容
标签对象.innerText 只获取标签对象中的文本信息
标签对象.innerHTML 标签对象包裹的是文本就获取文本，包裹的是标签就获取整个标签
设置标签包裹的内容
标签对象.innerText="内容" 不管替换的内容是纯文本还是HTML标签都以字符串形式替换旧的内容
标签对象.innerHTML="内容" 如果替换内容是纯文本就用纯文本替换旧内容，如果替换内容是HTML标签就用标签替换旧的内容
获取标签属性值
标签对象.getAttribute(‘属性名’) 或者 标签对象.属性名
设置标签属性值
标签对象.setAttribute(属性名,属性值) //标签对象.style.css属性=属性值 设置css样式
删除标签属性
标签对象.removeAttribute(属性名)
获取标签所有class属性值
标签对象.className
添加class属性值
标签对象.classList.add(class值)
删除class属性值
标签对象.classList.remove(class值)
克隆标签
标签对象.cloneNode(true) 默认只克隆当前标签对象而不克隆其下级标签，传入true后就可以完全克隆
8.4、标签事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击。
8.5、事件绑定方式
1）DOM0 直接在标签上绑定
<div id="div" onclick="foo(this)">点我呀</div>
<script>
function foo(self){ // 形参不能是this;
console.log("点你大爷!");
console.log(self);
}
</script>
2）DOM1 在JavaScript代码中绑定
<p id="abc">试一试!</p>
<script>
var ele=document.getElementById("abc");
ele.onclick=function(){
console.log("ok");
console.log(this); // this代表触发事件的标签对象，可以直接用
};
</script>
8.6 事件执行顺序以及阻止默认事件的方式
事件分为自定义事件和默认事件，自定义事件即我们自己绑定的事件，默认事件就是标签自带的事件，当一个标签同时具有这两种事件时会先执行自定义事件再执行默认事件，需要注意的是不论自定义事件还是默认事件再被触发后都会产生一个事件对象，事件对象
中保存着这次事件的所有状态信息，可以通过调用事件对象获取需要的一些信息，比如要阻止默认事件触发可以使用event.preventDefault(),以及之后的事件传播中阻止父标签的事件触发event.stopPropagation()。前面提到的阻止默认事件触发我们更常用的是直接再自定义事件中return false。
8.7 部分事件和问题说明
onload事件，在指定的标签或对象加载完毕时触发，一般绑定在body标签或window对象上，主要用于将JavaScript代码放在head标签中时使用
onsubmit事件，当提交事件触发时触发，只能用于type=submit的input标签，主要用于检测准备提交的数据是否符合规定，当数据不符合规定时阻止提交事件触发
事件传播，主要发生在具有层级关系的标签中，当子标签绑定了事件而其上级标签也绑定了事件时，当子标签的事件触发后上级标签也可能被触发的情况，比如子标签和上级标签都绑定了onclick事件
onselect事件，当输入框中的文本被选中时触发，绑定在所有可以输入文本的标签上
onchange事件，当标签的选择状态改变时触发，可以绑定在单选框、复选框以及select标签上,一般用于select标签的联动，select有一个实用的属性用于清除option标签即select.options.length=1,将第一个option标签外的option标签清除
onkeydown事件，当键盘的按键被按下时触发，一般绑定在输入框上，如果需要指定按键按下才触发事件需要通过前面提到的事件对象，提取一个KeyCode值做一步判断，event.keyCode返回的是一个ascii码
onmouseout事件，当鼠标离开被选中元素或其子元素时触发
onmouseleave事件，当鼠标离开被选中元素时触发
事件委派，就是给一个页面加载后存在的上级标签绑定addEventListener('事件名',函数,事件执行模式)，让它给所有的下级标签绑定指定的事件其中包括临时创建的下级标签，事件执行模式中true代表冒泡模式，false代表捕捉模式即事件从外向内的顺序执行，event.target可以获取当前触发事件的下级标签对象，event.target.tagName可以获取该标签对象的名字
浙公网安备 33010602011771号