Yang's Blog

不要过度依赖JQuery

发表于

毫无疑问，JQuery是一款非常优秀的JavaScript库，它让我们开发项目变得更加便捷容易。

不过，当你准备在一个项目（特别是移动项目）中使用JQuery时，你真的该好好思考一下，你会用到JQuery的哪些功能，是否真的需要jQuery。

因为随着JavaScript的不断改善进化，现在它内置的功能已经非常强大，在很大程度上，已经可以实现以前需要在JQuery中才能实现的技术。

如果你的项目需要在IE8之前的浏览器中使用，建议还是使用JQuery，这样可以省却很多兼容性问题。

下面将列出一些可以使用JavaScript来实现JQuery功能的代码：

（一）

1、查找搜索选择器

按ID查找：

1
$('#test')  =>  document.getElementById('test');

按class类名查找：

1
$('.test')  =>  document.getElementsByClassName('test')

按标签名查找：

1
$('div')  =>  document.getElementsByTagName('div')

当然，你也可以统一查找：

1
2
3
4
5
6
7
$('#test')
document.querySelector('#test')
$('#test div')  =>  document.querySelectorAll('#test div')
$('#test').find('span')  => document.querySelectorAll('#test span');

获取单个元素：

1
$('#test div').eq(0)[0]  =>  document.querySelectorAll('#test div')[0]

获取HTML、head、body：

1
2
3
4
5
$('html')  =>  document.documentElement
$('head')  =>  document.head
$('body')  =>  document.body

判断节点是否存在

1
2
3
$('#test').length > 0  =>  document.getElementById('test') !== null
$('div').length > 0  => document.querySelectorAll('div').length > 0

遍历节点：

1
$('div').each(function(i, elem) {})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function forEach(elems, callback) {
  if([].forEach) {
    [].forEach.call(elems, callback);
  } else {
    for(var i = 0; i < elems.length; i++) {
      callback(elems[i], i);
    }
  }
}
var div = document.querySelectorAll('div');
forEach(div, function(elem, i){
});

清空节点

1
$('#test').empty()  =>  document.getElementById('test').innerHTML = '';

节点比较

1
$('div').is($('#test'))  =>  document.querySelector('div') === document.getElementById('test')

2、获取/设置内容（值）

获取/设置元素内的内容

