javascript基本使用

1.JS对象操作语句 : with 语句的语法：　　　　　　　　　　　　
                 　with (对象名称){
                         执行语句 　　　　　　　　　　　　　　　　　　　
                　 }
作用 :如果你想使用某个对象的许多属性或方法，只要在 with 语句的()中写出这个对象名称，然后在下边执行语句中直接写这个对象的属性名或方法名就OK了.



2.js 执行顺序 :
首先执行本页面的代码，被嵌套的js中再执行。然后是下层嵌套代码的执行。
嵌套方式 : document.write("<scr" + "ipt type='text/javascript' src='test.js'></scr" + "ipt>");





3.checkbox 全选

1.<script type="text/javascript " >
2.<!--
3.// 说明：Javascript 控制 CheckBox 的全选 与取消全选
4.// 整理：http://www.CodeBit.cn
5.
6.function checkAll( name )
7.{
8.    var el = document.getElementsByTagName ( 'input' ) ;
9.    var len = el.length ;
10.    for ( var i=0 ; i<len; i++)
11.    {
12.        if ( ( el[ i] .type =="checkbox " ) && ( el[ i] .name ==name ) )
13.        {
14.            el[ i] .checked = true ;
15.        }
16.    }
17.}
18.function clearAll( name )
19.{
20.    var el = document.getElementsByTagName ( 'input' ) ;
21.    var len = el.length ;
22.    for ( var i=0 ; i<len; i++)
23.    {
24.        if ( ( el[ i] .type =="checkbox " ) && ( el[ i] .name ==name ) )
25.        {
26.            el[ i] .checked = false ;
27.        }
28.    }
29.}
30.//-->
31.</script>






4.变量作用域: 



Js代码
1.anonymousFuntion1 = function(){  
2. globalvar = 'global scope'; //全局声明，因为“var”遗漏了  
3. return localvar;  
4.}();  
5.alert(globalvar); //弹出“global scope”，因为函数中的变量是全局声明  
6. 
7.anonymousFuntion2 = function(){  
8. var localvar = 'local scope'; //使用“var”局部声明  
9. return localvar;  
10.}();  
11.alert(localvar); //错误 “localvar未定义”。没有全局定义localvar 
anonymousFuntion1 = function(){
globalvar = 'global scope'; //全局声明，因为“var”遗漏了
return localvar;
}();
alert(globalvar); //弹出“global scope”，因为函数中的变量是全局声明

anonymousFuntion2 = function(){
var localvar = 'local scope'; //使用“var”局部声明
return localvar;
}();
alert(localvar); //错误 “localvar未定义”。没有全局定义localvar




Js代码
1.var myscope = "global";  
2.function showScope(myscope){  
3. return myscope; //局部作用域，即使有一个相同名字的全局变量  
4.}  
5.alert(showScope('local'));  
6. 
7.function globalScope(myscope){  
8. myscope = window.myscope; //全局作用域  
9. return myscope;  
10.}  
11.alert(globalScope(’local’)); 
var myscope = "global";
function showScope(myscope){
return myscope; //局部作用域，即使有一个相同名字的全局变量
}
alert(showScope('local'));

function globalScope(myscope){
myscope = window.myscope; //全局作用域
return myscope;
}
alert(globalScope(’local’));






加密网页破解:

地址栏输入



Js代码
1.javascript:s=document.documentElement.outerHTML;document.write('<---body><---/body>');document.body.innerText=s; 
javascript:s=document.documentElement.outerHTML;document.write('<---body><---/body>');document.body.innerText=s;



window.onload=init() 与 window.onload=init 区别:

前者先执行函数 后加载BODY

后者相当于将一个函数当作变量赋值到window.onload上，会在界面加载完成后加载





js通用验证:

