jQueryをnativeに移行
概要
jQueryに依存しないJavaScript開発をするための置き換え方法
jQuery.noConflict();
var j$ = jQuery;
AJAX
JSON
jQuery
$.getJSON('/my/url', function(data) {
});
IE9+
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
var data = JSON.parse(request.responseText);
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();
POST
jQuery
$.ajax({
type: 'POST',
url: '/my/url',
data: data
});
IE8+
var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);
Request
jQuery
$.ajax({
type: 'GET',
url: '/my/url',
success: function(resp) {
},
error: function() {
}
});
IE9+
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
var resp = request.responseText;
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();
EFFECTS
Fade In
jQuery
$(el).fadeIn();
IE9+
function fadeIn(el) {
el.style.opacity = 0;
var last = +new Date();
var tick = function() {
el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
last = +new Date();
if (+el.style.opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
}
};
tick();
}
fadeIn(el);
Hide
jQuery
$(el).hide();
IE8+
el.style.display = 'none';
Show
jQuery
$(el).show();
IE8+
el.style.display = '';