<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: #0f0;
}
</style>
</head>
<body>
<!--<a href="#" id="btn">新浪</a>
<ul id="list">
<li><a href="#">首页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">关于我们</a></li>
</ul>-->
<!--<button class="box">0</button>
<button class="box">0</button>-->
<div class="box" id="box">
<button id="btn">0</button>
<button>0</button>
<button>0</button>
<input id="txt" type="text">
</div>
<script>
//添加元素
/* var myDiv = document.getElementById('list');//获取父节点div
var li = document.createElement('li');//新建一个li标签
var text = document.createTextNode('li');//新创建一个文本
var att = document.createAttribute('class');//新建一个属性class
myDiv.insertBefore(li, myDiv.childNodes[0]);//给[0]子元素之前添加标签
myDiv.appendChild(li);//为div添加子节点 最后一位
li.appendChild(text);//为li添加文本
li.setAttributeNode(att);//为span添加一个class名
att.value = 'democlass';//添加属性值
//替换元素
item.replaceChild(text.node, item.childNodes[0]);//
//删除元素
myDiv.removeChild(li);//
myDiv.parentNode.removeChild(li);//删除自己
var list = document.getElementById('list');
while (list.removeChilds.length) {//删除全部子节点
list.removeChilds(list.childNodes[0]);
}
//操作样式 必须驼峰命名
myDiv.style.marginTop;
var box = document.getElementById('myDiv');
box.style.marginTop = '100px';//必须带单位
box.style.marginBottom = '100px';*/
//事件
//简单计数器实现
//最早出现onclick
var btn = document.getElementsByTagName('button');
for (var i = 0; i < btn.length; i++) {
btn[i].addEventListener('click' ,function() {//w3c规定实现添加事件
this.innerHTML = parseInt(this.innerHTML) + 1;
});
}
//addEventListener添加
//attachEventListener移除
//IE使用
//srcElement添加
//removeElement移除
var btn = document.getElementsByTagName('button');
for (var i = 0; i < btn.length; i++) {
btn[i].addEventListener('click' ,function(e) {//w3c规定实现添加事件
e.srcElement.innerHTML = parseInt(e.srcElement) + 1;//提出函数节省内存
});
}
//w3c添加事件
//document.addEventListener(event事件, function函数, useCapture状态)
//兼容方法
function addEvent(el, eventName, fn) {
if (el.attachEvent) {
el.attachEvent('on', eventName, fn);
} else if (el.addEventListener){
el.addEventListener(eventName, fn)
} else{
el['on' + eventName] = fn;
}
}
//删除方法待添加
/* function removeEvent(el, eventName, fn) {
if (el.attachEvent) {
el.attachEvent('on', eventName, fn);
} else if (el.addEventListener){
el.addEventListener(eventName, fn)
} else{
el['on' + eventName] = fn;
}
}*/
// 事件模型/
// 1.捕获事件 2 目标阶段 3冒泡阶段
/* var box = document.getElementById('box');
box.addEventListener('click', function (e) {
console.log(e.target);//当前对象
console.log(e.currentTarget);//监听对象一般用这个
}, false);*/
var box = document.getElementById('box');
//事件委托
box.addEventListener('click', function (e) {
/* var btn = e.target;
btn.innerHTML = parseInt(btn.innerHTML) + 1;*/
console.log('我是box监听');
// console.log(e.currentTarget);
console.log(e.eventPhase);
});//false冒泡阶段
var btn1 = document.getElementById('btn');
//事件委托
btn1.addEventListener('click', function (e) {
console.log('我是btn监听');
// console.log(e.currentTarget);
console.log(e.eventPhase);
e.stopPropagation();
e.cancelable = true;
});//false冒泡阶段
//事件委托
document.body.addEventListener('click', function (e) {
console.log('我是body监听');
// console.log(e.currentTarget);
console.log(e.eventPhase);
});//false冒泡阶段
btn1.addEventListener('contextmenu', function (e) {
// alert('我帅吗');
e.preventDefault();
console.log(e.clientX);//获取鼠标坐标x
console.log(e.clientY);//获取鼠标坐标y
});//false冒泡阶段
var txt = document.getElementById('txt');
txt.addEventListener('keydown', function (e) {
console.log(e.keyCode);
e.preventDefault();
});
// event.target 点击永远是当前对象！！！！
// event.currentTarget点击获取的是监听对象！！！！
// keycode==判断ascll码 判断用户输入的是文字还是数字 字母什么的
// 阻止默认行为 e.preventDefault(); 用法 e.preventDefault(); window.addEventListener('contextmenu', function (e) 例如阻止默认菜单
// 阻止提交表单
// stopPropagation阻止冒泡 用法 e.stopPropagation();
// ie下e.cancelable = true使用 + e.stopPropagation(); 两句同时写
//var btn = document.getElementById('btn')
//btn.innerText = '百度'
//btn.innerHTML = '<b>搜狐</b>'
/*function changeGg(id, href, text) {
var btn = document.getElementById(id);
btn.innerHTML = '<a href ="' + href + '">' + text + '</a>'
}*/
/**
* 轮播图更换
*/
/* function FocusPictureAdReplace (date){
this.init(date) //自动调用
}
FocusPictureAdReplace.prototype = {
init: function (data) {
var FosPicConId = document.getElementById('FosPicConId');
var FosPicConLi = FosPicConId.getElementsByClassName('FosPicConLi');
var FosPicConLi03 = FosPicConLi[data.index - 1];
FosPicConLi03.innerHTML = '\
<a href="'+ data.linkURL + '" target="_blank">\
<img src="'+ data.imgURL + '" alt="'+ data.txt +'" title="'+ data.txt +'" width="360" height="220">\
</a>\
<div class="FosPicConTxtBg">\
</div>\
<div class="FosPicConTxt">\
<a href=" '+ data.linkURL + ' " target="_blank">'+ data.txt +' </a>;\
</div>';
}
};
var data2 = {
index: 3,
imgURL: "http://d.ifengimg.com/w650_h390/p3.ifengimg.com/a/2016_43/2d768f933a227fa_size115_w396_h280.jpg",
txt: "测试文本",
linkURL: "http://www.ifeng.com"
};
var data3 = {
index: 4,
imgURL: "http://d.ifengimg.com/w650_h390/p3.ifengimg.com/a/2016_43/2d768f933a227fa_size115_w396_h280.jpg",
txt: "测试文本4",
linkURL: "http://www.ifeng4.com"
};
var focusPictureAdReplace = new FocusPictureAdReplace(data2);
focusPictureAdReplace.init(data3); //手动调用
*/
/*
function FocusPictureAdReplace() { //创建一个类函数
}
FocusPictureAdReplace.prototype={//对象原型内写方法
replace:function (date) {
var box1 = document.getElementsByClassName('inner');
var box2 = box1.document.getElementsByClassName('item current');
var box3 = box2[date.index - 1];
box3.innerHTML = '\
<a class="skuLink" href="' + date.linkURL + '" target="_blank" title="'+ date.txt + '">\
<img class="skuImg" data-exposal="" data-src="http://img1.360buyimg.com/imgb/s220x220_jfs/t4432/281/186902003/93575/4d5f30c2/58cb5b6aN371ae45c.jpg" src="'+ date.imgURL + '" data-done="1">\
<div class="skuInfo">\
<p class="skuName ">'+ date.txt +'</p>\
<p class="skuAdContent "></p>\
<p class="skuPrice10389382483 skuPriceInner">豪情你哲哥</p>\
</div>\
<div class="bg-shadow"></div>\
</a> '
}
}
var data2 = {
index: 3,
imgURL: "http://d.ifengimg.com/w650_h390/p3.ifengimg.com/a/2016_43/2d768f933a227fa_size115_w396_h280.jpg",
txt: "测试文本",
linkURL: "http://www.ifeng.com"
}
var focusPictureAdReplace = new FocusPictureAdReplace()
focusPictureAdReplace.replace(data2)
*/
/**
* ----鼠标监听事件移入监听元素内部的触发情况----
* mouseover在元素内部会触发 并且只会触发一次离开时候不触发 碰到子元素也会触发
* mouseenter在元素内部触发 只触发一次离开时候不触发 碰到子元素不触发
* mousemove在元素内部触发 在元素内部一直会触发事件
*/
/**
* ----鼠标监听事件移出监听元素内部的触发情况----
* mouseout在元素离开时候触发 并且移到子元素时候会触发
* mouseleave在元素内部触发 移到子元素不会触发
* mousemove 在元素内部一直会触发事件
*/
</script>
</body>
</html>
