不要过度依赖JQuery

发布时间：2020-12-14 01:52:20 所属栏目：百科来源：网络整理

导读：毫无疑问，JQuery是一款非常优秀的JavaScript库，它让我们开发项目变得更加便捷容易。不过，当你准备在一个项目（特别是移动项目）中使用JQuery时，你真的该好好思考一下，你会用到JQuery的哪些功能，是否真的需要jQuery。因为随着JavaScript的不断改善进化

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

不过，当你准备在一个项目（特别是移动项目）中使用JQuery时，你真的该好好思考一下，你会用到JQuery的哪些功能，是否真的需要jQuery。因为随着JavaScript的不断改善进化，现在它内置的功能已经非常强大，在很大程度上，已经可以实现以前需要在JQuery中才能实现的技术（如果你的项目需要在IE8之前的浏览器中使用，建议还是使用JQuery，这样可以省却很多兼容性问题）。
下面将列出一些可以使用JavaScript来实现JQuery功能的代码：
**1、查找搜索选择器**
按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')
**2、获取/设置内容（值）**
获取/设置元素内的内容
$('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'
**3、class类名操作**
类名新增
$('#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,sans-serif; font-size:14px; line-height:25.2px"> elem.classList.remove(className);
elem.className = elem.className.replace(new RegExp('(^|b)' + className.split(' ').join('|') + '(b|$)','gi'),' ');
removeClass(document.getElementById('test'),sans-serif; font-size:14px; line-height:25.2px">类名包含：
$('#test').hasClass('a')
function hasClass(elem,sans-serif; font-size:14px; line-height:25.2px"> return elem.classList.contains(className);
return new RegExp('(^| )' + className + '( |$)','gi').test(elem.className);
hasClass(document.getElementById('test'),sans-serif; font-size:14px; line-height:25.2px">**4、节点操作**
创建节点
$('<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');
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);
elem.parentNode.appendChild(newNode);
var t = document.getElementById('test');
var span = document.createElement('span');
insertAfter(t,span);
t.insertAdjacentHTML('afterEnd',sans-serif; font-size:14px; line-height:25.2px">获取父节点
$('#test').parent()=>document.getElementById('test').parentNode
删除节点
$('#test').remove()
t.parentNode(t);
获取Element子节点
$('#test').children()
function children(elem) {
if(elem.children) {
return elem.children;
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) {
return elem.nextElementSibling;
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'));
**5、属性操作**
获取属性
$('#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');
**6、CSS样式操作**
设置样式
$('#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是不支持获取伪类的
**7、字符串操作**
去除空格
$.trim(' abc ')
function trim(str){
if(str.trim) {
return str.trim();
return str.replace(/^s+|s+$/g,'');
trim(' abc ');
**8、JSON操作**
JSON序列化
$.stringify({name: "TG"})=>JSON.stringify({name: "TG"})
JSON反序列化
$.parseJSON('{ "name": "TG" }')=>JSON.parse('{ "name": "TG" }')
```

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!