js：DOM和响应事件（一）

一，本例主要包括的使用getElementById 返回对拥有指定id的第一个对象引用，createElement 创建一个属性节点，getElementsByTagName 返回带有指定标签名的集合对象和onmouseover 用户在一个HTML元素上移动鼠标，onmouseout 用户从一个HTML元素上移开鼠标还有window中的一些方法

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">*{margin:0px;padding:0px}.box{background-color: burlywood;}.content td{width: 50px;height: 50px;background-color: gray;}table td{text-align: center;overflow:hidden;}.setWidth{/*通过3秒渐变赋值*/transition: all 3s;}/*旋转360度*/@keyframes myfirst{to{transform: rotate(0deg);}from{transform: rotate(360deg);}}/*从实体逐渐变透明*/@keyframes myfirst2{to{filter:alpha(Opacity=10);opacity: 0.1;}from{filter:alpha(Opacity=80);opacity: 1;}}.over-out2{animation: myfirst2 2s;}.over-out{animation: myfirst 1s;}.remove-sty{filter:alpha(Opacity=80);opacity: 1;}</style><!-- js是解析性语言，因此网页中的元素必须加载过后才可以访问--><script language="JavaScript">function $(oId){//通过oId寻找该节点var obj=document.getElementById(oId);return obj;}function addClass(obj, cn){var   cNames=obj.className;if(cNames.length==0){obj.className = cn;}else{obj.className +=(" "+cn);}}//字符串有一个split方法，用于拆分字符串function removeClass(obj,cn){var cs=obj.className;//使用split方法拆分cs字符串，赋值到cs数组cs =cs.split(" ");for(var i=0;i<cs.length;i++){if(cs[i]==cn){//删除从i开始的一个字符，cs.splice(i,1);}}//重新把数组cs转换成字符串，然后赋值给obj.ClassName完成删除obj.className=cs.join(" ");}function removeNode(obj){//window提示消息var f = window.confirm('是否删除图片');if(f){addClass(obj,"over-out2");//setTimeout延迟2秒调用内部函数setTimeout(function(){//通过寻找该节点的父节点来删除该节点
                             obj.parentNode.removeChild(obj);},2000);}else{alert("取消删除");}}function initImgs(){var imgs = new Array();//寻找当前页面的第二个自节点// var oBody=document.documentElement.lastChild ||  document.body;imgs.push("n1.jpg");imgs.push("n2.jpg");imgs.push("n3.jpg");imgs.push("n4.jpg");imgs.push("n5.jpg");for(var i=0;i<imgs.length;i++){//200px//createElement添加img节点var imgObj=document.createElement("img");var imgSrc = imgs[i];imgObj.src = imgSrc;//调用addClass方法为节点添加class属性addClass(imgObj,"setWidth");addClass(imgObj,"remove-sty");//为节点添加属性imgObj.style.width = "0px";imgObj.style.marginLeft = "0px";//通过$方法确认imgObj节点位置$("imgsId").appendChild(imgObj);imgObj.onclick=function(){//单击事件：通过window.event方法来确认被点击的节点var ss=window.event;var obj=ss.currentTarget;removeNode(obj);}}}window.onload = function(){initImgs();}function createImgs(){//寻找imgsId下是img的子节点var imgs=$("imgsId").getElementsByTagName("img");for(var i=0;i<imgs.length;i++){var imgObj=imgs[i];imgObj.style.width = "200px";imgObj.style.marginLeft = "20px";//鼠标指向元素事件：通过方法为节点添加over-out属性达到旋转目的imgObj.onmouseover = function(){addClass(this,"over-out");}//鼠标离开事件：通过方法删除over-out属性imgObj.onmouseout = function(){removeClass(this,"over-out");}}}</script></head><body><button οnclick="createImgs()">点击创建图片</button><!-- imgObj.parentNode.removeChild(imgObj);--><div id="imgsId"></div></body>
</html><!--window.onload = function(){$("abc").onmouseover = function(){this.style.color = "red";this.style.fontSize = "30px";};$("abc").onmouseout = function(){this.style.color = "black";this.style.fontSize = "15px";}
function test(){var ev=window.event;   //任何事件发生的时候都会有一个window.event对象，它表示的是当前事件对象。var obj= ev.currentTarget;alert(obj.innerText);
}-->

转载于:https://www.cnblogs.com/dybe/p/8045021.html

js：DOM和响应事件（一）相关推荐

java冒泡函数解释,JS DOM操作函数事件阻止事件冒泡
一函数 1.字符串函数 s.tolowerCase( ): -- 变小写 s.toupperCase( ): -- 变大写 s.substr( 2 , 8 ): -- 截取 ...
JS 获取和响应键盘按键事件
场景: 页面中需要设置快捷键. 下面Demo是组合按键按下事件,可直接使用,单个按键响应事件,只需要将 if 中的按键值更改至需要的键位即可,该例子引用百度静态库的jquery资源,需要在联网环境下 ...
js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例
本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: /p> "http://www.w3.org/TR/xht ...
JS 实现跨页事件响应
如题:在工作中遇到问题.主页面发出事件,该页面中嵌入的iframe的页面也要响应该事件操作.例如主页面登录后,该页面加载的iframe页也要根据登录情况作出不同的显示. 主页面 <!DOCTYP ...
【CyberSecurityLearning 50】JS 基础+函数+对象+事件
目录 JavaScript简介: JS 简单的语句如何在HTML中引入JS代码变量声明变量变量类型 null和undefined 数组对象流程控制 if语句判断 for循环 for ... ...
JS高级程序设计笔记——事件（一）
一.事件流假设有如下HTML代码: <!DOCTYPE html> <html> <head><title>Event</title> & ...
DOM对象之事件对象（Object《Event》）
DOM对象之事件对象(Object<Event>) HTML DOM 事件(DOM Objext:<Event>)允许Javascript在HTML文档元素中注册不同事件处理程 ...
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
js 里面的键盘事件对应的键码
js 里面的键盘事件对应的键码 js 里面的键盘事件经常用到,所以收集了键盘事件对应的键码来分享下: keyCode 8 = BackSpace BackSpace keyCode 9 = Tab T ...

js：DOM和响应事件（一）

js：DOM和响应事件（一）相关推荐

最新文章

热门文章