1. DOM

/**
 * 获取某个 DOM 元素的某个属性
 * @param {*} obj
 * @param {*} attr
 */
export function getStyle(obj, attr) {
  if (attr == 'rotate') {
    return obj.rotate;
  }
  let i = parseFloat(
    obj.currentStyle
      ? obj.currentStyle[attr]
      : document.defaultView.getComputedStyle(obj, false)[attr],
  );
  let val = i ? i : 0;
  if (attr == 'opacity') {
    val *= 100;
  }
  return val;
}

function getStyle(obj, attr) {
  if (obj.currentStyle) {
    return obj.currentStyle[attr]; // IE
  } else {
    return getComputedStyle(obj, false)[attr]; // standard
  }
}

/**
 * 编写一个函数实现form的序列化(即将一个表单中的键值序列化为可提交的字符串)
 * <form id="target">
    <select name="age">
        <option value="aaa">aaa</option>
        <option value="bbb" selected>bbb</option>
    </select>
    <select name="friends" multiple>
        <option value="qiu" selected>qiu</option>
        <option value="de">de</option>
        <option value="qing" selected>qing</option>
    </select>
    <input name="name" value="qiudeqing">
    <input type="password" name="password" value="11111">
    <input type="hidden" name="salery" value="3333">
    <textarea name="description">description</textarea>
    <input type="checkbox" name="hobby" checked value="football">Football
    <input type="checkbox" name="hobby" value="basketball">Basketball
    <input type="radio" name="sex" checked value="Female">Female
    <input type="radio" name="sex" value="Male">Male
  </form>

  var form = document.getElementById('target');
  console.log(serializeForm(form));
 * @param {FormElement} form 需要序列化的表单元素
 * @return {string} 表单序列化后的字符串
 */
function serializeForm(form) {
  if (!form || form.nodeName.toUpperCase() !== 'FORM') {
    return;
  }

  var result = [];

  var i, len;
  var field, fieldName, fieldType;

  for (i = 0, len = form.length; i < len; ++i) {
    field = form.elements[i];
    fieldName = field.name;
    fieldType = field.type;

    if (field.disabled || !fieldName) {
      continue;
    } // enf if

    switch (fieldType) {
      case 'text':
      case 'password':
      case 'hidden':
      case 'textarea':
        result.push(encodeURIComponent(fieldName) + '=' + encodeURIComponent(field.value));
        break;

      case 'radio':
      case 'checkbox':
        if (field.checked) {
          result.push(encodeURIComponent(fieldName) + '=' + encodeURIComponent(field.value));
        }
        break;

      case 'select-one':
      case 'select-multiple':
        for (var j = 0, jLen = field.options.length; j < jLen; ++j) {
          if (field.options[j].selected) {
            result.push(
              encodeURIComponent(fieldName) +
                '=' +
                encodeURIComponent(field.options[j].value || field.options[j].text),
            );
          }
        } // end for
        break;

      case 'file':
      case 'submit':
        break; // 是否处理?

      default:
        break;
    } // end switch
  } // end for

  return result.join('&');
}

/**
 * get index of obj node in the same level. e.g. section>div*4. 2nd div index should be 1
 * @method getIndex
 * @param  {[type]} obj [description]
 * @return {[type]}     [description]
 */
function getIndex(obj) {
  // var siblingsAndSelf = getChildren(obj.parentNode);
  var siblingsAndSelf = obj.parentNode.children;
  for (var i = 0; i < siblingsAndSelf.length; i++) {
    if (obj == siblingsAndSelf[i]) {
      return i;
    }
  }
}

function getPrevAll(obj, isIncludeSelf) {
  var children = getChildren(obj.parentNode);
  for (var i = 0; i < children.length; i++) {
    if (obj == children[i]) {
      var removed = isIncludeSelf ? children.splice(i + 1) : children.splice(i);
    }
  }
  return children;
}

function getNextAll(obj, isIncludeSelf) {
  var children = getChildren(obj.parentNode);
  for (var i = 0; i < children.length; i++) {
    if (obj == children[i]) {
      var removed = isIncludeSelf ? children.splice(0, i) : children.splice(0, i + 1);
    }
  }
  return children;
}

function getSiblings(obj) {
  var children = getChildren(obj.parentNode);
  for (var i = 0; i < children.length; i++) {
    if (obj == children[i]) {
      var self = children.splice(i, 1);
    }
  }
  return children;
}

