jQuery属性的相关js实现方法

元素操作

Add Class

//JQUERY$(el).addClass(className);//js//谷歌浏览器，火狐浏览器，IE8+if (el.classList) ?el.classList.add(className);else ?el.className += ‘ ‘ + className;//谷歌浏览器，火狐浏览器，IE10+el.classList.add(className);

After

//JQUERY$(el).after(htmlString);//js 谷歌浏览器，火狐浏览器，IE8+el.insertAdjacentHTML(‘afterend‘, htmlString);

Append

//JQUERY$(parent).append(el);//js谷歌浏览器，火狐浏览器，IE8+parent.appendChild(el);

Before

//JQUERY$(el).before(htmlString);//js谷歌浏览器，火狐浏览器，IE8+el.insertAdjacentHTML(‘beforebegin‘, htmlString);

Children

//JQUERY$(el).children();//js//谷歌浏览器，火狐浏览器，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){});//js谷歌浏览器，火狐浏览器，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){});//js谷歌浏览器，火狐浏览器，IE9+var elements = document.querySelectorAll(selector);Array.prototype.forEach.call(elements, function(el, i){});

Empty

 ???//JQUERY ???$(el).empty(); ???//js谷歌浏览器，火狐浏览器，IE8+ ???while(el.firstChild) ?????el.removeChild(el.firstChild); ??//js谷歌浏览器，火狐浏览器，IE9+ ???el.innerHTML = ‘‘;

过滤filter

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

获取属性值attr

 ???//JQUERY ???$(el).attr(‘tabindex‘); ??//谷歌浏览器，火狐浏览器，IE8+ ???el.getAttribute(‘tabindex‘);

获取Html内容

//JQUERY$(el).html();//jsel.innerHTML

获取CSS样式

//JQUERY$(el).css(ruleName);//谷歌浏览器，火狐浏览器，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));//jsel === 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‘);

Next

//JQUERY$(el).next();//谷歌浏览器，火狐浏览器，IE8+// nextSibling can include text nodesfunction nextElementSibling(el) { ?do { el = el.nextSibling; } while ( el && el.nodeType !== 1 ); ?return el;}el.nextElementSibling || nextElementSibling(el);//谷歌浏览器，火狐浏览器，IE9+el.nextElementSibling

Offset

//JQUERY$(el).offset();//js谷歌浏览器，火狐浏览器，IE8+var rect = el.getBoundingClientRect(){ ?top: rect.top + document.body.scrollTop, ?left: rect.left + document.body.scrollLeft}

Outer Width

//JQUERY$(el).outerWidth();//jsel.offsetWidth

Parent

//JQUERY$(el).parent();//jsel.parentNode

Position

//JQUERY$(el).position();//js{left: el.offsetLeft, top: el.offsetTop}

Prev

//JQUERY$(el).prev();//谷歌浏览器，火狐浏览器，IE8+// prevSibling can include text nodesfunction previousElementSibling(el) { ?do { el = el.previousSibling; } while ( el && el.nodeType !== 1 ); ?return el;}el.previousElementSibling || previousElementSibling(el);//谷歌浏览器，火狐浏览器，IE9+el.previousElementSibling

Remove

//JQUERY$(el).remove();//js谷歌浏览器，火狐浏览器，IE8+el.parentNode.removeChild(el);

Remove Class

//JQUERY$(el).removeClass(className);//js谷歌浏览器，火狐浏览器，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 possibleel.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‘});//js谷歌浏览器，火狐浏览器，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.createEventvar 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);

proxy

//JQUERY$.proxy(fn, context);//谷歌浏览器，火狐浏览器，IE8+fn.apply(context, arguments);//谷歌浏览器，火狐浏览器，IE9+fn.bind(context);

bind

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

ajax

新AJAX方法fetch()

基本Fetch用法

让我们先用一个例子来比较一下使用 XMLHttpRequest 和使用 fetch 之间的不同。我们要请求一个URL，获取JSON格式的返回结果。

原来的XMLHttpRequest

一个 XMLHttpRequest 请求需要两个监听器来捕捉 success 和 error 两种情形，而且需要调用 open() 和 send() 方法。

function reqListener() { ???var data = JSON.parse(this.responseText); ???console.log(data); ?}function reqError(err) { ???console.log(‘Fetch Error :-S‘, err); ?}var oReq = new XMLHttpRequest(); ?oReq.onload = reqListener; ?oReq.onerror = reqError; ?oReq.open(‘get‘, ‘./api/some.json‘, true); ?oReq.send();

Fetch方法：

我们的 fetch 请求的代码基本上是这样的：

fetch(‘./api/some.json‘) ???.then( ?????function(response) { ???????if (response.status !== 200) { ?????????console.log(‘Looks like there was a problem. Status Code: ‘ + ???????????response.status); ?????????return; ???????} ?????// Examine the text in the response ???????response.json().then(function(data) { ?????????console.log(data); ???????}); ?????} ???) ???.catch(function(err) { ?????console.log(‘Fetch Error :-S‘, err); ???});

用fetch执行表单数据提交

在WEB应用中，提交表单是非常常见的操作，用fetch来提交表单数据也是非常简洁。

fetch里提供了 method 和 body 参数选项。

fetch(url, { ?????method: ‘post‘, ?????headers: { ???????"Content-type": "application/x-www-form-urlencoded; charset=UTF-8" ?????}, ?????body: ‘foo=bar&lorem=ipsum‘ ???}) ?.then(json) ???.then(function (data) { ?????console.log(‘Request succeeded with JSON response‘, data); ???}) ???.catch(function (error) { ?????console.log(‘Request failed‘, error); ???});

在Fetch请求里发送用户身份凭证信息

如果你想在fetch请求里附带cookies之类的凭证信息，可以将 credentials 参数设置成 “include” 值。

fetch(url, { ???credentials: ‘include‘ ?})

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 = ‘‘;