JavaScript使用技巧精萃

合集下载

JavaScript编程语言的基础知识与应用技巧

JavaScript编程语言的基础知识与应用技巧第一章：JavaScript编程语言的基础知识JavaScript是一种广泛应用于Web开发的脚本语言，它为网页增加了动态交互和实时更新的能力。

作为前端开发者，掌握JavaScript的基础知识是非常重要的。

1.1 变量和数据类型在JavaScript中，我们可以使用变量来存储和操作数据。

变量的定义使用关键字var，如：var age = 20;。

JavaScript的数据类型包括：字符串（String）、数字（Number）、布尔值（Boolean）、数组（Array）、对象（Object）等。

1.2 运算符和表达式JavaScript支持常见的算术、赋值、逻辑、比较等运算符，例如加法运算符+，赋值运算符=，逻辑与运算符&&，等等。

表达式是由变量、常量和运算符组成的。

1.3 控制流程控制流程用于控制程序的执行顺序。

JavaScript提供了条件语句（if-else语句、switch语句）、循环语句（for循环、while循环）以及其他控制语句（break语句、continue语句）等。

1.4 函数和作用域函数是一段可重复使用的代码块，它接受参数，并返回一个值。

在JavaScript中，函数的定义使用关键字function，如：function add(a, b) { return a + b; }。

作用域决定了变量的可见性和生命周期。

第二章：JavaScript编程的应用技巧2.1 DOM操作DOM（Document Object Model）是HTML和XML的编程接口，通过JavaScript可以对DOM进行操作，实现网页元素的增删改查。

常用的DOM操作方法包括getElementById、getElementsByTagName、appendChild等。

2.2 事件处理JavaScript通过事件处理函数来响应用户的操作。

如何快速学会使用JavaScript编程语言

如何快速学会使用JavaScript编程语言第一章：JavaScript简介及基本语法JavaScript是一种用于网页开发的脚本语言，由于其简洁易学、灵活多样的特点，已经成为了网页编程的重要工具之一。

本章将介绍JavaScript的基本语法，包括变量、数据类型、运算符、条件语句和循环语句等。

1.1 变量和数据类型JavaScript中的变量用于存储数据，可以是数字、字符串、布尔值等。

变量的声明使用关键字var，赋值使用等号。

数据类型分为基本数据类型（如数字、字符串、布尔值）和复杂数据类型（如对象、数组）。

1.2 运算符JavaScript支持常见的算术运算符（如加减乘除）、逻辑运算符（如与或非）、比较运算符（如等于、不等于）等。

了解这些运算符的使用方法是学习JavaScript的第一步。

1.3 条件语句条件语句用于根据不同条件执行不同的代码块。

JavaScript中常见的条件语句有if语句和switch语句。

if语句根据一个条件判断是否执行某段代码，switch语句根据不同的取值执行不同的代码块。

1.4 循环语句循环语句用于重复执行某段代码。

JavaScript中常见的循环语句有for循环和while循环。

for循环根据条件重复执行某段代码，while循环在条件为真时不断执行某段代码。

第二章：DOM操作与事件处理DOM（Document Object Model）是JavaScript与网页交互的重要接口。

本章将介绍如何使用JavaScript操作DOM，包括查找元素、修改元素属性、添加和删除元素等，并介绍如何处理事件。

2.1 查找元素可以使用JavaScript的document对象来查找网页中的元素。

常见的查找方法有getElementById、getElementsByClassName和getElementsByTagName等。

2.2 修改元素属性JavaScript可以通过修改元素的属性来改变网页的外观和行为。

JavaScript小技巧全集

JavaScript 小技巧全集（一)第一集如何用滑鼠控制Web页面在这一部分首先要为你展示的JavaScript特性是将你的滑鼠移到这个不同颜色的连结上面，此时看看浏览器下的状态列有何结果,然后这样的功能我们可以与JavaScript的功能相结合。

