不要过度依赖JQuery Javascript对比JQery
毫无疑问，JQuery是一款非常优秀的JavaScript库，它让我们开发项目变得更加便捷容易。
不过，当你准备在一个项目（特别是移动项目）中使用JQuery时，你真的该好好思考一下，你会用到JQuery的哪些功能，是否真的需要jQuery。因为随着JavaScript的不断改善进化，现在它内置的功能已经非常强大，在很大程度上，已经可以实现以前需要在JQuery中才能实现的技术（如果你的项目需要在IE8之前的浏览器中使用，建议还是使用JQuery，这样可以省却很多兼容性问题）。
1、查找搜索选择器
按ID查找：
$('#test') => document.getElementById('test');
按class类名查找：
$('#test') => document.getElementByClassName('text');
按标签名查找
$('div') => document.getElementByTagName('div');
统一查找
$('#test') => docuemnt.querySelector('#test');
$('$test div') => document.querySelectorAll('#test div');
$('#test').find('span') => document.querySelectorAll('#test span');
获取单个元素
$('#test div').eq(0)[0] => document.querySeletorAll('#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.querySeletorAll('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.querySelector('div');
forEach(div,function(elelm,i){ })
清空节点
$('#test').empty() => document.getElementById('test').innerHTML = '';
节点比较
$('div').is($('#test')) => document.querySelector('div') === document.getElementById('test')
1、获取/设置内容（值）
获取/设置元素内的内容
$('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';
获取包括元素本身的内容
$('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');
节点操作
创建节点
$('div') => document.createElement('div')
复制节点
$('div').clone() => document.createElement('div').cloneNode(true)
插入节点
$('div').append('<span></span>')
var span = document.createElement('span');
docuemnt.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.removeChild(t)
获取Element子节点
$('#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'));
获取下一个兄弟节点
$('#test').next()
function nextElementSibling(elem) {
if(elem.nextElementSibling) {
return elem.nextElementSibling;
} else {
do {
elem = elem.nextSibling;
} while ( elem && elem.nodeType !== 1 );
return elem;
}
}
获取上一个兄弟节点
$('#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')
css样式操作
设置样式
$('#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）的父元素（祖先元素）的位置：著作权归作者所有。
$('#test').position();
var t = document.getElementById('test');
var position = { top:t.offsetTop,left:t.offsetLeft }
获取相对于可视区左上角的位置
var offset = $('#test').offset();
var position = {
top:offset.top - document.body.scrollTop,
left:offset.left - document.body.scrollLeft
}
尺寸
获取包含内边距（padding）和边框（border）的元素高宽著作权归作者所有。
var width = $('#test').outerWidth();
var height = $('#test').outerHeight();
var t = doucment.getElementById('test');
var width = t.offsetWidth;
var height = t.offsetHeight;
获取元素内容的总高度
var t = document.getElementById('test');
//在没有滚动条的情况下，元素内容的总高度
t.scrollHeight;
t.scrollWidth
视口大小
var pageWidth = window.innerWidth || document.documentElement.clientWidth;
var pageHieght = window.innerHeight || document.documentElement.clientHeight;
绑定自定义数据
//绑定
$('#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();
}
});
}
}
指定事件触发
$('#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 {
// 错误
}
}
};
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 {
// 错误
}
}
};
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('出错了');
});
POST
fetch(url,{
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: 'name=TG&love=1'
}).then(function(response){})
6.数组
判断元素是否在数组内
$.inArray(item,array)
array.indexOf(item)
判断是否在数组
$.isArray(arr)
Array.isArray(arr)
7、特效
隐藏显示
$('#test').hide();
var t = document.getElementById('test');
t.style.display = 'none';
$('#test').show();
t.style.display = 'block';
