JavaScript
2019-01-26 14:38:36 125 举报AI智能生成
登录查看完整内容
js基础总结
作者其他创作
大纲/内容
JavaScript
概述：是网景公司(Netscape)开发的一种基于客户端浏览器(也常用于服务器端)、对象、事件驱动的网页(轻量级解释型)脚本语言。(一种行为控制，决定干什么事？)前身叫作LiveScript
作用与优势：
通常用于浏览器，令开发者能透过DOM来操纵网页内容、或是透过AJAX与IndexedDB来操纵资料； 改善用户体验
电脑上的 Node.js 能让 JavaScript 作为脚本语言使用以处理自动化 减少服务器交互
可以组建完整的HTTP与Web Sockets服务器 立刻反馈结果
格式：
内嵌<script type=\"text/javascript\"></script>
外联<script src=\"hello.js\"></script>
javascript协议：<a href=\"JavaScript:alert('Hello World!!!')\">请单击</a>
变量与数据类型
类型
基本类型
string(字符串型) \"111\"
number(数字类型) 整数1 浮点数0.1
boolean(布尔型) true(真) false(假)
undefined(未定义值) 没有被赋值的变量
null(空值) 没有对象被呈现
复合类型
object(对象)
new创建一个对象实例化
this继承函数的原型 表示当前对象。 对象，构造函数，原型链与事件处理中的几种this略微不同，一般来说谁调用了它 this就指向谁。
Array 数组
在JS中，数组不是数据类型，数组的数据类型其实就是对象，这是从“一切都是对象”的角度来诠释的。个人觉得还是要把它单独列出来
typeOf判断数据的类型 转义字符: \\退格 \\f 换页 \ 换行 \ 回车 \\t制表符
运算符
算数运算
除了简单的 + - * / %之外 应该注意区别递增/递减运算符 ++ --
比较运算
< > <= >= != ==(判断值是否相等) ！== ===(判断值与类型是否相等)
字符串运算符 + ，+=，
逻辑运算
&&/and(逻辑与) 左右表达式均成立则为true ||/or(逻辑或) 左右表达式一个成立则为true !/not(非) 当为真时返回false，假时返回true
变量
规则：首字符必须是大写或小写的字母或下划线（_）或美元符（$） ，变量名称不能是保留字和关键字 ，区分大小写
变量是什么？ 用来临时存储数值的容器，变量存储的数值是可以变化的。
作用域：
局部变量：必须使用Var来声明变量，在函数内定义的就是局部的，否则就是全局的 局部访问全局使用作用域链
全局变量：省略var，在函数外声明， 在整个脚本中被使用，如果函数内的变量没有Var声明会直接影响全局的变量 全局访问局部可以使用闭包进行模拟
解释下为什么没有Var是全局变量？
在JS中，如果某个变量没有Var声明，会自动到上一层作用域去找这个变量的声明语句，假设找到！就使用。假设没找到！继续向上查找，一直找到全局作用域为止。如果全局中仍然没有这个变量的声明语句，那么会自动在全局作用域中自动声明。这个就是JS中的作用域链。
流程控制
分支语句：
if(表达式1){ 语句1 }else if(表达式2){ 语句2 }else{ 语句3 }; 和 三目运算符相似 条件 ?结果1 : 结果2; 但又有不同！ 三目运算符是先运算后赋值 if语句直接赋值，不存在运算
switch(变量) {case 值: 语句 break(阻止执行); befault(相当于else): (不存在时执行)语句 ;｝ 当值有固定的几种情况时，使用switch语句结构清新，执行效率高。
break; 默认直接退出当前循环体，也可以指定退出 层级
说下与contiue的区别：直接运行到循环体结尾。就是结束单次循环。span style=\
循环语句
for(初始表达式;判断表达式；变动量表达式) ｛执行语句；}
特点：常用于 明确 循环次数时，条理清晰
while(表达式) ｛语句｝ do{ 语句 }while(表达式) 两者的区别 ： 后者先执行语句再判定
for (变量 in 对象 ) { 执行语句 }用于遍历数组与对象 实现一个对象的所有属性的遍历
with()语句通常用来减少特定情形下必须写入的代码数量。在严格模式中不允许使用 with。会导致代码更难读取和调试，因此通常应当避免。
函数
函数的功能：1.代码重复性使用(封装) ，2.模块化编程(把大的程序分成若干个模块，多个模块封装在一个函数里)
函数语法： function 函数名(参数列表) ｛ 函数执行部分； return 表达式；｝
弱类型的数据类型可以来回自动转换，所以函数在定义的时候是不需要指定函数的类型的。
Javascript函数的声明 是没有返回值类型这一说法的
形参值的改变不会影响到实参。 在JS中，对象类型默认就是按地址传递。
匿名函数
变量（堆）是可以保存数据的，也可以保存地址的。函数名=首地址 变量名可以不断变化，函数可以不断被调用
自调用匿名函数
function(){ } :相当于返回首地址 ( function(){ } ) :把这部分看成一个整体
( function(){ } ) () :相当于找到这个地址并执行
这种写法：可以避免代码中的函数有重名问题，代码只会在运行时执行一次，一般用作初始化工作
arguments的使用？
在函数内部可以使用，它表示函数的形参列表，以数组形式表现，arguments对象是所有功能中可用的本地变量。
arguments.callee 引用当前执行的函数 arguments.length 引用传递给函数的参数
在使用函数递归调用时推荐使用arguments.callee代替函数名本身。当函数的参数列表不确定时可以通过aeguments来保存所有实参。其它时候不考虑！
说下 JS中 字符串的处理
substring() 方法用于提取字符串中介于两个指定下标之间的字符。不接受负数。
slice() 方法可从已有的数组中返回选定的元素。和 substring 相同，但它接受负数
var s = \"abcdef\
JavaScript的词法分析！
JS中的script是分段执行的
1.读入第一个代码段
2.编译---指二进制的计算机语言 声明变量--声明函数--语法检查--语义检查--代码优化--分析并得到代码树 var i;
3.执行 i=数据 ; 以此类推 直到执行完毕
Array(数组)
什么是数组？
数组就是一组数据的集合，其表现形式就是内存中的一段连续的内存地址
数组名称 其实就是连续内存地址的首地址
JS中数组的定义？
无需指定数据类型，可以无需指定数组长度，可以存储任何数据类型的数据
创建数组的语法？
var arr=[值1，值2，值3] ; 隐式创建
var arr=new Array(值1，值2，值3); 构造函数的参数 直接实例化
var array=new array(3); arr[0]=1; arr[1]=2; arr[2]=3; array(3) 表示创建一个数组，它的长度为多少？ 而不是下标0的值为3 常常会有些分不清
文本下标？
子主在PHP中，创建数组是就可以直接指定带有文本下标的元素
但在JS中，必须在创建数组之后创建带有文本下标的元素
在JS中，文本下标的数组元素，不计入数组长度。 数组对象可以通过“.”来引用文本下标的数组元素
如何遍历带有 文本下标 的数组元素?
js中，“文本下标不计入长度”，所以不能依赖length属性来进行遍历，文本下标的数组元素必须“通过for...in 语句进行遍历” for(var i in arr) { document.write(i+\":\"+arr[i]+\"<br/>\") }
arr.i 这样是错误的方式，会出事undefined 表示的是找一个i的属性，而不是把i当作一个变量来进行解析
多维数组
事件编程
绑定事件的方式
行内绑定
<元素 事件 =“事件处理程序”>
<input type=\"botton\" value=\"确定\" onclick=\"display()\"/>
动态绑定
结构+样式+行为页面分离
document.getElementById(\"\").onclick=\"display()\";
常用事件
onload onblur onclick onmouseover onmouseout onchange onkeyup onsubmit
事件对象
加载事件
window.obload=function() { 函数名称(); } js代码后执行，通过“加载事件”实现加载过程
事件监听
两者不同：
触发顺序： W3C是先绑定 先触发 IE8及以下的浏览器则相反
事件名称不同：IE下事件名需要\"on\"前缀 W3C不需要。
解决监听事件的兼容性问题
事件冒泡
指事件响应时会象水冒一样上升至最顶级元素(必须是相同事件才会触发)，大多数情况下，程序需要对事件冒泡进行取消。
W3C: event.stopPropagation();//必须放在函数后面执行 IE:window.event.cancelBubble=true;
解决取消事件的兼容性问题
function stopPropagation(ent) { if(window.event) { window.event.cancelBubble=true; }else{ ent.stopPropagation(); } };
浏览器的默认行为
表单按钮点击时，用户资料填写不完整，我们需要将按钮的默认行为“取消”。
W3C: preventDefault(event); IE：window.event.returnValue=false;
解决兼容性
function prevent(ent) { if(window.event) { window.event.returnValue=false; }else { ent.preventDefault(); ｝ ｝;
DOM文档对象模型
介绍：
DOM：document object model 文档对象模型
DOM:就是利用javascript如何对html标签内容的“增”、“删”、“改”、“查”等操作。
DOM技术:
php里边有：PHP语言 与 “XML”/HTML标签之间沟通的一个桥梁。
javascript里边有：Js语言与“HTML”/xml标签之间的沟通的一个桥梁。
把html标签的内容划分为各种节点： 文档节点 元素节点 文本节点 属性节点 注释节点
通过getElementsByTagName收集的元素节点以“集合/数组”的形式返回
属性值操作
获取属性值
itnode.getAttribute(属性名称)；
只能操作w3c规定的属性
设置属性值
属性节点获取
var attrlist=itnode.attributes 返回对应节点内部的全部属性信息，数组列表形式返回 attrlist.属性名称 //获得具体属性节点
判断节点类型:nodeType
1---元素节点 2---属性节点 3---文本节点 9---document节点
节点创建与追加
节点创建
元素节点：document.createElement(tag标签名称);
文本节点：document.createTextNode(文本内容);
节点追加
父节点：appendchild(子节点);
节点复制与删除
节点复制操作
被复制节点.cloneNode(true/false); true:深层复制--->本身和内部子节点都复制 false:浅层复制--->本身(包括属性)节点被复制
节点删除操作
父节点.removeChild(子节点);
DOM 操作 css样式只能操作“行内样式”，操作属性样式需要把\"中横线\"去掉，后边“首字母”大写。
事件操作
什么是事件
通过鼠标，键盘对页面所做的动作就是事件。事件一旦发生需要有事件处理，该处理称为“事件驱动”，通常由“函数”担任。
设置事件
DOM1级方式设置
<input type=\"text\" name=\"username\" onclick=\"函数名称()\"/> function 函数名称() {this[window] };
感觉只有这种用的相对多些，其它三种没怎么用，就不多说了
DOM2级方式设置
主流浏览器方式：
IE浏览器方式：
DOM2级的特点及要求
1.事件取消必须是“有名函数”，不可以是匿名函数！ 参数与判定的参数完全一致(数量/内容)！
可以为同一个对象设置“多个同类型”事件。 事件取消也非常灵活。 对事件流也有很好的处理。
dom2级事件对象
相对于DOM1及对象来说简化了些，但都差不多 这里介绍些不同的
事件对象作用 获得鼠标的坐标信息
event.screenX/screenY //鼠标相对整个屏幕的坐标
感知被触发键盘键子信息 event.keyCode 通过事件触发时候获得的keyCode数值码信息可以对应键盘的键子信息。
BOM浏览器对象模型
window对象
alert()：消息框 confirm()：确认框 prompt()：输入框
setTimeout(表达式，毫秒) 设置定时器 执行一次 setInterval(表达式，毫秒)反复执行
clearTimeout(定时器对象) 清除定时器
navigator 浏览器信息对象
appCodeName :内部代码 appName：浏览器名称 appVersion ：版本号 platform：操作系统 onLine：是否在线 cookieEnabled：是否支持Cookie
location 地址栏对象
host :主机名 port:端口号 href ：完整的URL信息 pathname：路径地址 protocol：协议 seatch ：查询字符串 assign(url)：用于页面跳转
location.replace(location.href)
replace的页面每次都在服务端重新生成。
location.reload（）
重新刷新页面的时候，我们通常使用： location.reload() 或者是 history.go(0) 来做
screen屏幕信息对象
availheight 可用高度 availWidth 可用宽度 colorDepth 颜色质量
History 对象
javascript: ; 这表示不刷新当前页面 配合 return false使用
document文档对象
document.getElementById(ID) id属性查找标签对象
document.getElementsByName(Name) name属性查找标签对象
document.getElementsByTagName(Name) 标签名查找标签对象
document.write() //动态向页面写入内容
lickColor超链接颜色 alinkColor 作用中的 vlinkColor作用后的超链接颜色 fgColor字体颜色
JS面向对象
发展史
面向机器，--->面向过程：将程序的执行分解成若干个步聚。--->面向对象：将程序的执行分解成若干个事物
面向对象两个基本概念？ 类：代表某类事物，是抽象的。 对象：代表某个事物，是具体的。
类的种类
系统类
string 类--> 字符串类-->隐式创建
length:取得字符串的长度 indexOf :取得参数在字符串出现的位置
toLowerCase() ：转换为小写 toUpperCase() :转换为大写
Date类 -->日期类-->直接实例化
getFullYear() :返回年份 (getMonth()+1) :返回月份(0-11) getDay():返回星期数(0-6) getMilliseconds():返回毫秒数
getDate():返回每月第几天 getHours() :返回小时数 getMinutes():返回分钟数 getSeconds() :返回秒数
math类 --> 数学类-->类的名称方法即可
自定义类
Function person-->它是Person类的构造函数，这种函数也叫构造器。
声明对象
var 对象=new 类名(); 开辟相应内存空间，在实例化时，直接执行了 类名 的构造函数。
对象属性的使用：
对象.属性;
对象[‘属性’];
在JS中，对象的属性是动态添加的。可以是任何数据类型
重点说明：在JS中，一切都是对象
三个常用关键字：
constructor: 返回的是对象的构造器--*最复杂---原型对象<--->构造器
typeof :返回 数据类型
instanceof :判断对象 是否 是 某个类的实例
如果创建第二个 对象，不会拥有第一个对象的属性
创建一个对象时，会为这个对象开辟相应的堆空间，然后将这个对象产生的属性以及值 添加到这个对象所指向的 堆空间中，当创建第二个对象时，也会为它开辟对应的空间，但第二个对象所指向的堆空间是 空的，所以第二个对象不会拥有。
如果第一个对象 赋值 第二个对象 则 拥有！
将第一个对象 栈中保存的地址赋值给了 第二个对象，所以说，第二个对象也指向了第一个对象所指向的堆内存地址，两个对象指向了同一块堆内存，所以“改变一个对象的属性，会影响到别一个对象”---指的是“堆”中的属性
如果删除了第二个对象，不否会影响到第一个对象
p2=null---表示释放怕p2所占的 栈空间，但P1的空间仍然保留，P1仍然指向相应的堆空间，所以删除p2不会影p1对象。
JS中的this使用？
this的深入理解：所有的函数都是面向对象调用，普通函数的调用是由window对象调用。
程序中有个对象，我们在对其取值之后，如果不想保留这个对象中的某些属性，可以使用delete将这些属性“清除”-->只能删除自定义对象属性。
在类中，除了变量外的都是成员方法。
构造方法：对成员变量进行初始化的。是与类同名且没有返回值类型的方法。就是类构造对象时调用的方法，主要用来实例化对象。
json对象的使用
Ajax 返回大批量数据的方法：（1）Xml (2)Json
什么是json ?
对象是指属性的无序集合， 一个对象是由若干个属性构成的， 这些属性是没有顺序的 。 所谓“集合”是指 名/值(成对出现的) 对 的集合
在JS中，可以使用 {} 来表示这个集合 创建出来的对象就是Json对象
使用json来创建对象的特点
使用json创建对象省略了构造器的定义 如果程序只需要一个对象---这时使用json来创建对象
prototype的使用
格式：class.prototype.属性----指为类下的“实例”添加的属性 class.属性-----指为类添加的静态属性
原理：当程序加载Person函数时，会为Person构造器创建Person原型对象，它们是独立存在的。构造器中有一个prototype属性指向了原型对象，原型对象中有一个constructor属性指向构造器，当Person类的实例在 使用一个不存在的属性是，会自动到Person构造器的原型对象中去找！
alert(Person.prototype.constructor.prototype.constructor);
原型继承
原型是一个对象，它是object对象下的一个实例
object是所有类的父类
原型链
Person原型对象也是对象，当这个对象找不到某个属性时，回到object构造器的原型对象中去找，这个就是原型链。
通过构造器得到对象的特点
使用构造器可以简化属性的定义 如果程序需要多个相同属性或方法的对象---使用构造器来创建对象
函数闭包
什么是闭包？
所谓“闭包”指的是一个拥有许多变量 和绑定了这些变量的环境 的表达式(通常是一个函数) 因而这些变量也是该表达式的一部分。
闭包功能
访问局部变量
使变量所占内存不被释放
代码实现
私有属性
在面向对象思想中，对于有些敏感的，不想公开的成员可以定义为私有的，在 javascript中可以模拟这个功能。
var：私有的 this:公有的 在js中，没有受保护成员！！！
在js中，函数有几种调用形式：
Person(); this-->window
var p1=new Person(); this-->p1
per.Person(); this--per
JS正则表达式
什么是正则表达式？
正则表达式(regular expression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有“某种”子串、将匹配的子串做替换 或者 从某个串中取出符合某个条件的子串等。其本身就是一种语言，在其它语言是通用的
正则对象
要使用正则表达式，必须要在程序创建正则对象
隐式创建
var 对象=/匹配模式/匹配标志；
直接实例化
像“\\d”这样的字符，需要转义\"\\\\d\"
匹配标志： g:全局匹配 i:忽略大小写 也可以动态获取val()值判断
几个重要的概念
子表达式：在正则匹配模式中，使用一对“括号”括起来的内容是一个子表达式
捕获：子表达式匹配到的“内容”会被系统捕获至“系统的缓冲区中”
反向引用：捕获之后，可以在匹配模式中使用：\(n表示数字)来引用系统的第n号缓冲区内容
编码知识
encodeURIComponent() 函数 与 encodeURI() 函数
unescape() 函数可对通过 escape() 编码的字符串进行解码。
收藏
收藏
0 条评论
回复 删除
下一页
