Jquery 对比 Javascript

转自 http://www.webhek.com/you-do-not-need-jquery

AJAX

JSON

JQUERY

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

谷歌浏览器，火狐浏览器，IE8+

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onreadystatechange = function() {
if (this.readyState === 4) {
if (this.status >= 200 && this.status < 400) {
 // Success!
 var data = JSON.parse(this.responseText);
} else {
 // Error :(
 }
}
};
request.send();
request = null;

谷歌浏览器，火狐浏览器，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();

谷歌浏览器，火狐浏览器，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
});

谷歌浏览器，火狐浏览器，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() {
}
});

谷歌浏览器，火狐浏览器，IE8+

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onreadystatechange = function() {
if (this.readyState === 4) {
if (this.status >= 200 && this.status < 400) {
 // Success!
 var resp = this.responseText;
} else {
 // Error :(
 }
}
};
request.send();
request = null;

谷歌浏览器，火狐浏览器，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();

谷歌浏览器，火狐浏览器，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();

特效

淡入淡出

JQUERY

$(el).fadeIn();

谷歌浏览器，火狐浏览器，IE8+

function fadeIn(el) {
var opacity = 0;
el.style.opacity = 0;
el.style.filter = '';
var last = +new Date();
var tick = function() {
opacity += (new Date() - last) / 400;
el.style.opacity = opacity;
el.style.filter = 'alpha(opacity=' + (100 * opacity)|0 + ')';
last = +new Date();
if (opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
}
};
tick();
}
fadeIn(el);

谷歌浏览器，火狐浏览器，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);

谷歌浏览器，火狐浏览器，IE10+

el.classList.add('show');
el.classList.remove('hide');

.show {
transition: opacity 400ms;
}
.hide {
opacity: 0;
}

Hide

JQUERY

$(el).hide();

谷歌浏览器，火狐浏览器，IE8+

el.style.display = 'none';

Show

JQUERY

$(el).show();

谷歌浏览器，火狐浏览器，IE8+

el.style.display = '';

元素操作

Add Class

JQUERY

$(el).addClass(className);

谷歌浏览器，火狐浏览器，IE8+

if (el.classList)
el.classList.add(className);
else
el.className += ' ' + className;

谷歌浏览器，火狐浏览器，IE10+

el.classList.add(className);

After

JQUERY

$(el).after(htmlString);

谷歌浏览器，火狐浏览器，IE8+

el.insertAdjacentHTML('afterend', htmlString);

Append

JQUERY

$(parent).append(el);

谷歌浏览器，火狐浏览器，IE8+

parent.appendChild(el);

Before

JQUERY

$(el).before(htmlString);

谷歌浏览器，火狐浏览器，IE8+

el.insertAdjacentHTML('beforebegin', htmlString);

Children

JQUERY

$(el).children();

谷歌浏览器，火狐浏览器，IE8+

var children = [];
for (var i = el.children.length; i--;) {
 // Skip comment nodes on IE8
 if (el.children[i].nodeType != 8)
children.unshift(el.children[i]);
}

谷歌浏览器，火狐浏览器，IE9+

el.children

Clone

JQUERY

$(el).clone();

谷歌浏览器，火狐浏览器，IE8+

el.cloneNode(true);

Contains

JQUERY

$.contains(el, child);

谷歌浏览器，火狐浏览器，IE8+

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

Contains Selector

JQUERY

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

谷歌浏览器，火狐浏览器，IE8+

el.querySelector(selector) !== null

Each

JQUERY

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

谷歌浏览器，火狐浏览器，IE8+

function forEachElement(selector, fn) {
var elements = document.querySelectorAll(selector);
for (var i = 0; i < elements.length; i++)
fn(elements[i], i);
}
forEachElement(selector, function(el, i){
});

谷歌浏览器，火狐浏览器，IE9+

var elements = document.querySelectorAll(selector);
Array.prototype.forEach.call(elements, function(el, i){
});

Empty

JQUERY

$(el).empty();

