本文共 7951 字,大约阅读时间需要 26 分钟。
网页脚本语言,由浏览器解释执行;
目的:校验表单数据,页面特效;嵌入HTML实现 嵌入HTML的方式:可以放在任何位置 方式一:内部,写在<script type””> 方式二:外部,JS单独写在一个文件被引用数字型Number、字符串型String、未定义类型undefuned、布尔型Boolean、空Null
查看原始数据类型:alert(typeof bianliangming); NaN不是数字的数字类型JS是一门弱类型语言:定义变量时,不需要规定其数据类型。
定义变量的关键字:var Es6中定义常量const函数体内的变量前不加var则是全局变量
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。
在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。 只要函数运行完毕,本地变量就会被删除。全局变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。 全局变量会在页面关闭后被删除。算术运算符、逻辑运算符、比较运算符、位运算符、三目运算符、赋值运算符
一元运算符: ++ – +(正) -(负) 比较运算符: > < >= <= 逻辑运算符:&& || ! 算术运算符:+ - * / % 赋值运算符:= += … 三元运算符: 表达式 ? 值1 : 值2; 算术运算符:NaN 其他运算符:void拦截跳转页面void(跳转到新的执行) 语法格式:herf=”javascript:void()” Delete运算符:删除对象中的属性,不能删除未定义的属性当运算符期望值与实际值不同时,会发生数据类型转换;
任何类型与NaN的运算结果均为NaN
NaN参与的运算,结果都为fasle,除了(!=) NaN 参与数学运算 结果都为NaN字符串转成数字,可以转时会转成数字类型,否则转换成NaN
boolean: true为1 false 为0number:非0为true,0和NaN为false,
string: 除了空字符串(""),其他都是true null 和 undefined:转为false 对象:所有对象都为true 字符串比较小大:如果长度一致按照字典顺序比较 长度不一致 那谁的长度长那就谁大 == 与===的区别 == :会发生自动类型转换 === :会比较类型JS是一门基于对象的语言
基于对象:不能由原生的对象派生出新的对象。换句话说,不存在继承关系Abstract\boolean\byte\char\conat\defualt\delete\
带有属性和方法的特殊数据类型
Number\String\Date\Arrary\Boolean\Math\RegExp\Global创建语法一:new String();
创建语法二:String(); 创建语法三:var s=“”; 属性:length长度 方法:CharAt();返回在指定位置的字符
charCodeAt();返回在指定的位置的字符的Unicode编码 concat();连接字符串 indexOf();检索字符串 lastInexOf();从后向前搜素字符串 substring() 提取字符串中两个指定的索引号之间的字符。 toLowerCase() 把字符串转换为小写。 toUpperCase() 把字符串转换为大写。 mach();匹配正则表达式 replace();替换与正则表达式匹配的子串 split() 把字符串分割为字符串数组。 slice();提取片段,负值表示从后往前数 trim():去除字符串两端的空格 ES6拼串:string${var}${var}
node.JS封装了JS语言,可供前端人员做后台开发
创建对象方式一:var name=new Number(100);
创建对象方式二**:var name=Number();** 方法:console();将数字转成字符串
toFixed;把数字转换为字符串,指定小数点的精确度, toString() 把数字类型转成字符串类型 toPrecision() 把数字格式化为指定的长度。也就是小数后面保留几位返回字符串类型数字
创建对象方式:var date=new Date();
方法:toLocaleDateString();将日期格式改为年/月/日 上午(下午)时:分:秒
toLocaleFormat(预设格式);仅支持火狐浏览器 getTime();获取从1970-01-0100:00:00当到前毫秒值
该对象不需要创建 直接对象名点上方法
方法:Math.random();随机产生0----1 之间的随机数
Math.round(2.36); 对小数进行四舍五入 得到一个整数 Math.min(15,25); 取最小值 Math.max(15,25);取最大值 Math. abs(-2) 返回数的绝对值。 Math.floor(2.6);向下取整 Math.ceil(3.82);向下取整
JS5没有集合概念(ES6有),但是长度可变,可充当集合
创建数组对象:arr=new Array(,,,);arr=[,,,] 属性:size,length 数组中没有角标越界,取不到时会返回undefined 数组中可以存储多种数据类型 方法:concat();数组拼接
Join(拼接符)将数组一特定的格式转成字符串; Pop();删除数组中最后一个元素 Push();向原数组末尾增加元素,可以一次添加多个 Reverse();反转数组 Sort();按ASCll码表排序 Sort(比较器—就是一个function);按照元素大小排列,需传一个比较器 Splice(要删除的索引开始位置,要删除的个数,添加的新元素从删除处开始[ 可选]);
(ES6新增方法)
copyWithin(复制指定位置,起始复制位置,复制个数);
entries();返回一个数组的迭代对象 every();检测数组是否都符合条件 fill(); find();查找数,返回值 forEach(); from()==toCharArry(); forEach(); includes();==contains(); keys();从数组中创建一个包含数组的键的迭代对象 unshift();往前增加数据 isArray();判断是否为数组Arrary.isArrary(目标数组); map();指定函数处理数组每个元素,返回新数组 filter();过滤,返回符合条件的所有元素的数组,根据返回值过滤 reduce(起始值,元素);将数组元素计算为一个值 some();检测数组中是否有符合条件的元素
ES6箭头语法:简写匿名函数(入表达式)指向父作用域的this
Function(*****): 代表函数
JS核心,等同于Java中的类与方法 定义函数的语法一:new Function(‘形参’,‘方法体’);(用引号引起);调用fun(); 定义函数的语法二:function(canshu,…){方法体}参数无需数据类型;调用fun(); 定义函数的语法三:funcation fangfaming(canshu ,…){fangfati };调用fangfaming(); 属性: length:形参的个数 使用: 函数名称(实参列表); 特点: 1.函数的调用,只与函数名称有关,与实参列表无关 2.函数内部有内置对象 arguments 封装实参数组可以不用定义是否有返回值;也无需明确的返回类型
返回数据用return;同Java
JS中传参无限制(小于25个),按需拿取数据
Hanshu.length:获取形参的个数 Arguaments:参数对象,在函数内部的隐藏对象,接受函数的全部实参,实质为数组。 形参默认值,在定义出给形参赋值,调用时有传参就用传过来的,无传参是用默认值(ES6) 输出语句:document.writre();在页面上打印信息 **闭包closure:**在函数中可以访问到局部变量,利用返回值; 函数的嵌套会使闭包趋于复杂 Console.Log在控制台输出Global
特点:方法可以直接调用 方法:isNaN判断一个值是否是NaN parseFloat();从第一个字符开始判断,遇到不是数字字符的位置就结束掉 从左向右依次查找,每一位是否是数字,直到遇到不是数字为止。将前边的值转为数字正则表达式对象定义方式一:var regx=/正则表达式/模式;(i不区分大小写的模式,g全文匹配)
正则表达式对象定义方式二:var regx=new RegExp(“正则表达式”,“模式“); 方法:test();JS中行号敏感 需加开头^和结尾$,匹配
exec();截取符合条件的数据,需要全文匹配,否则每次都会从头开始匹配 replace();替换与正则表达式匹配的子串,替换选择全文匹配 split();把字符串分割为字符数组 search(正则或者字符串);==indexof(); match();找指定的值或正则,返回找到的串
Browser Object Model浏览器对象模型,将浏览器的各个组成部分看作对象,当HTML文档加载进浏览器之后,浏览器就会创建这些对象
对象分类:window对象
location地址栏对象 history历史记录对象 navigator浏览器对象 scream屏幕对象 availHeight 获取系统屏幕的工作区域高度,排除 Microsoft Windows 任务栏。 availWidth 获取系统屏幕的工作区域宽度,排除 Windows 任务栏。 height 获取屏幕的垂直分辨率。 width 获取屏幕的水平分辨率。
**格式:**window.方法名();window可以省略
方法:弹框
alert();弹框 Confirm()带有确认和取消按钮的弹框 prompt(‘要显示的话’,默认文字) 显示可提示用户输入的对话框。定时器
SetInterval()按照指定的周期(以毫秒计)来调用函数或计算表达式。 循环执行 clearInterval() 取消由 setInterval() 设置的 timeout。 setTimeout() 在指定的毫秒数后调用函数或计算表达式。 只执行一次( 参数:参数1:字符串(js语句)或者 函数对象、 参数2:毫秒值。) clearTimeout() 取消由 setTimeout() 方法设置的 timeout。打开与关闭
open():打开新窗口( 参数:打开目标的URL、返回值:返回新打开窗口的window引用) close():关闭窗口* 谁调用我 , 我关谁history :对 History 对象的只读引用。
location :用于窗口或框架的 Location 对象。 Navigator 对 Navigator 对象的只读引用。 Screen 对 Screen 对象的只读引用。 ocument:对 Document 对象的只读引用。Location:地址栏对象、获取方式:可以用window对象中的属性获取
属性:href:设置或获取当前的URL
history 对象 History:历史记录对象、获取方式:可以用window对象中的属性获取
**方法:**go:1:前进-1:后退
在JS部分编写代码,可以实现动态操作body部分
DOM: Document Objec Modle 文档对象模型:将HTML的各个组成部分看做一个对象 DOM组成部分:Element 标签对象
Attribute 属性对象 Comment 注释对象 Text 文本对象 document 整个的HTML文档对象 Node:节点对象、 Doucument 文档对象
属性:
body可以获取body标签对象
title 属性获取文档标题 lastModifile 文档最后一次修改时间 url 地址栏的地址
document.body获取body标签
获取element对象:getElementById();通过ID属性获取唯一的元素
getElementByTagment();通过标签名获取元素对象数组 getElementByName();通过name属性值获取元素对象数组 getElementByClassName();通过class属性值获取元素对象数组 getElementByName();针对表单标签的获取元素的方法,返回数组
动态创建元素:
.createElement();创建标签对象
.createTextNode();创建文本对象 .createAttribute();创建属性对象 .createComment();设置一行注释
属性:
A.appendChild(B);将B放入A中
A. setAttributeNode(B);设置属性以及属性的值 .innerHTML;获取两个标签之间的内容,包括子标签 .innerText;获取两个标签之间的内容,只获取文本 .textContent;等同innerText .style;给标签对象设置样式,样式中有-的需要去掉且首字母大写拼接在其后 .textCSS
删除元素:
A.removeChild(B);将A中的B删除
A.remove();删除A
获取属性:
getAttribute();获取属性值
. getAttributeNode();获取属性的对象 在原有的属性设置上再添加属性,使用+=
DOM树 父节点子节点所构成了一个DOM树
概念:事件源,事件名,事件关联(2种方式),事件处理
事件的关联方式一:事件=“处理函数” 事件关联方式二:对象.事件.处理函数 Tips:善用this 给所有某对象关联事件:获得数组对象,遍历数组监听器:一个对象。当事件源上发生了事件,就执行对象中的某些方法
注册监听:将监听器绑定到事件源上,监听事件的发生 方式一:定义标签时添加事件 <标签 事件名=”函数”> **方式二:**获取元素对象,动态添加对象 Document.getElementByXXX(“名字”)获取元素对象 元素对象.事件名=function(){}焦点事件:(针对表单验证)
获取焦点:onfocus 失去标点:onblur点击事件:
单击onclick 双击ondblclick键盘事件:
某个键被按下onkeydown 按下去的键被松开onkeyup 某个键按下松开之后onkeypress鼠标事件:
鼠标按键按下onmousedown 鼠标按键松开onmouseup 鼠标移上onmouseover 鼠标移开onmouseout 鼠标移动onmousemove表单事件:
点击确认按钮onsubmit 点击重置按钮onreset加载与卸载事件:
完成加载onload 用户退出页面onunload 其他事件: 针对表单:域的内容被改变onchange 文本被选中onselectEvent由浏览器创建,在调用事件处理函数时传递给处理函数
属性:.keyCode获取按下键码 .witch获取鼠标的左中右键 .target获取实际触发该事件的元素对象 .currentTarget返回绑定触发事件监听器的元素, Target与currentTarget的区别 Target获取的是实际触发项目 currentTarget获取的是绑定的,在层嵌套中存在 节点对象 节点的层叠关系:父子关系、兄弟节点 节点的类型:标签节点、注释节点、文本节点 节点对象的组成: nodeType 节点类型 可返回节点的类型 nodeName 节点名称 属性含有某个节点的名称。 元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 #documentnodeValue 节点值 对于文本节点,nodeValue 属性是所包含的文本。 对于属性节点,nodeValue 属性是属性值。 对于注释节点,nodeValue 属性注释内容。 nodeValue 属性对于文档节点和元素节点是不可用的。
通过节点关系查找节点
document.all 获取文档中所有的节点 从一个节点出发开始查找: parentNode 获取当前元素的父节点。被用来改变文档的结构。 childNodes 获取当前元素的所有下一级子元素。 firstChild 获取当前节点的第一个子节点。最普遍的用法是访问某个元素的文本: lastChild 获取当前节点的最后一个子节点。 nextSibling 获取当前节点的下一个节点。(兄节点) previousSibling 获取当前节点的上一个节点。(弟节点) 获取元素对象的属性 parentElement 获取当前元素的父元素对象(不会获取到空文本,或者注释) firstElementChild 获取父元素的第一个标签对象(不会获取到空文本,或者注释) lastElementChild 获取父亲元素的最后一个标签对象(不会获取到空文本,或者注释) previousElementSibling; 获取上一个兄弟元素对象(不会获取到空文本,或者注释) nextElementSibling 获取下一个兄弟元素对象(不会获取到空文本,或者注释) 自定义函数事件冒泡:多个元素嵌套,给每个元素都绑定了事件时,在触发最里边的事件时
事件冒泡:当元素有了嵌套关系后,我们点击了最里层的元素后,外层的事件也会触发 可以用事件对象里面的方法来阻止冒泡行为 stopPropagation() 不再派发事件。/阻止冒泡行为 preventDefault() 通知浏览器不要执行与事件关联的默认动作。阻止元素自带的默认行为转载地址:http://clfli.baihongyu.com/