毫无疑问,JQuery是一款非常优秀的JavaScript库,它让我们开发项目变得更加便捷容易。
不过,当你准备在一个项目(特别是移动项目)中使用JQuery时,你真的该好好思考一下,你会用到JQuery的哪些功能,是否真的需要jQuery。因为随着JavaScript的不断改善进化,现在它内置的功能已经非常强大,在很大程度上,已经可以实现以前需要在JQuery中才能实现的技术(如果你的项目需要在IE8之前的浏览器中使用,建议还是使用JQuery,这样可以省却很多兼容性问题)。
下面将列出一些可以使用JavaScript来实现JQuery功能的代码:
按ID查找:
$('#test') => document.getElementById('test');
按class类名查找:
$('.test') => document.getElementsByClassName('test')
按标签名查找:
$('div') => document.getElementsByTagName('div')
当然,你也可以统一查找:
$('#test') document.querySelector('#test') $('#test div') => document.querySelectorAll('#test div') $('#test').find('span') => document.querySelectorAll('#test span');
获取单个元素:
$('#test div').eq(0)[0] => document.querySelectorAll('#test div')[0]
获取HTML、head、body:
$('html') => document.documentElement $('head') => document.head $('body') => document.body
判断节点是否存在
$('#test').length > 0 => document.getElementById('test') !== null $('div').length > 0 => document.querySelectorAll('div').length > 0
遍历节点:
$('div').each(function(i, elem) {}) 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){ });
清空节点
$('#test').empty() => document.getElementById('test').innerHTML = '';
节点比较
$('div').is($('#test')) => document.querySelector('div') === document.getElementById('test')
获取/设置元素内的内容
$('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'
获取包含元素本身的内容
$('<div>').append($('#test').clone()).html() => document.getElementById('test').outerHTML $('<div>').append($('#test').clone()).html('<span>abc</span>') => document.getElementById('test').outerHTML = '<span>abc</span>'
获取表单值
$('input').val() => document.querySelector('input').value $('input').val('abc') => document.querySelector('input').value = 'abc'
类名新增
$('#test').addClass('a') function addClass(elem, className) { if(elem.classList) { elem.classList.add(className); } eles { elem.className += ' ' + className; } } addClass(document.getElementById('test'), 'a');
类名删除
$('#test').removeClass('a'); 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');
类名包含:
$('#test').hasClass('a') 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');
创建节点
$('<div>') => document.createElement('div')
复制节点:
$('div').clone() => document.querySelector('div').cloneNode(true)
插入节点:
$('div').append('<span></span>') var span = document.createElement('span'); document.querySelector('div').appendChild(span);
在指定节点之前插入新的子节点
$('<span>').insertBefore('#test'); var t = document.getElementById('test'); var span = document.createElement('span'); t.parentNode.insertBefore(span, t); /*更简单的*/ t.insertAdjacentHTML('beforeBegin', '<span></span>');
在指定节点后插入新的子节点:
$('<span>').insertAfter('#test') 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>');
获取父节点
$('#test').parent() => document.getElementById('test').parentNode
删除节点
$('#test').remove() var t = document.getElementById('test'); t.parentNode(t);
获取Element子节点
$('#test').children() 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'));
获取下一个兄弟节点:
$('#test').next() 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'));
获取上一个兄弟节点:
$('#test').prev() 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'));
获取属性
$('#test').attr('class') => document.getElementById('test').getAttribute('class')
删除属性
$('#test').removeAttr('class') => document.getElementById('test').removeAttribute('class')
设置属性
$('#test').attr('class', 'abc') => document.getElementById('test').setAttribute('class', 'abc');
设置样式
$('#test').css('height', '10px'); => document.getElementById('test').style.height = '10px';
获取样式
$('#test').css('height') var getStyle = function(dom, attr) { return dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, false)[attr]; }; getStyle(document.getElementById('test'), 'height');
获取伪类的CSS样式
window.getComputedStyle(el , ":after")[attrName];
注:IE是不支持获取伪类的
去除空格
$.trim(' abc ') function trim(str){ if(str.trim) { return str.trim(); } else { return str.replace(/^/s+|/s+$/g, ''); } } trim(' abc ');
JSON序列化
$.stringify({name: "TG"}) => JSON.stringify({name: "TG"})
JSON反序列化
$.parseJSON('{ "name": "TG" }') => JSON.parse('{ "name": "TG" }')
原文链接: 不要过度依赖JQuery(一)
如有错误,欢迎指正!如有更好建议,欢迎留言!