html5原生ajax,jQuery函数和原生javascript函数的相互转换

jQuery对于前端开发者来说是非常有用的一个javascript库，它能够屏蔽各种浏览器之间的差异，减少开发者代码的书写，大大的提供开发的效率。

但是有的时候你可能在开发的时候只需要用到极少量的jQuery代码，那么你就要考虑一下你是否需要引入jQuery库作为依赖。

在下面的介绍中，我们列出了一些jQuery函数及其对应的纯javascript函数的实现方法，并列出了可以实现的IE版本，如果你只需要以下的某些功能，不妨以纯js代码来实现。

AJAX

JSON

jQuery

$.getJSON('/my/url', function(data) {

});

javascript(IE10+)

var request = new XMLHttpRequest();

request.open('GET', '/my/url', true);

request.onload = function() {

if (this.status >= 200 && this.status < 400) {

// Success!

var data = JSON.parse(this.response);

} 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

});

javascript(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() {

}

});

javascript(IE10+)

var request = new XMLHttpRequest();

request.open('GET', '/my/url', true);

request.onload = function() {

if (this.status >= 200 && this.status < 400) {

// Success!

var resp = this.response;

} else {

// We reached our target server, but it returned an error

}

};

request.onerror = function() {

// There was a connection error of some sort

};

request.send();

动画效果

Fade In

jQuery

$(el).fadeIn();

javascript(IE10+)

el.classList.add('show');

el.classList.remove('hide');

.show {

transition: opacity 400ms;

}

.hide {

opacity: 0;

}

Hide

jQuery

$(el).hide();

javascript(IE8+)

el.style.display = 'none';

Show

jQuery

$(el).show();

javascript(IE8+)

el.style.display = '';

DOM元素

Add Class

jQuery

$(el).addClass(className);

javascript(IE10+)

el.classList.add(className);

After

jQuery

$(el).after(htmlString);

javascript(IE8+)

el.insertAdjacentHTML('afterend', htmlString);

Append

jQuery

$(parent).append(el);

javascript(IE8+)

parent.appendChild(el);

Before

jQuery

$(el).before(htmlString);

javascript(IE8+)

el.insertAdjacentHTML('beforebegin', htmlString);

Children

jQuery

$(el).children();

javascript(IE9+)

el.children

Clone

jQuery

$(el).clone();

javascript(IE8+)

el.cloneNode(true);

Contains

jQuery

$.contains(el, child);

javascript(IE8+)

el !== child && el.contains(child);

Contains Selector

jQuery

$(el).find(selector).length;

javascript(IE8+)

el.querySelector(selector) !== null

Each

jQuery

$(selector).each(function(i, el){

});

javascript(IE9+)

var elements = document.querySelectorAll(selector);

Array.prototype.forEach.call(elements, function(el, i){

});

Empty

jQuery

$(el).empty();

javascript(IE9+)

el.innerHTML = '';

过滤

jQuery

$(selector).filter(filterFn);

javascript(IE9+)

Array.prototype.filter.call(document.querySelectorAll(selector), filterFn);

查找子元素

jQuery

$(el).find(selector);

javascript(IE9+)

el.querySelectorAll(selector);

获取属性

jQuery

$(el).attr('tabindex');

javascript(IE9+)

el.getAttribute('tabindex');

获取 Html元素

jQuery

$(el).html();

javascript(IE9+)

el.innerHTML

Get Outer Html

jQuery

$('

').append($(el).clone()).html();

javascript(IE9+)

el.outerHTML

获取样式

jQuery

$(el).css(ruleName);

javascript(IE9+)

getComputedStyle(el)[ruleName];

获取文本

jQuery

$(el).text();

javascript(IE9+)

el.textContent

判断Class是否存在

jQuery

$(el).hasClass(className);

javascript(IE10+)

el.classList.contains(className);

匹配

jQuery

$(el).is($(otherEl));

javascript(IE10+)

el === otherEl

匹配选择器

jQuery

$(el).is('.my-class');

javascript(IE9+)

var matches = function(el, selector) {

return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);

};

matches(el, '.my-class');

Next

jQuery

$(el).next();

javascript(IE9+)

el.nextElementSibling

Offset

jQuery

$(el).offset();

javascript(IE9+)

var rect = el.getBoundingClientRect()

{

top: rect.top + document.body.scrollTop,

left: rect.left + document.body.scrollLeft

}

Offset Parent

jQuery

$(el).offsetParent();

javascript(IE8+)

el.offsetParent || el

外部高度

jQuery

$(el).outerHeight();

javascript(IE8+)

el.offsetHeight

带Margin的外部高度

jQuery

$(el).outerHeight(true);

javascript(IE9+)

function outerHeight(el) {

var height = el.offsetHeight;

var style = getComputedStyle(el);

height += parseInt(style.marginTop) + parseInt(style.marginBottom);

return height;

}

outerHeight(el);

带Margin的外部宽度

jQuery

$(el).outerWidth(true);

javascript(IE9+)

function outerWidth(el) {

var width = el.offsetWidth;

var style = getComputedStyle(el);

width += parseInt(style.marginLeft) + parseInt(style.marginRight);

return width;

}

