avascript事件查询综合
- 格式:docx
- 大小:85.25 KB
- 文档页数:80
javascript的常⽤事件有哪些javascript常⽤事件:click、dblclick、mouseup、mouseout、keypress、keydown、keyup、error、load、resize、unload、blur、change、focus、reset等。
JavaScript 的⼀个基本特征就是事件驱动。
所谓事件驱动,就是当⽤户执⾏了某种操作或 Javascript 和 html 交互后导致了某种状态改变后,会因此⽽引发⼀系列程序的响应执⾏。
在这⾥,⽤户的操作称为事件,程序对事件作出的响应称为事件处理。
事件处理,是指程序对事件作出的响应。
事件,对 JavaScript 来说,就是⽤户与 Web 页⾯交互时产⽣的操作或 Javascript 和 html 交互后导致发⽣变化某种状态的事情,⽐如移动⿏标、按下某个键、单击按钮等操作以及表⽰ Ajax 的⼯作状态发⽣变化、表⽰动画已经完成运⾏等。
事件处理中涉及的程序称为事件处理程序。
事件处理程序通常定义为函数。
在 Web 页⾯中产⽣事件的界⾯元素,称为事件源。
在不同事件源上可以产⽣相同类型的事件,同⼀个事件源也可以产⽣不同类型的事件。
JS 程序通过指明事件类型和事件源,并对事件源绑定事件处理程序,这样,⼀旦事件源发⽣指定类型的事件,浏览器就会调⽤事件源所绑定的处理程序进⾏事件处理。
所以事件处理涉及的⼯作包括事件处理程序的定义及其绑定。
在 Web 页⾯中,⽤户可进⾏的操作有很多,⽽每⼀种操作都将产⽣⼀个事件。
下⾯给⼤家介绍⼀下javascript常⽤事件。
JavaScript 常⽤事件事件描述⿏标事件 click ⽤户单击⿏标时触发此事件dblclick ⽤户双击⿏标时触发此事件mousedown ⽤户按下⿏标时触发此事件mouseup ⽤户按下⿏标后松开⿏标时触发此事件mouseover 当⽤户将⿏标的光标移动到某对象范围的上⽅时触发此事件mousemove ⽤户移动⿏标时触发此事件mouseout 当⽤户⿏标的光标离开某对象范围时触发此事件mousewheel 当滚动⿏标滚轮时发⽣此事件,只针对 IE 和 Chrome 有效DOMMouseScroll 当滚动⿏标滚轮时发⽣此事件,针对标准浏览器有效键盘事件 keypress 当⽤户键盘上的某个字符键被按下时触发此事件keydown 当⽤户键盘上某个按键被按下时触发此事件keyup 当⽤户键盘上某个按键被按下后松开时触发此事件窗⼝事件 error 加载⽂件或图像发⽣错误时触发此事件load 页⾯内容加载完成时触发此事件resize 当浏览器的窗⼝⼤⼩被改变时触发此事件unload 当前页⾯关闭或退出时触发此事件表单事件 blur 当表单元素失去焦点时触发此事件click ⽤户单击复选框、单选框、普通按钮、提交按钮和重置按钮等按钮时触发此事件change 表单元素的内容发⽣改变并且元素失去焦点时触发此事件focus 当表单元素获得焦点时触发此事件reset ⽤户单击表单上的重置按钮时触发此事件select ⽤户选择了⼀个 input 或 textarea 表单元素中的⽂本时触发此事件submit ⽤户单击提交按钮提交表单时触发此事件。
JavaScript全屏和退出全屏事件总结(附代码)代码如下:window.isflsgrn = false;//ie11以下是否进⼊全屏标志,true为全屏状态,false为⾮全屏状态window.ieIsfSceen = false;//ie11是否进⼊全屏标志,true为全屏状态,false为⾮全屏状态//跨浏览器返回当前 document 是否进⼊了可以请求全屏模式的状态function fullscreenEnable(){var isFullscreen = document.fullscreenEnabled ||window.fullScreen ||document.mozFullscreenEnabled ||document.webkitIsFullScreen;return isFullscreen;}//全屏var fScreen = function(){var docElm = document.documentElement;if (docElm.requestFullscreen) {docElm.requestFullscreen();}else if (docElm.msRequestFullscreen) {docElm.msRequestFullscreen();ieIsfSceen = true;}else if (docElm.mozRequestFullScreen) {docElm.mozRequestFullScreen();}else if (docElm.webkitRequestFullScreen) {docElm.webkitRequestFullScreen();}else {//对不⽀持全屏API浏览器的处理,隐藏不需要显⽰的元素window.parent.hideTopBottom();isflsgrn = true;$("#fsbutton").text("退出全屏");}}//退出全屏var cfScreen = function(){if (document.exitFullscreen) {document.exitFullscreen();}else if (document.msExitFullscreen) {document.msExitFullscreen();}else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();}else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen();}else {window.parent.showTopBottom();isflsgrn = false;$("#fsbutton").text("全屏");}}//全屏按钮点击事件$("#fsbutton").click(function(){var isfScreen = fullscreenEnable();if(!isfScreen && isflsgrn == false){if (ieIsfSceen == true) {document.msExitFullscreen();ieIsfSceen = false;return;}fScreen();}else{cfScreen();}})//键盘操作$(document).keydown(function (event) {if(event.keyCode == 27 && ieIsfSceen == true){ieIsfSceen = false;}});//监听状态变化if (window.addEventListener) {document.addEventListener('fullscreenchange', function(){if($("#fsbutton").text() == "全屏"){$("#fsbutton").text("退出全屏");}else{$("#fsbutton").text("全屏");}});document.addEventListener('webkitfullscreenchange', function(){if($("#fsbutton").text() == "全屏"){$("#fsbutton").text("退出全屏");}else{$("#fsbutton").text("全屏");}});document.addEventListener('mozfullscreenchange', function(){if($("#fsbutton").text() == "全屏"){$("#fsbutton").text("退出全屏");}else{$("#fsbutton").text("全屏");}});document.addEventListener('MSFullscreenChange', function(){if($("#fsbutton").text() == "全屏"){$("#fsbutton").text("退出全屏");}else{$("#fsbutton").text("全屏");}});}值得注意的是 fullscreenEnabled 参数,⽹上的说法不⼀,有的说是监控浏览器是否进⼊了可以请求全屏模式的状态,有的说只是⼀个判断浏览器是否⽀持全屏的标志,实际使⽤时也确实出现了问题,IE11不能识别这个属性,需要⾃⼰单独设置⼀个标记来控制IE11当前是否为全屏状态。
javascript事件的用法JavaScript 事件的用法如下:1. 在HTML 元素上绑定事件:可以通过在HTML 元素的属性中添加事件处理函数来绑定事件。
例如,可以通过添加`onclick` 属性来定义当元素被点击时要执行的代码。
示例代码如下:html<button onclick="myFunction()">点击我</button><script>function myFunction() {alert("Hello World!");}</script>2. 通过JavaScript 绑定事件:可以使用JavaScript 来为元素绑定事件处理函数。
可以通过`addEventListener` 方法来添加事件处理函数。
示例代码如下:html<button id="myButton">点击我</button><script>document.getElementById("myButton").addEventListener("click", myFunction);function myFunction() {alert("Hello World!");}</script>3. 事件参数:事件处理函数可以接收事件对象作为参数,可以使用事件对象来获取关于事件的信息,如事件类型、触发事件的元素等。
示例代码如下:html<button onclick="myFunction(event)">点击我</button><script>function myFunction(event) {alert("事件类型: " + event.type);alert("触发事件的元素: " + event.target);}</script>4. 移除事件处理函数:可以通过`removeEventListener` 方法来移除通过`addEventListener` 添加的事件处理函数。
javascript的用法JavaScript是一种广泛应用于网页开发中的脚本语言,可以为网页增加动态效果和交互性。
它是一种强大而灵活的语言,可以通过嵌入在HTML文档中的<script>标签来使用。
以下是JavaScript的几个常见用法。
1. 网页交互JavaScript能够与用户进行交互,通过响应用户的操作来实现一些功能。
例如,可以使用JavaScript为网页的按钮添加点击事件,使用户点击按钮后触发相应的操作。
这样可以增加用户的互动性和使用体验,使网页更加生动活泼。
2. 表单验证JavaScript可以用来对表单进行验证,确保用户输入的数据符合要求。
通过在表单提交之前进行验证,可以防止无效或恶意的数据被提交到服务器端。
可以使用JavaScript对用户输入的内容进行格式、长度、大小写等方面的验证,并及时给出错误提示。
3. 动态内容加载JavaScript可以实现动态内容加载,无需刷新整个网页即可更新特定部分的内容。
通过使用Ajax技术,可以与服务器进行异步通信,从而实现在页面上动态加载新的数据,而无需重新加载整个页面。
这种方式可以大大提升用户体验,并提高网页的性能。
4. 数字运算和日期处理JavaScript是一种脚本语言,拥有强大的数学计算能力。
它支持基本的算术运算,如加、减、乘、除,还可以进行更高级的数学运算,如三角函数、指数运算等。
此外,JavaScript还内置了日期处理的功能,可以用来处理日期的格式化、计算和比较等操作。
5. 动画效果通过使用JavaScript,可以为网页添加各种动画效果,使网页更加生动有趣。
可以通过改变HTML元素的属性来实现动画效果,如改变元素的位置、颜色、大小等。
此外,还可以使用JavaScript配合CSS样式,利用过渡和动画属性来实现更复杂的动画效果。
6. 浏览器检测和兼容性处理JavaScript可以用来检测用户所使用的浏览器类型和版本,从而根据不同的浏览器提供不同的代码和功能支持,保证网页在不同浏览器上的兼容性。
JavaScript最新教案第一章:JavaScript简介1.1 课程目标了解JavaScript的历史和发展掌握JavaScript的基本概念和特点理解JavaScript在Web开发中的作用1.2 教学内容JavaScript的起源和发展JavaScript的语法和特点JavaScript的核心概念JavaScript在现代Web开发中的应用1.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答1.4 教学资源教案和演示文稿示例代码和练习题在线资源和参考资料1.5 教学评估课堂参与和讨论练习题和代码实现项目评估和反馈第二章:JavaScript基础语法2.1 课程目标掌握JavaScript的基本语法和结构理解变量、数据类型和运算符的使用学会使用控制结构和函数2.2 教学内容JavaScript的基本语法和结构变量和数据类型的定义和使用运算符的种类和功能控制结构的作用和实现函数的定义和调用2.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答2.4 教学资源教案和演示文稿示例代码和练习题在线资源和参考资料2.5 教学评估课堂参与和讨论练习题和代码实现项目评估和反馈第三章:JavaScript对象和数组3.1 课程目标理解对象的概念和作用掌握对象的创建和属性的操作学会使用数组和字符串的处理方法3.2 教学内容对象的概念和作用创建对象和使用构造函数属性和属性的操作数组的概念和操作方法字符串的处理和操作3.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答3.4 教学资源教案和演示文稿示例代码和练习题在线资源和参考资料3.5 教学评估练习题和代码实现项目评估和反馈第四章:JavaScript事件处理4.1 课程目标理解事件的概念和作用掌握事件处理的方法和技巧学会使用事件监听器和事件委托4.2 教学内容事件的概念和作用事件处理的方法和技巧事件监听器的使用和实现事件委托的原理和应用4.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答4.4 教学资源教案和演示文稿示例代码和练习题在线资源和参考资料4.5 教学评估练习题和代码实现项目评估和反馈第五章:JavaScript高级应用5.1 课程目标掌握JavaScript的高级特性学会使用ES6和ES7的新特性理解模块化和组件化的开发模式5.2 教学内容JavaScript的高级特性ES6和ES7的新特性模块化的概念和实现组件化的开发模式和应用5.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答5.4 教学资源教案和演示文稿示例代码和练习题在线资源和参考资料5.5 教学评估练习题和代码实现项目评估和反馈第六章:JavaScript DOM操作6.1 课程目标理解DOM的概念和结构掌握DOM的查询和修改方法学会使用DOM事件处理和动画6.2 教学内容DOM的概念和结构DOM的查询方法(getElementById, getElementsByClassName, querySelector等)DOM的修改方法(添加、删除、修改元素和属性)DOM事件处理(事件监听器、事件流、事件对象)DOM动画的实现(transition, animation等)6.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答6.4 教学资源教案和演示文稿示例代码和练习题6.5 教学评估课堂参与和讨论练习题和代码实现项目评估和反馈第七章:JavaScript网络请求7.1 课程目标理解网络请求的概念和原理掌握JavaScript中网络请求的实现学会使用协议和REST API7.2 教学内容网络请求的概念和原理JavaScript中的网络请求(XMLHttpRequest, Fetch API)协议的基本概念和状态码REST API的设计原则和实现7.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答7.4 教学资源教案和演示文稿示例代码和练习题7.5 教学评估课堂参与和讨论练习题和代码实现项目评估和反馈第八章:JavaScript模块化和打包8.1 课程目标理解模块化的概念和优势掌握JavaScript模块化的实现学会使用打包工具和构建流程8.2 教学内容模块化的概念和优势JavaScript模块化的实现(CommonJS, ES6模块)打包工具的使用(Webpack, Parcel, Rollup)构建流程和自动化(Gulp, Grunt, npm scripts)8.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答8.4 教学资源教案和演示文稿示例代码和练习题8.5 教学评估课堂参与和讨论练习题和代码实现项目评估和反馈第九章:JavaScript前端框架9.1 课程目标理解前端框架的概念和作用掌握常见前端框架的使用学会前端框架的原理和扩展9.2 教学内容前端框架的概念和作用常见前端框架(React, Vue, Angular)的使用和比较前端框架的原理和扩展(组件化、状态管理等)9.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答9.4 教学资源教案和演示文稿示例代码和练习题在线资源和参考资料9.5 教学评估课堂参与和讨论练习题和代码实现项目评估和反馈第十章:JavaScript项目实践10.1 课程目标理解项目实践的重要性掌握项目开发的流程和技巧完成一个简单的JavaScript项目10.2 教学内容项目实践的重要性项目开发的流程和技巧(需求分析、设计、编码、测试)完成一个简单的JavaScript项目(如待办事项列表、天气应用等)10.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答10.4 教学资源教案和演示文稿示例代码和练习题在线资源和参考资料10.5 教学评估课堂参与和讨论练习题和代码实现项目评估和反馈重点和难点解析一、JavaScript简介1.1 重点和难点解析JavaScript的历史和发展JavaScript的基本概念和特点JavaScript在Web开发中的作用二、JavaScript基础语法2.1 重点和难点解析变量和数据类型的定义和使用运算符的种类和功能控制结构的作用和实现函数的定义和调用三、JavaScript对象和数组3.1 重点和难点解析对象的概念和作用创建对象和使用构造函数属性和属性的操作数组的概念和操作方法字符串的处理和操作四、JavaScript事件处理4.1 重点和难点解析事件的概念和作用事件处理的方法和技巧事件监听器的使用和实现事件委托的原理和应用五、JavaScript高级应用5.1 重点和难点解析JavaScript的高级特性ES6和ES7的新特性模块化的概念和实现组件化的开发模式和应用六、JavaScript DOM操作6.1 重点和难点解析DOM的概念和结构DOM的查询方法DOM的修改方法DOM事件处理和动画七、JavaScript网络请求7.1 重点和难点解析网络请求的概念和原理JavaScript中的网络请求协议和REST API八、JavaScript模块化和打包8.1 重点和难点解析模块化的概念和优势JavaScript模块化的实现打包工具和构建流程九、JavaScript前端框架9.1 重点和难点解析前端框架的概念和作用常见前端框架的使用和比较前端框架的原理和扩展十、JavaScript项目实践10.1 重点和难点解析项目实践的重要性项目开发的流程和技巧完成一个简单的JavaScript项目全文总结和概括:本文针对“JavaScript最新教案”的十个章节进行了重点和难点的解析。
jsfind用法JavaScript中的jsfind用法在JavaScript中,jsfind是一个用于查找特定元素或值的功能。
它可以通过使用选择器、回调函数或其他方式来定位所需的内容。
下面将介绍一些常见的jsfind用法。
1. 使用选择器进行查找:使用jsfind可以通过选择器来查找匹配特定条件的元素。
例如,可以使用类选择器(.class),id选择器(#id)或标签选择器(tagname)来定位元素。
示例代码如下所示:```javascriptconst element = jsfind('.class');```这将返回第一个匹配选择器条件的元素。
2. 使用回调函数进行查找:另一种常见的jsfind用法是通过使用回调函数来查找所需的内容。
回调函数将传入每个元素作为参数,并返回满足特定条件的元素。
示例代码如下: ```javascriptconst elements = jsfind(element => element.value === 'example');```这将返回所有值为'example'的元素。
3. 使用其他方式进行查找:jsfind还可以使用其他方式来查找内容,例如通过属性值或其他自定义条件。
示例代码如下:```javascriptconst elements = jsfind('[data-attribute="value"]');```这将返回具有特定属性值的元素。
需要注意的是,jsfind的具体用法可能因库或框架的不同而略有变化。
因此,在使用jsfind之前,应仔细阅读文档并了解所用库或框架提供的具体用法。
总之,jsfind是JavaScript中常用的一种查找元素或值的工具。
通过选择器、回调函数或其他方式,可以灵活地定位所需的内容。
熟练掌握jsfind的用法将使开发者能够更有效地操作和处理DOM元素。
js search 正则JavaScript中的search方法是用于在字符串中搜索指定的正则表达式,并返回匹配结果的位置。
正则表达式是一种强大的模式匹配工具,它可以用于解析、验证和处理字符串。
在本文中,我们将深入探讨JavaScript中的search方法以及如何使用正则表达式进行字符串搜索。
一、search方法的基本用法在JavaScript中,我们可以使用search方法来在字符串中搜索指定的正则表达式。
search方法的语法如下:string.search(regexp)其中,string是要搜索的字符串,regexp是要匹配的正则表达式。
search方法返回的是第一个匹配项的索引,如果没有找到匹配项,则返回-1。
下面是一个简单的示例:var str = "Hello World";var result = str.search(/World/);console.log(result); // 输出 6在上面的示例中,我们使用search方法搜索字符串"Hello World"中的正则表达式/World/,返回的结果是匹配项"World"在字符串中的索引位置6。
二、正则表达式的语法在使用search方法时,我们需要使用正则表达式来指定要搜索的模式。
正则表达式由字符和元字符组成,用于定义字符串的模式。
下面是一些常用的正则表达式元字符:1. 字符类:用于匹配特定的字符,例如[abc]可以匹配a、b或c。
2. 范围类:用于匹配指定范围内的字符,例如[a-z]可以匹配任意小写字母。
3. 元字符:用于匹配特殊的字符或位置,例如\d可以匹配任意数字,\b可以匹配单词边界。
三、使用search方法进行字符串搜索接下来,我们将通过几个示例演示如何使用search方法进行字符串搜索。
示例1:搜索单词var str = "Hello World!";var result = str.search(/\bWorld\b/);console.log(result); // 输出 6在上面的示例中,我们使用search方法搜索字符串"Hello World!"中的正则表达式/\bWorld\b/,其中\b表示单词边界。
JavaScript中常⽤的事件1.onclick事件点击事件(onclick并不是js中的⽅法,onclick只是浏览器提供js的⼀个dom接⼝,让js可以操作dom,所以onclick⼤⼩写都是没问题的,⽐如HTML代码就不⽤区分⼤⼩写)例:<%@pagelanguage="Java"import="java.util.*"pageEncoding="UTF-8"%><!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>JavaScript的⼀些常⽤⽅法</title><scripttype="text/javascript">functionmyFunction(){alert("测试onclick点击事件");}</script></head><body><center><buttononclick="myFunction()">点击这⾥</button></center></body></html>onclick通常在下列基本对象中产⽣:button(按钮对象)、checkbox(复选框)、radio(单选框)、reset buttons(重置按钮)、submit buttons(提交按钮)2.onload事件可以body执⾏,<bodyonload="alert(123)"></body>,其中onload后⾯可以写⼀个⽅法,如:onload="test()",然后在JavaScript中写⼀个test()⽅法,则在页⾯⼀开始加载的时候会先调⽤这个⽅法<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%><!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>JavaScript的⼀些常⽤⽅法</title><scripttype="text/javascript">functiontest(){alert("测试onload⽅法");}</script></head><bodyonload="test()"></body></html>注意:此⽅法只能写在<body>标签之中3.onchange事件事件在内容改变的时候触发,和jQuery中的change()⽅法⼀样当内容改变时触发。
click() 对象.click() 使对象被点击。
closed 对象.closed 对象窗口是否已关闭true/falseclearTimeout(对象) 清除已设置的setTimeout对象clearInterval(对象) 清除已设置的setInterval对象confirm("提示信息") 弹出确认框,确定返回true取消返回falsecursor:样式更改鼠标样式hand crosshair text wait help default autoe/s/w/n-resizeevent.clientX 返回最后一次点击鼠标X坐标值;event.clientY 返回最后一次点击鼠标Y坐标值;event.offsetX 返回当前鼠标悬停X坐标值event.offsetY 返回当前鼠标悬停Y坐标值document.write(stModified) 网页最后一次更新时间document.ondblclick=x 当双击鼠标产生事件document.onmousedown=x 单击鼠标键产生事件document.body.scrollTop; 返回和设置当前竖向滚动条的坐标值,须与函数配合, document.body.scrollLeft; 返回和设置当前横向滚动务的坐标值,须与函数配合,document.title document.title="message"; 当前窗口的标题栏文字document.bgcolor document.bgcolor="颜色值"; 改变窗口背景颜色document.Fgcolor document.Fgcolor="颜色值"; 改变正文颜色document.linkcolor document.linkcolor="颜色值"; 改变超联接颜色document.alinkcolor document.alinkcolor="颜色值"; 改变正点击联接的颜色document.VlinkColor document.VlinkColor="颜色值"; 改变已访问联接的颜色document.forms.length 返回当前页form表单数document.anchors.length 返回当前页锚的数量document.links.length 返回当前页联接的数量document.onmousedown=x 单击鼠标触发事件document.ondblclick=x 双击鼠标触发事件defaultStatus window.status=defaultStatus; 将状态栏设置默认显示function function xx(){...} 定义函数isNumeric 判断是否是数字innerHTML xx=对象.innerHTML 输入某对象标签中的html源代码innerText divid.innerText=xx 将以div定位以id命名的对象值设为XXlocation.reload(); 使本页刷新,target可等于一个刷新的网页Math.random() 随机涵数,只能是0到1之间的数,如果要得到其它数,可以为*10,再取整Math.floor(number) 将对象number转为整数,舍取所有小数Math.min(1,2) 返回1,2哪个小Math.max(1,2) 返回1,2哪个大navigator.appName 返回当前浏览器名称navigator.appVersion 返回当前浏览器版本号navigator.appCodeName 返回当前浏览器代码名字erAgent 返回当前浏览器用户代标志onsubmit onsubmit="return(xx())" 使用函数返回值opener opener.document.对象控制原打开窗体对象prompt xx=window.prompt("提示信息","预定值"); 输入语句parent parent.框架名.对象控制框架页面return return false 返回值random 随机参数(0至1之间)reset() form.reset(); 使form表单内的数据重置split("") string.split("") 将string对象字符以逗号隔开submit() form对象.submit() 使form对象提交数据String对象的charAt(x)对象反回指定对象的第多少位的字母lastIndexOf("string") 从右到左询找指定字符,没有返回-1indexOf("string") 从左到右询找指定字符,没有返回-1LowerCase() 将对象全部转为小写UpperCase() 将对象全部转为大写substring(0,5) string.substring(x,x) 返回对象中从0到5的字符setTimeout("function",time) 设置一个超时对象setInterval("function",time) 设置一个超时对象toLocaleString() x.toLocaleString() 从x时间对象中获取时间,以字符串型式存在typeof(变量名) 检查变量的类型,值有:String,Boolean,Object,Function,Underfined window.event.button==1/2/3 鼠标键左键等于1右键等于2两个键一起按为3 window.screen.availWidth 返回当前屏幕宽度(空白空间)window.screen.availHeight 返回当前屏幕高度(空白空间)window.screen.width 返回当前屏幕宽度(分辨率值)window.screen.height 返回当前屏幕高度(分辨率值)window.document.body.offsetHeight; 返回当前网页高度window.document.body.offsetWidth; 返回当前网页宽度window.resizeTo(0,0) 将窗口设置宽高window.moveTo(0,0) 将窗口移到某位置window.focus() 使当前窗口获得焦点window.scroll(x,y) 窗口滚动条坐标,y控制上下移动,须与函数配合window.open() window.open("地址","名称","属性")属性:toolbar(工具栏),location(地址栏),directions,status(状态栏),menubar(菜单栏),scrollbar(滚动条),resizable(改变大小),width(宽),height(高),fullscreen(全屏),scrollbars(全屏时无滚动条无参数,channelmode(宽屏),left(打开窗口x坐标),top(打开窗口y坐标)window.location = 'view-source:' + window.location.href 应用事件查看网页源代码;a=new Date(); //创建a为一个新的时期对象y=a.getYear(); //y的值为从对象a中获取年份值两位数年份y1=a.getFullYear(); //获取全年份数四位数年份m=a.getMonth(); //获取月份值d=a.getDate(); //获取日期值d1=a.getDay(); //获取当前星期值h=a.getHours(); //获取当前小时数m1=a.getMinutes(); //获取当前分钟数s=a.getSeconds(); //获取当前秒钟数对象.style.fontSize="文字大小";单位:mm/cm/in英寸/pc帕/pt点/px象素/em文字高1in=1.25cm1pc=12pt1pt=1.2px(800*600分辩率下)文本字体属性:fontSize大小family字体color颜色fontStyle风格,取值为normal一般,italic斜体,oblique斜体且加粗fontWeight加粗,取值为100到900不等,900最粗,light,normal,bold letterSpacing间距,更改文字间距离,取值为,1pt,10px,1cmtextDecoration:文字修饰;取值,none不修饰,underline下划线,overline上划线background:文字背景颜色,backgroundImage:背景图片,取值为图片的插入路径点击网页正文函数调用触发器:1.onClick 当对象被点击2.onLoad 当网页打开,只能书写在body中3.onUnload 当网页关闭或离开时,只能书写在body中4.onmouseover 当鼠标悬于其上时5.onmouseout 当鼠标离开对象时6.onmouseup 当鼠标松开7.onmousedown 当鼠标按下键8.onFocus 当对象获取焦点时9.onSelect 当对象的文本被选中时10.onChange 当对象的内容被改变11.onBlur 当对象失去焦点onsubmit=return(ss())表单调用时返回的值直线border-bottom:1x solid black虚线border-bottom:1x dotted black点划线border-bottom:2x dashed black双线border-bottom:5x double black槽状border-bottom:1x groove black脊状border-bottom:1x ridge black1.边缘高光glow(color=颜色,strength=亮光大小)<br/>2.水平翻转fliph() 使对象水平翻转180度<br/>3.垂直翻转flipv() 使对象垂直翻转180度<br/>4.对象模糊blur(add=true/false direction=方向strength=强度)add指定是否按印象画派进行模糊direction模糊方向strength模糊强度5.对象透明alpha(opaction=0-100,finishopacity=0-100,style=0/1/2/3) opaction对象整体不透明值finishopacity当对象利用了渐透明时该项指定结束透明位置的不透明值style指定透明方式0为整体透明,1为线型透明,2为圆型透明,3为矩形透明6.去除颜色chroma(color=颜色值)使对象中颜色与指定颜色相同区域透明7.建立阴影dropshadow(color=阴影颜色,offx=水平向左偏离像素,offy=水平向下偏离像素)8.去色gray()使对象呈灰度显示9.负片效果invert()使对象呈底片效果10.高光light()使对象呈黑色显示11.遮盖mask(color=颜色)使整个对象以指定颜色进行蒙板一次opacity 表透明度水平.0~100,0表全透明,100表完全不透明finishopacity表想要设置的渐变透明效果.0~100.style 表透明区的形状.0表统一形状.1表线形.2表放射形.3表长方形.startx.starty表渐变透明效果的开始时X和Y坐标.finishx,finishy渐变透明效果结束时x,y 的坐标.add有来确定是否在模糊效果中使有原有目标.值为0,1.0表"否",1表"是". direction设置模糊的方向.0度表垂直向上,45度为一个单位.默认值是向左270度.left,right,down,up.strength 只能用整数来确定.代表有多少个像素的宽度将受到模糊影响.默认是5个. color要透明的颜色.offx,offy分别是x,y 方向阴影的偏移量.positive指投影方式.0表透明像素生成阴影.1表只给出不透明像素生成阴影.. AddAmbient:加入包围的光源.AddCone:加入锥形光源.AddPoint加入点光源Changcolor:改变光的颜色.Changstrength:改变光源的强度.Clear:清除所有的光源.MoveLight:移动光源.freq是波纹的频率,在指定在对象上一区需要产生多少个完事的波纹.lightstrength可对于波纹增强光影的效果.显著0~100正整数,正弦波开始位置是0~360度.0表从0度开始,25表从90度开始.strength表振幅大小.hand style="cursor:hand"crosshair style="cursor:crosshair"text style="cursor:text"wait style="cursor:wait"default style="cursor:default"help style="cursor:help"e-resize style="cursor:e-resize"ne-resize style="cursor:ne-resize"n-resize style="cursor:n-resize"nw-resize style="cursor:nw-resize"w-resize style="cursor:w-resize"s-resize style="cursor:s-resize"sw-resize style="cursor:sw-resize "se-resize style="cursor:se-resize"auto style="cursor:auto"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE> 数字输入控制,给数字加上千分符</TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><style>.inputRight {text-align: right;border: 1px #666666 dashed;font-size: 9pt;color: #993366;height: 18px;ime-mode : disabled;}</style><SCRIPT LANGUAGE="JavaScript">/*这些功能建议通过HTC来实现*///////////////数字输入控制function FormatInput(dotlen){var myEle=event.srcElement;var myValue=String.fromCharCode(event.keyCode);if (myEle.readOnly){return;}switch(dotlen){//原正则表达式(可以输入负数):/^[\-]?\d*\.?\d{0,0}$/case 0:{event.returnValue = regInput(myEle, /^\d*\.?\d{0,0}$/, myValue); break;}case 1:{event.returnValue = regInput(myEle, /^\d*\.?\d{0,1}$/, myValue); break;}case 2:{event.returnValue = regInput(myEle, /^\d*\.?\d{0,2}$/, myValue); break;}case 3:{event.returnValue = regInput(myEle, /^\d*\.?\d{0,3}$/, myValue); break;}case 4:{event.returnValue = regInput(myEle, /^\d*\.?\d{0,4}$/, myValue); break;}case 5:{event.returnValue = regInput(myEle, /^\d*\.?\d{0,5}$/, myValue); break;}case 6:{event.returnValue = regInput(myEle, /^\d*\.?\d{0,6}$/, myValue); break;}case 7:{event.returnValue = regInput(myEle, /^\d*\.?\d{0,7}$/, myValue); break;}case 8:{event.returnValue = regInput(myEle, /^\d*\.?\d{0,8}$/, myValue); break;}default :{event.returnValue = regInput(myEle, /^\d*\.?\d{0,0}$/, myValue); break;}}}function regInput(obj, reg, inputStr){var docSel = document.selection.createRange()if (docSel.parentElement().tagName != "INPUT") return falseoSel = docSel.duplicate()oSel.text = ""var srcRange = obj.createTextRange()oSel.setEndPoint("StartToStart", srcRange)var str = oSel.text + inputStr + srcRange.text.substr(oSel.text.length)return reg.test(str)}//给数字加上千分符by yuanzyfunction splitNumber(eValue){var intPart = "";var decPart = "";if (eValue.indexOf(",")>=0){eValue=eValue.replace(/,/g,"");}if (eValue.indexOf(".")>=0){intPart=eValue.split(".")[0];decPart=eValue.split(".")[1];}else{intPart = eValue;}var num = intPart+"";var re=/(-?\d+)(\d{3})/while(re.test(num)){num=num.replace(re,"$1,$2")}if (eValue.indexOf(".")>=0){eValue=num + "." + decPart;}else{eValue=num ;}return eValue;}function oFocus(){if (event.srcElement.readOnly) return;event.srcElement.value=event.srcElement.value.replace(/,/g,""); }function oBlur(){if (event.srcElement.value=="-"){event.srcElement.value="";}event.srcElement.value = splitNumber(event.srcElement.value);}</SCRIPT></HEAD><BODY><input class="inputRight" type='text' onfocus="oFocus();" onblur="oBlur();" onKeypress="FormatInput(2);" ></BODY></HTML>IE功能汇总<OBJECT id=WebBrowser height=0 width=0classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2></OBJECT> <INPUT onclick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开name=Button1><INPUT onclick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为name=Button2><INPUT onclick=document.all.WebBrowser.ExecWB(10,1) type=button value=属性name=Button3><INPUT onclick=document.all.WebBrowser.ExecWB(6,1) type=button value=打印name=Button><INPUT onclick=document.all.WebBrowser.ExecWB(8,1) type=button value=页面设置name=Button4><INPUT onclick=window.location.reload() type=button value=刷新name=refresh><INPUT onclick="window.external.ImportExportFavorites(true,'');"type=button value=导入收藏夹name=Button5><INPUT onclick="window.external.ImportExportFavorites(false,'');"type=button value=导出收藏夹name=Button32><INPUT onclick="window.external.AddFavorite(location.href, document.title)" type=button value=加入收藏夹name=Button22><INPUT onclick="window.external.ShowBrowserUI('OrganizeFavorites', null)" type=button value=整理收藏夹name=Submit2><INPUT onclick='window.location="view-source:" + window.location.href'type=button value=查看源文件name=Button7><INPUT onclick="window.external.ShowBrowserUI('LanguageDialog', null)" type=button value=语言设置name=Button6><INPUT onclick="document.execCommand('Cut')" type=button value=剪切> <INPUT onclick="document.execCommand('Copy')" type=button value=拷贝> <INPUT onclick="document.execCommand('Paste')" type=button value=粘贴><INPUT onclick="document.execCommand('Undo')" type=button value=撤消> <INPUT onclick="document.execCommand('Delete')" type=button value=删除><INPUT onclick="document.execCommand('Bold')" type=button value=黑体> <INPUT onclick="document.execCommand('Italic')" type=button value=斜体> <INPUT onclick="document.execCommand('Underline')" type=button value=下划线><INPUT onclick="document.execCommand('stop')" type=button value=停止> <INPUT onclick="document.execCommand('SaveAs')" type=button value=保存><INPUT onclick="document.execCommand('Saveas',false,'c:\\test.htm')"type=button value=另存为><INPUT onclick="document.execCommand('FontName',false,fn)" type=button value=字体><INPUT onclick="document.execCommand('FontSize',false,fs)" type=button value=字体大小><INPUT onclick="document.execCommand('refresh',false,0)" type=button value=刷新><INPUT onclick=window.location.reload() type=button value=刷新><INPUT onclick=history.go(1) type=button value=前进><INPUT onclick=history.go(-1) type=button value=后退><INPUT onclick=history.forward() type=button value=前进><INPUT onclick=history.back() type=button value=后退><INPUTonclick='window.external.ImportExportFavorites(true,"http://localhost");'/ type=button value=导入收藏夹><INPUTonclick='window.external.ImportExportFavorites(false,"http://localhost");'/ ty pe=button value=导出收藏夹><INPUT onclick="window.external.ShowBrowserUI('OrganizeFavorites', null)" type=button value=整理收藏夹><INPUT onclick="window.location = 'view-source:'+ window.location.href" type=button value=查看源文件><INPUT onclick="window.external.ShowBrowserUI('LanguageDialog', null)" type=button value=语言设置><INPUTonclick="window.external.AddFavorite('/hbzxf/', 阿好空间)" type=button value=加入收藏夹><INPUTonclick="window.external.addChannel('/hbzxf/')" type=button value=加入到频道><INPUTonclick="this.style.behavior='url(#default#homepage)';this.setHomePage('ht tp:///hbzxf/')" type=button value=设成主页>窗口打开自动最大化代码<!-- 窗口打开后最大化--><OBJECT id="max" type="application/x-oleobject"classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"><PARAMname="Command" value="Maximize"></OBJECT><script>if(window.screenLeft!=0)max.Click();</script><!-- 窗口打开后最大化结束-->利用脚本封装,方便实现网站悬浮广告下面是JS脚本(floatdiv.js)/*============================================== ========================浮动块支持脚本DESIGN BY : 彭国辉DATE: 2004-02-26SITE: /BLOG: /nhconchEMAIL: kacarton@文章为作者原创,转载前请先与本人联系,转载请注明文章出处、保留作者信息,谢谢支持!================================================ ======================*/var alLeft = 0, alCenter = 1, alRight = 2; //水平对齐方式var alTop = 0, alMiddle = 1, alBottom = 2; //垂直对齐方式var f = new Array();var cnt = 0;function floatDiv(objId, align, vAlign, x, y, smooth){/*浮动块对象数据结构:objId:对象IDalign:水平对齐方式,枚举型vAlign:垂直对齐方式,枚举型内容x, y:xy座标,整型smooth:平滑移动,布尔型*/this.objId = objId;this.align = align;this.vAlign = vAlign;this.x = x;this.y = y;this.smooth = smooth;}function addDiv(objId, align, vAlign, x, y, smooth){ //添加浮动块f[cnt++] = new floatDiv(objId, align, vAlign, x, y, smooth);}function floatMove(){ //重新定位各块位置var objX, objY;if (document.all){var d = document.body;//status = "scrollLeft:"+f[0].objId.style.pixelTop+"|offsetWidth:"+d.offsetWidth;for (var i=0; i<f.length; i++){switch (f[i].align){case alLeft : objX = d.scrollLeft + f[i].x; break;case alCenter: objX = d.scrollLeft + Math.ceil((d.offsetWidth - f[i].objId.offsetWidth)/2) + f[i].x; break;case alRight : objX = d.scrollLeft + d.offsetWidth - f[i].x -f[i].objId.offsetWidth - 20; break; //减滚动条20}switch (f[i].vAlign){case alTop : objY = d.scrollTop + f[i].y; break;case alMiddle: objY = d.scrollTop + Math.ceil((d.offsetHeight - f[i].objId.offsetHeight)/2) + f[i].y; break;case alBottom: objY = d.scrollTop + d.offsetHeight - f[i].y -f[i].objId.offsetHeight; break;}if (f[i].smooth) smoothMove(f[i].objId, objX, objY);else{f[i].objId.style.pixelLeft = objX;f[i].objId.style.pixelTop = objY;}}}if (yers){for (var i=0; i<f.length; i++){var objId = f[i].objId;switch (f[i].align){case alLeft : objX = pageXOffset + f[i].x; break;case alCenter: objX = pageXOffset +Math.ceil((window.innerWidth-objId.width)/2) + f[i].x; break;case alRight : objX = pageXOffset + window.innerWidth - f[i].x - document.objId.width; break;}switch (f[i].vAlign){case alTop : objY = pageYOffset + f[i].y; break;case alMiddle: objY = pageYOffset +Math.ceil(window.innerHeight/2) + f[i].y; break;case alBottom: objY = pageYOffset + window.innerHeight - f[i].y - document.objId.height; break;}if (t[i].smooth) smoothMove(f[i].objId, objX, objY);else{document.objId.left = objX;document.objId.top = objY;}}}setTimeout("floatMove();",50);}function smoothMove(obj, x, y){var percent;if (document.all){percent = .1 * (x - obj.style.pixelLeft);if (percent > 0) percent = Math.ceil(percent); else percent =Math.floor(percent);obj.style.pixelLeft += percent;percent = .1 * (y - obj.style.pixelTop);if (percent > 0) percent = Math.ceil(percent); else percent =Math.floor(percent);obj.style.pixelTop += percent;}if (yers){percent = .1 * (x - document.objId.left);if (percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent);document.objId.left += percent;percent = .1 * (y - document.objId.top);if (percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent);document.objId.top += percent;}}setTimeout("floatMove();",50);调用例子:<script language="javascript" src="lib/floatdiv.js"></script><script language="javascript">if (navigator.appName == "Netscape"){document.write("<layer id=ad_hr top=300 width=100 height=120><a href=/hr/040522.htm target=_blank><imgsrc='ad/hr40522.gif' width=120 height=180 border=0></a></layer>"); }else{document.write("<div id=ad_hr style='position:absolute;width:120;top:300;left:5;visibility: visible;z-index: 1'><ahref=/hr/040522.htm target=_blank><imgsrc='ad/hr40522.gif' width=120 height=180 border=0></a></div>");}addDiv(ad_hr, alRight, alTop, 0, 30, true);</script>[原创]自己定义的简单方法验证表单数据方法很简单,先是定义好要验证的数组比如:check_array[0]= new Array(title,留言主题不能为空!);然后判断,错误的就提示定义的内容,代码如下:<script language="javascript">//表单验证程序;//定义获取表单元素;function $(){var elements = new Array();for (var i = 0; i < arguments.length; i++) {var element = arguments[i];if (typeof element == 'string')element = document.getElementById(element);if (arguments.length == 1)return element;elements.push(element);}return elements;}function checkform(){//定义要验证的表单数组;var check_array=new Array();check_array[0]= new Array("title","留言主题不能为空!"); check_array[1]= new Array("name","姓名不能为空!"); check_array[2]= new Array("email","电子邮件不能为空!"); check_array[3]= new Array("phone","电话不能为空!");check_array[4]= new Array("note","留言内容不能为空!");//验证定义表单是否为空;for(var i=0;i<check_array.length;i++){if($(check_array[i][0]).value==""){alert(check_array[i][1]);$(check_array[i][0]).focus();return false;}}}</script>几个表单验证的function checkMail(obj,error){if (obj == null)return "NULL";if (obj.value == "")return "EMPTY";var filter =/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;if (filter.test(obj.value))return true;elsealert(error);return false;}function verifyDottedIP(cntrl,errmsg1,errmsg2,flag){ip_str = cntrl.value;if (ip_str == "") {if (flag == 1){alert(errmsg1);cntrl.select();return false;}return true;}else{varval = 0;vari = index = 0;while (index < ip_stIndexOf(".")){k = index;index = ip_str.indexOf(".", index);val = toNumber(ip_str, k, index);if (val < 0 || val > 255)break;i++; index++;}if (i == 3){if (index == ip_str.length){i = 2;} else {val = toNumber(ip_str,index, ip_str.length);if (val < 0 || val > 255) i = 2;}}if (i != 3) {alert(errmsg2);cntrl.select();return false;}}return true;}function verifyport(cntrl,errmsg1,errmsg2,flag) {varval = 0;port_str = cntrl.value;if (port_str == "") {if (flag == 1){alert(errmsg1);cntrl.select();return false;}}val = toNumber(port_str, 0, port_str.length);if (val < 0 || val > 65535){alert(errmsg2);cntrl.select();return false;}else{return true;}}function checkname(field,err_blank,err_space,err_invalid) {if (field.value.indexOf(" ") >=0){alert(err_space);field.focus();field.select();return false;}left_trim(field);right_trim(field);if (field.value =="" | field.value == null){alert(err_blank);field.focus();field.select();return false;}if (checkOtherChar(field.value, err_invalid)==false) {field.focus();field.select();return false;}if (isChinese(field.value)==true){field.focus();field.select();return false;}return true;}function isChinese(inputStr){iLength = inputStr.lengthfor (i = 0; i < iLength; i++)if (inputStr.charCodeAt(i) > 255){alert("Input error!");return true ;}return false ;}function left_trim(field){var tmp_string = field.value;while (''+tmp_string.charAt(0) == ' ')tmp_string = tmp_string.substring(1,tmp_string.length);field.value = tmp_string;}function right_trim(field){var tmp_string = field.value;while (''+tmp_string.charAt(tmp_string.length-1) == ' ')tmp_string = tmp_string.substring(0,tmp_string.length-1);field.value = tmp_string;}function checkOtherChar(str,errmsg) {for(var loop_index=0; loop_index<str.length; loop_index++) {if(str.charAt(loop_index) == '~'||str.charAt(loop_index) == '!'||str.charAt(loop_index) == '@'||str.charAt(loop_index) == '#'||str.charAt(loop_index) == '$'||str.charAt(loop_index) == '%'||str.charAt(loop_index) == '^'||str.charAt(loop_index) == '&'||str.charAt(loop_index) == '*'||str.charAt(loop_index) == '('||str.charAt(loop_index) == ')'||str.charAt(loop_index) == '+'||str.charAt(loop_index) == '{'||str.charAt(loop_index) == '}'||str.charAt(loop_index) == '|'||str.charAt(loop_index) == ':'||str.charAt(loop_index) == '"'||str.charAt(loop_index) == '<'||str.charAt(loop_index) == '>'||str.charAt(loop_index) == '?'||str.charAt(loop_index) == '`'||str.charAt(loop_index) == '='||str.charAt(loop_index) == '['||str.charAt(loop_index) == ']'||str.charAt(loop_index) == '\\'||str.charAt(loop_index) == ';'||str.charAt(loop_index) == '\''||str.charAt(loop_index) == ','||str.charAt(loop_index) == '.'||str.charAt(loop_index) == '/'){alert(errmsg);return false;}}return true;}function check_pwd_eq(element1,element2,errmsg) {if (element1.value == element2.value){return true;}else{alert(errmsg);element1.select();return false;}}function check_pwd(field,errmsg1){if (field.value == "") {alert(errmsg1);field.focus();return false;}return true;}function verifynum(cntrl,errmsg3,flag,errmsg1,errmsg2,from,to) {varval = 0;num_str = cntrl.value;if (num_str.indexOf(" ") >=0){alert(errmsg3);cntrl.focus();cntrl.select();return false;}if (flag == 1) {if (num_str == "") {alert(errmsg1);return false;}}val = toNumber(num_str, 0, num_str.length);if ((val < from || val > to) && (num_str != "")){alert(errmsg2);return false;}else{return true;}}判断浏览器类型<SCRIPT language=JavaScript>if(navigator.appVersion.indexOf("MSIE 6.") != -1 ){window.location = "111.htm" ;}</SCRIPT>按钮背景图片替换<input type=button style="background-image:url(a.gif)" value=test onmouseover="this.style.backgroundImage='url(b.gif)'" onmouseout='this.style.backgroundImage='url(a.gif)'' ID="Button1" NAME="Button1"/>document.getElementById(id) 的最简化调用/*--------------------------------------------------------------------------*/ /*** 这个函数就Ruby 了。