判断用户输入事件
大多数浏览器:oninput
IE678浏览器:onpropertychange
$("txt").oninput = $("txt").onpropertychange = function(){
if(this.value == ""){
$("message").style.display = 'block';
}else{
$("message").style.display = 'none';
}
}
封装自己class类,根据类名找对象
同getElementByClassnme
function getClass(classname){
//如果浏览器支持,则直接返回
if(document.getElementsByClassName){
return document.getElementsByClassName(classname);
};
// 不支持的 浏览器
var arr = []; // 用于存放满足的数组
var dom = document.getElementsByTagName("*");
for(var i=0;i<dom.length;i++) {
if(dom[i].className == classname) {
arr.push(dom[i]);
}
}
return arr;
}
兄弟节点
// 下一个兄弟
nextSibling IE678
nextElementSibling 其他浏览器
// 上一个兄弟
previousSibling IE678
previousElementSibling 其他浏览器
写法:var div = one.nextElementSibling || one.nextSibling;
子节点
// 第一个孩子
firstChild IE678
firstElementChild 其他浏览器
写法:var one.firstElementChild || one.firstChild;
按钮不可用
写法:btn.disabled = 'disabled' || btn.disabled = true;
事件兼容性写法
写法:var event = event || window.event;
拖动 原理 == 鼠标按下 接着 移动鼠标
bar.onmousedown = function(){
document.onmousemove = function(){
}
}
拖动的时候不能选中文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
scrollTop获取值的函数封装 scroll
function scroll() {
//判断浏览器的类型
if(window.pageYOffset != null) { // IE9+和其他浏览器
return {
left: window.pageXOffset,
top: window.pageYOffset
}
} else if(document.compatMode == "CSS1Compat") { // 声明的了 DTD
// 检测是不是怪异模式的浏览器
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
} else { // 剩下的肯定是怪异模式的
return {
left: document.body.scrollLeft,
top: document.body.scrollTop
}
};
};
window.onscroll = function() {
console.log(scroll().top);
};
获取屏幕宽度函数封装 client
function client() {
if(window.innerWidth != null) { // IE9 +最新浏览器
return {
width: window.innerWidth,
height: window.innerHeight
}
} else if(document.compatMode === "CSS1Compat") { // 标准浏览器
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
} else {
return { // 怪异浏览器
width: document.body.clientWidth,
height: document.body.clientHeight
}
};
};
冒泡事件的清除
var event = event || window.event;
if(event && event.stopPropagation) {
event.stopPropagation(); // w3c标准
} else{
event.cancelBubble = true; // IE678浏览器
};
得到当前选中内容的id
写法:var targetId = event.target ? event.target.id : event.srcElement.id;
获取选中的文字
if(window.getSelection){
txt = window.getSelection().toString(); // 转换为字符串
}else{
txt = document.selection.createRange().text; // IE浏览器
}