JS培训笔记

JS:它是一个客户端脚本语言，运行在客户端.Netsape 网景javascript主要功能：1、实现表单验证（客户端）2、页面动态效果ajax的基础使用：内部：页面的任何为使用下面的标签<script language="javascript"></script>外部引用：<script language="javascript" src=""></script>注意：多个js要分开去写java中：变量的类型决定了变量中能放什么样的值js中：变量中的值决定了此时该变量是什么样的类型变量：js中变量是弱类型的变量 由值决定 统一用var定义变量数据类型：number string boolean object undefined 可用typeof判断'abc' 是字符串类型var v=null; //objectvar v; //undefinedvar a,b,c=10; //c=10  a，b是未定义js中变量可以不定义直接使用，但是不推荐常量：关键字const 不一定所有浏览器支持alert(""); //弹出警告对话框typeof(变量); //获取变量的类型注释：单行注释  //多行注释  /* */var num1="12";var num2=12;alert(num1==num2); //true ==  仅仅比较数值alert(num1 === num2);  //false === 不仅仅比较数值 还比较类型// 类似  != !==(比较类型和数值)运算符：类型转换NaN:not a number10+true=11;  //true=1 false=0;10+false=10;3+"1"=31;3*"1"=3;3*"b"=NaN;逻辑控制：if/elseswitch/casefor、whileforeachJS中的if-else结构和java中基本保持一致。 条件应该是一个boolean型表达式注意：if中的条件为假的情况有：false 0 null undefinedvar num=5;if(num="1") //恒真的  永远成立{alert("if");}else {alert("else");}内置函数：---------数据类型转换parseInt parseFloat部分转换：parseInt("8a") = 8  parseInt("a8") = NaN //NaN 数据类型是 numberparseInt(类型，进制);parseInt(a);  //默认认为a是10进制（特殊，a表示的数据以0或者0x开头）parseInt(a,b); //a是要转换的数据，b是当前数据的进制八进制：0十六进制：0x注意：从前向后截取到第一个无效的字符为止特定计算表达式evaleval("8*(10-2)/2");判断数值类型isNaN  判断为true时 不带表不能通过parseInt()转换isFinitealert(isFinite("1ac")); //NaNalert(isFinite(Number.NEGATIVE_INFINITY)); // 负无穷 falsealert(isFinite(Number.POSITIVE_INFINITY)); // 正无穷 falseJS中函数的定义语法： function 函数名（参数列表）{函数体};注意：有时不执行函数 可能是函数名的问题注册：onclick中调用函数传值，不能用双引号，可以用单引号DOM模型：Document Object Model-----------W3C定义的一套规范Document-Html同一层的是相邻元素根节点：当前这个文档document根元素节点：元素节点 htmlDOM：将文档转换成一颗倒挂的树    文档中的元素，属性，文本，转换成树上的节点innerHTML：表示是元素之间的内容，不仅仅是文本，还可以是子元素document.getElemenetById();BOM模型：浏览器对象模型----------window-history(历史记录)/document(link/form/anchor(超链接))/location(地址栏)window对象:属性：status,screen,history,location,documentstatus:右下角状态栏FF默认关闭状态：about:config--dom.disable-window-status-change双击该属性screen:屏幕的分辨率，性能的信息var width = window.screen.width;var height = window.screen.height;alert("屏幕分辨率："+width+"*"+height+"像素");常用的方法：alert (text) 显示一个带有提示信息和确定按钮的警告对话框 confirm(text) 弹出带有确定，取消按钮的提示框  询问对话框 返回的是boolean 类型prompt(text,val) 显示一个带有提示信息、确定和取消按钮以及文本输入框的对话框open (url,name, options) 打开具有指定名称的新窗口，并加载给定 URL 所指定的文档，----------------------------------------//后面两个参数是可选的options 选项有：channerlmode fullscreen width,height top left location menubar status toolbar titlebar resizable scrollbars//在窗口选项属性设置中，有一个被设置为0（no）时，其它都不可见。//如果想显示莫个窗口特性，则需要显示的写出该特性的值为yes（1）open("js21.html","新窗口","menubar=no,location=1,width=200,height=200");--------------------------------------------------//后面两个参数是可选的//模式窗口//特点：焦点会落在模式窗口上，只有关闭子窗口才能操作父窗口showModalDialog( ) 在一个模式窗口中显示指定的HTML文档 ---------------close() 关闭当前窗口（FF与IE规则不同）//FF要设置一下  dom.allow_scripts_to_close_windows;true---------------------------setTimeout(func,delay) 设置定时器：经过指定毫秒值后执行某个函数setInterval(func,delay) 设置循环定时器//setTimeout("showMe()",3000); //经过多少毫秒后调用（仅一次）//setInterval("showMe()",3000);//每经过指定毫秒后调用一次（循环多次）----------------------------------------------clearTimeout(timer)/ clearInterval(timer)  清除定时器//var timer=setTimeout(); //clearTimeout(timer);------------------------------注意：//window可以省略 因为window是最外层的对象 可以省略//通常一个方法被直接调用，那么该方法肯定是window对象的方法（除自己自定义的方法）常用事件：onload：事件是在页面主体加载完成后触发的事件onscroll 窗口滚动条滑动onclick 窗口点击（仅FF）onbeforeunload 窗口关闭前发生onunload 窗口关闭以后发生oncontextmenu 弹出右键菜单时发生（仅FF）history对象----------back():加载上一个url 后退==go(1);forward()：加载下一个url 前进==go(-1);//<a href="javascript:history.forward()">前进</a>//<a href="javascript:goForward()">第二个前进</a>location对象----------属性：host hostname hreflocation.href="";  //就是改变地址栏的地址方法：assign("url") reload() replace("url")reload() //页面刷新assign() //加载一个新页面，并保存历史记录replace() //加载一个新页面，不保存历史记录document对象：--------------属性：bgColor //背景色方法：getElementByID() //获取唯一(第一个)的元素对象getElementsByName() //获取一组的元素对象getElementsByTagName() //根据元素的标签名获得一组元素对象（对象数组）===============特效=============document.body.scrollTop //获取滚动条滚动的距离display：none  //图片关闭， 也就是隐藏display:block(按快显示，默认)none(隐藏)inline(按行显示)复选框：全选checked=true;全不选 checked=false;if(schools[i].type == "checkbox"){ schools[i].checked = !schools[i].checked;}document.body.clientWidth   //窗口的宽度===================================事件：onmouseover onmouseout案例：选项卡切换js修改样式：onmouseover="this.style.borderColor='blue'" //this表示当前对象onmouseover="this.className='over'" //修改class="xxx" xxx的值onmouseover="this.id='over'" //修改id="xxx" xxx的值内置对象-----------数组类型：Array字符串：String数学运算类型：Math日期类型：Date选项类型：Option数组：--------- Java：例如 int[] nums = new int[10]; Js:使用Array  var arrs = new Array(10);  //其中一种定义语法var arr = []; var arr = new Array[]; js中的数组下标可以使用标识符var arr3 = new Array();arr3["江苏省"] = "南京市";arr3["浙江省"] = "杭州市";arr3["安徽省"] = "合肥市";注意：js中的数组更类似于java的集合，数组能动态的扩容Js中foreach循环的语法：for(var 下标 in 数组){}for(var i in arr){document.write(arr[i]+"<br/>");}java中的foreach循环的语法：for(数据类型 元素名称：数组或者集合){}数组中的方法：-------------sort:排序reverse：反转  数组前后调换 push、pop 对数组中的元素进行栈操作push 在尾部添加一个pop 取出数组中最后一个元素join 对数组中的元素实现拼接 默认以","拼接  arr.join(“-”);concat 实现两个数组的拼接String-----------var s1 = new String("xiaosi"); //object类型var s2 = "xiaosi"; //String 类型数组字符串  （length）java属性方法js属性属性属性：length方法：charAt 返回指定位置的字符indexOf lastIndexOf 下标从0开始 找不到返回-1toLowerCase toUpperCasesubstr//var s = s2.substr(2); //从指定的下标向后截取//var s = s2.substr(2,3); //从指定下标截取指定个数的字符substring//var s = s2.substring(2); //从指定的下标向后截取//var s = s2.substring(2,3); //从指定下标截取到下一个下标的位置，包含小的，不包含大的split 字符串的分割fromCharCode 用于将一个/组字符编码转换成一个字符串 //根据ASCII码值获取对应的字符anchor()：创建 HTML 锚 big()：用大号字体显示字符串blink()：显示闪动字符串   bold()：使用粗体显示字符串fixed()：以打字机文本显示字符串fontcolor()：使用指定的颜色来显示字符串fontsize()：使用指定的尺寸来显示字符串italics()：使用斜体显示字符串link()：将字符串显示为链接small()：使用小字号来显示字符串strike()：使用删除线来显示字符串sub()：把字符串显示为下标sup()：把字符串显示为上标Data对象-------------getFullYear()getMonth()getDate()getHours()getMinutes()getSeconds()getDay() 星期getMilliseconds() 毫秒getTime() 距离1970的毫秒Option-----------//onchange 事件<select name="pro" onchange="changeCity()">//层次访问结构 得到每个选项的索引 selectdeIndex--选中项的值 0开始var index = document.myForm.pro.selectedIndex;//得到value值//var value = document.myForm.pro.value;//options 下拉列表框中所有列表项的集合document.myForm.city.options.length = 0; //清空之前的元素document.myForm.city.options.add(city1);document.myForm.city.options.add(city2);Math-----------abs：求绝对值，如Math.abs(-5)得到5exp：求E的n次方，如Math.exp(3)得到E的3次方pow：求数的n次方，如Math.pow(2,3)得到2的3次方，即8sqrt：求数的平方根，如Math.sqrt(9)得到3ceil：向上取整，不小于floor：向下取整，不大于round：四舍五入，注意负数alert(Math.round(-5.5)); //-5alert(Math.round(-5.4)); //-5alert(Math.round(-5.6)); //-6max、min：取2个数的较大、小值log：返回以E为底的自然对数random：产生一个0-1之前的随机数键盘事件-------onkeydown onkeypress onkeyup鼠标事件中 事件对象 event.clientX  clientY======表单=========事件：omsubmit onblur：失去焦点onfocus:获得焦点//js 中手动提交表单document.myform.submit();  //submit()是表单对象特有的方法display:inline  取消自动换行document.myForm.username.select(); //对象文本被选中//让用户名文本框自动再获得焦点【FF不行】document.myForm.username.focus();=================正则表达式===============正则表达式：被用于匹配一个字符串，查看此字符串是否满足特定的规则正则表达式就是该规则的一个描述。正则表达式其实就是一个模板。定义：var r = /pattern/attributevar r = new RegExp(/pattern/attribute);正则表达式包含：匹配模式pattern：一个用于指定匹配规则的字符串匹配特性attribute：一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配元字符：具有特殊含义的字符量词：指定字符出现的次数特殊符号：具有特定含义的符号属性和方法：属性用于表示匹配状态，方法用于匹配操作属性：global：RegExp对象是否具有标志 gignoreCase：RegExp对象是否具有标志imultiline：RegExp对象是否具有标志 msource：正则表达式的源文本lastIndex：下一次匹配的字符位置 方法：complie：编译正则表达式test：检索字符串中指定的值，返回 true 或 falseexec：检索字符串中指定的值，返回找到的值，并确定其位置  //找不到返回nullregExp.exec(s) //返回一个数组 有三个属性 input index lastIndex//alert(regExp.exec(s).lastIndex); //FF不支持String类型提供了以下四个支持RegExp的方法search：检索与正则表达式相匹配的子字符串，返回第一个与regexp相匹配的子串的起始位置，若找不到则返回-1match：检索与正则表达式相匹配的子字符串，返回第一个匹配结果(无全局标志g)或存放所有匹配结果的数组(有全局标志g)replace：检索与正则表达式相匹配的子字符串，然后用第二个参数来替换这些子串，全局标志g有效split：按照与正则表达式匹配的字符作为分隔符字符类[abc] a、b 或 c（简单类）[^abc] 任何字符，除了 a、b 或 c（否定）[a-zA-Z] a 到 z 或 A 到 Z，两头的字母包括在内（范围）[a-d[m-p]] a 到 d 或 m 到 p：[a-dm-p]（并集）[a-z&&[def]] d、e 或 f（交集）[a-z&&[^bc]] a 到 z，除了 b 和 c：[ad-z]（减去）[a-z&&[^m-p]] a 到 z，而非 m 到 p：[a-lq-z]（减去）预定义字符类. 任何字符（与行结束符可能匹配也可能不匹配）\d 数字：[0-9]\D 非数字： [^0-9]\s 空白字符：[ \t\n\x0B\f\r]\S 非空白字符：[^\s]\w 单词字符：[a-zA-Z_0-9]\W 非单词字符：[^\w]POSIX 字符类（仅 US-ASCII）\p{Lower} 小写字母字符：[a-z]边界匹配器^ 行的开头$ 行的结尾\b 单词边界\B 非单词边界\A 输入的开头\G 上一个匹配的结尾\Z 输入的结尾，仅用于最后的结束符（如果有的话）\z 输入的结尾Greedy 数量词X? X，一次或一次也没有X* X，零次或多次X+ X，一次或多次X{n} X，恰好 n 次X{n,} X，至少 n 次X{n,m} X，至少 n 次，但是不超过 m 次注意：量词只对紧挨着的子模式起限制作用===================================补充====================================自定义类型-----------在js中，除了内置的一些对象类型外，我们还可以自定义对象类型//自定义对象类型function User(name,pwd){this.name = name;this.pwd = pwd;}//为User添加方法User.prototype.introduce = function(){alert("我叫："+this.name);}var user = new User(userName,pwd);//显示属性信息alert(user.name);alert(user.pwd);user.introduce();//为String添加一个trim方法String.prototype.trim = function(){return this.replace(/^\s*/,"").replace(/\s*$/,"");};//为StringBuffer添加两个方法StringBuffer.prototype.append = function(str){this.arr.push(str);}StringBuffer.prototype.toString = function(){return this.arr.join("");}setAttribute getAttribute 方法-----------function changePic(){var img = document.getElementById("a");img.setAttribute("src","ad-02.jpg") //属性名 属性值alert(img.getAttribute("src"));}创建一个元素对象----------------function createNew(){ //创建一个元素对象 var img = document.createElement("img"); //给元素属性赋值 img.setAttribute("src","ad-03.jpg"); //将元素对象添加到body中  追加在body最后 //document.body.appendChild(img);  //将新创建的元素插入到莫个元素前面 var oldImg = document.getElementById("a"); document.body.insertBefore(img,oldImg);}删除一个元素对象----------------function deleteE(){//获得要删除的元素对象var img = document.getElementById("a");//删除document.body.removeChild(img);}替换一个元素对象----------------function replaceE(){//创建一个新的元素对象var text = document.createElement("input");//为属性赋值text.setAttribute("type","text");//获得旧元素var img = document.getElementById("a");document.body.replaceChild(text,img);}复制一个元素----------------function copyE(){//获得要复制的元素对象var img = document.getElementById("a");//复制 cloneNode(boolean)//boolean：false:浅克隆 true:深克隆var newImg = img.cloneNode(false);//添加到body中document.body.appendChild(newImg);}function copyTable(){//获得表格对象var table = document.getElementById("b");//复制表格var newTable = table.cloneNode(true);//false 不行 浅克隆不行//放入body中document.body.appendChild(newTable);}表格添加行，删除行//为表格添加行function addRow(){//获得表格对象var table  = document.getElementById("b");//rows:表格中所有行的集合//alert(table.rows.length);var index = table.rows.length;//为表格新增一行 row:新增的行的对象var row = table.insertRow(index);//为行添加单元格var cell1 = row.insertCell(0);//cell1.colspan = "2"; //不行cell1.setAttribute("colspan", 2,0); //IE下需要0 标识下//cell1.innerHTML = "欢迎";//innerHTML会解析标签 innerText不解析标签cell1.innerHTML = "<input type='button' value='HH' />";//var cell2 = row.insertCell(1);//cell2.innerHTML = "光临";}function deleteR(){//获得表格对象var table = document.getElementById("b");table.deleteRow(0);}