首页 > 代码库 > 技巧JS
技巧JS
1. document.referrer可以获得上一页的地址，使用document.anchors获得页面上面所有的链接元素，而不必使用document.getElementsByTagName(‘A‘);，同样道理还有document.forms , document.images。
2. function.length --> 参数的定义的个数，如 function aa(a,b,c) --> aa.length = 3
3. arguments [function.]arguments[n ] 正在执行的函数和调用它的函数的参数
// 一个任意数目Integer求和的简单例子
var add = function(){
var sum = 0;
for each (var item in arguments){
sum += item;
}
document.write(sum);
}
//求一个数的阶乘
function factorial(n){
return function(n){
if(n == 1) return 1 ;
else return n *arguments.callee(n-1); //上面的callee引用了匿名的阶乘函数本身。 使用factorial()(8)调用求8的阶乘，返回40320
};
}
需要说明的是arguments并不是一个数组，可用instanceof测试。
alert(arguments instanceof Array) //false
4. apply 方法能劫持另外一个对象的方法， 继承另外一个对象的属性。
alert(Math.max(5,8)) //8
var arr=[5,7,9,1]
alert(Math.max(arr)) // 这样却是不行的。一定要写成循环判断
--> Math.max.apply(null,arr) //可以计算这个数组中的最大值
--> Array.prototype.push.apply(arr1,arr2) //将数组arr2的元素追加到arr1里面去
如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])
Person.apply(this,arguments)
同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入
call 调用一个对象的一个方法，以另一个对象替换当前对象。
5. typeof 运算符把类型信息当作字符串返回。typeof 返回值有六种可能："number," "string," "boolean,""object," "function," 和"undefined."
6. 上传之后马上看到图片
<input type="file" name="oFile"onchange="document.images.oImg.src=http://www.mamicode.com/this.value"/>
检测图片文件大小
<img name="oImg"style="position:absolute;top:0;left:0;visibility:hidden"/>
if(document.fileSize)
{alert(parseInt(document.images.oImg.fileSize,10))}
else
{alert("浏览器不支持此功能。")}
清空input file 值
document.getElementById(‘<%=fuFilesUpload.ClientID%>‘).outerHTML =document.getElementById(‘<%
=fuFilesUpload.ClientID%>‘).outerHTML;
7. js函数
替换 replace("","")-->只能替换首个匹配的 -->改成正则的.replace(/-/g,"/")就能把所有"-"替换成"/"了
与函数结合:将所有单词首字母换成大写
var strM = "javascript is a good script language";
function change(word)
{
return word.indexOf(0).toUpperCase()+word.substring(1);
}
alert(strM.replace(/\b\w+\b/g,change));
拆分字符串: split("-")
连接字符串:strObj.concat(stringX,stringX,...,stringX) [可用于数组]
是否为有限数字: isFinite(number)
不是数字: isNaN(number) [Not a Number]
字符串加解密: escape()和unescape()
URI加密: encodeURI(URIstring)encodeURI("http://w.p.m?a=中国") ->http://www.w3pop.com?a=%E4%B8%AD%E5%9B%BD
URI解密: decodeURI(URIstring)
parseFloat(string) 返回由字符串转换得到的浮点数。
parseFloat 方法返回与 numString 中保存的数相等的数字表示。
如果 numString 的前缀不能解释为浮点数，则返回NaN （而不是数字）。
parseFloat("abc") // 返回 NaN。parseFloat("1.2abc") // 返回 1.2。
parseInt(string, radix) 将一个字符串转换为整型数字 其他同上
radix:进制 2 to 36 16进制 10进制parseFloat("1.2abc") // 返回 1。
---转换方面---
Number(object) 转换为数字
String(object) 转换为字符串
strObj.toLowerCase() 小写字符串
strObj.toUpperCase() 大写字符串
---查找截取字符串方面---
strObj.indexOf(searchvalue,fromindex) 返回指定值在字符串中第一次出现的位置,如果没有找到子字符串，则返回 -1。fromindex可选的整数参数。规定在字符串中 开始检索的位置。它的合法取值是 0 到stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。
strObj.lastIndexOf() 返回字符串中最后个出现指定字符串的位置，搜索方向是向后的。
strObj.match(searchvalue) 从字符串中查找指定的值,找到则返回指定值，找不到返回null
strObj.search(searchstring) 从字符串中寻找指定值的位置,找到返回在字符串中的位置,找不到返回-1[search("aa")|search(/aa/)]
模糊匹配加i[search(/aa/i)] "/xxx/" ->正则表达式模式
strObj.slice(start,end) 从一个字符串选取一部分字符，并将它们返回成一个新的字符串
可以用一个负的起始值从字符串的末尾开始选取字符
strObj.substr(start,length) 从字符串中从指定的起始位置选取指定长度的一段字符
strObj.substring(start,stop) 特定位置间的字符
strObj.slice(start,end) 将部分字符抽出并在新的字符串中返回剩余部分
---样式方面---
strObj.sup() 上标字符串 比如平方
strObj.sub() 字符串显示成下标
strObj.small() 显示小一号的字符串
strObj.big() 显示大一号的字符串
strObj.strike() 字符串以删除的形式显示
strObj.blink() 显示闪烁的字符串 Firefox,Netscape
strObj.bold() 显示粗体字符串
strObj.fontcolor(color) 指定的颜色显示字符串
strObj.fontsize(size) 指定的字体大小显示字符串
strObj.italics() 用斜体显示字符串
strObj.link() 字符串以超级链接的形式显示
---
系统函数
新开以窗口: window.open("/page/Zulin/TZ/JGD_CHULI.aspx");
后退: window.history.go(-1);
关闭窗口: window.close()
确认对话框: if(window.confirm("你确定么?")){}else{}
带输入的对话框: window.prompt("请输入您的名字",""); 方法返回值即输入的值
剪切板: window.clipboardData.setData("Text",url);
自动调用方法1: window.setTimeout(vCode, milliseconds) 执行1次 1000毫秒为一秒
清除自动调用: clearTimeout(vCode)
自动调用方法2: window.setInterval(vCode, iMilliSeconds [,sLanguage]) 每隔iMilliSeconds就执行一次vCod
清除自动调用: clearInterval(vCode)
---
window.location.reload() 刷新
location.hash 设置或获取 href 属性中在井号“#”后面的分段。
location.host 设置或获取 location 或URL 的 hostname 和 port 号码。
location.hostname 设置或获取 location 或 URL 的主机名称部分。
location.href 设置或获取整个 URL 为字符串。
location.pathname 设置或获取对象指定的文件名或路径。
location.port 设置或获取与 URL 关联的端口号码。
location.protocol 设置或获取 URL 的协议部分。
location.search 设置或获取 href 属性中跟在问号后面的部分。
window.external.AddFavorite(location.href, document.title) 加入收藏
window.external.ImportExportFavorites(true,) 导入收藏夹
window.external.ImportExportFavorites(false,) 导出收藏
window.external.ShowBrowserUI(OrganizeFavorites, null) 整理收藏夹
window.location = "view-source:" + window.location.href 查看原文件
window.external.ShowBrowserUI(LanguageDialog, null) 语言设置
window.onbeforeunload 事件触发的时候弹出一个有确定和取消的对话框，确定则离开页面，取消则继续待在本页。
触发于:
* 关闭浏览器窗口
* 通过地址栏或收藏夹前往其他页面的时候
* 点击返回，前进，刷新，主页其中一个的时候
* 点击 一个前往其他页面的url连接的时候
* 调用以下任意一个事件的时候：click，document write，document open，document close，window close ，window navigate ，window NavigateAndFind,location replace,location reload,form submit.
* 当用window open打开一个页面，并把本页的window的名字传给要打开的页面的时候。
* 重新赋予location.href的值的时候。
* 通过input type=”submit”按钮提交一个具有指定action的表单的时候。
window.onbeforeunload="javascript:void";
8. js事件
onkeypress 在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。[响应一个键]
onkeyup 在用户放开任何先前按下的键盘键时发生。
onkeydown 在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。[响应几个键的组合]
可以响应Ctrl、Alt、Shift等功能键和键的组合，而onkeypress不能
onfocusout 失去光标事件
onfocus 获得光标事件
onabort 图片下载被打断时
onblur 元素失去焦点时
ondblclick 鼠标双击
onerror 加载文档或图片发生错误时
onmousedown 鼠标被按下时
onmousemove 鼠标被移动时
onmouseout 鼠标离开元素时
onmouseover 鼠标经过元素时
onmouseup 释放鼠标按键时
onunload 用户离开页面时
9. JS Math对象
Math.round(x) 四舍五入后取整
Math.random() 返回一个0与1之间的随机数字
Math.max(x,y) 返回 x 和 y 之间较大的数
Math.min(x,y) 返回 x 和 y 之间较小的数
Math.floor(x) 返回 x 四舍五入后的最小整数
Math.ceil(x) 返回 x 四舍五入后的最大整数
Math.abs(x) 返回数字的绝对值
Math.pow(x,y) 返回 y^x 的值
10. scrollHeight: 获取对象的滚动高度。
scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth: 获取对象的滚动宽度
offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft;
屏幕分辨率的高：window.screen.height;
屏幕分辨率的宽：window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度： window.screen.availWidth;
你的屏幕设置是 window.screen.colorDepth +" 位彩色";
你的屏幕设置 window.screen.deviceXDPI +" 像素/英寸";
11. js 循环
for(... in ...)语句
var mycars = new Array();
mycars[0] = "法拉力";mycars[1] = "保时捷";mycars[2] = "宝马;
for (x in mycars) { document.write(mycars[x] + "<br />"); }
while(bool){ ; } 语句
do{ ; } while (bool) 语句
---------
switch(key){ case 1: code;break;default:}
12. js 错误
try{ //throw "err1" }catch(err){ err.description } 这里能catch到throw 并且err就等于"err1"
13. js with语句 为语句设定默认对象。
x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10) y = Math.tan(14 * Math.E)
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
with (Math){ x = cos(3 * PI) + sin(LN10) y = tan(14 * E)}
14. 禁用粘贴和拖拽到文本框
onpaste="return !clipboardData.getData(‘text‘).match(/\D/)"ondragenter="return false"
15. 子窗体刷新父窗体
window.opener.location.reload();
<script>alert(‘→欢迎您订购成功!‘);window.opener.document.mlogon.reset();</script>
mlogon是父窗体的按钮
16. 屏蔽输入法
<input type="text" name="url"style="ime-mode:disabled"onkeydown="if(event.keyCode==13)event.keyCode=9">
17. javascript来手动触发onchange事件
<form name="form1">
<select name="test"onchange="document.form1.text1.value=http://www.mamicode.com/this.options[this.selectedIndex].value">
<option value="http://www.mamicode.com/1" selected>测试一</option>
<option value="http://www.mamicode.com/2">测试二</option>
<option value="http://www.mamicode.com/3">测试三</option>
</select>
<input type="text" name="text1"id="text1">
</form>
<script>
document.form1.test.fireEvent(‘onchange‘);
</script>
18. javascript数组用法
var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50}
var ypos=new Array() 湖北省
for (i=0;i<=message.length-1;i++) {
ypos[i]=-50}
(1).var myArray = new Array();或 var myArray = [];
(2).var myArray = newArray("red","green","blue");或 var myArray = ["red","green","blue"];
(3).var myArray = new Array(3);或 var myArray = [,,];
删除一个数组元素，可以用delete的运算符，例如：deletemyArray[1];。
.length还有一个很好的用途，就是删除元素，比如一个有很多元素的数组，用户想删除所有的元素，可以用length操作，很简单快捷，比如：myArray.length = 0;。
strArr.shift() 删除并返回数组中第一个元素值
strArr.unshift(item1[,item2[,...]]) 为数组的开始部分加上一个或多个元素，并且返回该数组的新长度
strArr.slice(start,end) 从现有数组中的某个元素开始依次返回
strArr.splice(index,howmany,element1,.....,elementX)方法用于插入、删除或替换数组的元素
index: 必选项。指定在哪个位置加入/删除元素，必须是数字
howmany: 必选项。指定有多少元素应该被删除。必须是数字，可以是"0"
element1 可选。规定要添加到数组的新元素。从 index 所指的下标处开始插入。
elementX 可选。可向数组添加若干元素。
strArr.sort(sortby) sortby:可选 必须为一个函数 functionsortByNumber(a,b){return a - b;} [数组本身会改变]
strArr.concat(arrayX,...,arrayX) 将两个或多个数组结合 [返回新的数组]
strArr.join(separator) 将数组中的所有元素合并起来成为一条字符串。每个元素可以指定他们的分隔标记。
strArr.shift() 删除并返回数组中第一个元素值 [数组本身会改变]
strArr.pop() 删除并返回数组最后的元素 [数组本身会改变]
strArr.push(newelement1,newelement2,....,newelementX) 可向数组的末尾添加一个或多个元素，并返回新的长度。[数组本身会改变]
strArr.reverse() 数组倒序
19. 文本框只能输入数字，比较完美，但是(.1)、(.001)能这样输入
onKeyPress="returnevent.keyCode>=48&&event.keyCode<=57||(this.value.indexOf(‘.‘)<0?event.keyCode==46:false)"
20. 如果将select的属性disabled 设置为false了,提交的时候服务器端将获得不了值
var sn_list = document.getElementById("ShopName");
var op = new Option("请选择店名","");
op.selected = true;
sn_list.add(op);
是不是所有表单元素设置disabled 设置为false之后服务器都获取不到？待验证。。
21. 替换字符串 .replace(new RegExp(",","gm"),"")
22. 简单的防止表单重复提交
<script language="javascript">
<!--
var IsRepeatSubmit=false;
//检测是否重复提交表单
function CheckIsRepeatSubmit()
{
if(IsRepeatSubmit==true){
alert("正在上传图片，请稍后！！");
return false;
}
IsRepeatSubmit=true;
return true;
}
//-->
</script>
23. 关闭自动完成 autocomplete="off"
24. js 对象
popObj=new Object()
popObj.name="POP"
popObj.addr="www.w3pop.com"
popObj.tip="欢迎你"
document.write(popObj.name + popObj.tip) -->POP欢迎你
---
function mypop(name,addr,tip)
{
this.name=name
this.addr=addr
this.tip=tip
}
newpop=new mypop("POP","www.w3pop.com","欢迎你")
document.write(newpop.name + newpop.tip) -->POP欢迎你
25. js特殊字符
\‘ 单引号
\" 双引号
\& &符号
\\ 反斜杠
\n 换行符
\r 回车符
\t 制表符
\b 退格符
\f 分页符
26. window.open 窗口特征
channelmode=yes|no|1|0 是否使用剧院模式显示窗口。默认为 no。
directories=yes|no|1|0 是否添加目录按钮。默认为 yes。
fullscreen=yes|no|1|0 是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
height=pixels 窗口文档显示区的高度。以像素计。
left=pixels 窗口的 x 坐标。以像素计。
location=yes|no|1|0 是否显示地址字段。默认是 yes。
menubar=yes|no|1|0 是否显示菜单栏。默认是 yes。
resizable=yes|no|1|0 窗口是否可调节尺寸。默认是 yes。
scrollbars=yes|no|1|0 是否显示滚动条。默认是 yes。
status=yes|no|1|0 是否添加状态栏。默认是 yes。
titlebar=yes|no|1|0 是否显示标题栏。默认是 yes。
toolbar=yes|no|1|0 是否显示浏览器的工具栏。默认是 yes。
top=pixels 窗口的 y 坐标。
width=pixels 窗口的文档显示区的宽度。以像素计。
27. event.altKey 当alt键按下时，值为 TRUE ，否则为 FALSE 。只读
event.ctrlKey 当ctrl键按下时，值为 TRUE ，否则为 FALSE 。只读
event.shiftKey 当shift键按下时，值为 TRUE ，否则为 FALSE 。只读。
event.button 这个属性仅用于onmousedown, onm ouseup,和 onm ousemove 事件。检测键盘事件相对应的内码。
0 没按键
1 按左键
2 按右键
3 按左右键
4 按中间键
5 按左键和中间键
6 按右键和中间键
7 按所有的键
对其他事件，不管鼠标状态如何，都返回 0（比如onclick）。
event.keyCode 这个属性用于 onkeydown, onkeyup, 和 onkeypress 事件。
可读写的值，可以是任何一个Unicode键盘内码。如果没有引发键盘事件，则该值为 0 。
event.clientX 返回鼠标在窗口客户区域中的X坐标，只读属性。
event.clientY 返回鼠标在窗口客户区域中的Y坐标，只读属性。
event.offsetX 检查相对于触发事件的对象，鼠标位置的水平坐标
event.offsetY 检查相对于触发事件的对象，鼠标位置的垂直坐标
event.screenX 检测鼠标相对于用户屏幕的水平位置，只读属性
event.screenY 检测鼠标相对于用户屏幕的垂直位置，只读属性
event.x 返回鼠标相对于css属性中有position属性的上级元素的x轴坐标。如果没有css属性中有position属性的上级元素，默认以BODY元素作为参考对象。
如果事件触发后，鼠标移出窗口外，则返回的值为 -1，只读属性。
event.y 同上相反
event.srcElement 返回触发事件的元素，只读。
event.fromElement 检测 onm ouseover 和 onm ouseout 事件发生时，鼠标所离开的元素。只读属性。
event.toElement 检测 onm ouseover 和 onm ouseout 事件发生时，鼠标所进入的元素。只读属性。
event.returnValue[ = Boolean] 设置或检查从事件中返回的值，true 事件中的值被返回，false 源对象上事件的默认操作被取消
event.type 返回事件名。返回没有“on”作为前缀的事件名，比如，onclick事件返回的type是click，只读。
-----------------------------------------
CSS
1. 解决密码框和文本框长度不一致的问题
用style来控制长度，如下：
<input type="text" name="test"style="width:100px" />
<input type="password" name="test2"style="width:100px" />
2. 文本框内居中
<input type=text style="TEXT-ALIGN: center">
3. <linkrel="stylesheet" href="http://www.mamicode.com/sheet1.css"type="text/css" media="all" title="default" />这应该是一个很标准的格式了，LINK标签的最基本的作用是允许制作者在一个文档中链接其它的文档。而在这儿的作用是为当前的文档链接一个外部样式表。
rel是关联的意思，表示链接的类型为一个样式表（stylesheet）；
href显示了当前载入的样式表文件名（或包括路径）；
type则始终取值text/css，这个值描述了link标签载入的数据类型。
media属性我知道的取值有3个：all,print,screen。其中，print取值表示当前链接的样式表仅用于页面在打印的时候生效；screen则表示当前链接的样式表仅用于页面在屏幕上（不知道有没有PC和非PC屏幕之分？）显示生效；而all则表示当前链接的样式表用于所有（print/screen/?）。
利用media的属性，可以很好地控制你的文档在被打印时的样式，比如说不需要背景色，不需要图案/图片之类的效果，甚至可以实现只打印主体部份的内容。
4. 在css里导入别的css 文件 @import url("/css/global.css");
5. overflow :visible | auto | hidden | scroll
参数：
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
说明：
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
设置textarea对象为hidden值将隐藏其滚动条。
对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格。
自IE5开始，此属性在MAC平台上可用。
对应的脚本特性为overflow。请参阅我编写的其他书目。
6. 是否重复的平铺背景图
background-repeat:no-repeat
Attachment”选项是问你图像位置是否固定，设置“Fixed”，表示固定。
“Horizontal”是水平位置，这里选“right”表示居右。
“Vertical”是垂直位置，这里选择“bottom”，表示靠底。
7. cursor:pointer;或者cursor:hand;前者ie和ff都认，后者ff不认。
8. 超链接
<style type="text/css">
/*a:hover 链接未被访问时显示的颜色*/
a:link {
color: #0368AE;
font-size: 9pt;
text-decoration: none;
}
/*a:hover 鼠标悬停时的样式*/
a:hover {
color: #9393FF;
font-size: 9pt;
text-decoration: none;
}
/*a:visited 链接被访问之后显示的颜色*/
a:visited {
color: #9393FF;
font-size: 9pt;
text-decoration: none;
}
/*a:active 链接被点击与释放之间发生的*/
a:active {
color: #0368AE;
font-size: 9pt;
text-decoration: none;
}
</style>
技巧JS