谷歌浏览器，火狐浏览器，IE8+

while(el.firstChild)
el.removeChild(el.firstChild);

谷歌浏览器，火狐浏览器，IE9+

el.innerHTML = '';

过滤

JQUERY

$(selector).filter(filterFn);

谷歌浏览器，火狐浏览器，IE8+

function filter(selector, filterFn) {
var elements = document.querySelectorAll(selector);
var out = [];
for (var i = elements.length; i--;) {
if (filterFn(elements[i]))
out.unshift(elements[i]);
}
return out;
}
filter(selector, filterFn);

谷歌浏览器，火狐浏览器，IE9+

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

查找子元素

JQUERY

$(el).find(selector);

谷歌浏览器，火狐浏览器，IE8+

el.querySelectorAll(selector);

查找

JQUERY

$('.my #awesome selector');

谷歌浏览器，火狐浏览器，IE8+

document.querySelectorAll('.my #awesome selector');

获取属性值

JQUERY

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

谷歌浏览器，火狐浏览器，IE8+

el.getAttribute('tabindex');

获取Html内容

JQUERY

$(el).html();

谷歌浏览器，火狐浏览器，IE8+

el.innerHTML

获取外层Html内容

JQUERY

$('<div>').append($(el).clone()).html();

谷歌浏览器，火狐浏览器，IE8+

el.outerHTML

获取CSS样式

JQUERY

$(el).css(ruleName);

谷歌浏览器，火狐浏览器，IE8+

// Varies based on the properties being retrieved, some can be retrieved from el.currentStyle
// https://github.com/jonathantneal/Polyfills-for-IE8/blob/master/getComputedStyle.js

谷歌浏览器，火狐浏览器，IE9+

getComputedStyle(el)[ruleName];

获取文本内容

JQUERY

$(el).text();

谷歌浏览器，火狐浏览器，IE8+

el.textContent || el.innerText

谷歌浏览器，火狐浏览器，IE9+

el.textContent

Has Class

JQUERY

$(el).hasClass(className);

谷歌浏览器，火狐浏览器，IE8+

if (el.classList)
el.classList.contains(className);
else
new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);

谷歌浏览器，火狐浏览器，IE10+

el.classList.contains(className);

元素比较

JQUERY

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

谷歌浏览器，火狐浏览器，IE8+

el === otherEl

比较类名

JQUERY

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

谷歌浏览器，火狐浏览器，IE8+

var matches = function(el, selector) {
var _matches = (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector);
if (_matches) {
return _matches.call(el, selector);
} else {
var nodes = el.parentNode.querySelectorAll(selector);
for (var i = nodes.length; i--;) {
if (nodes[i] === el)
return true;
}
return false;
}
};
matches(el, '.my-class');

谷歌浏览器，火狐浏览器，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');

JQUERY

$(el).next();

谷歌浏览器，火狐浏览器，IE8+

// nextSibling can include text nodes
function nextElementSibling(el) {
do { el = el.nextSibling; } while ( el && el.nodeType !== 1 );
return el;
}
el.nextElementSibling || nextElementSibling(el);

谷歌浏览器，火狐浏览器，IE9+

el.nextElementSibling

Offset

JQUERY

$(el).offset();

谷歌浏览器，火狐浏览器，IE8+

var rect = el.getBoundingClientRect()
{
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
}

Offset Parent

JQUERY

$(el).offsetParent();

谷歌浏览器，火狐浏览器，IE8+

el.offsetParent || el

Outer Height

JQUERY

$(el).outerHeight();

谷歌浏览器，火狐浏览器，IE8+

el.offsetHeight

Outer Height With Margin

JQUERY

$(el).outerHeight(true);

谷歌浏览器，火狐浏览器，IE8+

function outerHeight(el) {
var height = el.offsetHeight;
var style = el.currentStyle || getComputedStyle(el);
height += parseInt(style.marginTop) + parseInt(style.marginBottom);
return height;
}
outerHeight(el);

谷歌浏览器，火狐浏览器，IE9+

