一，本例主要包括的使用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 onclick="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);
}-->
