1. hiron712

    Posted

    hiron712
Changes in title
+jQueryをnativeに移行
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,168 @@
+#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 = '';
+```
+