function outerHeight(el) {
var height = el.offsetHeight;
var style = getComputedStyle(el);
height += parseInt(style.marginTop) + parseInt(style.marginBottom);
return height;
}
outerHeight(el);

Outer Width With Margin

JQUERY

$(el).outerWidth(true);

谷歌浏览器，火狐浏览器，IE8+

function outerWidth(el) {
var width = el.offsetWidth;
var style = el.currentStyle || getComputedStyle(el);
width += parseInt(style.marginLeft) + parseInt(style.marginRight);
return width;
}
outerWidth(el);

谷歌浏览器，火狐浏览器，IE9+

function outerWidth(el) {
var width = el.offsetWidth;
var style = getComputedStyle(el);
width += parseInt(style.marginLeft) + parseInt(style.marginRight);
return width;
}
outerWidth(el);

Outer Width

JQUERY

$(el).outerWidth();

谷歌浏览器，火狐浏览器，IE8+

el.offsetWidth

Parent

JQUERY

$(el).parent();

谷歌浏览器，火狐浏览器，IE8+

el.parentNode

Position

JQUERY

$(el).position();

谷歌浏览器，火狐浏览器，IE8+

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

Position Relative To Viewport

JQUERY

var offset = el.offset();
{
top: offset.top - document.body.scrollTop,
left: offset.left - document.body.scrollLeft
}

谷歌浏览器，火狐浏览器，IE8+

el.getBoundingClientRect()

Prepend

JQUERY

$(parent).prepend(el);

谷歌浏览器，火狐浏览器，IE8+

parent.insertBefore(el, parent.firstChild);

JQUERY

$(el).prev();

谷歌浏览器，火狐浏览器，IE8+

// prevSibling can include text nodes
function previousElementSibling(el) {
do { el = el.previousSibling; } while ( el && el.nodeType !== 1 );
return el;
}
el.previousElementSibling || previousElementSibling(el);

谷歌浏览器，火狐浏览器，IE9+

el.previousElementSibling

Remove

JQUERY

$(el).remove();

谷歌浏览器，火狐浏览器，IE8+

el.parentNode.removeChild(el);

Remove Class

JQUERY

$(el).removeClass(className);

谷歌浏览器，火狐浏览器，IE8+

if (el.classList)
el.classList.remove(className);
else
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');

谷歌浏览器，火狐浏览器，IE10+

el.classList.remove(className);

Replace From Html

JQUERY

$(el).replaceWith(string);

谷歌浏览器，火狐浏览器，IE8+

el.outerHTML = string;

Set Attributes

JQUERY

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

谷歌浏览器，火狐浏览器，IE8+

el.setAttribute('tabindex', 3);

Set Html

JQUERY

$(el).html(string);

谷歌浏览器，火狐浏览器，IE8+

el.innerHTML = string;

Set Style

JQUERY

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

谷歌浏览器，火狐浏览器，IE8+

// Use a class if possible
el.style.borderWidth = '20px';

Set Text

JQUERY

$(el).text(string);

谷歌浏览器，火狐浏览器，IE8+

if (el.textContent !== undefined)
el.textContent = string;
else
el.innerText = string;

谷歌浏览器，火狐浏览器，IE9+

el.textContent = string;

Siblings

JQUERY

$(el).siblings();

谷歌浏览器，火狐浏览器，IE8+

var siblings = Array.prototype.slice.call(el.parentNode.children);
for (var i = siblings.length; i--;) {
if (siblings[i] === el) {
siblings.splice(i, 1);
break;
}
}

谷歌浏览器，火狐浏览器，IE9+

Array.prototype.filter.call(el.parentNode.children, function(child){
return child !== el;
});

Toggle Class

JQUERY

$(el).toggleClass(className);

谷歌浏览器，火狐浏览器，IE8+

if (el.classList) {
el.classList.toggle(className);
} else {
var classes = el.className.split(' ');
var existingIndex = -1;
for (var i = classes.length; i--;) {
if (classes[i] === className)
existingIndex = i;
}
if (existingIndex >= 0)
classes.splice(existingIndex, 1);
else
classes.push(className);
el.className = classes.join(' ');
}