怎样做到的呢以下就是这一个连结的作法:＜a href="tpage。

htm”onMouseOver="window.status=’Just another stupid link.。

.'；return true”>在这儿你只要在传统＜a〉的标签中加入onMouseOver 的method 就可达成你要的效果了。

这里的window。

status 是用来让你可以在WWW 浏览器的状态列上显示一些讯息用的。

在语法中，你可以看到讯息部分是用’括起来的部分,而非以”括起来。

在讯息部分结束之后,必须加上; return true.好了,利用以上的特性可以很简单的完成第二个连结的例子，相当简单。

以onMouseOver 的method ，然后配合事件发生时去呼叫函数hello （) 就行了，不再多加解释了.作法如下＜html>＜head〉＜script language=”LiveScript">＜!-—Hidingfunction hello（）｛alert("哈罗!”）；｝＜/script>＜/head〉＜body〉＜a href=””onMouseOver=”hello(）”>link＜/a>＜/body〉＜/html〉第二集如何在页面内加入日期我们要告诉你一个使用日期和时间的例子,是从你个人客户端机器获取日期和时间。

做法如下：＜script language=”LiveScript”〉＜！-—Hidingtoday = new Date(）document。

write（"现在时间是"，today.getHours()，”：”，today.getMinutes（）)document。

JavaScript前端开发基础与实用技巧

JavaScript前端开发基础与实用技巧第一章：JavaScript基础知识JavaScript是一门广泛应用于网页开发中的脚本语言。

在开始学习JavaScript前，我们需要了解一些基础知识。

1.1 数据类型JavaScript中的数据类型包括字符串、数字、布尔值、数组、对象等。

了解各种数据类型的特点和使用方法，有助于编写更高效的代码。

1.2 变量和运算符变量是用来存储数据的容器。

了解变量的声明和使用方法，并掌握常用的运算符（如加减乘除、逻辑运算符等）是编写JavaScript代码的基础。

1.3 控制流程控制流程是指根据条件执行不同的代码块。

学习条件语句（如if-else语句、switch语句）、循环语句（如for循环、while循环）等控制流程，可以实现灵活的代码控制。

1.4 函数函数是一段可重复使用的代码块。

学习函数的定义和调用方法，可以提高代码的复用性和可读性。

第二章：DOM操作DOM（Document Object Model）是指将HTML文档中的元素映射成一个树形结构，通过操作这个树形结构，实现对网页内容的增删改查。

2.1 元素选择器学习如何通过标签名、类名、ID等方式选择HTML元素，以及如何获取和修改元素的属性和内容。

2.2 事件监听学习如何通过事件监听器响应用户的操作，如点击按钮、拖拽元素等。

掌握事件监听的方法，可以使网页与用户的交互更加丰富。

2.3动态创建和修改元素学习如何通过JavaScript动态地创建、修改和删除HTML元素，实时地改变网页的显示效果。

2.4表单操作学习如何获取和修改表单元素的值，以及如何验证表单的输入等。

掌握表单操作的技巧，可以提高用户体验和数据的准确性。

第三章：Ajax与异步编程Ajax（Asynchronous JavaScript and XML）是一种通过在后台与服务器进行数据交互的技术，实现局部页面刷新和异步加载数据。

3.1 XMLHttpRequest对象学习如何使用XMLHttpRequest对象发送HTTP请求和接收服务器返回的数据，以及如何处理异步请求。

javascript方法和技巧大全

javascript方法和技巧大全这篇介绍JavaScript方面的日志，我在是Clang上看到的。

作者介绍挺全面的，所以转载过来让感兴趣的朋友看一下。

呵呵～～～适合阅读范围：对JavaScript一无所知～离精通只差一步之遥的人基础知识：HTMLJavaScript就这么回事1：基础知识1 创建脚本块1: <script language=”JavaScript”>2: JavaScript code goes here3: </script>2 隐藏脚本代码1: <script language=”JavaScript”>2: 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 comment2: document.write(“Hello”); // This is a comment 3: /*4: All of this5: is a comment6: */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: 7: </script>10 字符串替换1: thisVar.replace(“Monday”,”Friday”);11 格式化字串1: <script language=”JavaScript”>2: 21: </script>12 创建数组1: <script language=”JavaScript”>2: 11: </script>13 数组排序1: <script language=”JavaScript”>2: 11: </script>14 分割字符串1: <script language=”JavaScript”>2: 10: </script>15 弹出警告信息1: <script language=”JavaScript”>2: 5: </script>16 弹出确认框1: <script language=”JavaScript”>2: 5: </script>17 定义函数1: <script language=”JavaScript”>2: 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 page3: </body>20 条件判断1: <script>2: 7: </script>21 指定次数循环1: <script>2: 11: </script>22 设定将来执行1: <script>2: 8: </script>23 定时执行函数1: <script>2: 9: </script>24 取消定时执行1: <script>2: 9: </script>25 在页面卸载时候执行函数1: <body onUnload=”functionName();”>2: Body of the page3: </body>JavaScript就这么回事2：浏览器输出26 访问document对象1: <script language=”JavaScript”>2: var myURL = document.URL;3: window.alert(myURL);4: </script>27 动态输出HTML1: <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(“&”);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 = “/”;3: </script>35 添加网页加载进度窗口1: <html>2: <head>3: <script language='javaScript'>4: var placeHolder = window.open('holder.html','placeholder','width=200,height=200'); 5: </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"” 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: defaultIma ge.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.setTimeo ut(“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='#' 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=”#” onClick=”document.myForm.copyText.value =6: document.my Form.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 访问选中的Select1: <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='#' 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: <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 F ield: <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 动态改变表单的action1: <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"” 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: <script language=”JavaScript”>2: window.status = “A new status message”;3: </script>55 弹出确认提示框1: <script language=”JavaScript”>2: var userChoice = window.confirm(“Click OK or Cancel”); 3: if (userChoice) {4: document.write(“You chose OK”);5: } else {6: document.write(“You chose Cancel”);7: }8: </script>56 提示输入1: <script language=”JavaScript”>2: var userName = windo w.prompt(“Please Enter Your Name”,”Enter Your Name Here”);3: document.write(“Your Name is “ + userName);4: </script>57 打开一个新窗口1: //打开一个名称为myNewWindow的浏览器新窗口2: <script language=”JavaScript”>3: window.open(“/”,”myNewWindow”);4: </script>58 设置新窗口的大小1: <script language=”JavaScript”>2: window.open(“/”,”myNewWindow”,'height=300,width=300');3: </script>59 设置新窗口的位置1: <script language=”JavaScript”>2:window.open(“/”,”myNewWindow”,'height=300,width=300,left=200,scree nX=200,top=100,screenY=100');3: </script>60 是否显示工具栏和滚动栏1: <script language=”JavaScript”>2: window.open(“http:61 是否可以缩放新窗口的大小1: <script language=”JavaScript”>2: window.open('/' , 'myNewWindow', 'resizable=yes' );</script>62 加载一个新的文档到当前窗口1: <a href='#' onClick='document.location = '125a.html';' >Open New Document</a>63 设置页面的滚动位置1: <script language=”JavaScript”>2: if (document.all) { //如果是IE浏览器则使用scrollTop属性3: document.body.scrollTop = 200;4: } else { //如果是NetScape浏览器则使用pageYOffset属性5: window.pageYOffset = 200;6: }</script>64 在IE中打开全屏窗口1: <a href='#' onClick=”window.open('/','newWindow','fullScreen=yes');”>Open a full-screen window</a>65 新窗口和父窗口的操作1: <script language=”JavaScript”>2: //定义新窗口3: var newWindow = window.open(“128a.html”,”newWindow”);4: newWindow.close(); //在父窗口中关闭打开的新窗口5: </script>6: 在新窗口中关闭父窗口7: window.opener.close()66 往新窗口中写内容1: <script language=”JavaScript”>2: var newWindow = window.open(“”,”newWindow”);3: newWindow.document.open();4: newWindow.document.write(“This is a new window”);5: newWIndow.document.close();6: </script>67 加载页面到框架页面1: <frameset cols=”50%,*”>2: <frame name=”frame1” src="/”135a.html"”>3: <frame name=”frame2” src="/”about:blank"”>4: </frameset>5: 在frame1中加载frame2中的页面6: parent.frame2.document.location = “135b.html”;68 在框架页面之间共享脚本如果在frame1中html文件中有个脚本1: function doAlert() {2: window.alert(“Frame 1 is loaded”);3: }那么在frame2中可以如此调用该方法1: <body onLoad=”parent.frame1.doAlert();”>2: This is frame 2.3: </body>69 数据公用可以在框架页面定义数据项，使得该数据可以被多个框架中的页面公用1: <script language=”JavaScript”>2: var persistentVariable = “This is a persistent value”;3: </script>4: <frameset col s=”50%,*”>5: <frame name=”frame1” src="/”138a.html"”>6: <frame name=”frame2” src="/”138b.html"”>7: </frameset>这样在frame1和frame2中都可以使用变量persistentV ariable70 框架代码库根据以上的一些思路，我们可以使用一个隐藏的框架页面来作为整个框架集的代码库1: <frameset cols=”0,50%,*”>2: <frame name=”codeFrame” src="/”140code.html"”>3: <frame name=”frame1” src="/”140a.html"”>4: <frame name=”frame2” src="/”140b.html"”>5: </frameset>正在处理您的请求...lxs5i5j的专栏CSDN | 社区| 技术中心| BLOG首页| 我的首页| 个人档案| 联系作者| 聚合| 搜索| 登录16篇原创: 0篇翻译: 8篇转载: 2698次点击: 11个评论: 0个Trackbacks文章.net功能模块(RSS).net技巧(RSS)ajax(RSS)js收集(RSS)错误集(RSS)其它(RSS)收藏相册存档2007年02月(3)2007年01月(21)最近评论wuheng08：太谢谢redstonebupt：大哥对不怎么没有数据绑定那lovexiaomantou：辛苦了！greatwallmy：好东西呀！谢谢了Sandy945：thank you ~作者tag:正则表达式cookie xml操作禁止复制屏蔽焦点按钮节点透明画图判断全屏下拉框弹出窗口下载文件js收集自动关闭模式窗口字符转化为数字页内跳转网页自动跑同时按下删除表格某行判断浏览器生成excel 菜单中的命令的实现给下拉框分组窗口重定向能输入的下拉框js技巧收集(200多个)1.文本框焦点问题onBlur:当失去输入焦点后产生该事件onFocus:当输入获得焦点后，产生该文件Onchange:当文字值改变时，产生该事件Onselect:当文字加亮后，产生该文件<input type="text" value="郭强" onfocus="if(value=='郭强') {value=''}" onblur="if(value=='') {value='郭强'}">点击时文字消失，失去焦点时文字再出现2.网页按钮的特殊颜色<input type=button name="Submit1" value="郭强" size=10 class=s02style="background-color:rgb(235,207,22)">3.鼠标移入移出时颜色变化<input type="submit" value="找吧" name="B1" onMouseOut=this.style.color="blue"onMouseOver=this.style.color="red" class="button">4.平面按钮<input type=submit value=订阅style="border:1px solid :#666666; height:17px; width:25pt; font-size:9pt;BACKGROUND-COLOR: #E8E8FF; color:#666666" name="submit">5.按钮颜色变化<input type=text name="nick" style="border:1px solid #666666; font-size:9pt; height:17px;BACKGROUND-COLOR: #F4F4FF; color:#ff6600" size="15" maxlength="16">6.平面输入框<input type="text" name="T1" size="20" style="border-style: solid; border-width: 1">7.使窗口变成指定的大小<script>window.resizeTo(300,283);</script>8.使文字上下滚动<marquee direction=up scrollamount=1 scrolldelay=100 onmouseover='this.stop()' onmouseout='this.start()'height=60><tr><td>共和国</table> </marquee>9.状态栏显示该页状态<base onmouseover="window.status='网站建设/' ;return true">10.可以点击文字实现radio选项的选定<br>    <input type="radio" name="regtype" value="A03" id="A03"><label for="A03"> 情侣: 一次注册两个帐户</label> <br>11.可以在文字域的font写onclick事件12.打印</a>打印网页<a href='javascript:window.print ()'>13.线型输入框<input type="text" name="key" size="12" value="关键字" onFocus=this.select() onMouseOver=this.focus()class="line">14.显示文档最后修改日期<script language=javascript>function hi(str){document.write(stModified)alert("hi"+str+"!")}</script>15.可以在鼠标移到文字上时就触发事件<html><head><script language="LiveScript"></SCRIPT><BODY STYLE="font-family:Arial"><B>Changing Background Colors</B><BR><FORM><SELECT SIZE="8" onChange="bgChange(this);"> <OPTION>Red<OPTION>Orange<OPTION>Yellow<OPTION>Green<OPTION>Blue<OPTION>Indigo<OPTION>Violet<OPTION>White<OPTION>pink</SELECT></FORM></BODY></HTML>17.将按钮的特征改变<style type="text/css"></style>本例按钮的代码如下：<input type="submit" name="Submit" value="提交" onmouseover="this.className='style2'"onmouseout="this.className='style1'" class="style1">18.改变按钮的图片.<style type="text/css"></style>本例的按钮代码如下：<input type="submit" name="Submit2" value="提交" onmouseover="this.className='style4'"onmouseout="this.className='style3'" class="style3">19.打印页面<div align="center"><a class=content href="javascript:doPrint();">打印本稿</a></div>20.可以直接写html语言document.write("");21.改变下拉框的颜色<select name="classid"onChange="changelocation(document.myform.classid.options[document.myform.classid.selectedI ndex].value)"size="1" style="color:#008080;font-size: 9pt">22.转至目标URLwindow.location="http://guoguo"23.传递该object的formUpdateSN('guoqiang99267',this.form)function UpdateSN(strValue,strForm){strForm.SignInName.value = strValue;return false;}24.文字标签<label for="AltName4"><input name="AltName" type="RADIO" tabindex="931" id="AltName4">guoqiang99859</label>yer2为组件的ID，可以控制组件是否可见document.all.item('Layer2').style.display = "block";document.all.item('Layer2').style.display = "none";//26.将页面加入favorite中<script language=javascript></script>//27.过10秒自动关闭页面< script language="JavaScript" >function closeit() {setTimeout("self.close()"，10000)}< /script >28.可以比较字符的大小char=post.charAt(i);if(!('0'<=char&&char<='9'))29.将字符转化为数字month = parseInt(char)30.点击value非空的选项时转向指定连接<select onchange='if(this.value!="")window.open(this.value)' class="textinput"> <option selected>主办单位</option><option>-----------------</option><option value="/">北京日报</option><option value="/">北京晚报</option></select>31.改变背景颜色<td width=* class=dp bgColor=#FAFBFC onmouseover="this.bgColor='#FFFFFF';" onmouseout="this.bgColor='#FAFBFC';">32.改变文字输入框的背景颜色<style>.input2 {background-image: url('../images/inputbg.gif'); font-size: 12px; background-color:#D0DABB;border-top-width:1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}</style><input name=content type=text size="47" class="input2" maxlength="50">33.改变水平线的特征<hr size="0" noshade color="#C0C0C0">34.传递参数的方式<a href="vote.asp?CurPage=8&id=3488">8</a>35.页内跳转<a href="#1">1</a><a href="#2">2</a><a href="#3">3</a><a href="#4">4</a><a href="#5">5</a><a href="#6">6</a><a href="#7">7</a>。

JavaScript小技巧全集

J a v a S c r i p t小技巧全集（一）?JavaScript 小技巧全集（二）第八集如何自动加上最后修改时间我们在HTML 文件档完成了以后，常会加上一行文件最后修改的日期。

现在你可不用担心每次都要去改或是忘了改了，你可以很简单的写一个如下的描述语法程式。

就可以自动的为你每次产生最后修改的日期了。

＜html>＜body>This is a simple HTML- page.＜br>Last changes:＜script language="LiveScript">＜!-- hide script from old browsersdocument.write(stModified)// end hiding contents -->＜/script>＜/body>＜/html>以上的stModified 参数在Netscape 2.0beta 2 版时是被写成stmodified 的。

然而之后的版本就改为stModified。

所以注意一下JavaScript 本身是会区分大小写的lastmodified 与lastModified在它看来是不同的结果。

第九集JAVASCRIPT基础(1)一、什么是JAVASCRIPT语言?JavaScript是一种新的描述语言，此一语言可以被箝入HTML的文件之中，透过JavaScript可以做到回应使用者的需求事件(如form的输入)而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给服务器(server)处理，再传回来的过程，而直接可以被客户端(client)的应用程式所处理。

你也可以想像成有一个可执行程式在你的客端上执行一样。

目前已有一些写好的程式在Internet上你可以连过去看看。

JavaScript和Java很类似，但到底并不一样。

Java是一种比JavaScript更复杂，许多的程式语言。

JS使用方法大全

JS使用方法大全
JavaScript 的使用方法一般分为前端和后端两部分，其中前端使用主要用于开发Web网页，而后端一般用于开发Web服务器端程序，以提供更强大的功能，如下：
**一、前端 JavaScript**
1. 使用JavaScript创建网页：JavaScript可以用于动态地创建网页，拥有元素和样式，以在浏览器中实现动态页面效果。

2. 利用JavaScript添加交互：JavaScript可以用于实现各种交互功能，比如用户输入验证、消息提示、视频播放和其他动态效果。

3. 使用JavaScript来增强客户体验：通过JavaScript可以实现各种客户端特效，比如自动填充内容、鼠标悬停提示等等，从而提升用户体验。

4. 使用JavaScript实现响应式设计：通过媒体查询，JavaScript 可以实现网页在不同设备上的自适应，从而满足多个平台下的不同屏幕分辨率。

5. 使用 Ajax 动态加载内容：Ajax是一种利用JavaScript实现的异步传输机制，开发者可以用它来动态地加载内容，从而减少了用户等待时间。

**二、后端 JavaScript**
1. 创建 Web 服务器：Node.js 是一种基于 JavaScript 的JavaScript 运行环境，可以用它来创建一个完整的 Web 服务器，实现从处理请求到返回响应的一整套流程。

2. 开发 Web 服务器端程序：Node.js 支持以 JavaScript 编写 Web 服务器端程序，实现对数据库的操作、与前端的交互功能等，可以将复杂的业务流程封装成 API 供前端调用。

给JavaScript初学者的24个小窍门

为JavaScript做一点性能小提升吧！本文列出了24条能让你的代码编写过程更为轻松高效的建议。

也许您还是JavaScript 初学者，刚刚写完自己的Hello World，那这里有很多对您的工作将十分有用的小贴士；也许有些技巧您已经知道，那就试试快速浏览一下，看能不能发现一点新东西吧！1. 用 === 代替 ==JavaScript里有两种不同的相等运算符：===|!== 和==|!=。

相比之下，前者更值得推荐。

请尽量使用前者。

“如果两个比较对象有着同样的类型和值，===返回true，!==返回false。

”– JavaScript: The Good Parts不过，如果使用==和!=，在操作不同数据类型时, 你可能会遇到一些意想不到的问题。

在进行相等判断前，JavaScript会试图将它们转换为字符串、数字或 Boolean量。

2. 避免使用Eval函数Eval函数把一个字串作为参数，并把字串作为JavaScript语句执行，返回结果。

此函数不仅会降低你脚本的执行效率，而且还大大增加了安全风险，因为它赋予了作为文本的参数太大的权利。

千万别用！3. 不要使用快速写法技术上说，你可以省略掉大部分花括弧和句尾分号，绝大多数浏览器都能正确执行以下语句：1.if(someVariableExists)2.x = false不过，如果是这样的呢：3.if(someVariableExists)4.x = false5.anotherFunctionCall();你可能会认为它和下面的语句相等：6.if(someVariableExists) {7.x = false;8.anotherFunctionCall();9.}不幸的是，事实并非如此。

现实情况是它等价于：10.if(someVariableExists) {11.x = false;12.}13.anotherFunctionCall();如您注意到的，再漂亮的缩进也不能代替这华丽的花括弧。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

(一).确认删除用法:1. BtnDel.Attributes.Add("onclick","return confirm('"+"确认删除?"+"')");2. linktempDelete.Attributes["onclick"]="javascript:return confirm('"+"确认删除?"+"');";3. private void grdProject_ItemDataBound(object sender, DataGridItemEventArgs e)4.{if ((e.Item.ItemType == ListItemType.Item) | (e.Item.ItemType == ListItemType.AlternatingItem)){// 刪除按鈕上的提示部分e.Item.Cells[10].Attributes.Add("onclick", "return confirm('确定删除吗？');");}}5.<script language="JavaScript" type="text/JavaScript">function delete_y(e){if(event.srcElement.outerText == "删除")event.returnValue=confirm("确定删除?");}document.onclick=delete_y;</script>(二).跨语言字符串替换System.Text.RegularExpressions.Regex.Replace(str1,@" <{1}[^ <>]*>{1}","").Replace(" ","").Replace("\","\\").Replace("-","-").Replac e("&","&").Replace("<"," <").Replace(">",">").Replace("br","\n");(三).关闭窗体1.this.btnClose.Attributes.Add("onclick", "window.close();return false;");2.关闭本窗体间跳转到另一个页面this.HyperLink1.NavigateUrl = "javascript:onclick=window.opener.location.assign('" + "index.aspx"+ "?&Func=Edit&AutoID=" + intAutoid + ');window.close();";3.关闭父窗体:<INPUT type="reset" value=' <%=this._Cancel%>' onclick="window.parent.close()" Class="Button">4.关闭本弹出窗体,并刷新父页面this.Response.Write(" <script language='javascript'>window.opener.location.reload();window.close(); </script>");(四).Web MessageBox1.Response.Write(" <script language=javascript> window.alert('保存成功1'); </script>");2.Response.Write(" <script>alert('"+"保存成功!"+"'); </script>");3.this.Page.RegisterStartupScript("ChiName"," <script language='javascript'>alert('" + "保存成功!" + "') </script>");(五).DataGrid中加CheckBox控件模板列.请看: /chengking/archive/2005/10/08/497520.aspx(六). window.open() 方法语法：window.open(pageurl,name,parameters);window对象的open()方法用于创建一个新的窗口实例，新创建的窗口的外观由参数：parameters指定。

新窗口中打开的文档由参数：pageurl指定。

系统能够根据参数：name确定的名称访问该窗口。

下表为parameters参数表：参数衩始值说明alwaysLowered yes/no 指定窗口隐藏在所有窗口之下。

alwaysRaised yes/no 指定窗口浮在所有窗口之上。

dependent yes/no 指定打开的窗口为父窗口的一个了窗口。

并随父窗口的关闭而关闭。

directions yes/no 指定Navigator 2和3的目录栏是否在新窗口中可见。

height pixel value 设定新窗口的像素高度。

hotkeys yes/no 在没有菜单栏的新窗口设置安全退出热键。

innerHeight pixel value 设置新窗口中文档的像素高度。

innerWidth pixel value 设置新窗口中文档的像素宽度。

location yes/ no 指明位置栏在新窗口中是否可见。

menubar yes /no 指明菜单栏在新窗口中是否可见。

outerHeight pixel value 设定窗口（包括装饰边框）的像素高度。

outerWidth pixel value 设定窗口（包括装饰边框）的像素宽度。

resizable yes /no 指明新窗口是否可以调整。

screenX pixel value 设定新窗口离屏幕边界的像素长度。

screenY pixel value 设定新窗口离屏幕上边界的像素长度。

scrollbars yes /no 指明滚动栏在新窗口中是否可见。

titlebar yes /no 指明菜单题目栏在新窗口是否可见。

toolbar yes /no 指明工具栏在新窗口中是否可见。

Width pixel value 设定窗口的像素宽度。

z-look yes /no 在文档中包含各个<pplet>标签的数组。

fullscreen yes / no 打开的窗体是否进行全屏显示left pixel value 设定新窗口距屏幕左方的距离top pixel value 设定新窗口距屏幕上方的距离例子:<html><head><title>window.open函数</title></head><body><script language="javascript"></script></body></html>(七).location对象href 整个URL字符串. Location. protocolprotocol 含有URL第一部分的字符串,如http:host 包含有URL中主机名:端口号部分的字符串.如///server/hostname 包含URL中主机名的字符串.如port 包含URL中可能存在的端口号字符串.pathname URL中"/"以后的部分.如~list/index.htmhash "#"号(CGI参数)之后的字符串.search "?"号(CGI参数)之后的字符串.(八).按键捕捉1.Ctrl+Enter按键捕捉方法<body onkeydown="doKeyDown()"><script language="JavaScript"></script></body>2.Alt加快捷键: Alt+A<button accessKey=A title="Alt+A" onclick="alert('Button clicked!')">Alt+A </button> (九).控制输入，非法字符不能输入到TextBox.<asp:textbox class="Text"onkeypress="if (event.keyCode < 48 || event.keyCode >57) event.returnValue =false;"id="txtY_Revenue" style="TEXT-ALIGN: right" runat="server" Width="90%" MaxLength="12"></asp:textbox>说明：此方法控制TextBox只收数字：0~9 , 也自可以定义其它可输入字符,如改成: 65~123,只允许输入: a~z和A~Z 等.[以下为收藏]1>屏蔽功能类1.1 屏蔽键盘所有键<script language="javascript"></script>1.2 屏蔽鼠标右键在body标签里加上oncontextmenu=self.event.returnvalue=false或者<script language="javascript"></script>function nocontextmenu(){if(document.all) {event.cancelBubble=true;event.returnvalue=false;return false;}}或者<body onmousedown="rclick()" oncontextmenu= "nocontextmenu()"><script language="javascript"></script>1.3 屏蔽Ctrl+N、Shift+F10、F5刷新、退格键<script language="javascript"><!--//屏蔽鼠标右键、Ctrl+N、Shift+F10、F5刷新、退格键function window.onhelp(){return false} //屏蔽F1帮助function KeyDown(){if ((window.event.altKey)&&((window.event.keyCode==37)|| //屏蔽Alt+ 方向键←(window.event.keyCode==39))){ //屏蔽Alt+ 方向键→alert("不准你使用ALT+方向键前进或后退网页！");event.returnvalue=false;}/* 注：这还不是真正地屏蔽Alt+ 方向键，因为Alt+ 方向键弹出警告框时，按住Alt 键不放，用鼠标点掉警告框，这种屏蔽方法就失效了。