zoukankan      html  css  js  c++  java
  • JavaScript的方法和技巧

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


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

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


    1 创建脚本块 
    1: <script language=”JavaScript” > 
    2: JavaScript code goes here 
    3: </script > 

    2 隐藏脚本代码 
    1: <script language=”JavaScript” > 
    2: <!-- 
    3: document.write(“Hello”); 
    4: // -- > 
    5: </script > 

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

    3 浏览器不支持的时候显示 
    1: <noscript > 
    2: Hello to the non-JavaScript browser. 
    3: </noscript > 

    4 链接外部脚本文件 
    1: <script language=”JavaScript” src= "/”filename.js "” > </script > 

    5 注释脚本 
    1: // This is a comment 
    2: document.write(“Hello”); // This is a comment 
    3: /* 
    4: All of this 
    5: is a comment 
    6: */ 

    6 输出到浏览器 
    1: document.write(“ <strong >Hello </strong >”); 

    7 定义变量 
    1: var myVariable = “some value”; 

    8 字符串相加 
    1: var myString = “String1” + “String2”; 

    9 字符串搜索 
    1: <script language=”JavaScript” > 
    2: <!-- 
    3: var myVariable = “Hello there”; 
    4: var therePlace = myVariable.search(“there”); 
    5: document.write(therePlace); 
    6: // -- > 
    7: </script > 

    10 字符串替换 
    1: thisVar.replace(“Monday”,”Friday”); 

    11 格式化字串 
    1: <script language=”JavaScript” > 
    2: <!-- 
    3: var myVariable = “Hello there”; 
    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: var firstString = “My String”; 
    19: var finalString = firstString.bold().toLowerCase().fontcolor(“red”); 
    20: // -- > 
    21: </script > 

    12 创建数组 
    1: <script language=”JavaScript” > 
    2: <!-- 
    3: var myArray = new Array(5); 
    4: myArray[0] = “First Entry”; 
    5: myArray[1] = “Second Entry”; 
    6: myArray[2] = “Third Entry”; 
    7: myArray[3] = “Fourth Entry”; 
    8: myArray[4] = “Fifth Entry”; 
    9: var anotherArray = new Array(“First Entry”,”Second Entry”,”Third Entry”,”Fourth Entry”,”Fifth Entry”); 
    10: // -- > 
    11: </script > 

    13 数组排序 
    1: <script language=”JavaScript” > 
    2: <!-- 
    3: var myArray = new Array(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: <script language=”JavaScript” > 
    2: <!-- 
    3: var myVariable = “a,b,c,d”; 
    4: var stringArray = 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: <script language=”JavaScript” > 
    2: <!-- 
    3: window.alert(“Hello”); 
    4: // -- > 
    5: </script > 

    16 弹出确认框 
    1: <script language=”JavaScript” > 
    2: <!-- 
    3: var result = window.confirm(“Click OK to continue”); 
    4: // -- > 
    5: </script > 

    17 定义函数 
    1: <script language=”JavaScript” > 
    2: <!-- 
    3: function multiple(number1,number2) { 
    4: var result = number1 * number2; 
    5: return result; 
    6: } 
    7: // -- > 
    8: </script > 

    18 调用JS函数 
    1: <a href=”#” onClick=”functionName()” >Link text </a > 
    2: <a href= "/”javascript:functionName "()” >Link text </a > 

    19 在页面加载完成后执行函数 
    1: <body   onLoad=”functionName();” > 
    2: Body of the page 
    3: </body > 

    20 条件判断 
    1: <script > 
    2: <!-- 
    3: var userChoice = window.confirm(“Choose OK or Cancel”); 
    4: var result = (userChoice == true) ? “OK” : “Cancel”; 
    5: document.write(result); 
    6: // -- > 
    7: </script >   

    21 指定次数循环 
    1: <script > 
    2: <!-- 
    3: var myArray = new Array(3); 
    4: myArray[0] = “Item 0”; 
    5: myArray[1] = “Item 1”; 
    6: myArray[2] = “Item 2”; 
    7: for (i = 0; i < myArray.length; i++) { 
    8: document.write(myArray[i] + “ <br >”); 
    9: } 
    10: // -- > 
    11: </script > 

    22 设定将来执行 
    1: <script > 
    2: <!-- 
    3: function hello() { 
    4: window.alert(“Hello”); 
    5: } 
    6: window.setTimeout(“hello()”,5000); 
    7: // -- > 
    8: </script > 

    23 定时执行函数 
    1: <script > 
    2: <!-- 
    3: function hello() { 
    4: window.alert(“Hello”); 
    5: window.setTimeout(“hello()”,5000); 
    6: } 
    7: window.setTimeout(“hello()”,5000); 
    8: // -- > 
    9: </script > 

    24 取消定时执行 
    1: <script > 
    2: <!-- 
    3: function hello() { 
    4: window.alert(“Hello”); 
    5: } 
    6: var myTimeout = window.setTimeout(“hello()”,5000); 
    7: window.clearTimeout(myTimeout); 
    8: // -- > 
    9: </script > 

    25 在页面卸载时候执行函数 
    1: <body   onUnload=”functionName();” > 
    2: Body of the page 
    3: </body >
    JavaScript就这么回事2:浏览器输出 

    26 访问document对象 
    1: <script language=”JavaScript” > 
    2: var myURL = document.URL; 
    3: window.alert(myURL); 
    4: </script > 

    27 动态输出HTML 
    1: <script language=”JavaScript” > 
    2: document.write(“ <p >Here’s some information about this document: </p >”); 
    3: document.write(“ <ul >”); 
    4: document.write(“ <li >Referring Document: “ + 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: <script language=”JavaScript” > 
    2: var thisDate = new Date(); 
    3: document.write(thisDate.toString()); 
    4: </script > 

    30 指定日期的时区 
    1: <script language=”JavaScript” > 
    2: var myOffset = -2; 
    3: var currentDate = new Date(); 
    4: var userOffset = currentDate.getTimezoneOffset()/60; 
    5: var timeZoneDifference = userOffset - myOffset; 
    6: currentDate.setHours(currentDate.getHours() + timeZoneDifference); 
    7: document.write(“The time and date in Central Europe is: “ + currentDate.toLocaleString()); 
    8: </script > 

    31 设置日期输出格式 
    1: <script language=”JavaScript” > 
    2: var thisDate = new Date(); 
    3: var thisTimeString = thisDate.getHours() + “:” + thisDate.getMinutes(); 
    4: var thisDateString = thisDate.getFullYear() + “/” + thisDate.getMonth() + “/” + thisDate.getDate(); 
    5: document.write(thisTimeString + “ on “ + thisDateString); 
    6: </script > 

    32 读取URL参数 
    1: <script language=”JavaScript” > 
    2: var urlParts = document.URL.split(“?”); 
    3: var parameterParts = urlParts[1].split(“&amp;amp;”); 
    4: for (i = 0; i < parameterParts.length; i++) { 
    5: var pairParts = parameterParts[i].split(“=”); 
    6: var pairName = pairParts[0]; 
    7: var pairValue = pairParts[1]; 
    8: document.write(pairName + “ :“ +pairValue ); 
    9: } 
    10: </script > 

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

    33 打开一个新的document对象 
    1: <script language=”JavaScript” > 
    2: function newDocument() { 
    3: document.open(); 
    4: document.write(“ <p >This is a New Document. </p >”); 
    5: document.close(); 
    6: } 
    7: </script > 

    34 页面跳转 
    1: <script language=”JavaScript” > 
    2: window.location = “http://www.liu21st.com/”; 
    3: </script > 

    35 添加网页加载进度窗口 
    1: <html > 
    2: <head > 
    3: <script language= &amp;amp;apos;javaScript &amp;amp;apos; > 
    4: var placeHolder = window.open( &amp;amp;apos;holder.html &amp;amp;apos;, &amp;amp;apos;placeholder &amp;amp;apos;, &amp;amp;apos;width=200,height=200 &amp;amp;apos;); 
    5: </script > 
    6: <title >The Main Page </title > 
    7: </head > 
    8: <body   onLoad= &amp;amp;apos;placeHolder.close() &amp;amp;apos; > 
    9: <p >This is the main page </p > 
    10: </body > 
    11: </html >
    JavaScript就这么回事3:图像 

    36 读取图像属性 
    1: <img src= "/”image1.jpg "” name=”myImage” > 
    2: <a href=”# ” onClick=”window.alert(document.myImage.width)” >Width </a > 
    3: 

    37 动态加载图像 
    1: <script language=”JavaScript” > 
    2: myImage = new Image; 
    3: myImage.src = “Tellers1.jpg”; 
    4: </script > 

    38 简单的图像替换 
    1: <script language=”JavaScript” > 
    2: rollImage = new Image; 
    3: rollImage.src = “rollImage1.jpg”; 
    4: defaultImage = new Image; 
    5: defaultImage.src = “image1.jpg”; 
    6: </script > 
    7: <a href= "/”myUrl "” onMouseOver=”document.myImage.src = rollImage.src;” 
    8: onMouseOut=”document.myImage.src = defaultImage.src;” > 
    9: <img src= "/”image1.jpg "” name=”myImage” width=100 height=100 border=0 > 

    39 随机显示图像 
    1: <script language=”JavaScript” > 
    2: var imageList = new Array; 
    3: imageList[0] = “image1.jpg”; 
    4: imageList[1] = “image2.jpg”; 
    5: imageList[2] = “image3.jpg”; 
    6: imageList[3] = “image4.jpg”; 
    7: var imageChoice = Math.floor(Math.random() * imageList.length); 
    8: document.write(‘ <img src=”’ + imageList[imageChoice] + ‘“ >’); 
    9: </script > 

    40 函数实现的图像替换 
    1: <script language=”JavaScript” > 
    2: var source = 0; 
    3: var replacement = 1; 
    4: function createRollOver(originalImage,replacementImage) { 
    5: var imageArray = new Array; 
    6: imageArray[source] = new Image; 
    7: imageArray[source].src = originalImage; 
    8: imageArray[replacement] = new Image; 
    9: imageArray[replacement].src = replacementImage; 
    10: return imageArray; 
    11: } 
    12: var rollImage1 = createRollOver(“image1.jpg”,”rollImage1.jpg”); 
    13: </script > 
    14: <a href=”#” onMouseOver=”document.myImage1.src = rollImage1[replacement].src;” 
    15: onMouseOut=”document.myImage1.src = rollImage1[source].src;” > 
    16: <img src= "/”image1.jpg "” width=100 name=”myImage1” border=0 > 
    17: </a > 

    41 创建幻灯片 
    1: <script language=”JavaScript” > 
    2: var imageList = new Array; 
    3: imageList[0] = new Image; 
    4: imageList[0].src = “image1.jpg”; 
    5: imageList[1] = new Image; 
    6: imageList[1].src = “image2.jpg”; 
    7: imageList[2] = new Image; 
    8: imageList[2].src = “image3.jpg”; 
    9: imageList[3] = new Image; 
    10: imageList[3].src = “image4.jpg”; 
    11: function slideShow(imageNumber) { 
    12: document.slideShow.src = imageList[imageNumber].src; 
    13: imageNumber += 1; 
    14: if (imageNumber < imageList.length) { 
    15: window.setTimeout(“slideShow(“ + imageNumber + “)”,3000); 
    16: } 
    17: } 
    18: </script > 
    19: </head > 
    20: <body   onLoad=”slideShow(0)” > 
    21: <img src= "/”image1.jpg "” width=100 name=”slideShow” > 

    42 随机广告图片 
    1: <script language=”JavaScript” > 
    2: var imageList = new Array; 
    3: imageList[0] = “image1.jpg”; 
    4: imageList[1] = “image2.jpg”; 
    5: imageList[2] = “image3.jpg”; 
    6: imageList[3] = “image4.jpg”; 
    7: var urlList = new Array; 
    8: urlList[0] = “http://some.host/”; 
    9: urlList[1] = “http://another.host/”; 
    10: urlList[2] = “http://somewhere.else/”; 
    11: urlList[3] = “http://right.here/”; 
    12: var imageChoice = Math.floor(Math.random() * imageList.length); 
    13: document.write(‘ <a href=”’ + urlList[imageChoice] + ‘“ > <img src=”’ + imageList[imageChoice] + ‘“ > </a >’); 
    14: </script >
    JavaScript就这么回事4:表单 

    还是先继续写完JS就这么回事系列吧~ 

    43 表单构成 
    1: <form method=”post” action=”target.html” name=”thisForm” > 
    2: <input type=”text” name=”myText” > 
    3: <select name=”mySelect” > 
    4: <option value=”1” >First Choice </option > 
    5: <option value=”2” >Second Choice </option > 
    6: </select > 
    7: <br > 
    8: <input type=”submit” value=”Submit Me” > 
    9: </form > 

    44 访问表单中的文本框内容 
    1: <form name=”myForm” > 
    2: <input type=”text” name=”myText” > 
    3: </form > 
    4: <a href= &amp;amp;apos;# &amp;amp;apos; onClick= &amp;amp;apos;window.alert(document.myForm.myText.value); &amp;amp;apos; >Check Text Field </a > 

    45 动态复制文本框内容 
    1: <form name=”myForm” > 
    2: Enter some Text: <input type=”text” name=”myText” > <br > 
    3: Copy Text: <input type=”text” name=”copyText” > 
    4: </form > 
    5: <a href=”#” onClick=”document.myForm.copyText.value = 
    6: document.myForm.myText.value;” >Copy Text Field </a > 

    46 侦测文本框的变化 
    1: <form name=”myForm” > 
    2: Enter some Text: <input type=”text” name=”myText” onChange=”alert(this.value);” > 
    3: </form > 

    47 访问选中的Select 
    1: <form name=”myForm” > 
    2: <select name=”mySelect” > 
    3: <option value=”First Choice” >1 </option > 
    4: <option value=”Second Choice” >2 </option > 
    5: <option value=”Third Choice” >3 </option > 
    6: </select > 
    7: </form > 
    8: <a href= &amp;amp;apos;# &amp;amp;apos; onClick= &amp;amp;apos;alert(document.myForm.mySelect.value); &amp;amp;apos; >Check Selection List </a > 


    48 动态增加Select项 
    1: <form name=”myForm” > 
    2: <select name=”mySelect” > 
    3: <option value=”First Choice” >1 </option > 
    4: <option value=”Second Choice” >2 </option > 
    5: </select > 
    6: </form > 
    7: <script language=”JavaScript” > 
    8: document.myForm.mySelect.length++; 
    9: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”; 
    10: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “Third Choice”; 
    11: </script > 

    49 验证表单字段 
    1: <script language=”JavaScript” > 
    2: function checkField(field) { 
    3: if (field.value == “”) { 
    4: window.alert(“You must enter a value in the field”); 
    5: field.focus(); 
    6: } 
    7: } 
    8: </script > 
    9: <form name=”myForm” action=”target.html” > 
    10: Text Field: <input type=”text” name=”myField”onBlur=”checkField(this)” > 
    11: <br > <input type=”submit” > 
    12: </form > 

    50 验证Select项 
    1: function checkList(selection) { 
    2: if (selection.length == 0) { 
    3: window.alert(“You must make a selection from the list.”); 
    4: return false; 
    5: } 
    6: return true; 
    7: }
    谢祥选【小宇飞刀(xieyunc)】
  • 相关阅读:
    Java Object类
    Java StringBuffer类
    Java String 类
    vuex的使用总结
    vue 周期函数
    vue-cli keep-alive用法以及activated,deactivated
    vue-cli 跳转方式
    vue-cli watch/timer
    vue-cli 使用better-scroll
    vue-cli less使用
  • 原文地址:https://www.cnblogs.com/xieyunc/p/9126678.html
Copyright © 2011-2022 走看看