function getChildren(currentNode) {
  // var childrenElem = currentNode.childNodes;
  // var children = [];
  // for (var i = 0; i < childrenElem.length; i++) {
  //     if (childrenElem[i].nodeName == "#text" && !/\s/.test(childrenElem.nodeValue)) {
  //         currentNode.removeChild(childrenElem[i]);
  //     } else {
  //         child.push(childrenElem[i]);
  //     }
  // }
  // return children;
  return currentNode.children;
}

function removeNode(obj) {
  obj.parentNode.removeChild(obj);
}

function indexInArray(arr, element) {
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] == element) {
      return i;
    }
  }
  return -1;
}

/**
 * insert obj after refObj
 * @method insertAfter
 * @param  {[type]}    obj    [description]
 * @param  {[type]}    refObj [description]
 * @return {[type]}           [description]
 */
function insertAfter(obj, refObj) {
  var parent = refObj.parentNode;
  var nextElement = refObj.nextElementSibling;
  if (nextElement) {
    return parent.insertBefore(obj, nextElement);
  } else {
    return parent.appendChild(obj);
  }
}

/*
*old functions, now browser has better methods
function addClass(obj, classname) { //添加class样式
  obj.classList.add(classname);

  // var aClass = obj.className.split(' ');
  // if (!obj.className) {
  //     obj.className = classname;
  //     return;
  // }
  // for (var i = 0; i < aClass.length; i++) {
  //     if (aClass[i] === classname) return;
  // }
  // obj.className += ' ' + classname;

  // if (obj.className == '') {
  //     obj.className = classname;
  // } else {
  //     var arrClassName = obj.className.split(' ');
  //     var index = indexInArray(arrClassName, classname);
  //     if (index == -1) { // 要添加的class不存在时才添加
  //         obj.className += ' ' + classname;
  //     }
  // }
}


function removeClass(obj, classname) { //移除class样式
  obj.classList.remove(classname);

  // var aClass = obj.className.split(' ');
  // if (!obj.className) return;
  // for (var i = 0; i < aClass.length; i++) {
  //     if (aClass[i] === classname) {
  //         aClass.splice(i, 1);
  //         obj.className = aClass.join(' ');
  //         break;
  //     }
  // }

  // if (obj.className != '') {
  //     var arrClassName = obj.className.split(' ');
  //     var index = indexInArray(arrClassName, classname);
  //     if (index != -1) { // 存在时才删除
  //         arrClassName.splice(index, 1);
  //         obj.className = arrClassName.join(' ');
  //     }
  // }
}

function hasClass(obj, classname) { //添加class样式
  obj.classList.contains(classname);
  // var aClass = obj.className.split(' ');
  // if (!obj.className) {
  //     return false;
  // }
  // for (var i = 0; i < aClass.length; i++) {
  //     if (aClass[i] === classname) return true;
  // }
  // return false;
}

function getByClass(parent, tagname, classname) { //通过Class名字获取元素
  var aEls = parent.getElementsByTagName(tagname);
  return aEls.querySelectorAll(classname);
  // var arr = [];
  // var re = new RegExp('(^|\\s)' + classname + '(\\s|$)');
  // for (var i = 0; i < aEls.length; i++) {
  //     if (re.test(aEls[i].className)) {
  //         arr.push(aEls[i]);
  //     }
  // }
  // return arr;
}
function getByClass(parent, classname) {
  var eles = parent.getElementsByTagName('*');
  var result = [];

  var reg = new RegExp('\\b' + classname + '\\b');

  for (var i = eles.length - 1; i >= 0; i--) {
      //if (eles[i].className == classname) {
      //if (eles[i].className.search(classname) != -1) {    //也不行,比如有个class叫largebox。
      if (reg.test(eles[i].className)) { //单词边界\b
          result.push(eles[i]);
      }
  }
  return result;
}


//not useful
function getByParent(obj, tagname, classname) { // 通过父级的className以及tagName获取元素
  var re = new RegExp('(^|\\s)' + classname + '(\\s|$)');
  while (obj.parentNode) {
      if (obj.parentNode.tagName != tagname) {
          obj = obj.parentNode;
      } else {
          if (re.test(obj.parentNode.className)) {
              return obj.parentNode;
          } else {
              obj = obj.parentNode;
          }
      }

  }
}
*/
Copyright © Guanghui Wang all right reserved,powered by GitbookFile Modified: 2019-08-25 13:56:34

results matching ""

    No results matching ""