谷歌浏览器，火狐浏览器，IE9+

if (el.classList) {
el.classList.toggle(className);
} else {
var classes = el.className.split(' ');
var existingIndex = classes.indexOf(className);
if (existingIndex >= 0)
classes.splice(existingIndex, 1);
else
classes.push(className);
el.className = classes.join(' ');
}

谷歌浏览器，火狐浏览器，IE10+

el.classList.toggle(className);

事件

Off

JQUERY

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

谷歌浏览器，火狐浏览器，IE8+

function removeEventListener(el, eventName, handler) {
if (el.removeEventListener)
el.removeEventListener(eventName, handler);
else
el.detachEvent('on' + eventName, handler);
}
removeEventListener(el, eventName, handler);

谷歌浏览器，火狐浏览器，IE9+

el.removeEventListener(eventName, eventHandler);

On

JQUERY

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

谷歌浏览器，火狐浏览器，IE8+

function addEventListener(el, eventName, handler) {
if (el.addEventListener) {
el.addEventListener(eventName, handler);
} else {
el.attachEvent('on' + eventName, function(){
handler.call(el);
});
}
}
addEventListener(el, eventName, handler);

谷歌浏览器，火狐浏览器，IE9+

el.addEventListener(eventName, eventHandler);

Ready

JQUERY

$(document).ready(function(){
});

谷歌浏览器，火狐浏览器，IE8+

function ready(fn) {
if (document.readyState != 'loading'){
fn();
} else if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', fn);
} else {
document.attachEvent('onreadystatechange', function() {
if (document.readyState != 'loading')
fn();
});
}
}

谷歌浏览器，火狐浏览器，IE9+

function ready(fn) {
if (document.readyState != 'loading'){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}

指定事件触发

JQUERY

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

谷歌浏览器，火狐浏览器，IE8+

// Custom events are not natively supported, so you have to hijack a random
// event.
//
// Just use jQuery.

谷歌浏览器，火狐浏览器，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 Native

JQUERY

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

谷歌浏览器，火狐浏览器，IE8+

if (document.createEvent) {
var event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);
el.dispatchEvent(event);
} else {
el.fireEvent('onchange');
}

谷歌浏览器，火狐浏览器，IE9+

// For a full list of event types: 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){
});

谷歌浏览器，火狐浏览器，IE8+

function forEach(array, fn) {
for (i = 0; i < array.length; i++)
fn(array[i], i);
}
forEach(array, function(item, i){
});

谷歌浏览器，火狐浏览器，IE9+

array.forEach(function(item, i){
});

深度扩展

JQUERY

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

谷歌浏览器，火狐浏览器，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);

谷歌浏览器，火狐浏览器，IE8+

fn.apply(context, arguments);

谷歌浏览器，火狐浏览器，IE9+

fn.bind(context);

jQuery

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

谷歌浏览器，火狐浏览器，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);

谷歌浏览器，火狐浏览器，IE8+

function indexOf(array, item) {
for (var i = 0; i < array.length; i++) {
if (array[i] === item)
return i;
}
return -1;
}
indexOf(array, item);

谷歌浏览器，火狐浏览器，IE9+

array.indexOf(item);

Is Array

JQUERY

$.isArray(arr);

谷歌浏览器，火狐浏览器，IE8+

isArray = Array.isArray || function(arr) {
return Object.prototype.toString.call(arr) == '[object Array]';
}
isArray(arr);

谷歌浏览器，火狐浏览器，IE9+

Array.isArray(arr);

Map

JQUERY

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

谷歌浏览器，火狐浏览器，IE8+

function map(arr, fn) {
var results = [];
for (var i = 0; i < arr.length; i++)
results.push(fn(arr[i], i));
return results;
}
map(array, function(value, index){
});

谷歌浏览器，火狐浏览器，IE9+

array.map(function(value, index){
});

Now

JQUERY

