使用原生JavaScript

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

DOM Selectors

//jQuery
var ele = $("#id .class");

//native javascript
var ele = document.querySelectorAll("#id .class");

//or native javascript
var ele1 = document.getElementById("id");
var ele = ele1.getElementsByClassName("ele1");

DOM 操作

Create elements

//jQuery
var newEl = $('<div />');

//native javascript
var newEl = document.createElement('div');

 

Append

//jQuery
#("#container").append("<span>content</span>");

//native javascript
var span = document.createElement("span");
span.appendChild(document.createTextNode("content"));
document.getElementById("container").appendChild(span);

//or native javascript, jQuery uses the native innerHTML method
document.getElementById("container").innerHTML += "<span>content</span>";

 

remove all child nodes

//jQuery
$("container").empty();

//The native equivalent using innerHTML
document.getElementById("container").innerHTML = null;

//or native javascript using removeChild
var c = document.getElementById("container");
while(c.lastChild) c.removeChild(c.lastChild);

 

remove the whole elemet from the DOM 

//jQuery
$("#container").remove();

//native javascript
var c = document.getElementById("container");
c.parentNode.removeChild(c);

 

Clone the whole element from the DOM

//jQuey
var cloneEl = $("#container").clone();

//native javasript
var cloneEl = document.getElementById("container").cloneNode(true);

 

 parent

//jQuery
$('#el').parent();

//ntive javascript
document.getElementById('el').parentNode;

 

prev/next element

//jQuery
$("#el").prev();
$("#el").next();

//native javascript
document.getElementById("el").previousElementSibling;
document.getElementById("el").nexElementSibling;

css manipulation

class manipulation

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

 

//native javascript
function 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 nodes
removeClass(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 nodes
toggleClass(document.querySelectorAll("p"), "myclass");

 

//or native javascript using classList
document.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 javascript
var ele = document.getElementById("ele");
ele.style.color = "#c00";

 

set/get attribute

//jQuery
$('#ele').attr('key', 'value');
$('#ele').attr('key');

//native javascript
document.getElementById("ele").setAttribute('key', 'value');
document.getElementById("ele").getAttribute("key");

event handling

document ready

//jQuery
$(start)

 

//native javascript
document.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
//get
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function(){

}
xhr.send();
//post
var 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