js与jq的对比

1、查找搜索选择器

按ID查找：

JQuery：

$('#test') 

JS：

document.getElementById('test');

按class类名查找：

JQuery：

$('.test')

JS：

document.getElementsByClassName('test')

按标签名查找：

JQuery：

$('div')

JS：

document.getElementsByTagName('div')

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

JQuery：

$('#test')
$('#test div')
$('#test').find('span') 

JS：

document.querySelector('#test')
document.querySelectorAll('#test div')
document.querySelectorAll('#test span');

获取单个元素：

JQuery：

$('#test div').eq(0)

JS：

 document.querySelectorAll('#test div')[0] 

获取HTML、head、body：

JQuery：

$('html') 
$('head')
$('body') 

JS：

document.documentElement
document.head
document.body

判断节点是否存在

JQuery：

$('#test').length > 0 
$('div').length > 0 

JS：

document.getElementById('test') !== null
document.querySelectorAll('div').length > 0

遍历节点：

JQuery：

$('div').each(function(i, elem) {
    
})

JS：

var div = document.querySelectorAll('div');
div.forEach(function(elem, i){


});

清空节点

JQuery：

$('#test').empty() 

JS：

document.getElementById('test').innerHTML = '';

节点比较

JQuery：

$('div').is($('#test'))

JS：

document.querySelector('div') === document.getElementById('test')

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

获取/设置元素内的内容

JQuery：

$('div').html();
$('div').text(); 
$('div').html('<span>abc</span>');
$('div;).text('abc'); 

JS：

document.querySelecotr('div').innerHTML

var t = document.querySelector('div');
t.textContent  || t.innerText;

document.querySelecotr('div').innerHTML = '<span>abc</span>';

document.querySelecotr('div').textContent = 'abc'

获取/设置表单值

JQuery：

$('input').val()
$('input').val('abc')

JS：

document.querySelector('input').value
document.querySelector('input').value = 'abc'

3、class类名操作

类名新增

JQuery：

$('#test').addClass('a')

JS：

function addClass(elem, className) {
	if(elem.classList) {
    	elem.classList.add(className);
  	} else {
    	elem.className += ' ' + className;
 	}
}

addClass(document.getElementById('test'), 'a');

类名删除

JQuery：

$('#test').removeClass('a');

JS：

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');

类名包含

JQuery：

$('#test').hasClass('a')

JS：

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、节点操作

创建节点

JQuery：

$('<div>') 

JS：

document.createElement('div')

复制节点：

JQuery：

$('div').clone() 

JS：

document.querySelector('div').cloneNode(true)

插入节点：

JQuery：

$('div').append('<span></span>')

JS：

var span = document.createElement('span');
document.querySelector('div').appendChild(span);

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

JQuery

$('<span>').insertBefore('#test'); 

JS：

var t = document.getElementById('test');
var span = document.createElement('span');

t.parentNode.insertBefore(span, t);
/*更简单的*/
t.insertAdjacentHTML('beforeBegin', '<span></span>');

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

JQuery：

$('<span>').insertAfter('#test')

JS：

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>');

获取父节点

JQuery：

$('#test').parent()

JS：

document.getElementById('test').parentNode

删除节点

JQuery：

$('.test').remove()  

JS：

var t = document.querySelectorAll('.test');
for(var i = 0;i<t.length;i++){
    t[i].remove();
}

获取Element子节点

JQuery：

$('#test').children()

JS：

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'));

获取下一个兄弟节点：

JQuery：

$('#test').next()

JS：

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'));

获取上一个兄弟节点：

JQuery：

$('#test').prev()  

JS：

   

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、属性操作

获取属性

prop只能是标签固有属性,attr可以是新增的(data)数据

JQuery:

$('#test').attr('class')

JS：

 document.getElementById('test').getAttribute('class')

删除属性

remove是移出自身及自身的子节点

empty是清除子节点

.html(’’)内容置空

JQuery：

$('#test').removeAttr('class') 

JS:

document.getElementById('test').removeAttribute('class')

设置属性

JQuery:

$('#test').attr('class', 'abc') 

JS:

document.getElementById('test').setAttribute('class', 'abc');

6、CSS样式操作

设置样式

JQuery:

(也可批量操作)

$('#test').css('height', '10px');

JS:

document.getElementById('test').style.height = '10px';

获取样式

JQuery：

$('#test').css('height') 

JS：

var getStyle = function(dom, attr) {   
  return dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, false)[attr];  
};
getStyle(document.getElementById('test'), 'height');

7、字符串操作

去除空格

JQuery:

$.trim(' abc ')  

JS：

function trim(str){
  if(str.trim) {
    return str.trim();
  } else {
    return str.replace(/^\s+|\s+$/g, '');
  }
}

trim(' abc ');

8、JSON操作

JSON序列化

JQuery：

$.stringify({name: "TG"}) 

JS：

JSON.stringify({name: "TG"})

JSON反序列化

JQuery:

$.parseJSON('{ "name": "TG" }')

JS：

JSON.parse('{ "name": "TG" }')

9、AJAX请求

get请求

JQuery：

$.get(url,function(data){
    
})

JS：

function ajaxGet(url,callback)
    let xhr = new XMLHttpRequest();
    xhr.open("GET",url);
    xhr.send(null);
    xhr.onreadystatechange=function(){
    if(xhr.readyState === 4 && xhr.status === 200){
        let respData = xhr.responseText;
   		callback(respData);
    }
}
ajaxGet(url,function(respData){
    
})

post请求：

JQuery：

$.post(url,function(respData){
    
})

JS：

function ajaxPost(url,data,callback)
    let xhr = new XMLHttpRequest();
    xhr.open("POST",url);
 	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.send(data);
    xhr.onreadystatechange=function(){
    if(xhr.readyState === 4 && xhr.status === 200){
        let data = xhr.responseText;
   		callback(data);
    }
}
ajaxPost(url,data,function(respData){
    
})