https://www.e-learn.cn/topic/1760449
元素操作
Add Class
//JQUERY$(el).addClass(className);//js//谷歌浏览器，火狐浏览器，IE8+if(el.classList) el.classList.add(className);elseel.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+varchildren = [];for(vari = 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+functionforEachElement(selector, fn){varelements =document.querySelectorAll(selector);for(vari =0; i < elements.length; i++) fn(elements[i], i);}forEachElement(selector,function(el, i){});//js谷歌浏览器，火狐浏览器，IE9+varelements =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+functionfilter(selector, filterFn){varelements =document.querySelectorAll(selector);varout = [];for(vari = 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();//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);elsenewRegExp('(^| )'+ className +'( |$)','gi').test(el.className);//谷歌浏览器，火狐浏览器，IE10+el.classList.contains(className);
元素比较
JQUERY$(el).is($(otherEl));//jsel === otherEl
比较类名
//JQUERY$(el).is('.my-class');//谷歌浏览器，火狐浏览器，IE8+varmatches =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{varnodes = el.parentNode.querySelectorAll(selector);for(vari = nodes.length; i--;) {if(nodes[i] === el)returntrue; }returnfalse; }};matches(el,'.my-class');//谷歌浏览器，火狐浏览器，IE9+varmatches =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 nodesfunctionnextElementSibling(el){do{ el = el.nextSibling; }while( el && el.nodeType !==1);returnel;}el.nextElementSibling || nextElementSibling(el);//谷歌浏览器，火狐浏览器，IE9+el.nextElementSibling
Offset
//JQUERY$(el).offset();//js谷歌浏览器，火狐浏览器，IE8+varrect = 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 nodesfunctionpreviousElementSibling(el){do{ el = el.previousSibling; }while( el && el.nodeType !==1);returnel;}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);elseel.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 possibleel.style.borderWidth ='20px';
Set Text
//JQUERY$(el).text(string);//谷歌浏览器，火狐浏览器，IE8+if(el.textContent !==undefined) el.textContent =string;elseel.innerText =string;//谷歌浏览器，火狐浏览器，IE9+el.textContent =string;
Siblings
//JQUERY$(el).siblings();//谷歌浏览器，火狐浏览器，IE8+varsiblings =Array.prototype.slice.call(el.parentNode.children);for(vari = siblings.length; i--;) {if(siblings[i] === el) { siblings.splice(i,1);break; }}//谷歌浏览器，火狐浏览器，IE9+Array.prototype.filter.call(el.parentNode.children,function(child){returnchild !== el;});
Toggle Class
//JQUERY$(el).toggleClass(className);//谷歌浏览器，火狐浏览器，IE8+if(el.classList) { el.classList.toggle(className);}else{varclasses = el.className.split(' ');varexistingIndex =-1;for(vari = classes.length; i--;) {if(classes[i] === className) existingIndex = i; }if(existingIndex >=0) classes.splice(existingIndex,1);elseclasses.push(className); el.className = classes.join(' ');}//谷歌浏览器，火狐浏览器，IE9+if(el.classList) { el.classList.toggle(className);}else{varclasses = el.className.split(' ');varexistingIndex = classes.indexOf(className);if(existingIndex >=0) classes.splice(existingIndex,1);elseclasses.push(className); el.className = classes.join(' ');}//谷歌浏览器，火狐浏览器，IE10+el.classList.toggle(className);
事件
Off
//JQUERY$(el).off(eventName, eventHandler);//谷歌浏览器，火狐浏览器，IE8+functionremoveEventListener(el, eventName, handler){if(el.removeEventListener) el.removeEventListener(eventName, handler);elseel.detachEvent('on'+ eventName, handler);}removeEventListener(el, eventName, handler);//谷歌浏览器，火狐浏览器，IE9+el.removeEventListener(eventName, eventHandler);
On
//JQUERY$(el).on(eventName, eventHandler);//谷歌浏览器，火狐浏览器，IE8+functionaddEventListener(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+functionready(fn){if(document.readyState !='loading'){ fn(); }elseif(document.addEventListener) {document.addEventListener('DOMContentLoaded', fn); }else{document.attachEvent('onreadystatechange',function(){if(document.readyState !='loading') fn(); }); }}//谷歌浏览器，火狐浏览器，IE9+functionready(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+functionforEach(array, fn){for(i =0; i
深度扩展
//JQUERY$.extend(true, {}, objA, objB);//谷歌浏览器，火狐浏览器，IE8+vardeepExtend = function(out) {out=out|| {};for(vari =1; i < arguments.length; i++) {varobj = arguments[i];if(!obj)continue;for(varkeyinobj) {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+varextend =function(out){ out = out || {};for(vari =1; i
Index Of
//JQUERY$.inArray(item,array);//谷歌浏览器，火狐浏览器，IE8+functionindexOf(array, item){for(vari =0; i
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+functionmap(arr, fn){varresults = [];for(vari =0; i < arr.length; i++) results.push(fn(arr[i], i));returnresults;}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+varparseHTML =function(str){varel =document.createElement('div'); el.innerHTML = str;returnel.children;};parseHTML(htmlString);谷歌浏览器，火狐浏览器，IE9+varparseHTML =function(str){vartmp =document.implementation.createHTMLDocument(); tmp.body.innerHTML = str;returntmp.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() 方法。
functionreqListener(){vardata =JSON.parse(this.responseText);console.log(data); }functionreqError(err){console.log('Fetch Error :-S', err); }varoReq =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+varrequest =newXMLHttpRequest();request.open('GET','/my/url',true);request.onreadystatechange =function(){if(this.readyState ===4) {if(this.status >=200&&this.status <400) {// Success!vardata =JSON.parse(this.responseText); }else{// Error :(} }};request.send();request =null;//谷歌浏览器，火狐浏览器，IE9+varrequest =newXMLHttpRequest();request.open('GET','/my/url',true);request.onload =function(){if(request.status >=200&& request.status <400) {// Success!vardata =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+varrequest =newXMLHttpRequest();request.open('GET','/my/url',true);request.onload =function(){if(this.status >=200&&this.status <400) {// Success!vardata =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+varrequest = 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+varrequest =newXMLHttpRequest();request.open('GET','/my/url',true);request.onreadystatechange =function(){if(this.readyState ===4) {if(this.status >=200&&this.status <400) {// Success!varresp =this.responseText; }else{// Error :(} }};request.send();request =null;//谷歌浏览器，火狐浏览器，IE9+varrequest =newXMLHttpRequest();request.open('GET','/my/url',true);request.onload =function(){if(request.status >=200&& request.status <400) {// Success!varresp = 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+varrequest =newXMLHttpRequest();request.open('GET','/my/url',true);request.onload =function(){if(this.status >=200&&this.status <400) {// Success!varresp =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+functionfadeIn(el){varopacity =0; el.style.opacity =0; el.style.filter ='';varlast = +newDate();vartick =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+functionfadeIn(el){ el.style.opacity =0;varlast = +newDate();vartick =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: opacity400ms;}.hide {opacity:0;}
Hide
//JQUERY$(el).hide();//谷歌浏览器，火狐浏览器，IE8+el.style.display ='none';
Show
//JQUERY$(el).show();//谷歌浏览器，火狐浏览器，IE8+el.style.display ='';
网友评论