哪个建站系统适合外贸商城网站建设,中国十大购物网站排行榜,网站上怎么在图片里面做链接,wordpress+社交链接文章目录 前言一、事件处理程序 1.JavaScript 常用事件2.事件处理程序的调用二、常用对象 1.Window 对象2.String 对象3.Date 对象总结 前言 JavaScript 语言是事件驱动型的。这意味着#xff0c;该门语言可以通过事件触发来调用某一函数或者一段代码。该文还简单介绍了Window…文章目录 前言一、事件处理程序 1.JavaScript 常用事件2.事件处理程序的调用二、常用对象 1.Window 对象2.String 对象3.Date 对象总结 前言 JavaScript 语言是事件驱动型的。这意味着该门语言可以通过事件触发来调用某一函数或者一段代码。该文还简单介绍了Window 、String、Date 对象如何使用。 一、事件处理程序 JavaScript 可以以事件驱动的方式直接对客户端的输入做出响应无需经过服务器端程序。JavaScript 简化了图形界面的交互操作使得其更加简单直接。 什么是事件处理程序 JavaScript 与 Web 页面之间的交互是通过用户操作浏览器页面时触发事件来实现的。例如当用户点击页面按钮时会触发按钮的 onclick 事件从而执行 onclick 调用的事件处理程序等等。事件处理程序是用于响应某个事件而执行的处理程序。它可以是任意 JavaScript 语句但通常使用特定的自定义函数Function来对事物进行处理。
1.JavaScript 常用事件 JavaScript 语言有很多的常用事件。
JavaScript 的常用事件 事件何时触发onabort对象载入被中断时触发onblur元素或窗口本身失去焦点时触发onchange改变select元素中的选项或其他表单元素失去焦点并且在其获取焦点后内容发生过改变时触发onclick单击鼠标时触发。当光标的焦点在按钮上并按下 Enter 键时也会触发该事件ondblclick双击鼠标时触发onerror出现错误时触发onfocus任何元素或窗口本身获得焦点时触发onkeydown键盘上的按键包括 Shift 或 Alt 等键被按下时触发如果一直按着某键则会不断触发。当返回 false 时取消默认动作onkeypress键盘上的按键被按下并产生了一个字符时发生。也就是当按下 Shift 或 Alt 等键时不触发。如果一直按下某键时会不断触发。当返回 false 时取消默认动作。onkeyup释放键盘上的按键时触发onload页面完全载入后在 Window 对象上触发当所有框架都载入后在框架集上触发img标记指定的图像完全载入后在其上触发或 object 标记指定的对象完全载入后在其上触发。onmousedown单击任何一个鼠标键时触发onmousemove鼠标在某个元素上移动时持续触发onmouseout将鼠标从某个指定的元素上移开时触发onmouseover鼠标移到某个元素上时触发onmouseup释放任意一个鼠标按键时触发onreset点击重置按钮时在 form 上触发onresize窗口或框架的大小发生改变时触发onscroll在任何带滚动条的元素或窗口上滚动时触发onselect选中文本时触发onsubmit单击提交按钮时在form 上触发onunload页面完全卸载后在 Window 对象上触发或者所有框架都卸载后在框架集上触发
2.事件处理程序的调用 在使用事件处理程序对页面进行操作时最重要的是如何通过对象的事件来指定事件处理程序。在 JavaScript 中调用事件处理程序复杂繁琐但可以供程序员进行更多的代码操作在 HTML 中调用事件处理程序简单实用但是更多复杂的交互不易实现。开发过程中可以根据实际情况来选择。 1在 JavaScript 中调用 在 JavaScript 中调用事件处理程序时首先需要获得要处理对象的引用然后将要执行的处理函数赋值给对应的事件。 实操创建一个按钮点击该按钮元素会触发事件 onclick从而调用程序 function() 函数。
input namebt_submit typebutton value提交scriptvar b_savedocument.getElementByld(bt_submit);b_save.onclickfunction(){alert(点击了提交按钮);}/script document.getElementById()方法是JavaScript中的一个DOM方法用于根据元素的id属性获取元素对象。它接受一个参数即元素的id属性值然后返回具有该id的元素对象。通过这个方法我们可以通过元素的id来访问和操作DOM树中的元素。 运行结果 在上面的代码中一定要将 input 标记代码放在 JavaScript 代码的上方否则将会报出 bt_submit 为空或不是对象 的错误提示。 在 JavaScript 中指定事件处理程序时事件名称必须是小写才能正确响应事件。 2在 HTML 中调用 在 HTML 中分配事件处理程序只需要在 HTML 标记中添加相应的事件并在其中指定要执行的代码或是函数名即可。 实操
input namebt_submit typebutton value提交 onclickalert(数据内容已提交) 运行结果 如上图所示在 HTML 中的事件属性里添加相应的 Script 语句即可通过事件触发程序。 二、常用对象 JavaScript 是一门基于对象的语言它可以应用自己创建的对象。JavaScript 的常用对象有 Window、String、Date 对象。
1.Window 对象 Window 对象即浏览器窗口对象该对象是一个全局对象它表示浏览器窗口或框架并提供了与浏览器窗口和框架相关的方法和属性。 通过Window对象可以访问和操作窗口大小、位置、URL、文档元素、浏览历史记录等。 Window 对象同 Math 对象一样不需要使用 new 关键字创建对象实例而是直接使用对象名.成员的格式来访问其属性或方法。 1Window 对象的属性
Window 对象的常用属性 属性功能描述document对窗口或框架中含有文档的 Document 对象的只读引用defaultStatus一个可读写的字符用于指定状态栏中的默认消息frames表示当前窗口中所有 Frame 对象的集合location用于代表窗口或框架的 Location 对象。如果将一个 URL 赋予该属性则浏览器将加载并显示该 URL 指定的文档length窗口或框架包含的框架个数history对窗口或框架的 History 对象的只读引用name用于存放窗口对象的名称status一个可读写的字符用于指定状态栏中的当前信息top表示最顶层的浏览器窗口parent表示包含当前窗口的父窗口opener表示打开当前窗口的父窗口closed一个只读的布尔值表示当前窗口是否关闭。当浏览器窗口关闭时表示该窗口的 Window 对象并不会消失不过其 closed 属性被设置成了 trueself表示当前窗口screen对窗口或框架的 Screen 对象的只读引用获取屏幕尺寸、颜色深度等信息navigator对窗口或框架的 Navigator 对象的只读引用通过 Navigator 对象可以获得与浏览器相关的信息 2Window 对象的方法
Window 对象的常用方法 方法功能描述alert()弹出一个警告对话框confirm()显示一个确认对话框单击确认按钮时返回 true否则返回 falseprompt()弹出一个提示对话框并要求输入一个简单的字符串blur()将键盘焦点从顶层浏览器窗口中移走。在多数浏览器上这将使窗体移到最后面close()关闭窗口focus()将键盘焦点赋予顶层浏览器窗口。在多数浏览器上这将使窗体移到最前面open()打开一个新窗口scrollTo(x,y)将滚动页面滚动到x,y的坐标指定的位置scrollBy(offsetx,offsety)按照指定的位移量来滚动窗口setTimeout(timer)在经过指定的时间后再执行代码clearTimeout()取消对指定代码的延迟运行moveTo(x,y)将窗口移动到一个绝对位置moveBy(offsetx,offsety)将窗口按照指定位移量移动到某处resizeTo(x,y)设置窗口的大小resizeBy(offsetx,offsety)按照指定的位移量设置窗口的大小用于扩大或缩小窗口正值扩大负值缩小print()相当于浏览器工具栏中的 打印 按钮setInterval()周期性执行指定的代码clearInterval停止周期性地执行代码 由于 Window 对象使用十分频繁又是其他对象的父对象所以在使用 Window 对象的属性和方法时JavaScript 允许省略 window 对象的名称。 例如 window.alert(Hellow world);alert(Hellow world); 以上两行代码的效果是一样的。注意代码里的 window 开头字母是小写 在 Window 对象中 open() 方法和 close() 方法在实际网站开发中经常用到。 1open() 方法 open() 方法用于打开一个新的浏览器窗口并在该窗口中添加指定 URL 地址的网页。该方法的语法格式如下
windowVarwindow.open(url,windownname,windowFeatures); windowVar当前打开窗口的对象。如果 open() 方法执行成功则 windowVar的值为 Window 对象否则该值为空值。 url目标窗口的 URL。如果 URL 是一个空字符串则浏览器将打开一个空白窗口允许使用 write() 方法创建动态 HTML。 windowname用于指定新窗口的名称该名称可以作为a标记和form的 target 属性的值。如果该参数指定了一个已经存在的窗口那么 open() 方法将不再创建一个新窗口而只是一个返回该指定窗口的对象。 windowFeatures对窗口属性进行设置的值具体可选参数如下表所列 对窗口属性进行设置的可选参数 参数功能描述width窗口的宽度height窗口的高度top窗口顶部距离屏幕顶部的像素数left窗口左端距离屏幕左端的像素数scrollbars是否显示滚动条值为 yes 或 no 可以通过设定值决定是否显示resizable设定窗口大小是否固定值为 yes 或 no可以通过设定值决定是否固定toolbar浏览器工具栏包括后退及前进按钮等值 yes 或 no可以通过设定值决定是否显示menubar菜单栏一般包括文件、编辑以及其他菜单项值为 yes 或 no可以通过设定值决定是否显示location地址栏用于输入 URL 的浏览器文本区值为 yes 或 no可以通过设定值决定是否显示 windowFeatures 参数需要开发者根据不同参数来填写对应数据。 实操在一个Html页面中使用 open() 方法来弹出另一个窗口。
htmlheadtitle网站/title/headbodyscriptwindow.open(test.html,test,width80,height80,left80);/script/body
/html 运行结果 以前我们上网点击某处时会莫名其妙地弹出许多页面广告这个原理和上面的差不多。不过现在先进的浏览器可以拦截弹窗了。 2close() 方法 close() 方法用于关闭当前窗口。该方法的语法格式如下
window.close(); 实操页面中添加 关闭 按钮当用户单击 关闭 按钮时响应关闭页面。
input nameclose typebutton classbtn_grey value关闭 onclickwindow.close() 运行结果 2.String 对象 String 对象是动态对象需要创建对象实例后才能引用其属性和方法。在 JavaScript 中可以直接在字符串后面加上点 . 去调用 String 对象的属性和方法。剩下的内容和在 Java 中使用String 基本无差。 1属性 String 对象最常用的属性是 length该属性返回 String 对象的长度。该语法格式如下
string.length 返回值一个只读的整数。代表字符串的字符个数一个汉字一字符。 实例
这是一个字符串.length; 运行结果 2方法 String 对象提供了很多用于对字符串进行操作的方法。
String 对象的常用方法 方法功能描述anchor(name)为字符串对象中的内容两边加上 HTML 的a namename/a标记对big()为字符串对象中的内容两边加上 HTML 的big/big标记对bold()为字符串对象中的内容两边加上 HTML 的b/b标记对charAt(index)返回字符串对象中指定索引号的字符组成的字符串内容为位置的有效值为 0 到字符串长度减 1 的连接起的数值。若指定索引位置超出了有效范围返回一个空字符串charCodeAt(index)返回一个整数该整数表示字符串对象中指定位置处的字符的 Unicode 编码concat(sl,...,sn)调用方法的字符串与指定字符串结合结果返回新字符串fontcolor为字符串对象中的内容两边加上 HTML 的font/font标记对并设置 color 属性可以是颜色的十六进制值也可以是颜色的预定义名fontsize(size)为字符串对象中的内容两边加上 HTML 的font/font标记对并设置 size 属性indexOf(pattern)查询全字符串中第一次出现的 patten 字符查到后返回该参数的位置值int值。如果该字符中不包含要查找的字符则返回 -1indexOf(patten,startIndex)查询全字符串中第一次出现的 patten 字符查到后返回该参数的位置值int值。如果该字符中不包含要查找的字符则返回 -1。不过检索位置从 startIndex 指定的位置开始查找lastIndexOf(patten)从最后一个字母开始查询第一次查询到的 patten 字符查到后返回该参数的位置值int值。如果该字符中不包含要查找的字符则返回 -1lastIndexOf(patten,startIndex)从最后一个字母开始查询第一次查询到的 patten 字符查到后返回该参数的位置值int值。如果该字符中不包含要查找的字符则返回 -1。不过检索位置从 startIndex 指定的位置开始倒查localeCompare(s)用特定比较方法比较字符串与 s 字符串。如果字符串相等则返回 0否则返回一个非 0 数字值
下面是 String 的一些方法的使用 1indexOf() 方法 indexOf() 方法用于返回 String 对象内第一次出现字符串的地方。 语法
string.indexOf(subString,startIndex); subString要在 String 对象中查找的子字符串。 startIndex该整数值指出在 String 对象内开始查找的起点。 String 对象的索引值是从 0 开始算起的。 实操查询字符串 Hellow world! 字符串中起点为 5 的遇见的第一个字母w的位置
scriptvar string Hellw world!var result string.indexOf(w,5);alert(索引位位5开始索引第一个字母w所在的位置是result);
/script 运行结果 2substr() 方法 substr() 方法用于返回指定字符串的一个子串。语法格式如下
string.substr(start,length) start用于指定获取子字符串的起始下标如果是一个负数那么从字符串的尾部开始算起位置。-1 指字符串最后一个字符-2 指字符串倒数第二个字符等等。 length用于指定获取子字符串中字符的个数。若忽略该参数则从 start 开始位置截取到字符串结尾。 实操在字符串 你若安好便是晴天 字符串中截取拼接出 晴天安好 字符串。
scriptvar string 你若安好便是晴天var result1 string.substr(2,2);var result2 string.substr(7);alert(原话string\n截取内容result2result1);
/script 运行结果 3subtring() 方法 substring() 方法用于返回指定字符串的一个字串。语法格式如下
string.substring(from,to) from用于指定要获取子字符串的第一个字符在 string 中的位置。 to用于指定要获取子字符串的最后一个字符在 string 中的位置。 注to值不会截取到截取到的最后一位值是 to值-1 实操截取字符串天上飘来几个字那都不是事字符串的 不是
scriptvar string 天上飘来几个字那都不是事var result1 string.substring(10,12);alert(原话string\n截取内容result1);
/script 运行结果 4replace() 方法 replace() 方法用于替换一个与正则表达式匹配的字串。语法格式如下
string.replace(regExp,substring); regExp一个正则表达式。如果正则表达式中设置了表示 g那么该方法将用替代字符串替代检测到的所有与模式匹配的子串否则只替换所检测到的第一个与模式匹配的子串。 subString用于指定替换文本或生成替换文本的函数。如果 subString 是一个字符串那么每个匹配都将由该字符串替换。 substring 中的 ”$“ 字符的意义 字符替换文本$1,$2,...,$99与 regExp 中的第1~99个子表达式匹配的文本$与 regExp 相匹配的子串$位于匹配字串左侧的文本$位于匹配子串右侧的文本$$直接量 $ 符号 实操去掉字符串中的首尾空格。
scriptfunction trim(){var strform1.oldString.value;if(str){alert(请输入原字符串);form1.oldString.focus();return;}else{var objExp/(^\s*)|(\s*$)/g;strstr.replace(objExp,); }form1.newString.valuestr;}
/script 使用正则表达式将有字符串首尾有空格的删去。 运行结果 5split() 方法 split() 方法用于将字符串分割成字符串数组。语法格式如下
string.split(delimiter,limit); delimiter字符串或正则表达式用于指定分隔符。 limit用于指定返回数组的最大长度。如果设置了该参数返回的子字符串长度不会比这个值大。 返回值一个字符串数组。 在使用 split() 方法分割数组时返回的数组不包括 delimiter 自身。 3.Date 对象 JavaScript 的 Date 对象可以对日期和时间进行操作。比如做一个页面上的实时钟表等例子。 1.创建 Date 对象 Date 对象是一个关于日期和时间的对象。它具有动态性必须使用 new 关键字实例化Date对象。语法格式如下
dateObj new Date()
dateObj new Date(dateValue)
dateObj new Date(year,month,date,hours,minutes,seconds,ms) ms表示毫秒。 month表示月份。从零开始计数month 实际月份1 2.Date 对象的方法 Date 对象没有直接访问的属性只具有获取、设置日期和时间的方法。
Date 对象的常用方法 方法功能描述getFullYear()返回 Date 对象中的年份4位数表示采用本地时间或世界时getMonth()返回 Date 对象中的月份0~11采用本地时间或世界时getDate()返回 Date 对象中的日期1~31采用本地时间或世界时getDay()返回 Date 对象中的星期0~6采用本地时间或世界时getHours()返回 Date 对象中的小时0~23采用本地时间或世界时 实操在页面中创建一个实时的时钟。
scriptwindow.onloadfunction(){window.setInterval(function() { realSysTime(document.getElementById(clock)); }, 1000);}function realSysTime(clock){var nownew Date();var yearnow.getFullYear();var monthnow.getMonth();var datenow.getDate();var daynow.getDay();var hournow.getHours();var minunow.getMinutes();var secnow.getSeconds();monthmonth1;var arr_weeknew Array(星期日,星期一,星期二,星期三,星期四,星期五,星期六);var weekarr_week[day];var timeyear年month月date日week hour:minu:sec;clock.innerHTML当前时间time;}
/script 运行结果 总结 以上就是 JavaScript 的事件处理程序和常用对象的介绍需要简单回顾这方面知识的同学可以迅速来过一遍基础。有补充或指正的内容欢迎在评论区中留言。