$.now();

谷歌浏览器，火狐浏览器，IE8+

new Date().getTime();

谷歌浏览器，火狐浏览器，IE9+

Date.now();

Parse Html

JQUERY

$.parseHTML(htmlString);

谷歌浏览器，火狐浏览器，IE8+

var parseHTML = function(str) {
var el = document.createElement('div');
el.innerHTML = str;
return el.children;
};
parseHTML(htmlString);

谷歌浏览器，火狐浏览器，IE9+

var parseHTML = function(str) {
var tmp = document.implementation.createHTMLDocument();
tmp.body.innerHTML = str;
return tmp.body.children;
};
parseHTML(htmlString);

解析 Json

JQUERY

$.parseJSON(string);

谷歌浏览器，火狐浏览器，IE8+

JSON.parse(string);

Trim

JQUERY

$.trim(string);

谷歌浏览器，火狐浏览器，IE8+

string.replace(/^\s+|\s+$/g, '');

谷歌浏览器，火狐浏览器，IE9+

string.trim();

Type

JQUERY

$.type(obj);

谷歌浏览器，火狐浏览器，IE8+

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

alan：good, thank you!
ioy：总结的不错

Jquery 对比 Javascript的更多相关文章

节点的创建--对比jQuery与JavaScript 方法
一. 创建节点: 节点是DOM结构的基础,根据DOM规范,节点是一个很宽泛的概念,包含元素.属性.文本.文档和注释.但在实际开发中,要动态创建内容,主要操作的节点包括元素.属性和文本. 1.需求:创 ...
对比JQuery与JavaScript
JavaScript 是一种脚本语言,主要用在浏览器中,实现对网页的文档对象的操作和一些用户交互动作的处理.而 jQuery 则是 JavaScript 的一个代码库(或习惯性叫类库),它将一些在 J ...
原生js 与 jQuery对比
1.原生JS与jQuery操作DOM对比 : https://www.cnblogs.com/QianBoy/p/7868379.html 2.比较jQuery与JavaScript的不同功能实 ...
jQuery? 回归JavaScript原生API
如今技术日新月异,各类框架库也是层次不穷.即便当年漫山红遍的JQuery(让开发者write less, do more,So Perfect!!)如今也有被替代的大势.但JS原生API写法依旧:并且 ...
JQuery笔记：JQuery和JavaScript的联系与区别
来源:http://www.ido321.com/1019.html ps:LZ觉得这个标题有点大了,超出了能力范围,不喜勿碰.目前只记录LZ能力范围内的,日后持续补充. 一.JQuery对象和DOM ...
使用Javascript/jQuery将javascript对象转换为json格式数据 - 海涛的CSDN博客 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
【转载】Asp.Net中使用基于jQuery的javascript前台模版引擎JTemplate
JTemplate是基于jQuery的开源的前端模版引擎,在Jtemplate模板中可以使用if判断.foreach循环.for循环等操作,使用Jtemplate模板优点在于ajax局部刷新界面时候不 ...
jQuery 是javascript的一个库（常用插件、处理器）
jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery就是javascript的一个库,把我 ...
Eclipse添加Jquery和javascript的智能提示
使用Eclipse写Jquery和Javascript代码的时候,是没有智能提示的.我们可以使用一个插件来解决这个问题. 安装完成后,Eclipse会自动重启.重启之后,我们在项目上右键, 根据自 ...

随机推荐

