如果你只需要針對現代瀏覽器，很多功能使用原生的 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

?

轉載于:https://www.cnblogs.com/huanghongxia/p/4118046.html

總結

以上是生活随笔為你收集整理的使用原生JavaScript的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。