1
2
3
4
5
6
7
8
9
$('div').html()  =>  document.querySelecotr('div').innerHTML
$('div').text()  =>  var t = document.querySelector('div');
t.textContent  || t.innerText;
$('div').html('<span>abc</span>');  =>  document.querySelecotr('div').innerHTML = '<span>abc</span>';
$('div;).text('abc')  =>  document.querySelecotr('div').textContent = 'abc'

获取包含元素本身的内容

1
2
3
$('<div>').append($('#test').clone()).html() => document.getElementById('test').outerHTML
$('<div>').append($('#test').clone()).html('<span>abc</span>') => document.getElementById('test').outerHTML = '<span>abc</span>'

获取表单值

1
2
3
$('input').val()  =>  document.querySelector('input').value
$('input').val('abc') => document.querySelector('input').value = 'abc'

3、class类名操作

类名新增

1
$('#test').addClass('a')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function addClass(elem, className) {
  if(elem.classList) {
    elem.classList.add(className);
  } else {
    elem.className += ' ' + className;
  }
}
addClass(document.getElementById('test'), 'a');

类名删除

1
$('#test').removeClass('a');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function removeClass(elem, className) {
  if(elem.classList) {
    elem.classList.remove(className);
  } else {
    elem.className = elem.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
  }
}
removeClass(document.getElementById('test'), 'a');

类名包含：

1
$('#test').hasClass('a')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function hasClass(elem, className) {
  if(elem.classList) {
    return elem.classList.contains(className);
  } else {
    return new RegExp('(^| )' + className + '( |$)', 'gi').test(elem.className);
  }
}
hasClass(document.getElementById('test'), 'a');

4、节点操作

创建节点

1
$('<div>')  =>  document.createElement('div')

复制节点：

1
$('div').clone()  =>  document.querySelector('div').cloneNode(true)

插入节点：

1
$('div').append('<span></span>')
1
2
3
var span = document.createElement('span');
document.querySelector('div').appendChild(span);

在指定节点之前插入新的子节点

1
$('<span>').insertBefore('#test');
1
2
3
4
5
6
7
8
9
var t = document.getElementById('test');
var span = document.createElement('span');
t.parentNode.insertBefore(span, t);
/*更简单的*/
t.insertAdjacentHTML('beforeBegin', '<span></span>');

在指定节点后插入新的子节点：

1
$('<span>').insertAfter('#test')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function insertAfter(elem, newNode){
  if(elem.nextElementSibling) {
    elem.parentNode.insertBefore(newNode, elem.nextElementSibling);
  } else {
    elem.parentNode.appendChild(newNode);
  }
}
var t = document.getElementById('test');   
var span = document.createElement('span');   
insertAfter(t, span);
/*更简单的*/
t.insertAdjacentHTML('afterEnd', '<span></span>');

获取父节点

1
$('#test').parent()  =>  document.getElementById('test').parentNode

删除节点

1
$('#test').remove()
1
2
3
var t = document.getElementById('test');
t.parentNode.removeChild(t);

获取Element子节点

1
$('#test').children()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function children(elem) {
  if(elem.children) {
    return elem.children;
  } else {
    var children = [];     
    for (var i = el.children.length; i--;) {       
        if (el.children[i].nodeType != 8)      
          children.unshift(el.children[i]);    
    }
    return children;
  }
}
children(document.getElementById('test'));

获取下一个兄弟节点：

1
$('#test').next()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function nextElementSibling(elem) {
  if(elem.nextElementSibling) {
    return elem.nextElementSibling;
  } else {
    do { 
       elem = elem.nextSibling; 
    } while ( elem && elem.nodeType !== 1 );   
    return elem;
  }
}
nextElementSibling(document.getElementById('test'));

获取上一个兄弟节点：

1
$('#test').prev()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function previousElementSibling(elem) {    
  if(elem.previousElementSibling) {    
    return elem.previousElementSibling;    
  } else {    
    do {     
      elem = elem.previousSibling;     
    } while ( elem && elem.nodeType !== 1 );       
    return elem;    
  }   
}     
previousElementSibling(document.getElementById('test'));

5、属性操作

获取属性

1
$('#test').attr('class')  =>  document.getElementById('test').getAttribute('class')

删除属性

1
$('#test').removeAttr('class')  => document.getElementById('test').removeAttribute('class')

设置属性

1
$('#test').attr('class', 'abc')  =>  document.getElementById('test').setAttribute('class', 'abc');

6、CSS样式操作

设置样式

1
$('#test').css('height', '10px'); => document.getElementById('test').style.height = '10px';

获取样式

1
$('#test').css('height')
1
2
3
4
5
6
7
var getStyle = function(dom, attr) {   
  return dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, false)[attr];  
};
getStyle(document.getElementById('test'), 'height');

获取伪类的CSS样式

1
window.getComputedStyle(el , ":after")[attrName];

注：IE是不支持获取伪类的

7、字符串操作

去除空格

1
$.trim(' abc ')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function trim(str){
  if(str.trim) {
    return str.trim();
  } else {
    return str.replace(/^\s+|\s+$/g, '');
  }
}
trim(' abc ');

8、JSON操作

JSON序列化

1
$.stringify({name: "TG"})  =>  JSON.stringify({name: "TG"})

JSON反序列化

1
$.parseJSON('{ "name": "TG" }')  =>  JSON.parse('{ "name": "TG" }')

（二）

1、位置

获取相对于文档的位置

1
$('#test').offset()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function offset(elem) {
  var rect = elem.getBoundingClientRect()    
  return {      
    top: rect.top + document.body.scrollTop,      
    left: rect.left + document.body.scrollLeft    
  }
}
offset(document.getElementById('test'));

获取相对于具有定位（非static）的父元素（祖先元素）的位置：

1
$('#test').position()
1
2
3
var t = document.getElementById('test');
var position = {top: t.offsetTop, left: t.offsetLeft};

获取相对于可视区左上角的位置

1
var offset = $('#test').offset();
1
2
3
4
5
6
7
var position = { top: offset.top - document.body.scrollTop,
          left: offset.left - document.body.scrollLeft
}
var position = document.getElementById('test').getBoundingClientRect();

2、尺寸

获取包含内边距（padding）和边框（border）的元素高宽

1
2
3
var width = $('#test').outerWidth();
var height = $('#test').outerHeight();

1
2
3
4
5
var t = document.getElementById('test');
var width = t.offsetWidth;
var height = t.offsetHeight;

获取元素内容的总高度

1
2
3
4
5
6
7
8
9
var t = document.getElementById('test');
/*在没有滚动条的情况下，元素内容的总高度*/
t.scrollHeight
/*在没有滚动条的情况下，元素内容的总宽度*/
t.scrollWidth

视口大小

