javacript总结:
如何让网页的脚本能够运行起来? 方法一:<script type="text/javascript">定义的脚本代码</script> 方法二:<script type="text/javacript" src="封装好的.js后缀文件的路径"></script>变量: 在javascript中没有具体(String,boolean,int....等)变量的关键字,只有var,变量的类型由赋值来决定。 var N = "Hello Word"; 这时候N的变量类型就是字符串。想得知该变量是什么类型, 可以用typeof(变量名)。变量有基本变量,特殊变量,复杂变量。 基本变量:number,string,boolean 特殊变量:undefied,null. (注:undefied出现的情况是在变量定义没有赋值的情况下), 在这里的==号为全等号,===为非全等。==号判断时,会对变量进行隐式转换,===号则忽略这一步。 如a:undefied==null(true) b:undefied===null(false)。 a中则进行隐式转换。undefied意思为未定义(没有赋值的情况下),null则为空。所以全等。 b中则忽略了隐式转换这一步。函数定义关键字--function 基本语法: <script type="text/javascript"> function oop(){ alert("Hello Word"); } //定义的oop可以做为函数,也可以作为对象,详细说明请看如下: a:var t = new oop(); t(); 这里的oop函数作为了一个对象赋值给t,这时候t调用时可用t(); //匿名内部函数。 b:var t=function(){ alert("Hello Word"); } t(); </script>方法函数: isNaN():是否非数值--返回false true。同理:NaN为非数值。什么情况会出现NaN? 当你把一个非数字的字符串通过parseInt来转换时,这时候就会出现NaN。 parseInt();把字符串转换为number类型。 parseFloat();把字符串转换为number类型。 Number();把字符串转换为number类型。"001"=1 ,null=0 toString();数值转换成字符串。 Math.random();产生从[0-1)之间的随即数,如0.1125635412。 Math.floor(数值);不管里面的数值是5还是5.1,5.89,5.66,结果都是5。 Math.ceil(数值):当里面的数值是5,才返回5,如果是5.01,5.001,5.4,结果都是6。 toFixed(要保留X位小数):数值转换成字符串保留X位小数点。字符串对象 var DOC = "length"; 1、长度属性:DOC.length。 2、方法 a:DOC.split(",")。字符串分割函数,返回数组形式。 b:大小写转换函数: DOC.toUpperCase()/Doc.toLowerCase(); c:字符串定位函数。 DOC.indexOf("g");从当前的字符串中查找第一次出现g的索引位置. DOC.lastIndexOf("g");从当前的字符串中查找最后一次出现g的索引位置. d:字符串截取函数 DOC.substring(start,end):从start开始一直截取到end-1。 DOC.charAt(索引):根据字符串索引获取指定的字母。javacript正则表达式应用 格式: /表达式/标识符 例:/[0-9]/gi (g为标识符,i忽略大小写)。注: 标识符一定要写在表达式后面。 a:字符串对象与正则表达式 DOC = "length2233length3434"; var reg = /[0-9]/gi; DOC.replace(reg,"*"); DOC.match(reg);返回匹配字符串的数组。//2,2,3,3,3,4,3,4 DOC.search(reg);返回匹配字符串中的首字符位置索引。//6 b.RegExp对象。 定义方式: (1)var reg = /^[0-9]$/; 注:^(从哪里开始),$(到哪里结束) var value ="length2233length3434"; var matchs = new RegExp(reg); matchs.test(value);//RegExp对象的.test方法则是判断该字符串是否满足匹配,返回true/fasle。 (2)var matchs = new RegExp(" /^[0-9]$/");日期对象。 创建: a: var date =new Date("2013-09-10");--当前的日期 b:var date = new Date();--当前的日期和时间 获取/设置方法: setXXX();设置时间 setMonth(); setDate(); getXXX();获取时间 getMonth(); getDate(); 转换方法 toLocaleTimeString();本地时间。--15:30:56 toLocaleDateString();本地日期。--2013-05-25arguments对象 在函数代码中表示函数的参数数组,在函数代码中,可以使用arguments访问所有的参数。 arguments.length:函数的参数个数。arguments[i]:第i个参数。 function oop(name,url){ var count = arguments.length; alert(count);//2 } oop("kk","kk"); encodeURI(把字符串作为url进行编码)与decodeURI(把字符串作为url进行解码) 编码主要原因是:a:安全性。b:防止中文汉字出现乱码。 eval()函数 用于计算某个字符串,参数一定要合法。否则抛出异常。 eval("2+3");//5Window对象。 window.alert();弹出提示框 window.confirm();弹出警告框。返回boolean。 window.open(url,name);uri为要打开的新页面, name为标识符(多次open出来的页面只会在第一次open出来的新窗口中)。Array 对象 a、创建和初始化(***) var a = new Array(); a[0] = "mary"; a[1] = 100; a[2] = true; var a = new Array("mary",100,true); var a = ["mary",100,false]; 二维数组: var a = new Array(); a[0] = ["1","2"]; b、属性 a.length c、方法 a.toString()----1,2,3 a.join("|")----1|2|3 a.sort()//---默认的比较规则:按照字符串比。如果按照数字的大小比较。 需传一个方法作为参数传入sort(Func)中。 function Func(a,b){ return a - b; } a.reverse();倒序。 a.concat();连接数组。 a = ["1","2"]; a.concat(new Array(4,5,6,7)); alert(a);//1,2 问:为什么返回1,2。因为concat连接数组是返回拼接后的新数组。 所以要拿变量接收传回来的新数组a =a.concat(new Array(4,5,6,7)) a.slice(start,end);获取数组的子数组。[start,end)方法重载? (1)function oop(){ alert("Hello Word!"); } oop(); function oop(){ alert("Say Hello!"); } oop(); (2) var oop = function{ alert("Hello Word!"); } oop(); oop = function{ alert("Say Hello!"); } oop(); (1)js中没有传统的重载,方法名称相同,后定义方法将覆盖先定义的方法,为什么会被覆盖? 因为定义函数语句会被提取出来优先执行。 执行完后,才会按顺序执行其它语句代码。这时,第一个函数已经被第2个函数所覆盖。 (2)调用函数之后,函数变量又被赋予新的函数代码体,使得第二次调用该函数时出现不同结果。定时器 周期性: var t = window.setInteval(function,时间毫秒); window.clearInteval(t); 一次性: var t = window.setTimeout(function,时间毫秒); window.clearTimeout(t); function oop(){ alert("Hello word!"); } setTimeout(oop,2000);document对象:DOM文档。 查询节点。 1、document.getElementById("对象的ID"):--返回单个对象值 2、document.getElementsByTagName("元素名称")--返回数组。适用于查询某种元素。 节点的层次关系。 obj.parentNode/childNodes/firstChild/lastChild obj为对象.获取对象的父节点(单值)/子节点(数组形式)/第一个节点/最后一个节点 4.obj.nodeName--返回节点的名称,全大写形式。 obj.type--返回节点的类型。 5.obj.className ="样式表中定义的名称";动态添加样式。 obj.style.display="none";把obj对象的可见区域隐藏。 obj.style.display="block";把obj对象的可见区域显示。 6、增加新节点 创建:document.createElement("a"); 设置属性: obj.href=""; obj.innerHTML =""; obj.title=""; 加入节点: XXXX.appendChild(obj);---把obj节点内容追加到XXXX父节点最后面 XXXX.insertBefore(obj,oldChild);---把obj节点内容追加到XXXX父节点的oldChild节点之前。 删除节点 xxx.removeChild(obj);--obj必须是xxx的子节点 obj.parentNode.removeChild(obj);--删除obj节点select对象 obj.add(new Option("java",1)):添加一个Option选择项到obj(select对象)中。 selectedIndex:选择Option时的索引。 new Option("",""):返回一个Option对象。 options[0]:obj(select对象)中的下拉项集合。 //下面的代码则是综合以上方法、对象来举例子。 <script type="text/javascript"> function oop(){ var f = document.getElementById("form1"); var selectObject = document.createElement("select"); //动态创建option var optionObject = new Option("java","1"); selectObject.add(optionObject); //动态创建option var optionObjects = new Option("c#","2"); selectObject.add(optionObjects); selectObject.onchange =function(){ //输出用户当前选择的下拉框的value值 //options[0]:obj(select对象)中的下拉项集合。 //selectedIndex:选择Option时的索引。 //selectObject.options[selectObject.selectedIndex]:获取到当前 //用户选择的下拉框对象,value为下拉框对象的值。 alert(selectObject.options[selectObject.selectedIndex].value); } f.appendChild(selectObject); } </script>HTML DOM 中 table 对象 insertRow(index)方法:用于在表格中的指定位置插入一个新行。返回一个 TableRow,表示新插入的行。 该方法创建一个新的 TableRow 对象,表示一个新的 <tr> 标记,并把它插入表中的指定位置。 新行将被插入 index 所在行之前。 若 index 等于表中的行数,则新行将被附加到表的末尾。如果表是空的, 则新行将被插入到一个新的 <tbody> 段,该段自身会被插入表中。 可以用 TableRow.insertCell() 方法给新创建的行添加内容,如<TD>。 function oop(){ var row = document.getElementById('myTable').insertRow(0); var cell= row.insertCell(0); cell.innerHTML ="Hello"; var cells= row.insertCell(1); cells.innerHTML ="Word"; } 6、screen 对象--屏幕的分辨率相关 var r = screen.height; //ok--read/get screen.height = 500; //error--不能设置 screen.availHeight(availHeight可设置的高度,availWidth可设置的宽度) window.width = screen.availWidth/2; 7、history对象---历史访问记录 var n = history.length;--历史记录数 history.back();--后退 history.forward();--前进 history.go(n); 8、location 对象---浏览器的地址栏 var url = location.href;--获取当前页面的url location.href = "a.html";--修改当前访问的url,保留历史访问记录 location.replace(url);--去往新url,没有历史 -----可以实现页面跳转的方式(客户端) 静态方式: <a></a> 代码方式: window.open();---一定是在新窗口中 history.xxx();---必须有历史记录 location.href--是否需要保留 location.replace(); 对象引用属性时有两种方式: a:对象.属性名 b:对象["属性名"] 例: location.href location["href"]event a、事件:响应机制,某种动作实现对代码的调用 b、事件的分类 鼠标事件: onclick(单击)/ondblclick(双击)/onmouseover(鼠标移进)/onmouseout(鼠标移出) 键盘事件: onkeyup(键盘按上)/onkeydown(键盘按下) 状态事件: onblur(失去焦点)/onfocus(获取焦点)/onchange(选择改变时触发)/onload(页面初始化)/onunload(页面关闭时触发) c、定义事件 <元素 onxxx="" />---html 静态的 obj.onxxx = function ; ---js代码的方式为元素定义事件五:面向对象基础 //使用 Object 封装数据 function testObject() { var obj = new Object(); //封装数据 obj.name = "mary"; obj.age = 18; //封装行为 obj.sing = new Function("alert('Hello');"); //测试 alert(obj.name + ":" + obj.age); obj.sing(); } //先定义一个Person类 function Person(n,a) { this.name = n; this.age = a; this.introduceSelf = function(){ alert("i am " + this.name + "," + this.age); }; } //测试自定义对象 function testOwnObj() { var p1 = new Person("mary",18); alert(p1.name); p1.introduceSelf(); //i am mary,18 var p2 = new Person("john",28); alert(p2.age); p2.introduceSelf(); } //测试:使用 json 封装数据 function testJSon() { var obj = { "name":"mary", "age":18, "isGra":true }; //测试 alert(obj.name + ":" + obj.age + ":" + obj.isGra); } function myJSon(oops) { //this为window的对象 alert(this.name + ":" + this.age + ":" + this.isGra+ oops); } var obj = {"name":"mary","age":18,"isGra":true}; myJSon.call(obj,"1234"); //call(obj,参数1,参数N):直接将obj作为this,调用myJSon函数。call方法应用于Function对象,调用一个 对象的一个方法,以另一个对象替换当前对象。这里myJSon为Function,调用了call方法,以obj对象替换 当前的对象。 //obj.myJSon = myJSon; //obj["myJSon"](); function oop(oo){ oo.name="Hello Word"; oo.age=12; } var person = new Object(); oop(person); person.name;//HeeloWord person.age;//12person.password="1234";//动态添加password属性。