jQuery 의 장점 및 JavaScript 를 사용할 때 더 나은 경우.

1. jQuery 장점.

• 최신 버전을 사용해라. (1.4 보다 1.6이 2배 가까이 빠르다)
• id 선택자가 class 선택자보다 5-10배 이상 빠르다.
• 가상 선택자는 느리니까 최대한 쓰지 말 것. 검색 영역의 모든 요소를 다 뒤진다!!
• 부모에서 자식을 찾는 방법은 $parent.find(‘.child’) 가 제일 빠르다. 다른 것은 잊어라. (근데 왜 children() 이 더 안빠르지..)
• jQuery 객체는 꼭 필요할 때에만 만들 것.
• 항상 캐싱할 것
• 체인 방식을 애용할 것. 이미 필터링된 집합을 이용하므로 빠르다. 코드도 간단해진다.
• bind, live 보다 delegate가 좋다!
• DOM insert/append 는 가급적 한번에 끝낼 것. 무거운 연산을 해야 할 경우 일단 detach 했다가 다시 넣으면 좋다.
• $.each() 는 느리니까 그냥 for 를 쓸 수 있으면 써라.
• $.method 보다 로레벨 함수인 $.fn.method 가 빠르다.

2. JavaScript 가 나은 경우.

jQuery	JavaScript
$(document).ready(function(){  // code.. });	document.addEventListener("DOMContentLoaded",  function(){   // code ... });
var divs = $("div");	var divs = document.querySelectorAll("div");
var newDiv = $("<div/>");	var newDiv = document.createElement("div");
newDiv.addClass("foo");	newDiv.classList.add("foo");
newDiv.toggleClass("foo");	newDiv.classList.toggle("foo");
$("a").click(function() { // code… })	[].forEach.call(document.querySelectorAll("a"), function(el) { el.addEventListener("click", function() { // code… }); });
$("body").append($("<p/>"));	document.body. appendChild(document.createElement("p"));
$("img").filter(":first"). attr("alt", "My image");	document.querySelector("img"). setAttribute("alt", "My image");
var parent = $("#about").parent();	var parent = document.getElementById("about").parentNode;
$("#wrap").empty();	var wrap = document.getElementById("wrap"); while(wrap.firstChild) wrap.removeChild(wrap.firstChild);
if($("#wrap").is(":empty"))	if(!document.getElementById("wrap").hasChildNodes())
var nextElement = $("#wrap").next();	var nextElement = document.getElementById("wrap").nextSibling;