jquery属性的相关js实现方法

有些公司手机网站开发不用第三方的jquery或者zeptio，直接用原生的javascript。原生javascript功能是蛮强大的，只不过部分属性不支持IE8以下浏览器。下面对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 IE8if(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);varout=[];for(var i = elements.length; i--;){if(filterFn(elements[i]))out.unshift(elements[i]);}returnout;}

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();//js
el.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);elsenewRegExp('(^| )'+ className +'( |$)','gi').test(el.className);//谷歌浏览器，火狐浏览器，IE10+
el.classList.contains(className);

元素比较

JQUERY
$(el).is($(otherEl));//js
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)returntrue;}returnfalse;}};

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();//js
el.offsetWidth

Parent

//JQUERY
$(el).parent();//js
el.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(newRegExp('(^|\\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();}elseif(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){varevent=newCustomEvent('my-event',{detail:{some:'data'}});}else{varevent= document.createEvent('CustomEvent');event.initCustomEvent('my-event',true,true,{some:'data'});}

el.dispatchEvent(event);

Trigger Native

//JQUERY
$(el).trigger('change');//谷歌浏览器，火狐浏览器，IE8+if(document.createEvent){varevent= 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.createEventvarevent= 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]);elseout[key]= obj[key];}}}returnout;};

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];}}returnout;};

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){returnObject.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+newDate().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 =newXMLHttpRequest();
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 =newXMLHttpRequest();
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 =newXMLHttpRequest();
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 =newXMLHttpRequest();
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 =newXMLHttpRequest();
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 =newXMLHttpRequest();
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 =newXMLHttpRequest();
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 =newXMLHttpRequest();
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 ='';varlast=+newDate();var tick =function(){
    opacity +=(newDate()-last)/400;
    el.style.opacity = opacity;
    el.style.filter ='alpha(opacity='+(100* opacity)|0+')';last=+newDate();if(opacity <1){(window.requestAnimationFrame && requestAnimationFrame(tick))|| setTimeout(tick,16);}};

  tick();}

fadeIn(el);//谷歌浏览器，火狐浏览器，IE9+function fadeIn(el){
  el.style.opacity =0;varlast=+newDate();var tick =function(){
    el.style.opacity =+el.style.opacity +(newDate()-last)/400;last=+newDate();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 ='';