前端,不要太过依赖JQuery库(二)

    xiaoxiao2021-03-26  8

    为什么说不要过度依赖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';
    转载请注明原文地址: https://ju.6miu.com/read-650299.html

    最新回复(0)