첨부파일 https://eond.com/jquery/361414

제가 읽어본 jQuery 설명 블로그 중 가장 쉽게 설명한 오중호랑이의 비밀로그입니다. ^^
너무 예전 자료이고 자료의 양도 5개 밖에 없지만 가장 쉽게 jQuery를 이해하실 수 있으실 겁니다.


 

보통의 경우 console.log를 사용하여 콘솔에 로그를 찍어봅니다만, 확실히 확인하기 위하여 alert함수를 사용하기로 합니다.

alert함수는 알다시피 파라메터를 메시지로 경고합니다.

1
alert('ojtiger.com');

5번 라인에 위 소스를 추가해보세요.

저장하시고, 페이지를 실행시켜보세요.

여기 까지 따라왔다면 정말 소질이 있는분입니다.

그럼 jQuery를 사용하여 alert함수를 실행해 보도록 하겠습니다. 방금 추가한 5번째 라인을 삭제하시고 다음과 같이 입력해보세요.

1
2
3
$(document).ready(function(){
    alert('ojtiger.com');
});

저장하시고 페이지를 새로고침 해서 다시 실행해보세요.

새삼스럽게 이미지를 올리지 않을꺼에요. 결과는 같습니다 다만 과정은 다릅니다.

앞서 alert만 호출한 경우와는 다르게 jQuery를 이용하여 호출한 alert은 ready 메소드를 사용하여 문서의 DOM이 모두 로드 되었을때 실행되었습니다.

비슷한 방법으로 다음과 같은 방법이 있습니다.

 

1
2
3
$(window).load(function(){
    alert('ojtiger.com');
});

이것도 결과는 같습니다. 하지만 내부적으로 어떠한 순서의 차이가 있습니다.

브라우저가 HTML파일을 읽어오는 순서

 

이해가 됐나요? 우리는 특별한 이유가 없으면 첫번째 방법인 ready메소드를 사용해서 jQuery를 구현해 나갈 것 입니다.

자바스크립트 조차 몇번 다루어보지 않아서 메소드가 뭔지, DOM이 뭔지 모르시겠다구요?

아직 충분히 몰라도 좋습니다. 위 소스와 아래 호랑이의 설명을 보고 이해하려 하지마시고 그냥 외우세요.

다 외우셨으면 다음장으로 넘어가기에 충분합니다.

 

$ = 그냥 문법입니다. 모든 셀렉터앞에는 '$'를 사용합니다.
document = 셀렉터입니다. 괄호안에 CSS 문법을 사용해서 html문서의 요소를 선택할 수 있습니다. 다만, 여기서는 document란 값을 주어서 문서전체를 선택했네요.
.ready = 레디 메소드 입니다. "준비가 되면" 으로 이해하시면 됩니다.
function = 핸들러입니다. 핸들러가 뭘까요, 이해하려하지마세요 넘어가도록 하겠습니다.

코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 142 articles in 6 / 8 pages
번호 제목 제목 날짜날짜
공지 슬라이더 스크립트 4종 2016/07/03 0
공지 jQuery 추천 사이트 2015/06/08 0
현재글 [팁] [기초추천] jQuery ready와 load의 차이 (오중호랑이의 비밀로그, 2013/02/16) 파일 2015/08/27 0
40 [팁] jQuery Plugin (제이쿼리 플러그인) 만들기 2015/08/26 0
39 [플러그인] 그 밖에 다양한 제이쿼리 플러그인 2015/08/26 0
38 [팁] [jQuery] stopPropagation, preventDefault, return false 간의 차이점 2015/08/26 0
37 [플러그인] [jQuery] 커스텀 스크롤바 파일 2015/08/26 0
36 [기초활용] [jQuery] 리스트 목록 정렬 2015/08/25 0
35 [플러그인] selectivizr 2015/08/25 0
34 [플러그인] jQuery 이미지 슬라이딩뷰 플러그인, jcarousel 2015/08/24 0
33 [기초활용] [jQuery/Javascript] 접속한 주소 확인 2015/08/23 0
32 [플러그인] jquery Sidr plugin, 반응형 사이드바 플러그인 2015/08/22 0
31 [플러그인] jQuery.innerfade.js 플러그인, 이미지 페이드인/페이드아웃 파일 2015/08/20 0
30 [기초활용] [jQuery] 화면 전환시 스르륵/천천히/부드럽게 화면(페이지) 전환 2015/08/18 0
29 [고급활용] jQuery 탭+네비게이션 버튼 2015/08/09 0
28 [기초활용] [jquery] 외부 함수에 $(this)를 참조하고자 할 때 2015/08/14 0
27 [팁] [스크랩] jQuery 퍼포먼스 향상을 위한 Tips And Tricks 2015/08/13 0
26 [플러그인] jquery Validation 2015/08/13 0
25 [추천사이트] jQuery 함수 정리해놓은 사이트 2015/08/12 0
24 [메소드] [jQuery] parseInt() 2015/08/13 0
23 [고급활용] JQuery엘리먼트에 새로운 함수를 추가(JQuery.fn.extend(object)) 2015/08/13 0

해시태그 디렉터리