Js代码
1.function CheckForm(oForm)  
2.{  
3.    var els = oForm.elements;  
4.    //遍历所有表元素  
5.    for(var i=0;i<els.length;i++)  
6.    {  
7.        //是否需要验证  
8.        if(els[i].check)  
9.        {  
10.            //取得验证的正则字符串  
11.            var sReg = els[i].check;  
12.            //取得表单的值,用通用取值函数  
13.            var sVal = GetValue(els[i]);  
14.            //字符串->正则表达式,不区分大小写  
15.            var reg = new RegExp(sReg,"i");  
16.            if(!reg.test(sVal))  
17.            {  
18.                //验证不通过,弹出提示warning  
19.                alert(els[i].warning);  
20.                //该表单元素取得焦点,用通用返回函数  
21.                GoBack(els[i])    
22.                return false;  
23.            }  
24.        }  
25.    }  
26.}  
27. 
28.//通用取值函数分三类进行取值  
29.//文本输入框,直接取值el.value  
30.//单多选,遍历所有选项取得被选中的个数返回结果"00"表示选中两个  
31.//单多下拉菜单,遍历所有选项取得被选中的个数返回结果"0"表示选中一个  
32.function GetValue(el)  
33.{  
34.    //取得表单元素的类型  
35.    var sType = el.type;  
36.    switch(sType)  
37.    {  
38.        case "text":  
39.        case "hidden":  
40.        case "password":  
41.        case "file":  
42.        case "textarea": return el.value;  
43.        case "checkbox":  
44.        case "radio": return GetValueChoose(el);  
45.        case "select-one":  
46.        case "select-multiple": return GetValueSel(el);  
47.    }  
48.    //取得radio,checkbox的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数  
49.    function GetValueChoose(el)  
50.    {  
51.        var sValue = "";  
52.        //取得第一个元素的name,搜索这个元素组  
53.        var tmpels = document.getElementsByName(el.name);  
54.        for(var i=0;i<tmpels.length;i++)  
55.        {  
56.            if(tmpels[i].checked)  
57.            {  
58.                sValue += "0";  
59.            }  
60.        }  
61.        return sValue;  
62.    }  
63.    //取得select的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数  
64.    function GetValueSel(el)  
65.    {  
66.        var sValue = "";  
67.        for(var i=0;i<el.options.length;i++)  
68.        {  
69.            //单选下拉框提示选项设置为value=""  
70.            if(el.options[i].selected && el.options[i].value!="")  
71.            {  
72.                sValue += "0";  
73.            }  
74.        }  
75.        return sValue;  
76.    }  
77.}  
78. 
79.//通用返回函数,验证没通过返回的效果.分三类进行取值  
80.//文本输入框,光标定位在文本输入框的末尾  
81.//单多选,第一选项取得焦点  
82.//单多下拉菜单,取得焦点  
83.function GoBack(el)  
84.{  
85.    //取得表单元素的类型  
86.    var sType = el.type;  
87.    switch(sType)  
88.    {  
89.        case "text":  
90.        case "hidden":  
91.        case "password":  
92.        case "file":  
93.        case "textarea": el.focus();var rng = el.createTextRange(); rng.collapse(false); rng.select();  
94.        case "checkbox":  
95.        case "radio": var els = document.getElementsByName(el.name);els[0].focus();  
96.        case "select-one":  
97.        case "select-multiple":el.focus();  
98.    }  
99.} 
function CheckForm(oForm)
{
    var els = oForm.elements;
    //遍历所有表元素
    for(var i=0;i<els.length;i++)
    {
        //是否需要验证
        if(els[i].check)
        {
            //取得验证的正则字符串
            var sReg = els[i].check;
            //取得表单的值,用通用取值函数
            var sVal = GetValue(els[i]);
            //字符串->正则表达式,不区分大小写
            var reg = new RegExp(sReg,"i");
            if(!reg.test(sVal))
            {
                //验证不通过,弹出提示warning
                alert(els[i].warning);
                //该表单元素取得焦点,用通用返回函数
                GoBack(els[i]) 
                return false;
            }
        }
    }
}

//通用取值函数分三类进行取值
//文本输入框,直接取值el.value
//单多选,遍历所有选项取得被选中的个数返回结果"00"表示选中两个
//单多下拉菜单,遍历所有选项取得被选中的个数返回结果"0"表示选中一个
function GetValue(el)
{
    //取得表单元素的类型
    var sType = el.type;
    switch(sType)
    {
        case "text":
        case "hidden":
        case "password":
        case "file":
        case "textarea": return el.value;
        case "checkbox":
        case "radio": return GetValueChoose(el);
        case "select-one":
        case "select-multiple": return GetValueSel(el);
    }
    //取得radio,checkbox的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
    function GetValueChoose(el)
    {
        var sValue = "";
        //取得第一个元素的name,搜索这个元素组
        var tmpels = document.getElementsByName(el.name);
        for(var i=0;i<tmpels.length;i++)
        {
            if(tmpels[i].checked)
            {
                sValue += "0";
            }
        }
        return sValue;
    }
    //取得select的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
    function GetValueSel(el)
    {
        var sValue = "";
        for(var i=0;i<el.options.length;i++)
        {
            //单选下拉框提示选项设置为value=""
            if(el.options[i].selected && el.options[i].value!="")
            {
                sValue += "0";
            }
        }
        return sValue;
    }
}

