公章在线制作网站做不了,深圳网站建设美橙互联,wordpress商城对接支付接口,seo优化是做什么的事件
事件可以是浏览器行为#xff0c;也可以是用户行为。当这些行为发生时#xff0c;可以自动触发对应的JS函数的运行#xff0c;称之为事件发生。JS的事件驱动指的就是行为触发代码运行的特点
常见事件
鼠标事件 onclick#xff1a;当用户点击某个对象时调用的事件句…事件
事件可以是浏览器行为也可以是用户行为。当这些行为发生时可以自动触发对应的JS函数的运行称之为事件发生。JS的事件驱动指的就是行为触发代码运行的特点
常见事件
鼠标事件 onclick当用户点击某个对象时调用的事件句柄 oncontextmenu在用户点击鼠标右键打开上下文菜单时触发 ondblclick当用户双击某个对象时调用的事件句柄 onmousedown鼠标按钮被按下 onmouseenter当鼠标移动到元素上时触发 onmouseleave当鼠标移出元素时触发 onmousemove鼠标被移动 onmouseover鼠标移动到某元素上 onmouseout鼠标从某元素移开 onmmouseup鼠标按键被松开 键盘事件 onkeydown某个键盘按键被按下 onkeypressdown某个键盘按键被按下并松开 onkeyup某个键盘按键被松开 表单事件 onblur元素失去焦点时触发 onchange该事件在表单元素的内容发生改变时触发 onfocus元素获取焦点时触发 onfocusin元素将要获取焦点时触发 onfocusout元素将要失去焦点时触发 oninput元素获取用户输入时触发 onreset表单重置时触发 onsearch用户向搜索域输入文本时触发 onselect用户选取文本时触发 onsubmit表单提交时触发 事件的绑定方式
事件的绑定方式有两种一是通过元素的属性绑定二是通过DOM编程动态绑定
注意事项 一个事件可以同时绑定多个函数一个元素可以绑定多个事件 通过元素的属性绑定
在元素内加上属性事件名”函数名()” 就能让事件发生时触发指定的函数
例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescriptfunction testFocus(){console.log(获得焦点了)}function testLoseFocus(){console.log(失去焦点)}function testChange(){console.log(内容改变)}function testChange2(value){console.log(选项改变为value)}function testSumit(){alert(提交成功)}function testReset(){alert(重置了)}/script
/head
bodyform action表单常见事件.html methodget onsubmittestSumit() onresettestReset()用户昵称:input typetext namerealName onfocustestFocus() onblurtestLoseFocus() onchangetestChange()br登录账号:input typetext namelogoinNamebrinput typesubmit namesmt value注册 input typereset nameres value清空br选择城市:select namecity onchangetestChange2(this.value)option value1赣州/optionoption value2吉安/optionoption value3南昌/optionoption value4九江/option/select/form
/body
/html通过DOM编程动态绑定
附页面加载事件onload即页面加载完后才触发
事件的触发除了可以是DOM编程触发之外还可以是DOM编程触发
通过DOM获得要操作的元素以及绑定事件的操作为
//通过dom获得要操作的元素var btn document.getElementById(btn1)btn.onclickfunction(){alert(按钮单击了)}但是由于html代码要由上而下执行要想将此操作写在头标签中就要使用到onload。
将以上操作放在一个函数假设名为ready内在body标签中加上属性οnlοad”ready()“在页面加载完后即整个html代码执行函数ready内的操作最后加载出来而id为btn1的元素更早加载出来就可以将此操作放在头标签中例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescriptfunction ready(){//通过dom获得要操作的元素var btn document.getElementById(btn1)btn.onclickfunction(){alert(按钮单击了)}}/script
/head
body onloadready()button idbtn1按钮/button
/body
/html可以简写为
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescriptwindow.onloadfunction(){//通过dom获得要操作的元素var btn document.getElementById(btn1)btn.onclickfunction(){alert(按钮单击了)}}/script
/head
bodybutton idbtn1按钮/button
/body
/htmlBOM编程
BOM是Browser Object Model的简写即浏览器对象模型。
BOM由一系列对象组成是访问、控制、修改浏览器的属性和方法(通过window对象及属性的一系列方法 控制浏览器行为的一种编程)
BOM没有统一的标准每种客户端都可以自定标准)。
BOM编程是将浏览器窗口的各个组成部分抽象成各个对象通过各个对象的API操作组件行为的一种编程
BOM编程的对象结构如下
window顶级对象代表整个浏览器窗口 location对象window对象的属性之一,代表浏览器的地址栏history对象window对象的属性之一,代表浏览器的访问历史screen对象window对象的属性之一,代表屏幕navigator对象window对象的属性之一代表浏览器软件本身document对象window对象的属性之一,代表浏览器窗口目前解析的html文档console对象window对象的属性之一,代表浏览器开发者工具的控制台localStorage对象window对象的属性之一代表浏览器的本地数据持久化存储sessionStorage对象window对象的属性之一,代表浏览器的本地数据会话级存储 常见API
window对象的API
三种弹窗方式 alert信息提示框 prompt信息输入框 confirm信息确认框 setTimeout定时执行指定函数需要的两个参数分别为一个函数和一个指定的毫秒数
这些函数前的window.可以省略
例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescriptfunction fun1(){window.alert(hello)}function fun2(){var aa window.prompt(请输入)console.log(aa)}function fun3(){var bb window.confirm(确定吗)console.log(bb)}function fun4(){window.setTimeout(function(){console.log(hello)},5000)}/script
/head
bodybutton onclickfun1()信息提示框/buttonbutton onclickfun2()信息确认框/buttonbutton onclickfun3()信息输入框/buttonbutton onclickfun4()五秒后向控制台打印hello/button
/body
/htmlhistory属性的API history.forward()向前翻页下一页 history.back()向后翻页上一页 history.go(n)向前翻n页 例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescriptfunction funA(){history.back()}function funB(){history.forward()}/script
/head
bodybutton onclickfunA()上一页/buttonbutton onclickfunB()下一页/buttona hrefhttp://www.atguigu.com尚硅谷/a
/body
/htmllocation属性的API
location.href网页的地址可以操作其属性进行赋值达到跳转页面的目的
sessionStorage和localStorage的API
sessionStorage是存储会话级别的数据即浏览器关闭即清除
localStorage是存储持久级别的数据即浏览器关闭还在 sessionStorage.setItem()和localStorage.setItem()存储数据数据的格式为key-value格式即两个参数第一个是key第二个是value sessionStorage.getItem()和localStorage.getItem()获取数据参数为数据的key值返回值为value值 sessionStorage.removeItem()和localStorage.removeItem()移除数据参数为想要移除的数据的key值 console属性的API
console.log()向控制台打印
DOM编程
DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改以实现网页数据和样式动态变化效果的编程。
document对象代表整个html文档可以用来访问页面中的所有元素是最复杂的一个dom对象。
根据HTML代码结构特点document对象本身是一种树形结构的文档对象
DOM编程的步骤获得DOM树—从document中获取要操作的元素—对元素进行操作
获取页面元素的几种方式
通过document获得元素 document.getElementById()根据元素的Id值获取页面上的唯一的一个元素 document.getElementByTagName()根据标签名获取一个或多个元素 document.getElementByName()根据元素的name属性获取指定name的元素 document.getElementByClassName()根据元素的class属性值获取指定的元素 通过父元素获取子元素
假如通过document获取了父元素a操作元素a使用a.children就可以获得a的所有子元素组成的集合
a.firstElementChild通过父元素a获取a的第一个子元素
a.lastElementChild通过父元素a获取a的最后一个子元素
通过子元素获取父元素
假如通过document获取了子元素b操作元素b使用b.parentElement就可以获得b的父元素
通过当前元素获取兄弟元素
假如通过document获取了子元素b操作元素b使用b.previousElementSibling就可以获得b的前一个子元素使用b.nextElementSibling就可以获得b的后一个子元素
对元素进行操作
操作元素属性值
先获取元素再使用 元素名.属性名”属性值” 为元素赋新的属性值即可操作元素属性值
操作元素样式
先获取元素再使用 元素名.style.样式名”样式” 为元素赋新的样式即可操作元素样式
原始样式名中的中横线”-”在操作样式时要去掉然后将横线后的第一个字母大写例border-radius — borderRadius
操作元素文本
先获取元素再使用 元素名.innerText“文本内容” 或元素名.innerHTML”识别HTML语法的文本内容” innerText双标签元素中间的文本不会识别HTML语法 innerHTML双标签元素中间的文本会识别HTML语法 操作元素的例子
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescriptfunction changeAttribute(){var in1 document.getElementById(in1)in1.typebuttonin1.valueworld}function changeStyle(){var in1 document.getElementById(in1)in1.style.coloryellowin1.style.borderRadius5px}function changeText(){var div1 document.getElementById(div01)div1.innerTextworld}/scriptstyle#in1{color: red;}/style
/head
bodyinput typetext valuehello idin1brbutton onclickchangeAttribute()变化属性/buttonbutton onclickchangeStyle()变化样式/buttondiv iddiv01hello/divbutton onclickchangeText()变化文本/button
/body
/html增删元素 document.createElement(“标签名”)创建元素节点并返回但不会自动添加到文档中 document.createTextNode(“文本值”)创建文本节点并返回但不会自动添加到文档中 element.appendChild(ele)将ele添加到元素element的所有子节点后面 parentEle.insertBefore(newEle,targetEle)将newEle插入到targetEle前面 parentEle.replaceChild(newEle, oldEle)用新节点替换原有的旧子节点 element.remove()删除元素element 例一个按钮在有序列表最后处增加一条吉安再一个按钮删除吉安
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescriptfunction addJA(){var ja document.createElement(li)ja.idjaja.innerText吉安var cityul document.getElementById(city)cityul.appendChild(ja)}function removeJA(){var ja document.getElementById(ja)ja.remove()}/script
/head
bodyul idcityli idbj北京/lili idsh上海/lili idsz深圳/lili idgz赣州/li/ulhrbutton onclickaddJA()增加吉安/buttonbutton onclickremoveJA()删除吉安/button
/body
/htmlJS中的正则表达式
var reg /正则表达式/修饰符 定义一个正则表达式
reg.test(str)验证字符串str是否满足正则表达式
正则表达式的修饰符
g对整个字符串进行查找即全局匹配
i忽略大小写的匹配
m执行多行匹配
正则表达式语法见网址正则表达式 – 语法 | 菜鸟教程 (runoob.com)