1
2
3
var pageWidth = window.innerWidth || document.documentElement.clientWidth;
var pageHeight = window.innerHeight || document.documentElement.clientHeight;

3、绑定自定义数据

1
2
3
4
5
6
7
8
9
10
11
/*绑定*/
$('#test').data('name', 'TG');
/*读取*/
$('#test').data('name');
/*移除*/
$('#test').removeDate('name');
1
2
3
4
5
6
7
8
9
10
11
12
13
var t = document.getElementById('test');
/*绑定*/
t.dataset.name = 'TG';
/*读取*/
t.dataset.name
/*移除*/
delete t.dataset.name

4、事件

绑定事件

1
$('#test').on('click', function(){})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var addEvent = function(dom, type, handle, capture) {   
  if(dom.addEventListener) {   
    dom.addEventListener(type, handle, capture);   
  } else if(dom.attachEvent) {   
    dom.attachEvent("on" + type, handle);   
  }
};
var t = document.getElementById('test');
addEvent(t, 'click', function(){});

移除事件

1
$('#test').off('click', fn);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var deleteEvent = function(dom, type, handle) {   
  if(dom.removeEventListener) {    
    dom.removeEventListener(type, handle);   
  } else if(dom.detachEvent) {   
    dom.detachEvent('on' + type, handle);   
  }
};
var t = document.getElementById('test');
deleteEvent(t, 'click', fn);

事件代理

1
$(document).on('click', '.test', fn);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function eventBroker(e, className, fn) {    
  var target = e.target;  
  while(target) {   
    if(target && target.nodeName == '#document') {   
      break;    
    } else if(target.classList.contains(className)) {  
      fn();   
      break;   
    };   
    target = target.parentNode;   
  };   
}
addEvent(document, 'click', function(e){
  eventBroker(e, 'test', function(){});
});

获取Event对象

1
2
3
4
5
$('#test', 'click', function(event){
  event = event.originalEvent;
});
1
2
3
4
5
6
7
var t = document.getElementById('test');
addEvent(t, 'click', function(event){
  event = event || window.event;
});

DOM加载完毕

1
$(document).ready(function(){});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function ready(fn) {   
  if (document.readyState != 'loading'){   
    // ie9+   
    document.addEventListener('DOMContentLoaded', fn);   
  } else {   
    // ie8   
    document.attachEvent('onreadystatechange', function() {   
      if (document.readyState != 'loading'){   
        fn();   
      }   
    });   
  }  
}

指定事件触发

1
$('#test').trigger('click');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function trigger(elem, type) {
  if (document.createEvent) {   
    var event = document.createEvent('HTMLEvents');   
    event.initEvent(type, true, false);   
    elem.dispatchEvent(event);  
  } else {   
    elem.fireEvent('on' + type);  
  }
}
var t = document.getElementById('test');
trigger(t, 'click');

5、AJAX

GET

