JavaScript方法和技巧大全

时间:2021-05-26

这篇介绍JavaScript方面的日志,我在是Clang上看到的。作者介绍挺全面的,所以转载过来让感兴趣的朋友看一下。呵呵~~~

有些时候你精通一门语言,但是会发现你其实整天在和其它语言打交道,也许你以为这些微不足道,不至于影响你的开发进度,但恰恰是这些你不重视的东西会浪费你很多时间,我一直以为我早在几年前就已经精通JavaScript了,直到目前,我才越来越觉得JavaScript远比我想象的复杂和强大,我开始崇拜它,就像崇拜所有OOP语言一样~
趁着节日的空隙,把有关JavaScript的方法和技巧整理下,让每个在为JavaScript而烦恼的人明白,JavaScript就这么回事!并希望JavaScript还可以成为你的朋友,让你豁然开朗,在项目中更好的应用~

适合阅读范围:对JavaScript一无所知~离精通只差一步之遥的人
基础知识:HTML


JavaScript就这么回事1:基础知识

1创建脚本块

1:<scriptlanguage=”JavaScript”>
2:JavaScriptcodegoeshere
3:</script>



2隐藏脚本代码

1:<scriptlanguage=”JavaScript”>
2:<!--
3:document.write(“Hello”);
4://-->
5:</script>


在不支持JavaScript的浏览器中将不执行相关代码

3浏览器不支持的时候显示

1:<noscript>
2:Hellotothenon-JavaScriptbrowser.
3:</noscript>



4链接外部脚本文件

1:<scriptlanguage=”JavaScript”src="http://img.sxsky.net/it//”filename.js"”></script>


5注释脚本

1://Thisisacomment
2:document.write(“Hello”);//Thisisacomment
3:



6输出到浏览器

1:document.write(“<strong>Hello</strong>”);



7定义变量

1:varmyVariable=“somevalue”;



8字符串相加

1:varmyString=“String1”+“String2”;



9字符串搜索

1:<scriptlanguage=”JavaScript”>
2:<!--
3:varmyVariable=“Hellothere”;
4:vartherePlace=myVariable.search(“there”);
5:document.write(therePlace);
6://-->
7:</script>



10字符串替换

1:thisVar.replace(“Monday”,”Friday”);


11格式化字串

1:<scriptlanguage=”JavaScript”>
2:<!--
3:varmyVariable=“Hellothere”;
4:document.write(myVariable.big()+“<br>”);
5:document.write(myVariable.blink()+“<br>”);
6:document.write(myVariable.bold()+“<br>”);
7:document.write(myVariable.fixed()+“<br>”);
8:document.write(myVariable.fontcolor(“red”)+“<br>”);
9:document.write(myVariable.fontsize(“18pt”)+“<br>”);
10:document.write(myVariable.italics()+“<br>”);
11:document.write(myVariable.small()+“<br>”);
12:document.write(myVariable.strike()+“<br>”);
13:document.write(myVariable.sub()+“<br>”);
14:document.write(myVariable.sup()+“<br>”);
15:document.write(myVariable.toLowerCase()+“<br>”);
16:document.write(myVariable.toUpperCase()+“<br>”);
17:
18:varfirstString=“MyString”;
19:varfinalString=firstString.bold().toLowerCase().fontcolor(“red”);
20://-->
21:</script>



12创建数组

1:<scriptlanguage=”JavaScript”>
2:<!--
3:varmyArray=newArray(5);
4:myArray[0]=“FirstEntry”;
5:myArray[1]=“SecondEntry”;
6:myArray[2]=“ThirdEntry”;
7:myArray[3]=“FourthEntry”;
8:myArray[4]=“FifthEntry”;
9:varanotherArray=newArray(“FirstEntry”,”SecondEntry”,”ThirdEntry”,”FourthEntry”,”FifthEntry”);
10://-->
11:</script>



13数组排序

