Javascript对比JQery 不要过度依赖JQuery

作者: sponing | 来源:发表于2017-02-20 21:10 被阅读0次

不要过度依赖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';