반응형

jQuery.parseJSON()

Categories: Utilities



보통 javascript 에서 JSON.parse 를 사용하는데, ie7 이하에서 지원을 하지 않아 오류를 발생시킨다.

따라서 jQuery 를 쓴다면 jQuery 에서 지원하는 함수를 사용하길...

$.parseJSON , jQuery.parseJSON


끝...

반응형
저작자표시 비영리 변경금지
반응형

jQuery event Binding.


어떤 요소들에 이벤트를 등록하는 작업을 binding 이라 합니다. 그렇게 하면 이벤트 리스너는 자바스크립트 해석기에 어떤 함수를 넘겨줘야 할지 알게 됩니다. 두 가지 방법으로 요소에 이벤트를 등록할 수 있습니다.



1. 페이지를 불러올 때는 이런 방법으로 요소에 이벤트를 등록할 수 있습니다.

  이런 방법을 단축 mothod 라고 합니다.

$("#myElement").click(function(){

alert($(this).text());

});



2. 이 방법도 첫번째 방법과 마찬가지지만, DOM 요소를 새로 만들었을 때처럼 페이지를 불러온뒤에 추가된 요소에도 이벤트 리스너를 등록할 수 있습니다.

$("#myElement").bind('click', function(){

alert($(this).text());

});



 첫 번째 방법은 두 번째 방법의 단축 mothod 지만 DOM 요소가 이미 존재할 때만 쓸 수 있습니다. jQuery 에는 이런 단축 method 가 많아서 코드를 깔끔하게 쓸 수 있습니다. 하지만 단축 method 에는 한계가 있습니다. 클릭할 수 있는 이미지를 추가했거나 대화형 목록에 항목을 추가하는 등 코드로 DOM 요소를 추가했다면 두 번째 방법을 사용해야 합니다.


반응형
저작자표시 비영리 변경금지
반응형

1. jQuery ready() Method


 ready()는 기본적으로 Dom 이 준비된 이후에 또는 Dom이 완전히 로드되었을 때 실행되는 함수입니다. window.onload 와의 차이는 window.onload 는 페이지의 모든 자원들이 로드된 후 실행되므로 ready() 를 사용했을 때 Dom 이후에 다운되는 자원에 대한 접근을 하게 되면  오류?가 발생할 수 있다는 점을 알고 있어야 할 것입니다.

 보통의 Dom 이라면 <body></body> 안에 존재할 것이기 때문에 jquery 를 사용하는 스크립트를 <body></body> 안의 하단에서 사용한다면 ready() 를 굳이 사용하지 않아도 같은 방법이 될 것입니다. 그리고 평균적으로 스크립트를 페이지 하단에 심는게 속도면에서 좋기 때문에 좀 더 나은 사용방법이라 말 할 수 있을 것 같습니다.



<참조>

- http://www.w3schools.com/jquery/event_ready.asp

- http://api.jquery.com/ready/


반응형
저작자표시 비영리 변경금지
반응형

1. jQuery 란?.


jQuery 란?

- jQuery 는 자바스크립트 라이브러리로 html 코드로부터 자바스크립트를 분리하기 위한 unobtrusive 자바스크립트 입니다.


브라우저와 자바스크립트.

- 기본적으로 브라우저의 레이아웃 엔진이 html 과 css를 읽어본 다음에 html dom 을 사용해서 document 를만듭니다. 

- 자바스크립트는 웹  페이지를 바꿀 때 dom을 참조하므로 페이지를 새로고침하지 않아도 됩니다.

- 자바스크립트 인터프리터는 원래 있던 html 과 css 파일을 바꾸지 않습니다. 단지 브라우저 메모리에 들어 있는 페이지의 dom 표현을 바꾸는 겁니다.


jQuery 의 기초.

- jQuery() 는 $() 와 동일합니다. () 안에는 html 문자열, css 선택자(selector), 자바스크립트객체가 들어갈 수 있습니다.


반응형
저작자표시 비영리 변경금지
반응형
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;
 
   




반응형
저작자표시 비영리 변경금지

+ Recent posts

티스토리툴바