outerWidth(el);

外部宽度

jQuery

$(el).outerWidth();

javascript(IE8+)

el.offsetWidth

父元素

jQuery

$(el).parent();

javascript(IE8+)

el.parentNode

位置

jQuery

$(el).position();

javascript(IE8+)

{left: el.offsetLeft, top: el.offsetTop}

相对于Viewport的位置

jQuery

var offset = el.offset();

{

top: offset.top - document.body.scrollTop,

left: offset.left - document.body.scrollLeft

}

javascript(IE8+)

el.getBoundingClientRect()

Prepend

jQuery

$(parent).prepend(el);

javascript(IE8+)

parent.insertBefore(el, parent.firstChild);

前一个兄弟节点

jQuery

$(el).prev();

javascript(IE9+)

el.previousElementSibling

移除节点

jQuery

$(el).remove();

javascript(IE8+)

el.parentNode.removeChild(el);

移除class

jQuery

$(el).removeClass(className);

javascript(IE10+)

el.classList.remove(className);

替换

jQuery

$(el).replaceWith(string);

javascript(IE8+)

el.outerHTML = string;

设置属性

jQuery

$(el).attr('tabindex', 3);

javascript(IE8+)

el.setAttribute('tabindex', 3);

设置HTML

jQuery

$(el).html(string);

javascript(IE8+)

el.innerHTML = string;

设置样式

jQuery

$(el).css('border-width', '20px');

javascript(IE8+)

// Use a class if possible

el.style.borderWidth = '20px';

设置文本

jQuery

$(el).text(string);

javascript(IE9+)

el.textContent = string;

兄弟节点

jQuery

$(el).siblings();

javascript(IE9+)

Array.prototype.filter.call(el.parentNode.children, function(child){

return child !== el;

});

切换class

jQuery

$(el).toggleClass(className);

javascript(IE10+)

el.classList.toggle(className);

事件

Off

jQuery

$(el).off(eventName, eventHandler);

javascript(IE9+)

el.removeEventListener(eventName, eventHandler);

On

jQuery

$(el).on(eventName, eventHandler);

javascript(IE9+)

el.addEventListener(eventName, eventHandler);

Ready

jQuery

$(document).ready(function(){

});

javascript(IE9+)

function ready(fn) {

if (document.readyState != 'loading'){

fn();

} else {

document.addEventListener('DOMContentLoaded', fn);

}

}

自定义trigger函数

jQuery

$(el).trigger('my-event', {some: 'data'});

javascript(IE9+)

if (window.CustomEvent) {

var event = new CustomEvent('my-event', {detail: {some: 'data'}});

} else {

var event = document.createEvent('CustomEvent');

event.initCustomEvent('my-event', true, true, {some: 'data'});

}

el.dispatchEvent(event);

原生trigger函数

jQuery

$(el).trigger('change');

javascript(IE9+)

// 完整的事件类型请查看: https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent

var event = document.createEvent('HTMLEvents');

event.initEvent('change', true, false);

el.dispatchEvent(event);

工具类

Array Each

jQuery

$.each(array, function(i, item){

});

javascript(IE9+)

array.forEach(function(item, i){

});

Deep Extend

jQuery

$.extend(true, {}, objA, objB);

javascript(IE8+)

var deepExtend = function(out) {

out = out || {};

for (var i = 1; i < arguments.length; i++) {

var obj = arguments[i];

if (!obj)

continue;

for (var key in obj) {

if (obj.hasOwnProperty(key)) {

if (typeof obj[key] === 'object')

deepExtend(out[key], obj[key]);

else

out[key] = obj[key];

}

}

}

return out;

};

deepExtend({}, objA, objB);

Bind

jQuery

$.proxy(fn, context);

javascript(IE9+)

fn.bind(context);

Extend

jQuery

$.extend({}, objA, objB);

javascript(IE8+)

var extend = function(out) {

out = out || {};

for (var i = 1; i < arguments.length; i++) {

if (!arguments[i])

continue;

for (var key in arguments[i]) {

if (arguments[i].hasOwnProperty(key))

out[key] = arguments[i][key];

}

}

return out;

};

extend({}, objA, objB);

Index Of

jQuery

$.inArray(item, array);

javascript(IE9+)

array.indexOf(item);

Is Array

jQuery

$.isArray(arr);

javascript(IE9+)

Array.isArray(arr);

Map

jQuery

$.map(array, function(value, index){

});

javascript(IE9+)

array.map(function(value, index){

});

Now

jQuery

$.now();

javascript(IE9+)

Date.now();

Parse Html

jQuery

$.parseHTML(htmlString);

javascript(IE9+)

var parseHTML = function(str) {

var tmp = document.implementation.createHTMLDocument();

tmp.body.innerHTML = str;

return tmp.body.children;

};

parseHTML(htmlString);

Parse Json

jQuery

$.parseJSON(string);

javascript(IE8+)

JSON.parse(string);

Trim

jQuery

$.trim(string);

javascript(IE9+)

string.trim();

Type

jQuery

$.type(obj);

javascript(IE9+)

Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, "$1").toLowerCase();