网站首页 » 前端开发 » JavaScript » 常用的 JavaScript 函数封装
上一篇:
下一篇:

常用的 JavaScript 函数封装

获取兄弟节点

所有兄弟节点(不含自己)

// 获取所有兄弟节点(不包含自己)
function yk_sibling( elem ) {
var ar = [];
var n = elem.parentNode.firstChild;
    for ( ; n; n = n.nextSibling ) {
        if ( n.nodeType === 1 && n !== elem) {
            ar.push( n );
        }
    }
    return ar;
}

所有节点(含自己)

// 获取所有兄弟节点(包含自己)
function yk_sibling( elem ) {
var ar = [];
var n = elem.parentNode.firstChild;
    for ( ; n; n = n.nextSibling ) {
        if ( n.nodeType === 1) {
            ar.push( n );
        }
    }
    return ar;
}

同类节点(不含自己)

// 获取所有同类兄弟节点(不包含自己)
function yk_sibling( elem ) {
var ar = [];
var n = elem.parentNode.firstChild;
    for ( ; n; n = n.nextSibling ) {
        if ( n.nodeType === 1 && n !== elem && n.nodeName === elem.nodeName) {
            ar.push( n );
        }
    }
    return ar;
}

同类节点(含自己)

// 获取所有同类兄弟节点(包含自己)
function yk_sibling( elem ) {
var ar = [];
var n = elem.parentNode.firstChild;
    for ( ; n; n = n.nextSibling ) {
        if ( n.nodeType === 1 && n.nodeName === elem.nodeName) {
            ar.push( n );
        }
    }
    return ar;
}

添加节点

添加到元素第一个节点

function firstInsert(target,newElement) {
    target.insertBefore(newElement, target.firstChild);
}

添加到元素最后一个节点

function lastInsert(target, newElement) {
    target.appendChild(newElement);
}

 

CLASS类操作

获取class

// 获取目标class
function yk_getClass( elem ) {
    return elem.getAttribute && elem.getAttribute( "class" ) || "";
}

添加class

// 添加class
function yk_addClass(obj,cls){
  cls = cls.trim();
  var oldClass = obj.className.split(' ');
  var curClass = [];
  for(var i=0;i<oldClass.length;i++){
    if(oldClass[i] !== '' && oldClass[i] !== cls ){
        curClass.push(oldClass[i]);
    }
 }
 curClass.push(cls);
 obj.className = curClass.join(' ');
}

删除class

// 删除目标class
function yk_removeClass(obj,cls){
  cls = cls.trim();
  var oldClass = obj.className.split(' ');
  var curClass = [];
  for(var i=0;i<oldClass.length;i++){
      if(oldClass[i] !== ''){
          if(oldClass[i] !== cls){
              curClass.push(oldClass[i]);
         }
     }
 }
 obj.className = curClass.join(' ');
}

获取元素样式

// 获取元素指定样式
function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj,false)[attr];
    }
}

获取|设置元素样式

function css(ele, attr, val) {
    if (arguments.length == 2) {
        var val = getComputedStyle(ele)[attr];
        if (attr == "opacity") {
            val = Math.round(val * 100);
        }
        return val;
    } else if (arguments.length == 3) {
        if (attr == "opacity") {
            ele.style.opacity = val / 100;
        } else {
            ele.style[attr] = val;
        }
    }
}

获取指定范围内数值

function numberFromRange(minValue,maxValue){
    var baseValue = maxValue - minValue +1;
    return Math.floor(Math.random() * baseValue + minValue);
}

距离

获取滚动条的滚动距离(垂直方向)

function getScrollTop() {
    return document.documentElement.scrollTop || document.body.scrollTop;
}

获取目标对象离 document 文档顶部的距离

function getTopDistance(obj) {
    var TopDistance = 0;
    while (obj) {
        TopDistance += obj.offsetTop;
        obj = obj.offsetParent;
    }
    return TopDistance;
}

事件绑定

事件绑定兼容写法

function addEvent(obj, type, fn) {
    if (obj.attachEvent) {
        obj.attachEvent('on' + type, function () {
            fn.call(obj);
        })
    } else {
        obj.addEventListener(type, fn, false);
    }
}

获取鼠标在元素上的位置

function onElementPoint(ele,event){
    var mouse = {x:0,y:0};
        var pageX = event.pageX;
        var pageY = event.pageY;
        var target = event.target;
        var clientRect = target.getBoundingClientRect();
        mouse.x = pageX - clientRect.left;
        mouse.y = pageY - clientRect.top;
    return mouse;
}

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/javascript-function-encapsulation/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END