JavaScript方法和技巧大全[集合]

最新推荐文章于 2025-11-09 20:06:07 发布

原创最新推荐文章于 2025-11-09 20:06:07 发布 · 381 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #imagelist #image #input #function #浏览器

JS 专栏收录该内容

10 篇文章

订阅专栏

本文提供了大量实用的JavaScript编程技巧，包括创建脚本块、隐藏代码、条件判断等，并详细介绍了如何在网页中应用这些技巧。

1 创建脚本块 <mce:script language=”JavaScript”></mce:script> 2 隐藏脚本代码 <mce:script language=”JavaScript”> // --></mce:script> 在不支持JavaScript的浏览器中将不执行相关代码 3 浏览器不支持的时候显示 1: <noscript> 2: Hello to the non-JavaScript browser. 3: </noscript> 4 链接外部脚本文件 1: <mce:script language=”JavaScript” src="/”filename.js" mce_src="”filename.js"”></mce: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: <mce:script language=”JavaScript”> 7: // --></mce:script> 10 字符串替换 1: thisVar.replace(“Monday”,”Friday”); 11 格式化字串 1: <mce:script language=”JavaScript”> 21: // --></mce:script> 12 创建数组 1: <mce:script language=”JavaScript”> 11: // --></mce:script> 13 数组排序 1: <mce:script language=”JavaScript”> 11: // --></mce:script> 14 分割字符串 1: <mce:script language=”JavaScript”> 10: // --></mce:script> 15 弹出警告信息 1: <mce:script language=”JavaScript”> 5: // --></mce:script> 16 弹出确认框 1: <mce:script language=”JavaScript”> 5: // --></mce:script> 17 定义函数 1: <mce:script language=”JavaScript”> 8: // --></mce:script> 18 调用JS函数 1: <a href="”#”" mce_href="”#”" onClick=”functionName()”>Link text</a> 2: <a href="/”javascript:functionName" mce_href="”javascript:functionName"()”>Link text</a> 19 在页面加载完成后执行函数 1: <body onLoad=”functionName();”> 2: Body of the page 3: </body> 20 条件判断 1: <mce:script type="text/javascript"> 7: // --></mce:script> 21 指定次数循环 1: <mce:script type="text/javascript"> 11: // --></mce:script> 22 设定将来执行 1: <mce:script type="text/javascript"> 8: // --></mce:script> 23 定时执行函数 1: <mce:script type="text/javascript"> 9: // --></mce:script> 24 取消定时执行 1: <mce:script type="text/javascript"> 9: // --></mce:script> 25 在页面卸载时候执行函数 1: <body onUnload=”functionName();”> 2: Body of the page 3: </body> JavaScript就这么回事2：浏览器输出 26 访问document对象 1: <mce:script language=”JavaScript”></mce:script> 27 动态输出HTML 1: <mce:script language=”JavaScript”></mce:script> 28 输出换行 1: document.writeln(“<strong>a</strong>”); 2: document.writeln(“b”); 29 输出日期 1: <mce:script language=”JavaScript”></mce:script> 30 指定日期的时区 1: <mce:script language=”JavaScript”></mce:script> 31 设置日期输出格式 1: <mce:script language=”JavaScript”></mce:script> 32 读取URL参数 1: <mce:script language=”JavaScript”></mce:script> 你还以为HTML是无状态的么？ 33 打开一个新的document对象 1: <mce:script language=”JavaScript”></mce:script> 34 页面跳转 1: <mce:script language=”JavaScript”></mce:script> 35 添加网页加载进度窗口 1: <html> 2: <head> 3: <mce:script language='javaScript'></mce:script> 6: <title>The Main Page</title> 7: </head> 8: <body onLoad='placeHolder.close()'> 9: <p>This is the main page</p> 10: </body> 11: </html> JavaScript就这么回事3：图像 36 读取图像属性 1: <img src="/”image1.jpg" mce_src="”image1.jpg"” name=”myImage”> 2: <a href="”#" mce_href="”" ” onClick=”window.alert(document.myImage.width)”>Width</a> 3: 37 动态加载图像 1: <mce:script language=”JavaScript”></mce:script> 38 简单的图像替换 1: <mce:script language=”JavaScript”></mce:script> 7: <a href="/”myUrl" mce_href="”myUrl"” onMouSEOver=”document.myImage.src = rollImage.src;” 8: onMouseOut=”document.myImage.src = defaultImage.src;”> 9: <img src="/”image1.jpg" mce_src="”image1.jpg"” name=”myImage” width=100 height=100 border=0> 39 随机显示图像 1: <mce:script language=”JavaScript”></mce:script> 40 函数实现的图像替换 1: <mce:script language=”JavaScript”></mce:script> 14: <a href="”#”" mce_href="”#”" onMouseOver=”document.myImage1.src = rollImage1[replacement].src;” 15: onMouseOut=”document.myImage1.src = rollImage1[source].src;”> 16: <img src="/”image1.jpg" mce_src="”image1.jpg"” width=100 name=”myImage1” border=0> 17: </a> 41 创建幻灯片 1: <mce:script language=”JavaScript”></mce:script> 19: </head> 20: <body onLoad=”slideShow(0)”> 21: <img src="/”image1.jpg" mce_src="”image1.jpg"” width=100 name=”slideShow”> 42 随机广告图片 1: <mce:script language=”JavaScript”></mce: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="#" mce_href="#" onClick='window.alert(document.myForm.myText.value);'>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="”#”" mce_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="#" mce_href="#" onClick='alert(document.myForm.mySelect.value);'>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: <mce:script language=”JavaScript”></mce:script> 49 验证表单字段 1: <mce:script language=”JavaScript”></mce: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: } 51 动态改变表单的action 1: <form name=”myForm” action=”login.html”> 2: Username: <input type=”text” name=”username”><br> 3: PassWord: <input type=”password” name=”password”><br> 4: <input type=”button” value=”Login” onClick=”this.form.submit();”> 5: <input type=”button” value=”Register” onClick=”this.form.action = ‘register.html’; this.form.submit();”> 6: <input type=”button” value=”Retrieve Password” onClick=”this.form.action = ‘password.html’; this.form.submit();”> 7: </form> 52 使用图像按钮 1: <form name=”myForm” action=”login.html”> 2: Username: <input type=”text” name=”username”><br> 3: Password: <input type=”password”name=”password”><br> 4: <input type=”image” src="/”login.gif" mce_src="”login.gif"” value=”Login”> 5: </form> 6: 53 表单数据的加密 1: <SCRIPT LANGUAGE='JavaScript'> 2:  17: </SCRIPT> 18: <form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'> 19: Enter Some Text: <input type=text name=myField><input type=submit> 20: </form> JavaScript就这么回事5：窗口和框架 54 改变浏览器状态栏文字提示 1: <mce:script language=”JavaScript”></mce:script> 55 弹出确认提示框 1: <mce:script language=”JavaScript”></mce:script> 56 提示输入 1: <mce:script language=”JavaScript”></mce:script> 57 打开一个新窗口 1: //打开一个名称为myNewWindow的浏览器新窗口 2: <mce:script language=”JavaScript”></mce:script> 58 设置新窗口的大小 <mce:script language=”JavaScript”></mce:script> 59 设置新窗口的位置 <mce:script language=”JavaScript”></mce:script> 60 是否显示工具栏和滚动栏 <mce:script language=”JavaScript”></mce:script> 62 加载一个新的文档到当前窗口 <a href="#" mce_href="#" onClick='document.location = '125a.html';' >Open New Document</a> 63 设置页面的滚动位置 <mce:script language=”JavaScript”></mce:script> 64 在IE中打开全屏窗口 <a href="#" mce_href="#" onClick=”window.open('http://www.youkuaiyun.com/','newWindow','fullScreen=yes');”>Open a full-screen window</a> 65 新窗口和父窗口的操作 <mce:script language=”JavaScript”></mce:script> 在新窗口中关闭父窗口 window.opener.close() 66 往新窗口中写内容 <mce:script language=”JavaScript”></mce:script> 67 加载页面到框架页面 <frameset cols=”50%,*”> <frame name=”frame1” src="/”135a.html" mce_src="”135a.html"”> <frame name=”frame2” src="/”about:blank" mce_src="”about:blank"”> </frameset> 在frame1中加载frame2中的页面 parent.frame2.document.location = “135b.html”; 68 在框架页面之间共享脚本如果在frame1中html文件中有个脚本 function doAlert() { window.alert(“Frame 1 is loaded”); } 那么在frame2中可以如此调用该方法 <body onLoad=”parent.frame1.doAlert();”> This is frame 2. </body> 69 数据公用可以在框架页面定义数据项，使得该数据可以被多个框架中的页面公用 <mce:script language=”JavaScript”></mce:script> <frameset cols=”50%,*”> <frame name=”frame1” src="/”138a.html" mce_src="”138a.html"”> <frame name=”frame2” src="/”138b.html" mce_src="”138b.html"”> </frameset> 这样在frame1和frame2中都可以使用变量persistentVariable 70 框架代码库根据以上的一些思路，我们可以使用一个隐藏的框架页面来作为整个框架集的代码库 <frameset cols=”0,50%,*”> <frame name=”codeFrame” src="/”140code.html" mce_src="”140code.html"”> <frame name=”frame1” src="/”140a.html" mce_src="”140a.html"”> <frame name=”frame2” src="/”140b.html" mce_src="”140b.html"”> </frameset>