首页 专题 H5案例 前端导航 UI框架

不要过度依赖JQuery(二)

作者:TG 日期: 2017-01-20 阅读: 2762
为什么说不要过度依赖JQuery呢?从项目方面来讲,一些项目在开发中实际用到JQuery内置功能不多,这样会造成项目臃肿;另一方面,目前的主流已经倾向于原生开发。

而在之前一篇《不要过度依赖JQuery(一)》一文中已经介绍了部分使用原生JavaScript实现JQuery功能的代码,这一章将继续列举。

1、位置

获取相对于文档的位置

$('#test').offset() 


function offset(elem) {

  var rect = elem.getBoundingClientRect()    

  return {      

    top: rect.top + document.body.scrollTop,      

    left: rect.left + document.body.scrollLeft    

  }

}

offset(document.getElementById('test'));

获取相对于具有定位(非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

}


var position = document.getElementById('test').getBoundingClientRect();


2、尺寸


获取包含内边距(padding)和边框(border)的元素高宽

var width = $('#test').outerWidth();

var height = $('#test').outerHeight();


var t = document.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 pageHeight = window.innerHeight || document.documentElement.clientHeight;


3、绑定自定义数据


/*绑定*/

$('#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


4、事件


绑定事件

$('#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 eventBroker(e, className, fn) {    

  var target = e.target;  

  while(target) {   

    if(target && target.nodeName == '#document') {   

      break;    

    } else if(target.classList.contains(className)) {  

      fn();   

      break;   

    };   

    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加载完毕

$(document).ready(function(){});


function ready(fn) {   

  if (document.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 请求


GET

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)

数组迭代

$.map(arr, function(value, index) {})


arr.map(function(value, index) {})


7、特效


隐藏显示

$('#test').hide();


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

t.style.display = 'none';


$('#test').show();


t.style.display = 'block';


如有错误,欢迎指正!如有更好建议,欢迎留言!


关注”全栈技术杂货铺“

全栈技术杂货铺