1:<scriptlanguage=”JavaScript”>
2:<!--
3:varmyArray=newArray(5);
4:myArray[0]=“z”;
5:myArray[1]=“c”;
6:myArray[2]=“d”;
7:myArray[3]=“a”;
8:myArray[4]=“q”;
9:document.write(myArray.sort());
10://-->
11:</script>



14分割字符串

1:<scriptlanguage=”JavaScript”>
2:<!--
3:varmyVariable=“a,b,c,d”;
4:varstringArray=myVariable.split(“,”);
5:document.write(stringArray[0]);
6:document.write(stringArray[1]);
7:document.write(stringArray[2]);
8:document.write(stringArray[3]);
9://-->
10:</script>



15弹出警告信息

1:<scriptlanguage=”JavaScript”>
2:<!--
3:window.alert(“Hello”);
4://-->
5:</script>



16弹出确认框

1:<scriptlanguage=”JavaScript”>
2:<!--
3:varresult=window.confirm(“ClickOKtocontinue”);
4://-->
5:</script>



17定义函数

1:<scriptlanguage=”JavaScript”>
2:<!--
3:functionmultiple(number1,number2){
4:varresult=number1*number2;
5:returnresult;
6:}
7://-->
8:</script>



18调用JS函数

1:<ahref=”#”onClick=”functionName()”>Linktext</a>
2:<ahref="/”javascript:functionName"()”>Linktext</a>



19在页面加载完成后执行函数

1:<bodyonLoad=”functionName();”>
2:Bodyofthepage
3:</body>


20条件判断

1:<script>
2:<!--
3:varuserChoice=window.confirm(“ChooseOKorCancel”);
4:varresult=(userChoice==true)?“OK”:“Cancel”;
5:document.write(result);
6://-->
7:</script>



21指定次数循环

1:<script>
2:<!--
3:varmyArray=newArray(3);
4:myArray[0]=“Item0”;
5:myArray[1]=“Item1”;
6:myArray[2]=“Item2”;
7:for(i=0;i<myArray.length;i++){
8:document.write(myArray[i]+“<br>”);
9:}
10://-->
11:</script>



22设定将来执行

1:<script>
2:<!--
3:functionhello(){
4:window.alert(“Hello”);
5:}
6:window.setTimeout(“hello()”,5000);
7://-->
8:</script>



23定时执行函数

1:<script>
2:<!--
3:functionhello(){
4:window.alert(“Hello”);
5:window.setTimeout(“hello()”,5000);
6:}
7:window.setTimeout(“hello()”,5000);
8://-->
9:</script>



24取消定时执行

1:<script>
2:<!--
3:functionhello(){
4:window.alert(“Hello”);
5:}
6:varmyTimeout=window.setTimeout(“hello()”,5000);
7:window.clearTimeout(myTimeout);
8://-->
9:</script>



25在页面卸载时候执行函数

1:<bodyonUnload=”functionName();”>
2:Bodyofthepage
3:</body>

JavaScript就这么回事2:浏览器输出


26访问document对象

1:<scriptlanguage=”JavaScript”>
2:varmyURL=document.URL;
3:window.alert(myURL);
4:</script>



27动态输出HTML