//通用返回函数,验证没通过返回的效果.分三类进行取值
//文本输入框,光标定位在文本输入框的末尾
//单多选,第一选项取得焦点
//单多下拉菜单,取得焦点
function GoBack(el)
{
    //取得表单元素的类型
    var sType = el.type;
    switch(sType)
    {
        case "text":
        case "hidden":
        case "password":
        case "file":
        case "textarea": el.focus();var rng = el.createTextRange(); rng.collapse(false); rng.select();
        case "checkbox":
        case "radio": var els = document.getElementsByName(el.name);els[0].focus();
        case "select-one":
        case "select-multiple":el.focus();
    }
}



使用方法:

账号:<input type="text" check="^\S+$" warning="账号不能为空,且不能含有空格" name="id">不能为空<br>











常用正则:

Js代码
1.匹配中文字符的正则表达式： [\u4e00-\u9fa5]  
2.评注：匹配中文还真是个头疼的事，有了这个表达式就好办了  
3. 
4.匹配双字节字符(包括汉字在内)：[^\x00-\xff]  
5.评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）  
6. 
7.匹配空白行的正则表达式：\n\s*\r  
8.评注：可以用来删除空白行  
9. 
10.匹配HTML标记的正则表达式：<(\S*?)[^>]*>.*?</\1>|<.*? />  
11.评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力  
12. 
13.匹配首尾空白字符的正则表达式：^\s*|\s*$  
14.评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式  
15. 
16.匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*  
17.评注：表单验证时很实用  
18. 
19.匹配网址URL的正则表达式：[a-zA-z]+://[^\s]*  
20.评注：网上流传的版本功能很有限，上面这个基本可以满足需求  
21. 
22.匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$  
23.评注：表单验证时很实用  
24. 
25.匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7}  
26.评注：匹配形式如 0511-4405222 或 021-87888822  
27. 
28.匹配腾讯QQ号：[1-9][0-9]{4,}  
29.评注：腾讯QQ号从10000开始  
30. 
31.匹配中国邮政编码：[1-9]\d{5}(?!\d)  
32.评注：中国邮政编码为6位数字  
33. 
34.匹配身份证：\d{15}|\d{18}  
35.评注：中国的身份证为15位或18位  
36. 
37.匹配ip地址：\d+\.\d+\.\d+\.\d+  
38.评注：提取ip地址时有用  
39. 
40.匹配特定数字：  
41.^[1-9]\d*$　 　 //匹配正整数  
42.^-[1-9]\d*$ 　 //匹配负整数  
43.^-?[1-9]\d*$　　 //匹配整数  
44.^[1-9]\d*|0$　 //匹配非负整数（正整数 + 0）  
45.^-[1-9]\d*|0$　　 //匹配非正整数（负整数 + 0）  
46.^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$　　 //匹配正浮点数  
47.^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$　 //匹配负浮点数  
48.^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$　 //匹配浮点数  
49.^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$　　 //匹配非负浮点数（正浮点数 + 0）  
50.^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$　　//匹配非正浮点数（负浮点数 + 0）  
51.评注：处理大量数据时有用，具体应用时注意修正  
52. 
53.匹配特定字符串：  
54.^[A-Za-z]+$　　//匹配由26个英文字母组成的字符串  
55.^[A-Z]+$　　//匹配由26个英文字母的大写组成的字符串  
56.^[a-z]+$　　//匹配由26个英文字母的小写组成的字符串  
57.^[A-Za-z0-9]+$　　//匹配由数字和26个英文字母组成的字符串  
58.^\w+$　　//匹配由数字、26个英文字母或者下划线组成的字符串  
59.评注：最基本也是最常用的一些表达式  
60. 
61.原载地址：http://lifesinger.3322.org/myblog/?p=185  
62. 
63.    
64.收集一些常用的正则表达式。  
65. 
66. 
67. 
68.正则表达式用于字符串处理，表单验证等场合，实用高效，但用到时总是不太把握，以致往往要上网查一  
69. 
70.番。我将一些常用的表达式收藏在这里，作备忘之用。本贴随时会更新。  
71. 
72.匹配中文字符的正则表达式： [u4e00-u9fa5]  
73. 
74.匹配双字节字符(包括汉字在内)：[^x00-xff]  
75. 
76.应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）  
77. 
78.String.prototype.len=function(){return this.replace([^x00-xff]/g,"aa").length;}  
79. 
80.匹配空行的正则表达式：n[s| ]*r  
81. 
82.匹配HTML标记的正则表达式：/<(.*)>.*</1>|<(.*) />/   
83. 
84.匹配首尾空格的正则表达式：(^s*)|(s*$)  
85. 
86.应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现，如下：  
87. 
88.String.prototype.trim = function()  
89.{  
90.return this.replace(/(^s*)|(s*$)/g, "");  
91.}  
92. 
93.利用正则表达式分解和转换IP地址：  
94. 
95.下面是利用正则表达式匹配IP地址，并将IP地址转换成对应数值的Javascript程序：  
96. 
97.function IP2V(ip)  
98.{  
99.re=/(d+).(d+).(d+).(d+)/g //匹配IP地址的正则表达式  
100.if(re.test(ip))  
101.{  
102.return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1  
103.}  
104.else 
105.{  
106.throw new Error("Not a valid IP address!")  
107.}  
108.}  
109. 
110.不过上面的程序如果不用正则表达式，而直接用split函数来分解可能更简单，程序如下：  
111. 
112.var ip="10.100.20.168" 
113.ip=ip.split(".")  
114.alert("IP值是："+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1))  
115. 
116.匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*  
117. 
118.匹配网址URL的正则表达式：http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?  
119. 
120.利用正则表达式去除字串中重复的字符的算法程序：  
121. 
122.var s="abacabefgeeii" 
123.var s1=s.replace(/(.).*1/g,"$1")  
124.var re=new RegExp("["+s1+"]","g")  
125.var s2=s.replace(re,"")   
126.alert(s1+s2) //结果为：abcefgi  
127. 
128.我原来在CSDN上发贴寻求一个表达式来实现去除重复字符的方法，最终没有找到，这是我能想到的最简单  
129. 
130.的实现方法。思路是使用后向引用取出包括重复的字符，再以重复的字符建立第二个表达式，取到不重复  
131. 
132.的字符，两者串连。这个方法对于字符顺序有要求的字符串可能不适用。  
133. 
134.得用正则表达式从URL地址中提取文件名的javascript程序，如下结果为page1  
135. 
136.s="http://www.9499.net/page1.htm" 
137.s=s.replace(/(.*/){0,}([^.]+).*/ig,"$2")  
138.alert(s)  
139. 
140.利用正则表达式限制网页表单里的文本框输入内容：  
141. 
142.用 正则表达式限制只能输入中文：onkeyup="value=value.replace(/[^u4E00-u9FA5]/g,'''')"   
143. 
144.onbeforepaste="clipboardData.setData(''text'',clipboardData.getData(''text'').replace(/  
145. 
146.[^u4E00-u9FA5]/g,''''))"  
147. 
148.用 正则表达式限制只能输入全角字符： onkeyup="value=value.replace(/[^uFF00-uFFFF]/g,'''')"   
149. 
150.onbeforepaste="clipboardData.setData(''text'',clipboardData.getData(''text'').replace(/  
151. 
152.[^uFF00-uFFFF]/g,''''))"  
153. 
154.用 正则表达式限制只能输入数字：onkeyup="value=value.replace(/[^d]/g,'''')   
155. 
156."onbeforepaste="clipboardData.setData(''text'',clipboardData.getData(''text'').replace(/  
157. 
158.[^d]/g,''''))"  
159. 
160.用 正则表达式限制只能输入数字和英文：onkeyup="value=value.replace(/[W]/g,'''')   
161. 
162."onbeforepaste="clipboardData.setData(''text'',clipboardData.getData(''text'').replace(/[^d]  
163. 
164.常用的正则表达式   
165. 
166.1、非负整数：”^d+$”   
167. 
168.2、正整数：”^[0-9]*[1-9][0-9]*$”   
169. 
170.3、非正整数：”^((-d+)|(0+))$”   
171. 
172.4、负整数：”^-[0-9]*[1-9][0-9]*$”   
173. 
174.5、整数：”^-?d+$”   
175. 
176.6、非负浮点数：”^d+(.d+)?$”   
177. 
178.7、正浮点数：”^((0-9)+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*))$  
179. 
180.”   
181. 
182.8、非正浮点数：”^((-d+.d+)?)|(0+(.0+)?))$”   
183. 
184.9、负浮点数：”^(-((正浮点数正则式)))$”   
185. 
186.10、英文字符串：”^[A-Za-z]+$”   
187. 
188.11、英文大写串：”^[A-Z]+$”   
189. 
190.12、英文小写串：”^[a-z]+$”   
191. 
192.13、英文字符数字串：”^[A-Za-z0-9]+$”   
193. 
194.14、英数字加下划线串：”^w+$”   
195. 
196.15、E-mail地址：”^[w-]+(.[w-]+)*@[w-]+(.[w-]+)+$”   
197. 
198.16、URL：”^[a-zA-Z]+://(w+(-w+)*)(.(w+(-w+)*))*(?s*)?$”  
199. 
200."^\d+$"　　//非负整数（正整数 + 0）  
201."^\[0-9\]*\[1-9\]\[0-9\]*$"　　//正整数  
202."^((-\d+)\|(0+))$"　　//非正整数（负整数 + 0）  
203."^-\[0-9\]*\[1-9\]\[0-9\]*$"　　//负整数  
204."^-?\d+$"　　　　//整数  
205."^\d+(\.\d+)?$"　　//非负浮点数（正浮点数 + 0）  
206."^((\[0-9\]+\.\[0-9\]*\[1-9\]\[0-9\]*)\|(\[0-9\]*\[1-9\]\[0-9\]*\.\[0-9\]+)\|(\[0-9\]*\[1-9  
207. 
208.\]\[0-9\]*))$"　　//正浮点数  
209."^((-\d+(\.\d+)?)\|(0+(\.0+)?))$"　　//非正浮点数（负浮点数 + 0）  
210."^(-((\[0-9\]+\.\[0-9\]*\[1-9\]\[0-9\]*)\|(\[0-9\]*\[1-9\]\[0-9\]*\.\[0-9\]+)\|(\[0-9\]*\[1  
211. 
212.-9\]\[0-9\]*)))$"　　//负浮点数  
213."^(-?\d+)(\.\d+)?$"　　//浮点数  
214."^\[A-Za-z\]+$"　　//由26个英文字母组成的字符串  
215."^\[A-Z\]+$"　　//由26个英文字母的大写组成的字符串  
216."^\[a-z\]+$"　　//由26个英文字母的小写组成的字符串  
217."^\[A-Za-z0-9\]+$"　　//由数字和26个英文字母组成的字符串  
218."^\w+$"　　//由数字、26个英文字母或者下划线组成的字符串  
219."^\[\w-\]+(\.\[\w-\]+)*@\[\w-\]+(\.\[\w-\]+)+$"　　　　//email地址  
220."^\[a-zA-z\]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$"　　//url  
221./^(d{2}\|d{4})-((0(\[1-9\]{1}))\|(1\[1\|2\]))-((\[0-2\](\[1-9\]{1}))\|(3\[0\|1\]))  
222. 
223.$/   //  年-月-日  
224./^((0(\[1-9\]{1}))\|(1\[1\|2\]))/((\[0-2\](\[1-9\]{1}))\|(3\[0\|1\]))/(d{2}\|d{4})  
225. 
226.$/   // 月/日/年  
227."^(\[w-.\]+)@((\[\[0-9\]{1,3}.\[0-9\]{1,3}.\[0-9\]{1,3}.)\|((\[w-\]+.)+))(\[a-zA-Z\]{2,4}  
228. 
229.\|\[0-9\]{1,3})(\]?)$"   //Emil  
230."(d+-)?(d{4}-?d{7}\|d{3}-?d{8}\|^d{7,8})(-d+)?"  //电话号码  
231."^(d{1,2}\|1dd\|2\[0-4\]d\|25\[0-5\]).(d{1,2}\|1dd\|2\[0-4\]d\|25\[0-5\]).(d{1,2}\|1dd\|2  
232. 
233.\[0-4\]d\|25\[0-5\]).(d{1,2}\|1dd\|2\[0-4\]d\|25\[0-5\])$"   //IP地址  
234. 
235.匹配中文字符的正则表达式： \[\u4e00-\u9fa5\]  
236.匹配双字节字符(包括汉字在内)：\[^\x00-\xff\]  
237.匹配空行的正则表达式：\n\[\s\| \]*\r  
238.匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>\|<(.*) \/>/  
239.匹配首尾空格的正则表达式：(^\s*)\|(\s*$)  
240.匹配Email地址的正则表达式：\w+(\[-+.\]\w+)*@\w+(\[-.\]\w+)*\.\w+(\[-.\]\w+)\*  
241.匹配网址URL的正则表达式：^\[a-zA-z\]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$  
242.匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^\[a-zA-Z\]\[a-zA-Z0-9_\]  
243. 
244.{4,15}$  
245.匹配国内电话号码：(\d{3}-\|\d{4}-)?(\d{8}\|\d{7})?  
246.匹配腾讯QQ号：^\[1-9\]*\[1-9\]\[0-9\]*$