总结和代码

一、定时器


1、循环定时器的设置和取消


(1)启动循环定时器:setlnterval()


循环定时器,调用一次就会创建并循环执行一个定时器


格式:setInterval(调用方法,毫秒值); //毫秒值就是循环周期


(2)停止循环定时器clearInterval()


setInterval方法在创建一个定时器的同时,还会安徽一个定时器的ID,该ID就代表这个定时器


此定时器ID在当前页面是不能重复的


我们可以通过clearInterval()方法,指定摸个循环定时器停止


格式 : clearInterval(定时器ID);


2、一次性定时器的设置和取消


(1)启动一次性定时器:setTimeout()


一次性定时器,调用一次就会创建并执行一个定时器一次


格式:setTimeout(调用方法,毫秒值);


(2)停止一次性定时器clearTimeout()


setTimeout方法在创建一个定时器的同时,还会返回一个定时器的ID,该ID就代表这个定时器


此定时器ID在当前页面是不能重复的


我们可以通过clearTimeout方法,指定某个一次性定时器停止


格式:clearTimeout(定时器ID);


二、location对象


location 对象包含浏览器地址栏信息


常用属性:href 设置或返回完整的URL


设置href属性,浏览器就会跳转到对应的路径


三、DOM对象


1、DOM对象是什么?有什么作用?


  DOM(Document Object Model) 文档对象模型


    文档:标记型文档(HTML等)


DOM是将标记型文档中所有内容(标签、文本、属性)都封装成对象,通过操作对象的属性或方法,来达到操作或者改变HTML展示效果的目的


2、DOM树介绍



文档标题


我的连接

我的标题



上述HTML文档会被浏览器由上到下依次加载并解析


每个标签会被加载成DOM树上的一个元素节点对象


每个标签的属性会被加载成一个属性节点对象


每个标签的内容体会被加载成一个文本节点对象


整个DOM树,是一个文档节点对象,即DOM对象


一个HTML文档加载到内存中就会形成一个DOM对象


3、DOM树的特点


必定会有一个跟节点


每个节点都是节点对象


常见的节点关系: 父子节点关系


文本节点对象没有子节点(叶子节点)


每个节点都有一个父节点,零到多个子节点


只有根节点没有父节点(html)


四、获取元素对象的四种属性


在javaScript中,我们可以通过DOM对象的4种方式获取对应的元素对象。


getElementByid(); 通过元素ID获取对应蒜素对象,如果找不到,返回null


getElementsByName(); 通过元素的name属性获取符合要求的所有元素,如果找不到,返回空数组


getElementByTagName(); 通过元素的元素名属性获取符合要求的所有元素,如果找不到,返回空数组


getElementsByClassName();  通过元素的class属性获取符合要求的所有元素,如果占不到,返回空数组


注:获取魔偶个(些)元素节点对象,必须保证元素节点对象被加载到内存中


五、与三俗对象常见属性


value


元素对象.value,获取元素对象的value属性值


className


元素对象.className,获取元素对象的class属性


元素对象.className=属性值,设置元素对象class属性值


checked


元素对象.checked,获取元素的checked属性值


元素对选哪个.checked=属性值,设置元素对象的checked属性值,修改单选/复选的选中与否


注:HTML中checked="checked",javascriot中返回trye


innerHtml


元素对象.innerHTML,获取元素对象的内容体


元素对象.innerHTML=值,设置元素对象的内容体


六、js事件


1、js事件是什么?有什么作用?


通常鼠标或热键的动作我们称之为事件(Event),例如点击,标案提交,值发生改变,鼠标移入,移出。。。


通过js事件,我们可以全程页面的指定特效


2、js事件驱动机制简述


页面上的特效,我们乐意理解在js事件驱动机制下进行


js事件驱动机制:


  事件源:专门产生事件的组件


事件:由事情源所产生的动作或者事件


监听器:专门处理事件源所产生的事情


注册/绑定监听器:让监听器时刻监听事件源是否制定事件产生,如果事件源产生制定事件,则用监听器处理


3、常见的js事件


(1)点击事件


点击事件:有鼠标或热键点击元素组件时触发


(2)焦点事件


获取焦点事件(oncfocus)


焦点:即整个页面做多仅有一个焦点


例如:文本框中闪烁的小竖线


通常焦点也能反映出用户目前的关注点,或者正在操作的组件


获取焦点事件:当元素组件获取焦点时触发


失去焦点事件(onblur)


  失去焦点事件:元素组件失去焦点时触发


(3)域内蓉改变事件(onchange)


域内容改变事件,元素组件的值发生改变时触发


(4)加载完毕事件(obload)


加载完毕事件:元素组成加载完毕时触发


获取元素对象时,要保证元素对象先加载,建议是吧元素对象的代码放在body最后,如果想放在前面,也可以写在onload中


(5)表单提交事件(onsubmit)


表单提交事件:表单的提交按钮被点击时触发


注意:改时间需要返回boolean类型的值来执行提交/阻止表单数据的操作


    事件得到true  提交表单数据


    事件得到false  阻止表单数据提交


(6)键位弹起事件,在组件中输入某些内容时,键盘键位弹起时触发该事件


(7)常用鼠标事件


鼠标移入事件(onmouseover)


鼠标移入事件:鼠标移入某个元素组件时触发


鼠标移出事件(onmouseout)


鼠标移出事件:鼠标移出某个元素组件时触发


4、js事件的两种绑定方式


(1)元素事件句柄绑定


将事件以元素的方式写到标签内部,进而绑定对应函数


事件句柄绑定方式


优点:1、开发快捷;2、传参方便;3、可以绑定多个函数


缺点:js和HTML代码高度柔和在一起,不利于多部门的项目开发维护


(2)DOM绑定方式


使用DOM的属性方式绑定事件


DOM绑定方式:


优点:使用HTML代码和JS代码完全分离


缺点:1、不能传递参数(解决:匿名函数是可以的);


2、一个事件只能绑定一个函数,(解决:匿名函数内部可以绑定对个函数的)






  倒计时




  倒计时


 




 



你可能感兴趣的:(总结和代码)