Don’t rely too much on JQuery



1, location,


$('#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'));
Copy the code

Gets the position relative to the parent element (ancestor element) that has positioning (non-static) :

$('#test').position()


var t = document.getElementById('test');
var position = {top: t.offsetTop, left: t.offsetLeft};
Copy the code

Gets the position relative to the upper-left corner of the viewable area

var offset = $('#test').offset();
var position = { top: offset.top - document.body.scrollTop,
          left: offset.left - document.body.scrollLeft
}


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


2, size


Gets the height and width of the element including the padding and border

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


var t = document.getElementById('test');
var width = t.offsetWidth;
var height = t.offsetHeight;
Copy the code

Gets the total height of the element’s content

var t = document.getElementById('test');
/* The total height of the element's contents without the scroll bar */
t.scrollHeight
/* The total width of the element's content without the scroll bar */
t.scrollWidth
Copy the code

Size of the viewport

var pageWidth = window.innerWidth || document.documentElement.clientWidth;
var pageHeight = window.innerHeight || document.documentElement.clientHeight;
Copy the code


3. Bind custom data


/ * binding * /
$('#test').data('name', 'TG');
/ * * /
$('#test').data('name');
/ * * / removal
$('#test').removeDate('name');


var t = document.getElementById('test');
/ * binding * /
t.dataset.name = 'TG';
/ * * /
t.dataset.name
/ * * / removal
delete t.dataset.name
Copy the code


4, events,


The binding event

$('#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(){});
Copy the code


Remove event

$('#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);
Copy the code

The event agent

$(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(){});
});
Copy the code

Get the Event Object

$('#test', 'click', function(event){
  event = event.originalEvent;
});


var t = document.getElementById('test');
addEvent(t, 'click', function(event){
  event = event || window.event;
});
Copy the code

DOM loaded

$(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();   
      }   
    });   
  }  
}

Copy the code

Specifying event firing

$('#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');
Copy the code


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 (sync)
xhr.onreadystatechange = function() {   
  if (xhr.readyState === 4) {   
    if (xhr.status >= 200 && xhr.status < 400) {   
/ / success
      var data = JSON.parse(xhr.responseText);   
    } else {   
/ / error
    }   
  }  
};

xhr.send(null);

Copy the code

POST

$.post("test.php", { name: "TG"},   
  function(data){   
    console.log(data);   
});



var xhr= new XMLHttpRequest();   
xhr.open('POST', 'test.php', true); // false (sync)
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); / / necessary
xhr.onreadystatechange = function() {       
  if (xhr.readyState === 4) {       
    if (xhr.status >= 200 && xhr.status < 400) {       
/ / success
      var data = JSON.parse(xhr.responseText);       
    } else {       
/ / error
    }       
  }     
};
var data = {name: "t"};
xhr.send(data);

Copy the code


Fetch request


GET

fetch(url).then(function (response) {      
  return response.json();    
}).then(function (jsonData) {      
  console.log(jsonData);    
}).catch(function () {      
Console. log(' something went wrong ');
});

Copy the code

POST

fetch(url,{   
  method: 'POST',   
  headers: {   
    'Content-Type': 'application/x-www-form-urlencoded'   
  },   
  body: 'name=TG&love=1'
}).then(function(response){})

Copy the code


6, arrays,


Determines whether an element is in an array

$.inArray(item, array)


array.indexOf(item)
Copy the code

Check if it’s an array

$.isArray(arr)


Array.isArray(arr)
Copy the code

An array of iteration

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


arr.map(function(value, index) {})
Copy the code


7, special effects,


Hidden display

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


var t = document.getElementById('test');
t.style.display = 'none';


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


t.style.display = 'block';
Copy the code


If there are mistakes, welcome to correct! If you have better suggestions, welcome to leave a message!