首页 > 代码库 > 使用原生JavaScript

使用原生JavaScript


如果你只需要针对现代浏览器,很多功能使用原生的 JavaScript 就可以实现。

DOM Selectors

//jQueryvar ele = $("#id .class");
//native javascriptvar ele = document.querySelectorAll("#id .class");
//or native javascriptvar ele1 = document.getElementById("id");var ele = ele1.getElementsByClassName("ele1");

DOM 操作

Create elements

//jQueryvar newEl = $(‘<div />‘);
//native javascriptvar newEl = document.createElement(‘div‘);

 

Append

//jQuery#("#container").append("<span>content</span>");
//native javascriptvar span = document.createElement("span");span.appendChild(document.createTextNode("content"));document.getElementById("container").appendChild(span);
//or native javascript, jQuery uses the native innerHTML methoddocument.getElementById("container").innerHTML += "<span>content</span>";

 

remove all child nodes

//jQuery$("container").empty();
//The native equivalent using innerHTMLdocument.getElementById("container").innerHTML = null;
//or native javascript using removeChildvar c = document.getElementById("container");while(c.lastChild) c.removeChild(c.lastChild);

 

remove the whole elemet from the DOM 

//jQuery$("#container").remove();
//native javascriptvar c = document.getElementById("container");c.parentNode.removeChild(c);

 

Clone the whole element from the DOM

//jQueyvar cloneEl = $("#container").clone();
//native javasriptvar cloneEl = document.getElementById("container").cloneNode(true);

 

 parent

//jQuery$(‘#el‘).parent();
//ntive javascriptdocument.getElementById(‘el‘).parentNode;

 

prev/next element

//jQuery$("#el").prev();$("#el").next();
//native javascriptdocument.getElementById("el").previousElementSibling;document.getElementById("el").nexElementSibling;

css manipulation

class manipulation

//jQuery$("#ele").addClass("myclass");
$("#ele").removeClass("myclass");
$("#ele").toggleClass("myclass");

 

//native javascriptfunction addClasses(node, cla){  if(!node.length) node = [node];  for(var n=0,m=node.length;n<m;n++){    if((" "+node[n].className+" ").indexOf(" "+cla+" ") <0){      node[n].className += " "+cla;    }  }}function removeClass(node, cla){  if(!node.length) node = [node];  for(var n=0,m=node.length;n<m;n++){    if((" "+node[n].className+" ").indexOf(" "+cla+" ") >= 0){      node[n].className = (" "+node[n].className+" ").replace(" "+cla+" ", " ").replace( /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, "" );    }  } }//remove myclass to all nodesremoveClass(document.querySelectorAll("p"), "myclass");function toggleClass(node, cla){  if(!node.length) node = [node];  for(var n=0,m=node.length;n<m;n++){    if((" "+node[n].className+" ").indexOf(" "+cla+" ") >= 0){      node[n].className = (" "+node[n].className+" ").replace(" "+cla+" ", " ").replace( /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, "" );    }else{      node[n].className += " "+cla;    }  }}//toggle myclass to all nodestoggleClass(document.querySelectorAll("p"), "myclass");

 

//or native javascript using classListdocument.getElementById("ele").classList.add("myclass");
document.getElementById("ele").classList.remove("myclass");
document.getElementById("ele").classList.toggle("myclass");

 

style manipulation

//jQuery$("#ele").css({  color: "#c00"})
//native javascriptvar ele = document.getElementById("ele");ele.style.color = "#c00";

 

set/get attribute

//jQuery$(‘#ele‘).attr(‘key‘, ‘value‘);$(‘#ele‘).attr(‘key‘);
//native javascriptdocument.getElementById("ele").setAttribute(‘key‘, ‘value‘);document.getElementById("ele").getAttribute("key");

event handling

document ready

//jQuery$(start)

 

//native javascriptdocument.addEventListener("DOMContentLoaded", start);


forEach

//jQuery$("p").each(function(i){  console.log("index " + i + ": " + this);});
//native javascript[].forEach.call(document.getElementsByTagName("p"),function(obj,i){consol.log("index "+i+": "+obj)})

 

Events

//jQuery$(‘.el‘).on(‘event‘, functio(){});
//Native javascript[].forEach.call(document.querySelectorAll(‘.el‘), function(el){  el.addEventListener(‘event‘, function(){  }, false);});

Ajax

//jQuery$.get(‘url‘, function(data){});$.post(‘url‘, {data: data}, function(data){});
//native javascript//getvar xhr = new XMLHttpRequest();xhr.open(‘GET‘, url, true);xhr.onreadystatechange = function(){}xhr.send();//postvar xhr = new XMLHttpRequest();xhr.open(‘POST‘, url, true);xhr.onreadystatechange = function(){}xhr.send({data: data});

 

相关文章:

Native JavaScript Equivalents of jQuery Methods: the DOM and Forms

Native JavaScript Equivalents of jQuery Methods: Events, Ajax and Utilities

 

使用原生JavaScript