网站建站费用多少钱,怎么开电商,网站空间怎么建站,最好的公文写作网站文章目录 一、CSS操作1.1 html元素的style属性1.2 元素节点的style属性1.3 cssText属性 二、事件2.1 事件处理程序2.1.1 html事件2.1.2 DOM0事件#xff08;适合单个事件#xff09;2.1.3 DOM2事件#xff08;适合多个事件#xff09; 2.2 事件之鼠标事件2.3 事件之Event事… 文章目录 一、CSS操作1.1 html元素的style属性1.2 元素节点的style属性1.3 cssText属性 二、事件2.1 事件处理程序2.1.1 html事件2.1.2 DOM0事件适合单个事件2.1.3 DOM2事件适合多个事件 2.2 事件之鼠标事件2.3 事件之Event事件对象2.3.1 Event.target2.3.2 Event.type2.3.3 Event.preventDefault2.3.4 Event.stopPropagation() 2.4 事件之键盘事件2.5 事件之表单事件2.5.1 input事件2.5.2 select事件2.5.3 change事件2.5.3 reset事件、submit事件 三、定时器3.1 setTimeout3.1 setInterval() 四、防抖 一、CSS操作
1.1 html元素的style属性
使用网页元素节点的setAttribute方法直接操作网页元素的style属性。
div.setAttribute(style,background-color:red;border:1px solid black;);1.2 元素节点的style属性
var divStyle document.querySelector(div).style;
divstyle.backgroundColor red;
divstyle.border 1px solid black;
divstyle.width 100px;
divstyle.height 100px;
divstyle.fontsize 10em1.3 cssText属性
var divStyle document.querySelector(div).style;
divStyle.cssText background-color: red;border: 1px solid black;height: 100px;width: 100px;;二、事件
2.1 事件处理程序
2.1.1 html事件
缺点html和js没有分开
!DOCTYPE htm1
htm1head langenmeta charsetUTF-8titleJs事件详解--事件处理/title/headbodydiv iddivbutton idbtn1 onclickdemo()按钮/button/divscriptfunction demo() {alert(he11o htm]事件处理);}/script/body/htmIonclick为鼠标事件
2.1.2 DOM0事件适合单个事件
优点html和js是分离的
!DOCTYPE htm1
htm1head langenmeta charsetUTF-8titleJs事件详解--事件处理/title/headbodybutton idbtn按钮/buttonscriptvar btndocument.getElementById(btn)btn.onclickfunction(){console.log(点击了);}/script/body/htmI2.1.3 DOM2事件适合多个事件
优点事件不会被覆盖
!DOCTYPE htm1
htm1head langenmeta charsetUTF-8titleJs事件详解--事件处理/title/headbodybutton idbtn按钮/buttonscriptvar btndocument.getElementById(btn)btn.addEventListener(click,function(){console.log(点击了1);})btn.addEventListener(click,function(){console.log(点击了2);})/script/body/htmI2.2 事件之鼠标事件 !DOCTYPE htm1
htm1head langenmeta charsetUTF-8titleJs事件详解--事件处理/title/headbodybutton idbtn1鼠标事件之单击/buttonbutton idbtn2鼠标事件之双击/buttonscriptvar btndocument.getElementById(btn1)var btndocument.getElementById(btn2)btn1.onclickfunction(){console.log(单击); }btn2.ondblclickfunction(){console.log(双击);}/script/body/htmI其他代码均和以上的类型相同。
2.3 事件之Event事件对象
事件发生以后会产生一个事件对象作为参数传给监听函数 Event对象属性
Event.TargetEvent.type Event对象方法Event.preventDefaultEvent.stopPropagation
!DOCTYPE htm1
htm1head langenmeta charsetUTF-8titleJs事件详解--事件处理/title/headbodybutton idbtn1按钮/buttonscriptvar btndocument.getElementById(btn1)//Event事件对象 其实就是参数btn1.onclickfunction(event){console.log(event); }/script/body/htmI2.3.1 Event.target
返回事件当前所在的节点点击谁就打印出来谁。
//html代码为
// p idpara Hello /p
!DOCTYPE htm1
htm1head langenmeta charsetUTF-8titleJs事件详解--事件处理/title/headbodybutton idbtn1按钮/buttonscriptvar btndocument.getElementById(btn1)//Event事件对象 其实就是参数btn1.onclickfunction(event){console.log(event.target); event.target.innerHTML点击之后;/*点击按钮会变成这个字符串*/}/script/body/htmI2.3.2 Event.type
返回一个字符串表示事件类型。事件的类型是在生成事件的时候。
2.3.3 Event.preventDefault
此方法取消浏览器对当前事件的默认行为比如点击链接后浏览器默认会跳转到另一个页面使用这个方法以后就不会跳转了。
btn.οnclickfunction(e){e.preventDefault();console.log(点击A标签);} 2.3.4 Event.stopPropagation()
stopPropagation方法阻止事件在 DOM 中继续传播防止再触发定义在别的节点上的监听函数但是不包括在当前节点上其他的事件监听函数
btn.οnclickfunction(e){e.stopPropagation();//阻止事件冒泡console.log(btn);} 2.4 事件之键盘事件
键盘事件由用户打击键盘触发主要有keydown、keypress、keyup三个事件。
keydown: 按下键盘时触发keypress: 按下有值的键时触发即按下 Ctrl、Alt、Shift、Meta 这样无值的键这个事件不会触发。对于有值的键按下时先触发keydown事件再触发这个事件。keyup:松开键盘时触发该事件
username.οnkeypressfunction(e){console.log(keypress事件);}event对象 keyCode:唯一标识 var usernamedocument.getElementById(“username”); username.οnkeydοwnfunction(e){ if(e.keyCode13){ console.log(“回车”); } }
2.5 事件之表单事件
表单事件是在使用表单元素及输入框元素可以监听的一系列事件
2.5.1 input事件
input事件当 input、selet、textarea 的值发生变化时触发,即数据发生改变触发此事件。 对于复选框 ( input typecheckbox ) 或单选框 ( input typeradio)用户改变选项时也会触发这个事件 input事件的一个特点就是会连续触发比如用户每按下一次按键就会触发一次input事件。
var usernamedocument.getElementById(username);
username.οninputfunction(e){console.log(e.target.value);}2.5.2 select事件
select事件在input、textarea里面选中文本时触发
//html代码如下
//input idtest typetext valueselect me/
var elemdocument.getElementById(test);
elem.addEventListener(select,function(e){console.log(e.type);},false);2.5.3 change事件
Change事件当 input、selet、textarea 的值发生变化时触发它与input最大的不同就是不会连续触发只有当全部修改完成时才会触发。
var emaildocument.getElementById(email);
email.οnchangefunction(e){console.log(e.target.value);}2.5.3 reset事件、submit事件
这两个事件发生在表单对象 form上而不是发生在表单的成员上。 reset事件当表单重置(所有表单成员变回默认值)时触发 submit事件当表单数据向服务器提交时触发。注意submit事件的发生对象是form元素而不是buton元素因为提交的是表单而不是按钮
form idmyForm onsubmitsubmitHandlebutton onclickresetHandle重置数据/buttonbutton提交/button
/formvar myForm document.getElementById(myForm)
function resetHandle(){myForm.reset();}
function submitHandle(){console.1og(提交);}三、定时器
JavaScript 提供定时执行代码的功能成。。它们向任务队列添加定时任务 叫做定时器 (timer)主要由 setTimeout0 和 setlnterval0 这两个函数来完
3.1 setTimeout
setTimeout 函数用来指定某个函数或某段代码在多少毫秒之后执行。它返回一个整数表示定时器的编号以后可以用来取消这个定时器。
var timerIdsetTimeout(func|code,delay);setTimeout 函数接受两个参数第一个参数 fun|code 是将要推迟执行的函数名或者一段代码第二个参数 delay 是推迟执行的毫秒数.
setTimeout(function(){console.log(定时器)},1000)3.1 setInterval()
setinterval 函数的用法与 setTimeut 完全一致区别仅仅在于 setintervl 指定某个任务每隔一段时间就执行一次也就是无限次的定时执行
vat timersetInterval(function(){console.log(2);},1000) 通过setInterval方法实现网页动画
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#someDiv{width:100px;height:100px;background:red;}/style
/head
bodydiv idsomeDiv/divscriptvar divdocument.getElementById(someDiv);var opacity1;//opacity 透明度范围0-1var fadersetInterval(function(){opacity-0.5;if(opacity0){ div.style.opacityopacity; }else{clearInterval(fader);}},30);/script
/body
/html四、防抖
定义对于短时间内连续触发的事件滚动事件让某个时间期限内事件函数只执行一次。