1
2
3
4
5
6
7
$.get("test.php", { name: "TG"},   
  function(data){   
    console.log(data);   
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var xhr= new XMLHttpRequest();  
xhr.open('GET', 'test.php?name=TG', true); // false（同步）  
xhr.onreadystatechange = function() {   
  if (xhr.readyState === 4) {   
    if (xhr.status >= 200 && xhr.status < 400) {   
      // 成功   
      var data = JSON.parse(xhr.responseText);   
    } else {   
     // 错误   
    }   
  }  
};
xhr.send(null);

POST

1
2
3
4
5
6
7
$.post("test.php", { name: "TG"},   
  function(data){   
    console.log(data);   
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var xhr= new XMLHttpRequest();   
xhr.open('POST', 'test.php', true); // false（同步）  
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  // 必需
xhr.onreadystatechange = function() {       
  if (xhr.readyState === 4) {       
    if (xhr.status >= 200 && xhr.status < 400) {       
      // 成功       
      var data = JSON.parse(xhr.responseText);       
    } else {       
      // 错误       
    }       
  }     
};
var data = {name: "t"};  
xhr.send(data);

Fetch 请求

GET

1
2
3
4
5
6
7
8
9
10
11
12
13
fetch(url).then(function (response) {      
  return response.json();    
}).then(function (jsonData) {      
  console.log(jsonData);    
}).catch(function () {      
  console.log('出错了');    
});

POST

1
2
3
4
5
6
7
8
9
10
11
12
13
fetch(url,{   
  method: 'POST',   
  headers: {   
    'Content-Type': 'application/x-www-form-urlencoded'   
  },   
  body: 'name=TG&love=1'
}).then(function(response){})

6、数组

判断元素是否在数组内

1
$.inArray(item, array)
1
array.indexOf(item)

判断是否是数组

1
$.isArray(arr)
1
Array.isArray(arr)

数组迭代

1
$.map(arr, function(value, index) {})
1
arr.map(function(value, index) {})

7、特效

隐藏显示

1
$('#test').hide();

1
2
3
var t = document.getElementById('test');
t.style.display = 'none';
1
$('#test').show();
1
t.style.display = 'block';

（三）

1、表单

获取焦点

1
2
3
$('#test').focus();  
$('#test').focus(function(){});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var t = document.getElementById('test');
function addEvent(dom, type, handle, capture) {       
  if(dom.addEventListener) {       
    dom.addEventListener(type, handle, capture);        
  } else if(dom.attachEvent) {       
    dom.attachEvent("on" + type, handle);       
  } 
}; 
function focus(elem, fn) {
  if(fn && typeof fn === 'function') {
    addEvent(elem, 'focus', fn);
  } else {
    elem.focus();
  }
}
focus(t, function(){});

失去焦点

1
2
3
$('#test').blur();
$('#test').blur(function(){});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function blur(elem, fn) {    
  if(fn && typeof fn === 'function') {    
    addEvent(elem, 'blur', fn);    
  } else {    
    elem.blur();    
  }   
}    
blur(t, function(){});

实时监控

1
$('#test').on('input propertychange', fn);
1
2
3
4
5
6
7
8
9
10
11
function inputChange(dom, fn, capture) {   
  capture = capture || false;   
  addEvent(dom, 'input', fn, capture);
  addEvent(dom, 'propertychange', fn, capture);   
}
inputChange(t, function(){});

2、判断类型

判断类型

1
$.type(obj);
1
Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, '$1').toLowerCase();

判断是否为一个函数

1
$.isFunction(fn)
1
2
3
4
5
function isFunction(fn){
  return typeof fn === 'function';
}

判断是否为数字

1
$.isNumeric(num);
1
2
3
4
5
6
7
8
9
function isNumber(num) {
  var type = typeof num;
  return ( type === 'number' || type === 'string') && 
      !isNaN( num - parseFloat( num ) );
}

判断是否为数组

1
$.isArray(obj);
1
2
3
4
5
6
7
8
9
10
11
12
13
function isArray(obj) {
  if( Array.isArray ) {
    return Array.isArray(obj);
  } else {
    return Object.prototype.toString.call(obj) === '[object Array]';
  }
}

3、时间

获取当前时间

1
$.now()

1
2
3
4
5
new Date().getTime();
/* 更简单 */
+new Date();

4、改变上下文（this）

1
$.proxy(fn, context);
1
fn.bind(context);

5、空函数

创建一个空函数

1
var fn = $.noop();

1
var fn = function() {}

6、数组

合并数组

1
$.merge(arr1, arr2)
1
2
3
4
5
function (arr1, arr2) {
  return arr1.concat(arr2);
}

类数组对象转换成数组

1
2
3
4
5
6
7
8
9
10
var divs = document.querySelectorAll('div');
var arr = $.makeArray(divs);
var arr = Array.prototype.slice.call(divs);
// ES6 
var arr = Array.from(divs)

7、Iframe

获取iframe的document

1
$('#iframe').contents();

1
2
3
var iframe = document.getElementById('iframe');
iframe.contentDocument;

8、元素包含关系

检查一个DOM元素是另一个DOM元素的后代

1
$.contains(parent, child);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function contains(root, el) { 
  /* Chrome / Firefox */  
  if (root.compareDocumentPosition) {  
    return root === el || !!(root.compareDocumentPosition(el) & 16);  
  } 
  /* IE */
  if (root.contains && el.nodeType === 1){   
    return root.contains(el) && root !== el;   
  }   
  while ((el = el.parentNode)) {  
    if (el === root) { return true; }  
    return false;   
  }
}

9、scroll

设置/获取window滚动位置

获取

1
$(window).scrollTop();
1
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop

设置

1
$(window).scrollTop(10);
1
(document.documentElement && document.documentElement.scrollTop = 10) || document.body.scrollTop = 10;

设置某个元素滚动位置

1
$('#test').scrollTop(10);

1
2
3
var t = document.getElementById('test');
t.scrollTop = 10;

注意：别加单位！

10、节点

获取元素的最近的祖先定位（position非static）元素

1
$('#test').offsetParent();

1
2
3
var t = document.getElementById('test');
t.offsetParent;
Enjoy it ? Donate me ! 欣赏此文？求鼓励，求支持！