1:<scriptlanguage=”JavaScript”>
2:document.write(“<p>Here'ssomeinformationaboutthisdocument:</p>”);
3:document.write(“<ul>”);
4:document.write(“<li>ReferringDocument:“+document.referrer+“</li>”);
5:document.write(“<li>Domain:“+document.domain+“</li>”);
6:document.write(“<li>URL:“+document.URL+“</li>”);
7:document.write(“</ul>”);
8:</script>


28输出换行

1:document.writeln(“<strong>a</strong>”);
2:document.writeln(“b”);



29输出日期

1:<scriptlanguage=”JavaScript”>
2:varthisDate=newDate();
3:document.write(thisDate.toString());
4:</script>



30指定日期的时区

1:<scriptlanguage=”JavaScript”>
2:varmyOffset=-2;
3:varcurrentDate=newDate();
4:varuserOffset=currentDate.getTimezoneOffset()/60;
5:vartimeZoneDifference=userOffset-myOffset;
6:currentDate.setHours(currentDate.getHours()+timeZoneDifference);
7:document.write(“ThetimeanddateinCentralEuropeis:“+currentDate.toLocaleString());
8:</script>


31设置日期输出格式

1:<scriptlanguage=”JavaScript”>
2:varthisDate=newDate();
3:varthisTimeString=thisDate.getHours()+“:”+thisDate.getMinutes();
4:varthisDateString=thisDate.getFullYear()+“/”+thisDate.getMonth()+“/”+thisDate.getDate();
5:document.write(thisTimeString+“on“+thisDateString);
6:</script>


32读取URL参数

1:<scriptlanguage=”JavaScript”>
2:varurlParts=document.URL.split(“?”);
3:varparameterParts=urlParts[1].split(“&”);
4:for(i=0;i<parameterParts.length;i++){
5:varpairParts=parameterParts[i].split(“=”);
6:varpairName=pairParts[0];
7:varpairValue=pairParts[1];
8:document.write(pairName+“:“+pairValue);
9:}
10:</script>

你还以为HTML是无状态的么?

33打开一个新的document对象

1:<scriptlanguage=”JavaScript”>
2:functionnewDocument(){
3:document.open();
4:document.write(“<p>ThisisaNewDocument.</p>”);
5:document.close();
6:}
7:</script>



34页面跳转

1:<scriptlanguage=”JavaScript”>
2:window.location=“http:///','newWindow','fullScreen=yes');”>Openafull-screenwindow</a>


65新窗口和父窗口的操作

1:<scriptlanguage=”JavaScript”>
2://定义新窗口
3:varnewWindow=window.open(“128a.html”,”newWindow”);
4:newWindow.close();//在父窗口中关闭打开的新窗口
5:</script>
6:在新窗口中关闭父窗口
7:window.opener.close()


66往新窗口中写内容

1:<scriptlanguage=”JavaScript”>
2:varnewWindow=window.open(“”,”newWindow”);
3:newWindow.document.open();
4:newWindow.document.write(“Thisisanewwindow”);
5:newWIndow.document.close();
6:</script>


67加载页面到框架页面

1:<framesetcols=”50%,*”>
2:<framename=”frame1”src="http://img.sxsky.net/it//”135a.html"”>
3:<framename=”frame2”src="http://img.sxsky.net/it//”about:blank"”>
4:</frameset>
5:在frame1中加载frame2中的页面
6:parent.frame2.document.location=“135b.html”;


68在框架页面之间共享脚本
如果在frame1中html文件中有个脚本

1:functiondoAlert(){
2:window.alert(“Frame1isloaded”);
3:}

那么在frame2中可以如此调用该方法

1:<bodyonLoad=”parent.frame1.doAlert();”>
2:Thisisframe2.
3:</body>


69数据公用
可以在框架页面定义数据项,使得该数据可以被多个框架中的页面公用

1:<scriptlanguage=”JavaScript”>
2:varpersistentVariable=“Thisisapersistentvalue”;
3:</script>
4:<framesetcols=”50%,*”>
5:<framename=”frame1”src="http://img.sxsky.net/it//”138a.html"”>
6:<framename=”frame2”src="http://img.sxsky.net/it//”138b.html"”>
7:</frameset>


这样在frame1和frame2中都可以使用变量persistentVariable
70框架代码库
根据以上的一些思路,我们可以使用一个隐藏的框架页面来作为整个框架集的代码库

1:<framesetcols=”0,50%,*”>
2:<framename=”codeFrame”src="http://img.sxsky.net/it//”140code.html"”>
3:<framename=”frame1”src="http://img.sxsky.net/it//”140a.html"”>
4:<framename=”frame2”src="http://img.sxsky.net/it//”140b.html"”>
5:</frameset>

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章