(整理)javascript高手之路笔记1234(燕十八老师).doc

Js如何操作的DOM？浏览器有html源码渲染的功能，把html源码在内存里形成一个DOM对象，就是文档对象还有一个javascript的解释器/执行器引擎我们在html里写一个js代码，js代码引擎所执行，而执行的结果就是对DOM的操作，而非 对DOM操作的结果，就是我们常看到效果，比比如图片移动，变色1. javascrip 语言本身的语法，2. DOM对象3. BOM模型 browser，浏览器模型浏览器是“宿主”，但Js的宿主不限于浏览器，也可能是服务器端Javascript 和以后的PHP一样，都是一种解释执行的语言语言分：解释执行和编译执行英文 中国人张三（不会英文）1. 把英文的报刊翻译成中文报刊，然后再看（翻译完之后，多了一份中文版）2. 找一个同声翻译，一连看英语，随时翻译出中文来方式1：第一次运行的时候，要多等一会，因为要等报纸翻译完毕但是一旦翻译完毕后，以后再运行，就能直接运行方式2：每次运行都要翻译所以：hello.c- hello.exe二进制代码可执行文件Hello.php/hello.js-PHP解释引擎/js引擎-产生相应的执行效果Javascript和java的关系语言本身没有关系 网景公司最早开发出来的在浏览器运行的脚本语言：livescript开发之后，正碰上java如日中天，为了抱大腿，改名叫javascript编程共用的东西：变量、控制结构（顺序/分支/循环）、表达式、语句；变量的讨论：请看黑板：40.1黑板上的内容代表今天的排骨价格：依据这个场景，来深入探讨编程中的重要概念-变量我们可以挖掘出的要素：黑板 -内存中该变量的存储地址当天价格 -变量名40.1 -变量值数值 -变量的类型排骨很贵、房价也很贵Var age = 22;Var price = 40.1;当声明上述两个变量之后，发生了什么呢变量档案AgePricenianling2240.1如上，js解释引擎先创建2个变量名：age price再为此2个变量申请各自的空间、并获得地址然后，age price 的地址属性的值就是内存中的地址也就是说，变量名并不直接体现变量的值，只能体现该变量在内存中的位置来看：Var a = 3;建立变量、申请空间，变量指向该空间，并把3记录到相应的内存空间Var b = a;建立变量b、申请空间，变量指向该空间，并把a变量对应的内存中的值读出来，再存储到b的相应空间变量的赋值 b=a为例，不仅可以把a的值读出来，存储到b的相应空间，这样的话，a,b是相互独立的，修改时不影响对方，这种情况叫“传递赋值”还有另外一种情况，“引用赋值”变量赋值b=a指向的地址，这样b和a都指向同一个地址，这样的话，a,b是相互影响的，修改时互相影响在javascript语言里，不必像PHP那样用”&”符号来声明引用赋值Javascript里，数组、函数、对象，这三都默认即是引用赋值的Js变量名称的要求：1. 变量名只能用字母、下划线、数字、$、这4种组成2. 首字母不能以数字开头3. 比较新的js标准已经支持用任何UNICODE字符做变量名（当然，仍然不能用数字开头）这意味着，汉字可以做变量名（实际开发勿用）4. 变量名区分大小写5. 要求命名有意义，不要用aaa,c,asdf这样的变量名6. 变量可以先声明，但不赋值；变量声明：Var age = 22;Age = 22; /这是一种不规范的写法，与加var的区别很大，请不要这样写在Html代码中，如何引入javascript（和css的引入对比学习）1. 可以用Code./自己写的代码2. 可以把js代码拿到一个专门的.js文件里然后引用该文件注意：外部的.js文件里面直接写js代码，不要在开头和结尾加3. 注意一种错误的写法var _name=张三;alert(_name);这样写是不会发生作用的4. 请注意：如果用2种方式混合，引入多个script文件，运行效果相当于按顺序把多个script代码合起来，按顺序运行5. 可以写在页面的哪个位置？答：页面head和body都可以写而且，有的时候会因为写在head区出现一些意外，比如，在head的script代码试图去访问body中的DOM对象，则会显示找不到Javascript里如何写注释1. 多行注释/*CodeCode*/2. 单行注释Code. / 注释内容运算符：算术运算术：+ - * / %(求余)9%2， 余1注意：在js里，求余的时候是可以对浮点数求余的和PHP不一样，PHP求余的结果是整型可以这样：30.5%7=2.5 30%4.3=4.200000000000001注意：+ 号运算时，如果有一个操作数是字符串，那么最终得到的结果就是字符串 条件运算符： = ,=,age+=1;上面的写法，对于其他算术运算符同理可以用，逻辑运算符：或者：| 前面的表达式为值，后面的表达式不会执行，叫短路并且：&前面的表达式为假，后面的表达式不会执行，JS里逻辑运算的特殊性返回不是布尔值，而是表达式判断出结果时的子表达式的值自增自减运算符：+ -有的时候，我们需要这处效果，先用到a的值，顺手加1或者顺手减1注意：B=+/-a 和 b=a+/-的区别前者先运算后赋值，后者先赋值再运算三元运算符：表达式1 ？表达式2：表达式3理解：表达式1如果为真，则返回表达式2的值， 表达式1如果为假，则返回表达式3的值三大控制语句：顺序语句：顺序执行控制结构之单路分支If(表达式)代码段;/可以是一句，也可以是多句表达式为真，则代码段执行，为假，则不执行，而一个表达式被if判断时，只有两种可能 真/假，true/false代码段：要么整体执行，要么不执行If(表达式)代码段1;else代码段2; 如果表达式为真，则执行代码段1，如果表达式为假，则执行代码段2，Else是在if()的基础上进行判断，If(表达式1)代码段1;else if(表达式2)代码段2;.else if(表达式N)代码段2N;else代码段;/最后这个else不写也行从前到后，逐个判断，如表达式n为真，则执行表达式n，然后跳出执行题目：Switch分支语句Switch(表达式)Case 值1:代码段1;Break;Case 值2:代码段2;Break;Case 值3:代码段3;Break;Case 值n:代码段n;Break;Default:代码段;注意：switch中的case代码段结束后，一定要加break;如果不加，则满足条件的case后面的所有的case都将执行碰到有要比较范围的，用switch不适合，应该用if/else循环结构之while循环While()Do代码段;while();退出循环：Break 破坏和 continue 继续Break在循环体内部，跳出本循环或者产，终止当前循环Continue 是路过本次循环步骤For循环/for循环在javascript，C语言，PHP中，java及部分语言中都是非常重要的一个语言结构For循环三个表达式，可以省略吗？答：for循环的3个表达式可以写03个也就是说，3个表达式都可以省略公鸡5文钱一只，母鸡3文钱一只，邹鸡3只1文钱，100块钱买100只鸡，问 公鸡，母鸡，邹鸡各有多少只？For循环嵌套时，如何在内层结束外层循环？可以给外层for循环加一个标签例：baiji:for(var g=1;g=18;g+)for(var m=1;m=33;m+)var c=100-g-m;if(g+m+c)=100 & (g*5+m*3+c/3)=100)document.write(公鸡+g+只+母鸡+m+只+邹鸡+c+只+);break baiji;函数的概念函数：是变量的运算关系程序中的函数是指一段封装的代码段，能够完成特定功能函数的用法：函数的用法分声明和调用被调用的函数必须在页面内有声明过程函数的声明语法：Function 函数名(arg1,arg2argn)代码段运行;return 返回值;注意：可以有0-N个参数，但只有一个返回值函数的调用语法：函数名(arg1,arg2argn);函数的返回值：函数可以有0个或1个返回值，没有其他情况返回值给谁了？谁调用就给谁函数的执行权与执行权的交回JS代码由JS引擎来解释执行，有几个JS引擎同时工作呢？答：只有一个，单线程运行所以指令只能一条一条来运行当函数被调用时，JS解释引擎进入到函数内部去工作即执行权交给函数函数在2种情况下，交回执行权：1. 碰到return，执行权交回2. 如果没有return,函数的语句运行完毕后，执行权交回一个函数可以有几个return单词？答：0-多个，不同的条件可以执行不同的return语句函数的return可以执行几次？答：01次，JS中函数的特殊性和PHP比较在PHP中，函数就是语法上的结构体，不是一个变量，不能被赋值但是在JS中，函数也是一种变量，变量名就是函数名，声明函数Function 函数名(参数)函数体=声明了一个叫做”函数名”的变量并且变量的内容是 (参数)函数体函数中变量的作用域在JS中声明变量，必须要有var,不用var带来一个什么样的结果？变量被污染注意加与不加var声明变量的区别JS的系统函数字符集的概念字符集就是编码-字符的映射1.escape(),将字符转化成各平台通用的unicode编码var str=人民币;var enc=escape(str);alert(enc);alert(unescape(enc);*/2.parseInt()，把字符串的前缀部分的数字转换成整型数值使用使用如果首字符不是数字，分析出NaN输出来如果碰到前缀是有小数点的情况，直接舍弃小数后面的部分，并保留整数var age=helloword234;age=parseInt(age);alert(age);/输出NaN3.parseFloat()，把字符串的前缀部分的数字转换成浮点型数值使用var age=12.987hello;age=parseFloat(age);alert(age);4.isNaN()，专门用来判断parseFloat()和parseInt()的返回值为非数字，NaN为非数字var age=999abc;age=parseInt(age);if(isNaN(age)alert(是非数字);elsealert(你的年龄是+age);5.isFinite()，用来判断一个值是否为有限对于1/0,-1/0这样的数，为无穷大var age=1/0;if(isFinite(age)alert(你的年龄是+age);elsealert(你不可能这么大);var age=-1/0;if(isFinite(age)alert(age+不是正常的数字);6.eval()用来执行一段JS代码var t=3;t+=3;eval(t+=3);alert(t);数组的学习：数组：就是一组变量数组创建：var arr=;/第一种空数组var stu=new Array();/第二种空数组var arr=a,b,c,d;var stu=new Array(a,b,c,d);/Array 必须大写创建一定长度但无内容的数组var arr=new Array(10);数组每个单元都有一个唯一的“下标/索引”，从0编号，到length-1数组单元值的读取，可以凭数组的索引值来确定，即arrindex,数组的遍历：var arr=a,b,c,d,e,f,g;for(var i=0,len=arr.length;ilen;i+)document.write(arri+);数组的属性：Length:代表数组的长度数组length的属性的变化设某数组length=N,如果修改length，且lengthN,则数组自动补到length个，以undefined填充对象的学习创建一个对象/和创建数组的不一样，创建对象用/和创建数组直接旋转值不一样，创建对象时值前面还要加“属性”创建语法:属性1:值1,属性2:值2var stu=name:xiaoming,age:22,number:007,score:99;对象单元值的引用：alert(stuname);alert();对象如何遍历？For(per in obj)var stu=name:xiaoming,age:22,number:007,score:99;for(per in stu)document.write(stuper + );/这里stuper不能写成stuper,和直接用属性值不一样/这里也不能用stu.per，注意：在for in结构中，循环得到的属性，取值时不能用 obj.属性 的方式对象单元值的删除：Delete obj.属性;在JS中，函数本身就是变量而数组和对象存储的就是“变量”，对象的某个属性的值 没有可能是一个函数呢？ 可能的答：可以，对象的某个属性对应的值，可以是函数如果是函数时呢，这个属性往往也叫“方法”，如果对象的某个方法需要调用自身的某个属性值，可以在函数中用一个关键字来代替“自己”这个对象！This 对象自己JS中的内置对象在JS中，所有的变量，都可以被JS引擎包装成“对象”来处理比如：str=abcd;/字符本身是没有length属性的但是如果你去调用str.length,在你调用的前一瞬间，js执行引擎会把他包装一下，当成一 个对象来处理并且给这个对象赋了一些属性和方法对于字符串，布尔型，数值类型，n数组，ull ,Math这些变量虽然没有属性，但是在调用的前一瞬间，JS会为他们包装一些属性和方法还有一些系统内置对象，是通过new得来的，当然也拥有属性和方法比如 日期和时间对象用的时候，必有先通过 New来得到一个对象然后再调用对象的方法和属性DOM操作图片切换的相册效果新闻/军事/时尚-tab切换效果注册表单，检查“用户名没输入”等效果特效就是DOM操作的具体应用DOM操作就是JS来写html代码节点/元素/标签想操作DOM对象？对DOM的操作：修改-先找到这个节点删除-先找到这个节点添加-先造出一个节点，然后找到要插入的位置，找节点定位节点的“查找”最重要！1. document.getElementById: 根据id查找节点，返回“节点”本身2. document.getElementsByTagName; 通过标签TagName来查找节点，返回数组3. document.getElementsByName; 通过name属性来查找节点，返回数组注意：早期浏览器中认为name只出现 表单中，因此，document.getElementsByName 只对表单中的元素发挥作用后来，部分浏览器把name属性扩展到一般的元素如div但是IE没变，还是只能对表单使用ByName，因此出于兼容性，我们只应对表单使用ByName，这样才不会出问题DOM中查找节点的思路：由大到小来寻找，个别情况也可能由子到父由大到小：通过下面3方法来进行大到小的定位4. document.getElementById: 根据id查找节点，返回“节点”本身5. document.getElementsByTagName; 通过标签TagName来查找节点，返回数组6. document.getElementsByName; 通过name属性来查找节点，返回数组如果还没有查到想要的结果，还可根据前面已经找到的节点再次定位继续查找1.查找子元素childNodes/children index2.查找父元素node.parentNode-来获取父元素firstChild,lastChild3.nextSibling,previousSibling 兄弟元素上面四个属性容易受“空白”文本的影响建议不用3.如果查到某个元素仍然非常大，这个时候，我们还可以利用getElementsByTagName来进一步筛选，注意：对于元素对象和document对象相比元素对象只能利用这一个函数继续筛选所有的元素，都能够用style-css来控制所有的元素都有一个属性或者叫子对象-style对象节点的增加：1. 你要增加什么结点：2. 增加在哪儿？假设在body的contain div里，增加一个p标签步骤：1.先造一个p结点，2.添加进行创建元素节点：Document.createElement()创建文本节点：Document.createTextNode()给某元素插入一个子元素，并插在最后节点.appendChild(追加子元素);不仅可以创建节点，还要以克隆/复制节点oldNode.cloneNode(true/ false);分别代表克隆节点，并同时克隆/不克隆子节点删除节点：当你找到某个节点nodeN为例，你是无法调用nodeN.xxx()方法删掉必须得站在父节点的高度，通过removeChild才能删除父节点.removeChild(待删除的节点)节点的替换：先创建一个新节点准备，再找到要被替换的旧节点然后到旧节点的父点上去，站在父节点的高度上父节点.replaceChild(新节点，旧节点)直接插入html内容【不是w3c的标准，但是主浏览器都支持，而且非常好用】innerHTML=属性节点的innerHTML属性是可读可写读：是把某个节点的内部的html代码读取出来如果赋值，则相当于把节点的html代码更新修改节点的属性在节点中，一种直接写在标签内部的属性，见而下的蓝色部分示例注意：有一个例控制元素的类名称的时候不用obj.class，而是用obj.className还有一处，是体现css里的属性Style各种css属性如width,height,border,fontSize注：在css中的属性，与js中控制相应的属性，名称有一个对应关系如background-style.background 这种情况两者相同如margi-left,font-size这种中间有“-”的css属性，用js来控制时，则属性性变名marginLeft,fontSize规律为：把css属性中的”-“去掉，并把“-”后的首字母大写DOM事件DOM事件就是指当页面上发生某一件事时候，激发某一函数，相当于“监听/解发设备”比如：元素被单击时 用onclick来激发一个函数标变化引起的，比如，经过，单击，双击键盘事件元素失去焦点时，用onblur事件表彰被提交时，用onsubmit事件DOM事件如何声明？1. 直接在元素标签中声明2. 给事件属性赋上一个函数变量例：Inputobj.onclick=fun;其中，onsubmit事件比较特殊在函数中要有return false;BOM模型BOM浏览器对象模型DOM-documentBOM-windowDocument实际上是window的一个子对象Window对象的子对象介绍Window.navigator：浏览器的相关信息Window.history：浏览历史记录，控制前进后退Window.screen：分辨率相关信息Window.location：地址栏，可以控制页面跳转Window.document：Window.document，为什么之前的学习中直接document?答：因为window对象是最大一个对象，其他对象都在其内部因此写document，默认就是在是全局的window下面属性或子对象Window对话框：Alert();对话框Confirm(); 确认框Prompt(); Window定时器：Window.setTimeout(事件,时间);是指：经过指定时间后，执行一次Window.clearTimeout();Window.seterInterval(事件,时间);是指：每隔指定时间，就执行一次事件Window.clearInterval()清除window定时器在创建定时器的时候，把创建结果赋给一个定时器变量，然后再调用函数即可clearTimeout(clock)或clearInterval(clock);五子棋业务逻辑分析：1. 有一个棋盘2. 点击棋盘格子时，格式要显示棋子3. 横向、纵向、斜向某种颜色够五颗时，判定胜负第1步：棋盘建立一个15*15(td)的表格，再给table加一个背景就可以了第2步：下棋点击格子时，即td时，给td加一背景（黑棋或白棋）当点击时，还需要判断该td上是否已有棋子完成以上2步，基本的5子棋功能完成了技术分析：DOM事件Js操作DOM及cssFor循环遍历If elseTd对象加一个属性，标志是否有棋子=再智能一点，加上判断胜负的功能=学ajax后、在线5子棋=正则表达式：正则表达式的web开发中的常见场合1. 邮箱验证2. 用户名验证3. 替换字符串的某一部分4. 信息采集，用来分析有效的代码段正则表达式：规则表达式“一种有规律的字符串的描述”正则表达式是一门独立的知识，同样的一段描述，比如：对于email的匹配表达式，在不同语言是一样的，但是，调用的函数可能不一样学习正则表达式1. 在js里，如果写一个正则表达式，”/正则表达式/” (不含双引号)2. 在js里，用正则表达式来验证字符串是否满足，可以用reg.test(string)3. 在js里，用正则表达式的exec()函数，用来查找匹配的选项，并把查到的值取出4. 字符串应用正则：string.mathc(reg); 正则查找字符串string.search(reg); 正则查找位置string.replace(reg,newstr); 正则替换string.split(reg); 正则拆分正则表达式3句话1. 要找什么字符2. 从哪找？3. 找几个？1.要找什么字符？1.1 字面值hi，直接找hi1.2 字符集合来表示：abcd，指匹配abcd中的任意一个1.3 用范围来表示字符0-9a-zA-Z1.4 字符“簇”（就 系统为常用的字符集合创建的一个简写）例：0-9-d0-9a-zA-Z_-w tvfrn-s 空白符1.5 补集的形式表示字符集合例：0-9-0-9对于字符簇，只需把字母大写，即可表示补集d-D, w-S1.6 任意字符 不包括换行符2. 从哪找，到哪结束2.1b-单词边界bhi从单词的开始边界开始匹配hi2.2B-单词的非边界，把单词的中间某一部分取出来把中间含有hi的单词取出，即hi不能在两端2.3 caret, 从字符串的起始位置开始匹配2.4 $ 匹配到待匹配的字符串的结束位置3.找多少*： 0-N+： 1-N?： 0或1次an: 字符a准确的出现n次an,:字符a至少出现n次an,m:字符a出现n-m次个数修饰符默认是贪婪模式，尽量多找在上面的“个数”修饰符后面加？，则为非贪婪模式，尽量少找模式以匹配为例，默认情况，match找到一次就结束能否告诉匹配过程，一直找，在全文范围内一起找g-全局模式globlei-忽略大小写 ignorem-多行模式s-单行模式 把整篇文章看成一行 js不支持单行模式在js里不支持单行模式的情况下，如何换行？-什么样的模式能代表所有字符串？-用dD,sS,wW 代表所有字符正向预查: (?=待查字符)字符后为待查字符，则返回前面字符负向预查 (?!待查字符)找到的是单词为待查字符的后面的部分反向引用/兵向引用子表达式：Exec为例匹配得到的数组，第0个单元代表“整个正则表达式的结果”123N，则代表第N个表达式的匹配结果如何引用子表达式所匹配的结果？$N来匹配第N个子表达式的匹配结果JS中的事件行为、样式与结构相分离绑定事件的三种方式1.直接写在html元素中声明这个效果，等同于在点击div的时候，执行 ”t();” 这一语句在全局范围内执行问：在这种绑定方式中，如何达到点击后，把div的背景换成蓝色2.第二种绑定方式 DOM对象.onclick=function()这种绑定是把一个DOM对象的onclick属性赋值一函数 在这种绑定方式中，只能给一个事件绑定一个处理函数如何用函数来调用其他函数的形式例：onclick=function()fun1(),fn2();那么此时，fn1,fn2中的this又指向window如何绑定多个函数，并令this指向DOM对象？3.第三种绑定事件的方法DOM lev3的事件绑定标准添加和去除监听事件addEventListener(事件,函数,);/第一个参数事件参数，没有前缀 ”on” w3c的标准，IE不支持注意：1. 如果添加了多个事件处理函数，按添加时的先后顺序来执行2. 事件处理函数中的 this 指代DOM节点自身 （w3c标准）3. 第一个事件参数，一很把事件名称的 on 去掉 （w3c标准）去除绑定removeEventListener(事件,函数);IE下绑定事件与解除事件的方法attachEvent(on事件,函数);/事件要加ondetachEvent(on事件,函数);总结：W3c addEventListener() 与 IE的attachEvent()的不同1. 函数名不同2. 事件名不同，IE下要加on ,w3c不加on3. 加事件后的执行顺序不同，w3c按绑定事件的顺序来执行，而IE6,7是后绑定的事件先发生4. This的指向，w3c绑定函数中的this指向DOM对象，而IE6,7中，指向window对象5.事件的捕捉与冒泡模型在w3c的模型中 addEventListener 支持第3个参数来声明事件的模型为冒泡还是捕捉如果声明为true，则为捕捉方式如果声明为false，或者不声明，则为冒泡方式注意：IE的attchEvent没有第3个参数，不支持捕捉模型 事件对象的概念：当事件对应的函数被触发时，函数会接收到一个参数 /w3c标准例：xx.onclick = function(ev)alert(er)点击后，ev参数就代表单击那一瞬间的“各个参数”，以一个对象的方式传过去对于IE，当事件发生的瞬间，事件对象赋给事件的中断如何中断事件的传播？在w3c 事件.stopPropagation();在IE 事件.cancelBubble=true;取消事件的默认效果事件对象.preventDefault(); /阻止事件的默认效果 w3c方法事件对象.returnValue=false; /设置JS之作用域链作用域链原型链AO上有哪些属性对于函数的AO，属性来自于3个方面1. 参数2. 局部变量声明3. 函数声明在函数调用的瞬间，AO这样形成首先，分析参数，把分析后的参数，形成AO的属性如果传来实参，则把实参赋给相应的属性其次，分析var声明以var str=hello; 把str声明为AO的属性，值为undefined;如果var声明的变量名与形参名称一致，不产生影响，因为AO的str属性已经存在最后，分析函数声明Function 函数名() /有函数名函数声明，假设函数名为fn，函数声明会把函数赋为AO.fn属性的值函数声明与函数表达式的区别表达式必有返回值，把返回值（即茂名函数）赋给了一个变量此时，就是普通的赋值过程例：var fn = function(0 ，这是一个函数表达式对于上例，函数表达式返回函数，并把函数作为值，赐给fn而函数声明的优先级主This 与 arguments当一个函数运行时候，函数内部能引用的变量有这么几种AOargumentsthis对于argument