平台网站建设方案标书,网推,网站备案信息如何下载,软件 项目管理系统1、JS脚本放置位置
页面内的JS脚本中#xff0c;各种公共函数和变量应放在head标签之间#xff0c;而将页面加载期间执行的代码、dom对象初始化以及与dom相关的全局引用赋值操作放在body标签之间#xff0c;如果没有特殊要求#xff0c;不妨放在body标签之前。
2、js命名…1、JS脚本放置位置
页面内的JS脚本中各种公共函数和变量应放在head标签之间而将页面加载期间执行的代码、dom对象初始化以及与dom相关的全局引用赋值操作放在body标签之间如果没有特殊要求不妨放在body标签之前。
2、js命名规范和代码注释
JS区分大小写包括数字、字母、下划线_、美元符$小写字符命名变量保留字可根据系统默认大小写来输入类和构造函数使用大写首字符
单行注释//注释内容多行注释/*注释内容*/
3、变量作用域
函数外var全局变量函数内var局部变量不适用var声明的都是局部变量
4、with语句一般不建议使用 script typetext/javascript languagejavascript
with(document.getElementById(box).style){borderColorred; borderWidth1px;borderStylesolid;width400px;height200px;
}
/script5、数据类型和转化
基本数据类型数值都是浮点型、字符串、布尔型引用数据类型对象、数组、函数特殊类型Null类型只有一个值null未定义的值undefined数值 “”字符布尔 “”字符字符*1数值布尔*1数值parseInt/parseFloat(字符)数值!!数值布尔!!字符布尔
6、函数定义
使用function语句声明命名函数function f() { }匿名函数var ffunction() { }使用Function对象构造var say function(name, say){document.write(h1 name say /h1); }
7、函数分类函数可作参数、表达式、返回值
闭包函数函数里面包含另一个函数高阶函数函数作为参数函数柯里化函数作为返回值
8、对象和数组
对象是无序的、已经命名的数据集合var point{z:{a:1,b:2};x:2.3,y:-1.2}; var ipoint[z][a];var jpoint.z.b;数组是有序的数据集合与对象可相互转化但是数组拥有大量方法适合完成一些复杂的运算var anew Array(1,2,3,4,5);var a[1,2,3,4,5];
9、数组常用方法
length(属性) var a [1, 2, 3, 4, 5];a.length 4;document.write(a); push/pop var a []; //定义一个空数组a.push(1,2,3); //得到数组a[1,2,3]a.push(4,5); //得到数组a[1,2,3,4,5]a.pop();//得到数组a[1,2,3,4] unshift/shift var a []; //定义一个空数组a.unshift(1,2,3); //得到数组a[1,2,3]a.unshift(4,5); //得到数组a[4,5,1,2,3]a.shift(); //得到数组a[5,1,2,3] splice var a [1,2,3,4,5,6];var b a.splice(2,2);document.write(a br /);//输出[1,2,5,6]document.write(b);//输出[3,4] splice var a [1,2,3,4,5,6];var b a.splice(2,2,7,8,9);document.write(a br /);//输出[1,2,7,8,9,5,6]document.write(b);//输出[3,4] join var a [1,2,3,4,5];a a.join(-);document.write(a类型 typeof(a) br /);//a类型string document.write(a的值 a);//a的值1-2-3-4-5 split var a [1,2,3,4,5];a a.join(-);var s a.split(-);document.write(s类型 typeof(s) br /);//a类型object document.write(s的值 s);//a的值1,2,3,4,5 reverse var a [1,2,3,4,5];var a a.reverse();document.write(a);//输出[5,4,3,2,1]sort var a [3,2,5,1,4];var f function(x,y){return y-x;};var b a.sort(f);document.write(b);//输出[5,4,3,2,1] concat var a [1,2,3,4,5];var b a.concat([4,5],[1,[2,3]]);document.write(b);//输出[1,2,3,4,5,4,5,1,2,3]slice var a [1,2,3,4,5,6,7,8,9];var b a.slice(2,5);document.write(b);//输出[3,4,5]
10、检测数据类型 值valuetypeof value(表达式返回值) value.constructor(构造函数的属性值) var value1 numberNumber var valueastring String var valuetrue booleanBoolean var value{} object Object var valuenew Object() object Object var value[] object Array var valuenew Array() object Array var valuefunction(){} functionFunction function className(){} objectclassName function typeOf(o){var _toString Object.prototype.toString; // 获取对象的toString()方法引用// 列举基本数据类型和内置对象类型可以进一步补充该数组的检测数据类型范围var _type {undefined : undefined,number : number,boolean : boolean,string : string,[object Function] : function,[object RegExp] : regexp,[object Array] : array,[object Date] : date,[object Error] : error}return _type[typeof o] || _type[_toString.call(o)] || (o ? object : null);
}var a Math.abs;
alert(typeOf(a)); //function11、数值计算与类型转换当对象与数值进行加号运算时则会尝试将对象转化为数值然后参与求和运算。如果转换不成功则执行字符串连接操作
值value字符串操作环境数字运算环境逻辑运算环境对象运算环境undefinedundefinedNaNfalseErrornullnull0falseError非空字符串不转换字符串对应的数字值或NaNtrueString空字符串不转换0falseString00不转换falseNumberNaNNaN不转换falseNumberInfinityInfinity不转换trueNumberNumber.POSITION_INFINITYinfinity不转换trueNumberNumber.NEGATIVE_INFINITYinfinity不转换trueNumberNumber.MAX_VALUE1.7976931348623157e 308不转换true NumberNumber.MIN_VALUE5e-324不转换trueNumber其它所有数字数字的字符串不转换trueNumbertruetrue1不转换Booleanfalsefalse0不转换Boolean对象toString()valueOf()或toString()或NaNtrue不转换
12、字符串替换正则表达式 script
var sjavascript;
var bs.replace(/(java)(script)/,$2-$1)//输出script-java
alert(b);var bs.replace(/java/,$);//输出javascript
alert(b);var bs.replace(/java/,$);//左侧文本 输出script
alert(b);
var bs.replace(/script/,$);//输出javajava
alert(b);var bs.replace(/java/,$);//右侧文本 输出scriptsctipt
alert(b);var bs.replace(/java/,$$);//输出$script
alert(b);
/script13、增强数组排序 script
/*function f(a,b){var aa%2;var bb%2;if(a0) return 1;if(b0) return -1;
}
var a[3,1,2,4,5,7,6,8,0,9];
a.sort(f);
alert(a);function f(a,b){var aa%2;var bb%2;if(a0) return -1;if(b0) return 1;
}
var a[3,1,2,4,5,,7,6,8,0,9];
a.sort(f);
alert(a);var a[aB,Ab,Ba,bA];
a.sort();
alert(a);*/
function f(a,b){var aa.toLowerCase;var bb.toLowerCase;if(ab) return 1;elsereturn -1;
}
var a[aB,Ab,Ba,bA];
a.sort(f);
alert(a);function f(a,b){if(aMath.floor(a)) return 1;if(bMath.floor(b)) return -1;
}
var a[3.555,1.234,3,2.111,5,7,3]
a.sort(f);
alert(a);
/script14、浏览器对象模型BOM
包含对象
用户对象在JS脚本中定义的对象内置对象由系统预定义并内置到JS内的对象如Object、Array、Function、Date、Math、String、Number、RegExp等宿主对象捆绑到浏览器内的API组件定义的对象。这些对象与JS语言本身没有任何直接关系但在JS脚本中可以访问和操作它们如Window、Document、Navigator、Screen、Location、History、Form等
BOM作用
弹出新的浏览器窗口移动、关闭浏览器窗口以及调整窗口大小窗口对象提供浏览器详细信息导航对象提供装载到浏览器中页面的详细信息定位对象提供用户屏幕分辨率详细信息屏幕对象对Cookie的支持
15、BOM操作浏览器常用方法
打开窗口window.open(url,name,features,replace) var urlhttp://www.baidu.com/;
var featuresheight400,width800,top10,left10,toolbarno,menubarno,scrollbarno,resizableno,locationno,statusno;
document.write(a hrefhttp://www.sina.com.cn/ targetnewW切换到新浪/a);
var mewindow.open(url,newW,features);
setTimeout(function(){me.close();},60000); 三种人机交互窗口alert()、confirm()、prompt() var userprompt(请输入你的用户名);
if(!!user){var okconfirm(你输入的用户名为\n user \n请确认。);if(ok){alert(欢迎你\n user);}else{userprompt(请重新输入你的用户名);alert(欢饮你\n user);}
}
else{userprompt(请输入你的用户名);
} 获取URL查询字符串信息 1 var queryStringfunction(){2 var qlocation.search.substring(1);3 var aq.split();4 var o{};5 for(var i0;ia.length;i ){6 var na[i].indexOf();7 if(n-1) continue;8 var v1a[i].substring(0,n);9 var v2a[i].substring(n 1);
10 o[v1]unescape(v2);
11 }
12 return o;
13 }
14 var f1queryString();
15 for(var i in f1){
16 document.write(i f1[i] br/);
17 }
18 /script
19 /head
20 body
21 a href?id123namelocation获取查询字符串/a 设计窗口居中和弹跳窗口
availHeight和availWidth显示web浏览器屏幕可用高度和宽度availLeft和availTop屏幕最左侧x坐标和y坐标moveTo()、moveBy()、resizeTo()、resizeBy()by相对移动指定个长度单位to绝对移动到指定坐标 1 script2 function openW(url){3 var wscreen.availWidth/2;4 var hscreen.availHeight/2;5 var t(screen.availHeight-h)/2;6 var l(screen.availWidth-w)/2;7 var ptop t ,left l ,width w ,height h; 8 var winwindow.open(url,url,p);9 win.focus();
10 }
11 openW(http://www.baidu.com/);
12 /script
13
14 script typetext/javascript languagejavascript
15 window.onloadfunction(){
16 timerwindow.setInterval(jump(),1000);
17 }
18 function jump(){
19 window.resizeTo(200,200);
20 xMath.ceil(Math.random()*1024);
21 yMath.ceil(Math.random()*760);
22 window.moveTo(x,y);
23 }
24 /script 16、DOM是Document Object Modal(文档对象模型)的简写它表示访问和操作文档如HTML、XML文档的API应用程序接口
遍历文档 script typetext/javascript languagejavascript
function count(n){var num0;if(n.nodeType1) num ;var sonn.childNodes;for(var i0;ison.length;i ) num count(son[i]);return num;
}
window.onloadfunction(){alert(当前文档包含 count(document) 个元素);
}
/script 动态增加文档内容 window.onloadfunction(){var uldocument.getElementsByTagName(ul)[0];var lisul.getElementsByTagName(li);lis[0].onclickfunction(){this.innerText谢谢;}lis[1].onclickfunction(){this.innerHTMLh2我是一名初学者/h2;}lis[2].onclickfunction(){this.outerText我是学生;}lis[3].onclickfunction(){this.outerHTMLh2当然喜欢/h2;}
} 17、操作节点和属性 script
//获取节点
var pdocument.getElementsByTagName(p)[0];
alert(p.innerHTML);
p.innerTextp.innerText;
//获取节点属性
var boxdocument.getElementById(box);var infonodeName: box.nodeName;
info brnodeType: box.nodeType;
info brparentNode: box.parentNode.nodeName;
info brchildNodes: box.childNodes[0].nodeName;
document.write(info);
//设置节点属性
var pdocument.getElementsByTagName(p);
alert(p[4].innerHTML);
for(var i0;ip.length;i ){p[i].setAttribute(class,blue);
}
//克隆节点、true为复制节点包含所有内容
window.onloadfunction(){var pdocument.createElement(p);var h1document.createElement(h1);var txtdocument.createTextNode(hello world);p.appendChild(txt);h1.appendChild(p);document.body.appendChild(h1);var new_h1h1.cloneNode(true);document.body.appendChild(new_h1);
}
//insertbefore 把节点放到父节点指定子节点前面
window.onloadfunction(){var okdocument.getElementById(ok);ok.onclickfunction(){var reddocument.getElementById(red);var bluedocument.getElementById(blue);var h1document.getElementsByTagName(h1)[0];red.insertbefore(blue,h1);}
}
//删除子节点
window.onloadfunction(){var okdocument.getElementById(delete);ok.onclickfunction(){var bluedocument.getElementById(blue);(blue.parentNode).removeChild(blue);}
}
//替换节点 用h2替换h1
window.onloadfunction(){var okdocument.getElementById(ok);ok.onclickfunction(){var reddocument.getElementById(red);var h1document.getElementsByTagName(h1)[0];var bluedocument.getElementById(blue);var h2document.createElement(h2)red.replaceChild(h2,h1);}
}
window.onloadfunction(){var okdocument.getElementById(ok);ok.onclickfunction(){var reddocument.getElementById(red);var bluedocument.getElementById(blue);var h1document.getElementsByTagName(h1)[0];var del_h1red.replaceChild(blue,h1); red.parentNode.insertBefore(del_h1,red); }
}
//获取和设置属性、属性值
/*window.onloadfunction(){var reddocument.getElementById(red);alert(red.getAttribute(id));var bluedocument.getElementById(blue);alert(blue.id);
}
window.onloadfunction(){var reddocument.getElementById(red);var bluedocument.getElementById(blue);red.setAttribute(title,这是红色盒子);blue.setAttribute(title,这是蓝色盒子);
}*/
window.onloadfunction(){var hellodocument.createTextNode(Hello World);var h1document.createElement(h1);//var h2document.createElement(h2);h1.setAttribute(title,您好欢饮光临);//h2.title这是h2的title;h1.appendChild(hello);//h2.appendChild(hello);document.body.appendChild(h1);
}
//增加和删除属性值
window.onloadfunction(){
var tabledocument.getElementsByTagName(table)[0];
var deldocument.getElementById(del);
var resetdocument.getElementById(reset);
del.onclickfunction(){table.removeAttribute(border);
}
reset.onclickfunction(){table.setAttribute(border,2);
}
}
/script 18、JS事件模型和事件流
基本事件模型通过简单的事件属性为指定标签绑定事件处理函数属性较弱一般不建议使用标准事件模型W3C制定IE事件模型
多个对象同时相应一个事件的时候哪个对象优先相应哪个对象后续响应决定这种响应顺序的机制称为事件流
冒泡型事件流IE支持div-body-document由特殊到一般从下往上。捕获型事件流document-body-div从一般到特殊从上往下。标准事件流W3C定义的标准事件流同时支持以上两种事件流但是捕获型事件流先发生即从document开始再返回document结束。
19、基本事件模型的两种绑定方式 //静态绑定button idbtn onclickalert(你单击的一次);按钮/button!--单引号里只能双引号 双引号里只能单引号--//动态绑定
scriptvar buttondocument.getElementById(btn);btn.onclickfunction(){alert(你单击的一次)}
/script 20、标准事件模型和IE事件模型的注册、注销 //标砖事件模型body
h2标准事件模型的注册和注销/h2
input ida typebutton value点我/
input idb typebutton value删除事件/
scriptvar adocument.getElementById(a);var bdocument.getElementById(b);function ok(){alert(您好欢饮光临);}function delete_event(){a.removeEventListener(click,ok,false);}a.addEventListener(click,ok,false);b.addEventListener(click,delete_event,false);
/script
/body
//IE事件模型
body
p idp1IE事件模型的注册和注销/p
script
/*var p1document.getElementById(p1);
p1.attachEvent(onmouseover,function(){p1.style.backgroundblue;
})
p1.attachEvent(onmouseout,function(){p1.style.backgroundred;
})*/
var p1document.getElementById(p1);
var f1function(){p1.style.backgroundblue;
};
var f2function(){p1.style.backgroundred;p1.detachEvent(onmouseover,f1);p1.detachEvent(onmouseout,f2);
};
p1.attachEvent(onmouseover,f1);
p1.attachEvent(onmouseout,f2);/script
/body
//兼容IE和标准
body
p idp1IE和标准事件模型都兼容/p
script
var p1document.getElementById(p1);
var f1function(){p1.style.backgroundblue;
};
var f2function(){p1.style.backgroundred;if(p1.detachEvent){p1.detachEvent(onmouseover,f1);p1.detachEvent(onmouseout,f2);
}else{p1.removeEventListener(mouseover,f1);p1.removeEventListener(mouseover,f2);}
};
if(p1.attachEvent){
p1.attachEvent(onmouseover,f1);
p1.attachEvent(onmouseout,f2);
}
else{p1.addEventListener(mouseover,f1);p1.addEventListener(mouseout,f2);
}
/script
/body 更多专业前端知识请上
【猿2048】www.mk2048.com
