原生JS封装的简化版Jquery工具函数
1.选择器的封装
function $(str){
//我们首先获取首字母;判断:
var char = str.charAt(0);
//if判断:
if(char === "#"){
return document.getElementById(str.slice(1));//去除i;
}else if(char === "."){
return document.getElementsByClassName(str.slice(1))[0];//去除c;
}else{
return document.getElementsByTagName(str);//去除t;
}
}
2.节点获取的方法兼容性封装
(1)
/**
* 获取某个元素的下一个兄弟元素
* @param element 某个元素
* @returns {*} 下一个兄弟元素
*/
function getNextElement(element) {
if (element.nextElementSibling) {
return element.nextElementSibling
} else {
var node = element.nextSibling;
while (node && node.nodeType != 1) {
node = node.nextSibling;
}
return node;
}
}
(2)
/**
* 获取某个元素的前一个兄弟元素
* @param element 某个元素
* @returns {*} 前一个兄弟元素
*/
function getPreviousElement(element) {
if (element.previousElementSibling) {
return element.previousElementSibling
} else {
var node = element.previousSibling;
while (node && node.nodeType != 1) {
node = node.previousSibling;
}
return node;
}
}
(3)
/**
* 功能:获取第一个子节点
* @param ele
* @returns {Element|*|Node}
*/
function first(ele){
var aaa = ele.firstElementChild || ele.firstChild;
while(aaa.nodeType != 1){//元素节点:1; 属性节点:2; 文本节点:3; 注释节点:8;
//如果不是元素节点,接着往下找!
aaa = aaa.nextSibling;//为aaa覆盖下一个兄弟节点
}
return aaa;
}
(4)
/**
* 功能:获取最后一个子节点
* @param ele
* @returns {Element|*|Node}
*/
function last(ele){
var aaa = ele.lastElementChild || ele.lastChild;
while(aaa.nodeType != 1){//元素节点:1; 属性节点:2; 文本节点:3; 注释节点:8;
//如果不是元素节点,接着往下找!
aaa = aaa.previousSibling;//为aaa覆盖下一个兄弟节点
}
return aaa;
}
(5)
/**
* 功能:查找所有兄弟节点(不包括自己)
* @param ele
* @returns {*|HTMLElement}
*/
function siblings(ele){
//先找父亲在找所有儿子,从中寻找不是自己的添加到新的数组中
if (!ele)return;
var newArr = [];
var arr = ele.parentNode.children;//ie678中无法取出注释节点;
for(var i=0;i<arr.length;i++){
//判断:不是自己就添加
if(arr[i].nodeType == 1 && arr[i] != ele){
newArr.push(arr[i]);
}
}
//把新数组返回
return newArr;
}
(6)
/**
* 获取某个元素的所有兄弟元素
* @param element 某个元素
* @returns {Array} 兄弟元素
*/
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;
}
(7)
/**
* 功能:根据索引值找兄弟节点
* @param ele
* @param index
* @returns {*|HTMLElement}
*/
function getSibEleOfIndex(ele,index){
return ele.parentNode.children[index];
}
(8)
/**
* 获取元素的文本内容
* @param element 任意元素
* @returns {*} 任意元素中的文本内容
*/
function getInnerText(element) {
if (typeof(element.textContent) == "undefined") {
return element.innerText;
} else {
return element.textContent;
}
}
(9)
/**
* 设置元素的文本内容
* @param element 任意元素
* @param text 任意文本内容
*/
function setInnerText(element, text) {
if (typeof(element.textContent) == "undefined") {
element.innerText = text;
} else {
element.textContent = text;
}
}
3.其他功能
(1)格式化日期
/**
* 格式化日期
* @param dt 日期对象
* @returns {string} 返回值是格式化的字符串日期
*/
function getDates(dt) {
var str = "";//存储时间的字符串
//获取年
var year = dt.getFullYear();
//获取月
var month = dt.getMonth() + 1;
//获取日
var day = dt.getDate();
//获取小时
var hour = dt.getHours();
//获取分钟
var min = dt.getMinutes();
//获取秒
var sec = dt.getSeconds();
month = month < 10 ? "0" + month : month;
day = day < 10 ? "0" + day : day;
hour = hour < 10 ? "0" + hour : hour;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
str = year + "年" + month + "月" + day + "日 " + hour + ":" + min + ":" + sec;
return str;
}
(2)兼容获取浏览器可视区域的宽高
function getClient() {
return{
width:window.innerWidth||document.body.clientWidth||document.documentElement.clientWidth||0,
height:window.innerHeight||document.body.clientHeight||document.documentElement.clientHeight||0
}
}
(3) 获取元素属性的方法
function getStyle(ele,attr){
//判断:浏览器是否支持某个方法,支持就调用,不支持就用另外一个
if(ele.currentStyle !== undefined){//如果该属性不存在返回值就是undefined
return ele.currentStyle[attr];//中括号获取属性值,比较灵活,传递什么就是什么
}else{
//火狐谷歌ie9+支持的方法
return window.getComputedStyle(ele,null)[attr];
}
}
(4) 获取浏览器滚动高度的方法
function scroll(){
return {
left: window.pageXOffset || document.documentElement.scrollLeft,
top: window.pageYOffset || document.documentElement.scrollTop
}
}
(5)缓动函数的封装
//封装一个方法,传递过去三个参数,元素/属性/值!
function animate(ele,json,fn){
clearInterval(ele.timer);
ele.timer = setInterval(function () {
var bool = true;
for(var k in json){
//判断:如果属性时z-index;
if(k === "z-index"){
ele.style.zIndex = json[k];
//判断:如果属性时opacity;(一定是小数)
}else if(k === "opacity"){
var leader = parseInt(getStyle(ele,k)*10) || 10;//getStyle();
var step = (parseInt(json[k]*10)-leader)/10;
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader + step;
ele.style[k] = leader/10;
ele.style.filter = "alpha(opacity="+leader*10+")";
if(parseInt(json[k]*10) !== leader){
bool = false;
}
}else{
//正常属性,走这一套逻辑
var leader = parseInt(getStyle(ele,k)) || 0;
var step = (json[k]-leader)/10;
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader + step;
ele.style[k] = leader + "px";
//清除定时器;
if(json[k] !== leader){
bool = false;
}
}
}
//所以清除定时器必须在for循环之外,还需要判断;
console.log(1);
if(bool){
clearInterval(ele.timer);
//清除定时器之后,就是整个函数执行完毕的时候,这时候我就可以执行另一个函数了
if(fn){
fn();
}
}
},30);
}
(6)判断当前浏览器样式
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("不知道什么鬼!");
}
}
(7)关于事件参数对象的坐标工具
var evtTools={
//事件参数
evt:function (e) {
return window.event?window.event:e;
},
//页面向左卷曲出去的距离
left:function () {
return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
},
//页面向上卷曲出去的距离
top:function () {
return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
},
//事件参数对象中的属性封装---可视区域的横坐标
clientX:function (e) {
return this.evt(e).clientX;
},
//事件参数对象中的属性封装---可视区域的纵坐标
clientY:function (e) {
return this.evt(e).clientY;
},
pageX:function (e) {
return this.evt(e).pageX?this.evt(e).pageX:this.left()+this.clientX(e);
},
pageY:function (e) {
return this.evt(e).pageY?this.evt(e).pageY:this.top()+this.clientY(e);
}
};
4.模拟js一部分内置对象的制造方法;
var Event = {
//事件监听方法:
addEvent:function (ele,eve,fn){
if(ele.addEventListener){
//传过来的参数,事件带不带"on"; 不带更方便,因为添加比截取方便;
ele.addEventListener(eve,fn);
}else if(ele.attachEvent){
//ie678
ele.attachEvent("on"+eve,fn);
}else{
//dom0;很久很久以前的浏览器......
//这个时代的浏览器既不支持addEventListener,也不支持attachEvent;我们只能原始方法绑定;
demo(ele,eve,fn);
}
},
removeEvent:function (ele,eve,fn){
//判断浏览器支持哪个方法;
if(ele.removeEventListener){//不加()代表获取该属性(属性值是函数),加()变成执行函数了
ele.removeEventListener(eve,fn);
//ie678
}else if(ele.detachEvent){
ele.detachEvent("on"+eve,fn);
}else{
ele["on"+eve] = null;//一次性全部清除;
}
}
};
浙公网安备 33010602011771号