JavaScript 와 jQuery 비교 정리

jQuery 로 간단하게 하는 것이 Javascript 코드와 비교표를 통해서 정리하며, 계속 추가할 것이다.

jQuery	JavaScript
$(document).ready(function() { }); 또는 $(function () { });	window.onload=function(){ }
$("p").css("background-color", "#f60");	var p=document.getElementsByTagName("p");  p.style.backgroundColor="#f60";
$("#navi").css("background-color", "#f60");	var navi=document.getElementById("navi");  navi.style.backgroundColor="#f60";
$("#element1").on('click', function() {         // do something on click  }  또는   $("#element1").click(function() {         // do something on click  });	var x = document.getElementById("element1"); if (x.addEventListener) { // IE 9 이상, 타브라우저     x.addEventListener("click", myFunction); } else if (x.attachEvent) { // For IE 8 and earlier versions     x.attachEvent("onclick", myFunction); }
	document.getElementById("element1") .addEventListener('click',doSomething,false);
$('#outer').on('mouseup', function (event) {     alert('This alert should not show up!'); }, false);	document.getElementById('outer').addEventListener('mouseup', function (event) {     alert('This alert should not show up!'); }, false);
$(".class1.class2").eq(0).text(1254);	document.querySelectorAll('.class1.class2')[0].textContent = 1254;
	document.querySelectorAll('.class1.class2')[0].innerHTML = 1254;

jQuery 개발시 주의사항

jQuery CDN에 있는 jquery-latest.js 라는 최신 버전을 사용하는 것에 주의해야 한다.

개발할 당시에 사용했던 버전에 최적화되어 있을 수 있으니 반드시 최신버전이 좋은 것은 아니다.

Javascript 를 모르고 jQuery 만 배우면 한계에 부딪치므로 기초부터 튼튼히 배우는 게 좋은데 체계적으로 배우지 않아서 그런지 쉽지 않다.

jQuery 라이브러리만 사용하지 말고 어떻게 코딩하면 고객에게 더 좋은 Web  페이지를 제공해 줄 수 있는지 어떻게 하면 더 깔끔하게 개발할 수 있는지 고민을 하는 것이 바로 고급 Web 개발자로 들어서는 길이란다.