Android -- ViewPager放入多个XML监听每个的控件
我这这里就用了两个imageButton的监听器,两个XML上分别一个. 昨天做了个Viewpager,今天想试试在上面弄上Button试试,结果,弄不来,然后查文档,没查到...百度了1个多小时才出 ...
SqlServer2008安装时系统配置检查器重新启动计算机失败
系统:win7 64 旗舰版软件版本:sqlserver 2008 在安装前执行:系统配置检查器的时候报错 ‘重新启动计算机失败’,如下图处理办法: RebootRequiredCheck ...
java 正则表达式获得html字符串中<img src>中的src中的url地址
public static Set<String> getImgStr(String htmlStr) { Set<String> pics = new HashSet< ...
初探 hexo博客
近期两天迷上了hexo和gitcafe.最终搭建好了自己的个人主页.以后也能够用那个来写博客啦~直接用的gitcafe的二级域名和server,(gitcafe的server在国外.速度也挺快的),h ...
easyui tree带checkbox实现单选
<ul id="regionTree"></ul> $('#regionTree').tree({ cascadeCheck: false, //onlyL ...
记录一下自己常用的maven工程的pom.xml模板
1. 带有hadoop-CDH4.2.1的pom.xml模板 <?xml version="1.0" encoding="UTF-8"?> < ...
PyQt5教程——组件 Ⅱ（八）
这部分的教程将会继续介绍PyQt5的组件.我们这节教程的内容将包括像素图(QPixmap),单行文本框(QLineEdit)和下拉列表框(QComboBox) 像素图(QPixmap) 像素图(QPi ...
Java Web开发基础（3）-JSTL
在DRP项目中接触到了JSTL标签库,对我这样的比較懒的人来说,第一感觉就是"惊艳". JSTL标签库的使用.能够消除大量复杂.繁复的工作.工作量降低的不是一点半点.是降低了一大半 ...
MySQL 设置慢查询为200ms
1:查看当前版本并设置long_query_time为0.2 mysql> select version(); +------------+ | version() | +----------- ...
编译时：virtual memory exhausted: Cannot allocate memory（转）
一.问题当安装虚拟机时系统时没有设置swap大小或设置内存太小,编译程序会出现virtual memory exhausted: Cannot allocate memory的问题,可以用swap扩 ...

Jquery 对比 Javascript

JQUERY

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

谷歌浏览器，火狐浏览器，IE8+

谷歌浏览器，火狐浏览器，IE9+

谷歌浏览器，火狐浏览器，IE10+

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);

JQUERY

$.ajax({ type: 'GET', url: '/my/url', success: function(resp) { }, error: function() { } });

谷歌浏览器，火狐浏览器，IE8+

var request = new XMLHttpRequest(); request.open('GET', '/my/url', true); request.onreadystatechange = function() { if (this.readyState === 4) { if (this.status >= 200 && this.status < 400) { // Success! var resp = this.responseText; } else { // Error :( } } }; request.send(); request = null;

谷歌浏览器，火狐浏览器，IE9+

谷歌浏览器，火狐浏览器，IE10+

特效

JQUERY

$(el).fadeIn();

谷歌浏览器，火狐浏览器，IE8+

谷歌浏览器，火狐浏览器，IE9+

谷歌浏览器，火狐浏览器，IE10+

el.classList.add('show'); el.classList.remove('hide'); .show { transition: opacity 400ms; } .hide { opacity: 0; }

JQUERY

$(el).hide();

谷歌浏览器，火狐浏览器，IE8+

el.style.display = 'none';

JQUERY

$(el).show();

谷歌浏览器，火狐浏览器，IE8+

el.style.display = '';

元素操作

JQUERY

$(el).addClass(className);

谷歌浏览器，火狐浏览器，IE8+

if (el.classList) el.classList.add(className); else el.className += ' ' + className;

谷歌浏览器，火狐浏览器，IE10+

el.classList.add(className);

JQUERY

$(el).after(htmlString);

谷歌浏览器，火狐浏览器，IE8+

el.insertAdjacentHTML('afterend', htmlString);

JQUERY

$(parent).append(el);

谷歌浏览器，火狐浏览器，IE8+

parent.appendChild(el);

JQUERY

$(el).before(htmlString);

谷歌浏览器，火狐浏览器，IE8+

el.insertAdjacentHTML('beforebegin', htmlString);

JQUERY

$(el).children();

谷歌浏览器，火狐浏览器，IE8+

var children = []; for (var i = el.children.length; i--;) { // Skip comment nodes on IE8 if (el.children[i].nodeType != 8) children.unshift(el.children[i]); }

谷歌浏览器，火狐浏览器，IE9+

el.children

JQUERY

$(el).clone();

谷歌浏览器，火狐浏览器，IE8+

el.cloneNode(true);

JQUERY

$.contains(el, child);

谷歌浏览器，火狐浏览器，IE8+

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

JQUERY

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

谷歌浏览器，火狐浏览器，IE8+

el.querySelector(selector) !== null

JQUERY

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

谷歌浏览器，火狐浏览器，IE8+

function forEachElement(selector, fn) { var elements = document.querySelectorAll(selector); for (var i = 0; i < elements.length; i++) fn(elements[i], i); } forEachElement(selector, function(el, i){ });

谷歌浏览器，火狐浏览器，IE9+

var elements = document.querySelectorAll(selector); Array.prototype.forEach.call(elements, function(el, i){ });

JQUERY

$(el).empty();

谷歌浏览器，火狐浏览器，IE8+

while(el.firstChild) el.removeChild(el.firstChild);

谷歌浏览器，火狐浏览器，IE9+

el.innerHTML = '';

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

`$.ajax({ type: 'POST', url: '/my/url', data: data });`

`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);`

`$.ajax({ type: 'GET', url: '/my/url', success: function(resp) { }, error: function() { } });`

`var request = new XMLHttpRequest(); request.open('GET', '/my/url', true); request.onreadystatechange = function() { if (this.readyState === 4) { if (this.status >= 200 && this.status < 400) { // Success! var resp = this.responseText; } else { // Error :( } } }; request.send(); request = null;`

`$(el).fadeIn();`

`el.classList.add('show'); el.classList.remove('hide');`

`.show { transition: opacity 400ms; } .hide { opacity: 0; }`

`$(el).hide();`

`el.style.display = 'none';`

`$(el).show();`

`el.style.display = '';`

`$(el).addClass(className);`

`if (el.classList) el.classList.add(className); else el.className += ' ' + className;`

`el.classList.add(className);`

`$(el).after(htmlString);`

`el.insertAdjacentHTML('afterend', htmlString);`

`$(parent).append(el);`

`parent.appendChild(el);`

`$(el).before(htmlString);`

`el.insertAdjacentHTML('beforebegin', htmlString);`

`$(el).children();`

`var children = []; for (var i = el.children.length; i--;) { // Skip comment nodes on IE8 if (el.children[i].nodeType != 8) children.unshift(el.children[i]); }`

`el.children`

`$(el).clone();`

`el.cloneNode(true);`

`$.contains(el, child);`

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

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

`el.querySelector(selector) !== null`

`$(selector).each(function(i, el){ });`

`function forEachElement(selector, fn) { var elements = document.querySelectorAll(selector); for (var i = 0; i < elements.length; i++) fn(elements[i], i); } forEachElement(selector, function(el, i){ });`

`var elements = document.querySelectorAll(selector); Array.prototype.forEach.call(elements, function(el, i){ });`

`$(el).empty();`

`while(el.firstChild) el.removeChild(el.firstChild);`

`el.innerHTML = '';`

`$(selector).filter(filterFn);`

`function filter(selector, filterFn) { var elements = document.querySelectorAll(selector); var out = []; for (var i = elements.length; i--;) { if (filterFn(elements[i])) out.unshift(elements[i]); } return out; } filter(selector, filterFn);`

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

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

`el.querySelectorAll(selector);`

`$('.my #awesome selector');`

`document.querySelectorAll('.my #awesome selector');`

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

`el.getAttribute('tabindex');`

`$(el).html();`

`el.innerHTML`

`$('<div>').append($(el).clone()).html();`

`el.outerHTML`

`$(el).css(ruleName);`

`// Varies based on the properties being retrieved, some can be retrieved from el.currentStyle // https://github.com/jonathantneal/Polyfills-for-IE8/blob/master/getComputedStyle.js`

`getComputedStyle(el)[ruleName];`

`$(el).text();`

`el.textContent || el.innerText`

`el.textContent`