不要過度依賴JQuery Javascript對比JQery
毫無疑問，JQuery是一款非常優(yōu)秀的JavaScript庫逝钥，它讓我們開發(fā)項(xiàng)目變得更加便捷容易屑那。
不過，當(dāng)你準(zhǔn)備在一個(gè)項(xiàng)目（特別是移動(dòng)項(xiàng)目）中使用JQuery時(shí)晌缘，你真的該好好思考一下齐莲，你會(huì)用到JQuery的哪些功能，是否真的需要jQuery磷箕。因?yàn)殡S著JavaScript的不斷改善進(jìn)化选酗，現(xiàn)在它內(nèi)置的功能已經(jīng)非常強(qiáng)大，在很大程度上岳枷，已經(jīng)可以實(shí)現(xiàn)以前需要在JQuery中才能實(shí)現(xiàn)的技術(shù)（如果你的項(xiàng)目需要在IE8之前的瀏覽器中使用芒填，建議還是使用JQuery，這樣可以省卻很多兼容性問題）空繁。
1殿衰、查找搜索選擇器
按ID查找：
$('#test') => document.getElementById('test');
按class類名查找：
$('#test') => document.getElementByClassName('text');
按標(biāo)簽名查找
$('div') => document.getElementByTagName('div');
統(tǒng)一查找
$('#test') => docuemnt.querySelector('#test');
$('$test div') => document.querySelectorAll('#test div');
$('#test').find('span') => document.querySelectorAll('#test span');
獲取單個(gè)元素
$('#test div').eq(0)[0] => document.querySeletorAll('#test div')[0];
獲取HTML head body
$('html') => document.documentElement
$('head') => document.head
$('body') => document.body
判斷節(jié)點(diǎn)是否存在
$('#test').length > 0 => document.getElementById('test') !== null
$('div').length > 0 => document.querySeletorAll('div').length > 0
遍歷節(jié)點(diǎn)
$('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.querySelector('div');
forEach(div,function(elelm,i){ })
清空節(jié)點(diǎn)
$('#test').empty() => document.getElementById('test').innerHTML = '';
節(jié)點(diǎn)比較
$('div').is($('#test')) => document.querySelector('div') === document.getElementById('test')
1、獲取/設(shè)置內(nèi)容（值）
獲取/設(shè)置元素內(nèi)的內(nèi)容
$('div').html() => docuemnt.querySelector('div').innerHTML
$('div').text() => var t = document.querySelector('div');
t.textContent || t.innerText;
$('div').html('<span>abc</span>'); => document.querySelector('div').innerHTML = '<span>abc</span>';
$('div').text('abc') => document.querySelector('div').textContent = 'abc';
獲取包括元素本身的內(nèi)容
$('div').append( $('#test').clone() ).html() => document.getElementById('test').outerHTML;
$('div').prop('outerHTML') //獲取元素本身
$('div').append( $('#test').clone() ).html('<span>abc</span>') => docuemnt.getElementById('test').outerHTML = ‘<span></span>’
獲取表單值
$('input').val() => document.querySelector('input').value();
$('input').vau('abc') => document.querySeletor('input').value = 'abc';
3盛泡、class類名操作
類名新增
$('#test').addClass('a')
function addClass(elem,className){
if(elem.classList){
ele.classList.add(classNmae)
}else{
elem.className += ' ' + className;
}
}
addClass(document.getElementById('test'), 'a');
類名刪除
$('#test').removeClss('a')
function removeClass(elem,classNmae){
if(elem.classListh){
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.contains(className)
}else{
return new RegExp('(^| )' + className + '( |$)', 'gi').test(elem.className); }
}
hasClass(document.getElementById('test'), 'a');
節(jié)點(diǎn)操作
創(chuàng)建節(jié)點(diǎn)
$('div') => document.createElement('div')
復(fù)制節(jié)點(diǎn)
$('div').clone() => document.createElement('div').cloneNode(true)
插入節(jié)點(diǎn)
$('div').append('<span></span>')
var span = document.createElement('span');
docuemnt.querySelector('div').appendChild(span);
在指定節(jié)點(diǎn)之前插入新的子節(jié)點(diǎn)
$('<span>').insertBefore('#test');
var t = document.getElementById('test');
var span = document.createElement('span');
t.parentNode.insertBefore(span, t);
/*更簡單的*/
t.insertAdjacentHTML('beforeBegin', '<span></span>');
在指定節(jié)點(diǎn)后插入新的子節(jié)點(diǎn)：
$('<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>');
獲取父節(jié)點(diǎn)
$('#test').parent() => document.getElementById('test').parentNode
刪除節(jié)點(diǎn)
$('#test').remove()
var t = document.getElementById('test');
t.parentNode.removeChild(t)
獲取Element子節(jié)點(diǎn)
$('#test').children();
function children(elem){
if(ele.children){
retrun elem.children
}else {
var childen = [];
for( var i=elem.children.length;i-- ){
if( elem.children[i].nodeType != 8 ){
children.unshift(elem.children[i])
}
}
return children
}
}
children(document.getElementById('test'));
獲取下一個(gè)兄弟節(jié)點(diǎn)
$('#test').next()
function nextElementSibling(elem) {
if(elem.nextElementSibling) {
return elem.nextElementSibling;
} else {
do {
elem = elem.nextSibling;
} while ( elem && elem.nodeType !== 1 );
return elem;
}
}
獲取上一個(gè)兄弟節(jié)點(diǎn)
$('#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')
設(shè)置屬性
$('#test').attr('class','abc') => document.getElementById('test').setAttribute('class','abc')
css樣式操作
設(shè)置樣式
$('#test').css('height','10px') => documengt.getElementById('test').style.height = '10px'
獲取樣式
$('#test').css('height')
var getStyle = function(dom,attr){
reurn dom.currentStyle ? dom.cuurentStyle[attr] : getComputerStyle(dom,false)[attr]
}
getStyle(document.getElementById)('test'),'height');
獲取偽類的CSS樣式
window.getComputerStyle(el,':after')[attrName];
注：IE是不支持獲取偽類的
7闷祥、字符串操作
去除空格
$.trim(' abc');
function trim(str){
if( str.trim ){
return str.trim();
}else{
return str.replace(/^\s+|\s+$/g,'')
}
}
8、JSON操作
JSON序列化
$.stringify({name:'TG'}) => JSON.stringify({name:'TG'})
JSON反序列化
$.parseJSON('{"name":"TG"}') => JSON.parse('{"name":"TG"}')
不要過度依賴JQuery(二) Javascript對比JQery
1傲诵、位置
獲取相對于文檔位置
$('#test').offset()
function offset(elem){
var rect = elem.getBoundindClientReact();
return {
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
}
}
獲取相對于具有定位（非static）的父元素（祖先元素）的位置：著作權(quán)歸作者所有凯砍。
$('#test').position();
var t = document.getElementById('test');
var position = { top:t.offsetTop,left:t.offsetLeft }
獲取相對于可視區(qū)左上角的位置
var offset = $('#test').offset();
var position = {
top:offset.top - document.body.scrollTop,
left:offset.left - document.body.scrollLeft
}
尺寸
獲取包含內(nèi)邊距（padding）和邊框（border）的元素高寬著作權(quán)歸作者所有。
var width = $('#test').outerWidth();
var height = $('#test').outerHeight();
var t = doucment.getElementById('test');
var width = t.offsetWidth;
var height = t.offsetHeight;
獲取元素內(nèi)容的總高度
var t = document.getElementById('test');
//在沒有滾動(dòng)條的情況下拴竹，元素內(nèi)容的總高度
t.scrollHeight;
t.scrollWidth
視口大小
var pageWidth = window.innerWidth || document.documentElement.clientWidth;
var pageHieght = window.innerHeight || document.documentElement.clientHeight;
綁定自定義數(shù)據(jù)
//綁定
$('#test').data('name','TG');
//讀取
$('#test').data('name');
//移除
$('#test')悟衩。removeDate('name');
var t = document.getElementById('test');
//綁定
t.dataset.name = 'TG'
//讀取
t.dataset.name
//移除
delete t.dataset.name
事件
綁定事件
$('#test').on('click',function(){})
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(){});
移除事件
$('#test').off('click', fn);
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);
事件代理
$(document).on('click','test',fn)
function eventBorder(e,className,fn){
var target = e.target;
while(target){
if( target && target.nodeName == '#doucment' ){
break;
}else if(target.classList.contains(className)){
fn();
breadk;
};
target = target.parentNode;
}
}
addEvent(document,'click',function(e){
eventBroker(e,'test',function(){})
})
獲取Event對象
$('#test', 'click', function(event){
event = event.originalEvent;
});
var t = document.getElementById('test');
addEvent(t, 'click', function(event){
event = event || window.event;
});
DOM加載完畢
$(doucment).ready(function(){})
functon ready(fn){
if( doucment.readyState != 'loading' ){
// ie9+
document.addEventListener('DOMContentLoaded', fn);
} else {
// ie8
document.attachEvent('onreadystatechange', function() {
if (document.readyState != 'loading'){
fn();
}
});
}
}
指定事件觸發(fā)
$('#test').trigger('click');
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
$.get("test.php", { name: "TG"},
function(data){
console.log(data);
});
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 {
// 錯(cuò)誤
}
}
};
xhr.send(null);
POST
$.post("test.php", { name: "TG"},
function(data){
console.log(data);
});
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 {
// 錯(cuò)誤
}
}
};
var data = {name: "t"};
xhr.send(data);
Fetch請求
fetch(url).then(function (response) {
return response.json();
}).then(function (jsonData) {
console.log(jsonData);
}).catch(function () {
console.log('出錯(cuò)了');
});
POST
fetch(url,{
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: 'name=TG&love=1'
}).then(function(response){})
6.數(shù)組
判斷元素是否在數(shù)組內(nèi)
$.inArray(item,array)
array.indexOf(item)
判斷是否在數(shù)組
$.isArray(arr)
Array.isArray(arr)
7、特效
隱藏顯示
$('#test').hide();
var t = document.getElementById('test');
t.style.display = 'none';
$('#test').show();
t.style.display = 'block';
