1. hiron712

    No comment

    hiron712
Changes in body
Source | HTML | Preview
@@ -1,168 +1,169 @@
#jQueryをnativeに移行
__概要__
jQueryに依存しないJavaScript開発をするための置き換え方法
``` js
jQuery.noConflict();
var j$ = jQuery;
```
## AJAX
__JSON__
__jQuery__
```js
$.getJSON('/my/url', function(data) {
});
```
__IE9+__
```js
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__
+
```js
$.ajax({
type: 'POST',
url: '/my/url',
data: data
});
```
__IE8+__
```js
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__
```js
$.ajax({
type: 'GET',
url: '/my/url',
success: function(resp) {
},
error: function() {
}
});
```
__IE9+__
```js
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__
```js
$(el).fadeIn();
```
__IE9+__
```js
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__
```js
$(el).hide();
```
__IE8+__
```js
el.style.display = 'none';
```
__Show__
__jQuery__
```js
$(el).show();
```
__IE8+__
```js
el.style.display = '';
```