function ver(id) {
return document.getElementById(id);
}
//兼容性
//设置任意的标签中间的任意文本内容
function setInnerText(element,text) {
if(typeof element.textContent=="undefined"){
element.innerText=text;
}else {
element.textContent=text;
}
}
//获取任意的标签中间的文本内容
function getInnerText(element) {
if(typeof element.textContent=="undefined"){
return element.innerText;
}else {
return element.textContent;
}
}
//封装节点兼容性代码
//获取最后一个父级元素的第一个子级元素
function getFirstElement(element) {
if (element.firstElementChild) {
return element.firstElementChild;
} else {
var node = element.firstChild;
while (node && node.nodeType != 1) {
node = node.nextSibling;
}
return node;
}
}
//获取最后一个父级元素的最后一个子级元素
function getLastElementChild(element) {
if(element.lastElementChild){
return element.lastElementChild;
}else {
var node=element.lastChild;
while (node&&node.nodeType!=1){
node=node.previousSibling;
}
return node;
}
}
//获取某个元素的所有兄弟元素
function getSiblings(element) {
if (!element)return;
var elements = [];
var ele = element.previousSibling;
while (ele) {
if (ele.nodeType === 1) {
elements.push(ele);
}
ele = ele.previousSibling;
}
ele = element.nextSibling;
while (ele) {
if (ele.nodeType === 1) {
elements.push(ele);
}
ele = ele.nextSibling;
}
return elements;
}
//获取某个元素的后一个兄弟元素
function getNextElement(element) {
if (element.nextElementSibling) {
return element.nextElementSibling
} else {
var node = element.nextSibling;
while (node && node.nodeType != 1) {
node = node.nextSibling;
}
return node;
}
}
//绑定事件兼容代码
//为任意元素.绑定任意的事件，任意的元素，事件的类型，事件处理函数
function addEventlistener(element,type,fn) {
//判断浏览器是否支持这个方法
if(element.addEventListener){
element.addEventListener=(element,type,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else {
element["on"+type]=fn;
}
}
//解绑事件的兼容
//为任意的一个元素，解绑对应的事件
function removeEventListener(element,type,fnName) {
if(element.removeEventListener){
element.removeEventListener(type,fnName,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,fnName);
}else {
element["on"+type]=null;
}
}
//计算后的样式属性---- 一个元素的任意的一个样式属性值
function getStyle(element,attr) {
//判断这个浏览器是否支持这个方法
return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}
//匀速动画
function animate(element,json,fn) { //element--元素 attr--属性名字 target--目标位置
//清理定时器
clearInterval(element.timeId);
element.timeId=setInterval(function () {
var flag=true;//默认，假设，全部到达目标
for(var attr in json){
//判断这个属性中attr中是不是opacity
if (attr=="opacity"){
//获取元素的当前的透明度，当前的透明度放大100倍
var current=getStyle(element,attr)*100;
//目标的透明度放大100倍
var target=json[attr]*100;
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
element.style[attr]=current/100;
}else if(attr=="zIndex"){ //判断这个属性attr中是不是zIndex
//层级改变就是直接改变这个属性的值
element.style[attr]=json[attr];
}else {
//获取元素当前位置
var current=parseInt(getStyle(element,attr));//数字类型
//当前的属性对应的目标值
var target=json[attr];
//移动的步数
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
element.style[attr]=current+"px";
}
//判断是否到达目标
if(current!=target){
flag=false;
}
}
if(flag){
//清理计时器
clearInterval(element.timeId);
//回调函数,所有属性达到目标后才能使用
if(fn){
fn();
}
}
//测试代码
console.log("目标位置:"+target+",当前位置:"+current+",每次移动的步数:"+step)
},20);
}
//兼容代码
//把代码放在一个对象中
var evt={
//window.event和事件参数对象e的兼容
getEvent:function (evt) {
return window.event||evt;
},
//可视区域横坐标的兼容代码
getClientX:function (evt) {
return this.getEvent(evt).clientX;
},
//可视区域纵坐标的兼容代码
getClientY:function (evt) {
return this.getEvent(evt).clientY;
},
//页面向左卷曲出去的横坐标
getScrollLeft:function () {
return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
},
//页面向上卷曲出去的纵坐标
getScrollTop:function () {
return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
},
//相对于页面的横坐标（pageX或者是clientX+scrollLeft）
getPageX:function (evt) {
return this.getEvent(evt).pageX?this.getEvent(evt).pageX:this.getClientX(evt)+this.getScrollLeft();
},
//相对于页面的纵坐标（pageY或者是clientY+scrollTop）
getPageY:function (evt) {
return this.getEvent(evt).pageY?this.getEvent(evt).pageY:this.getClientY(evt)+this.getScrollTop();
}
};
//获取的是页面向上或者向左卷曲出去的距离的值,返回的是对象
function getScroll() {
return {
top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0,
left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft||0
};
}
//返回当前浏览器是什么类型的浏览器
function userBrowser(){
var browserName=navigator.userAgent.toLowerCase();
if(/msie/i.test(browserName) && !/opera/.test(browserName)){
console.log("IE");
}else if(/firefox/i.test(browserName)){
console.log("Firefox");
}else if(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){
console.log("Chrome");
}else if(/opera/i.test(browserName)){
console.log("Opera");
}else if(/webkit/i.test(browserName) &&!(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))){
console.log("Safari");
}else{
console.log("不知道什么鬼!");
}
}
//foreach的兼容代码
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(callback, thisArg) {
var T, k;
if (this == null) {
throw new TypeError(' this is null or not defined');
}
// 1. Let O be the result of calling toObject() passing the
// |this| value as the argument.
var O = Object(this);
// 2. Let lenValue be the result of calling the Get() internal
// method of O with the argument "length".
// 3. Let len be toUint32(lenValue).
var len = O.length >>> 0;
// 4. If isCallable(callback) is false, throw a TypeError exception.
// See: http://es5.github.com/#x9.11
if (typeof callback !== "function") {
throw new TypeError(callback + ' is not a function');
}
// 5. If thisArg was supplied, let T be thisArg; else let
// T be undefined.
if (arguments.length > 1) {
T = thisArg;
}
// 6. Let k be 0
k = 0;
// 7. Repeat, while k < len
while (k < len) {
var kValue;
// a. Let Pk be ToString(k).
// This is implicit for LHS operands of the in operator
// b. Let kPresent be the result of calling the HasProperty
// internal method of O with argument Pk.
// This step can be combined with c
// c. If kPresent is true, then
if (k in O) {
// i. Let kValue be the result of calling the Get internal
// method of O with argument Pk.
kValue = O[k];
// ii. Call the Call internal method of callback with T as
// the this value and argument list containing kValue, k, and O.
callback.call(T, kValue, k, O);
}
// d. Increase k by 1.
k++;
}
// 8. return undefined
};
}