자바스크립트| 라이센스요청(안내) 주문제작 | 질문답변| 팁앤태크| 강좌 | 설문
 
 
  포인트안내 | 입금통보 | 제이쿼리 라이센스안내
오늘 : 152 명 | 어제 : 174 명 | 현재 : 22 명
 
[공지사항] 4월 출첵이벤트 (6)
+ 강좌 +
- 부족하지만 아는선에서 이제 시작하는 분들께 조금 도움이 될까 하여 작성해 보았습니다
- 댓글남겨주시면 힘이 되고 남기신 글 모두 확인되니 필요한 경우 답변 받을 수 있습니다
 
작성일 : 13-06-10 16:06
제목 [자바스크립트] 제이쿼리 시작
작성자 디블
조회수 7,463    http://designblack.com/jquery/study/jquery02.html [654]
제이쿼리 시작은 라이브러리 호출부터 한다고 했습니다...

보통은 head에 아래처럼 호출합니다..

<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>타이틀</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>


제이쿼리는 자바스크립트 이기 때문에 동일하게 <script> 안에 작성해 주면 됩니다.

alert()를 출력한다면 아래처럼 하겠습니다

<script>
 jQuery(document).ready(function(){
  jQuery('a').bind('click',function(){
   alert('제이쿼리 alert창')
  })
 })
</script>

jquery 명령을 쓸때는 jQuery 라고 앞에 붙여주어야합니다.

첫줄을 대략 보면 문서가 준비가 되면 ... 즉 요소들이 모두 로딩이 되면...이라고 해석할 수 있습니다.
a를 클릭하면 alert창을 띄우는 코드인데 script가 a 보다 먼저 나와있습니다...
로딩구문이 없으면 a를 찾지 못해 click을 연결해 주지 못해서 오류를 띄웁니다.

다시말해 head부분에 jquery를 작성할땐 모든 요소들이 모두 준비가 된후 실행하도록 ready안에 작성해 주심 됩니다

$(document).ready(function(){
            실행코드
})


반대로 요소뒤에 셋팅하게 되면 요소가 먼저 나오고 제이쿼리구문이 뒤에 나오기때문에 ready구분이 필요없게 됩니다.
개인 취향인지... 요소뒤에 스크립트를 배치하는걸 선호하는 편입니다
이렇게 하면 $(document).ready 는 작성하지 않아도 되겠죠...

그리고 jQuery 단축표현은 $로 대체 할 수 있습니다

예제에서 span은 스크립트구문뒤에 있지만 p요소를 클릭할때 span를 찾기 때문에 순서와 상관이 없는것입니다.

담엔 좀 더 구체적인 셀렉트를 테스트해보겠습니다...

원하는 동작을 시킬려면 원하는요소를 잘 선택해야 겠지요...
이링링 14-12-09 07:48
감사합니다.. ^^
프리지아 16-06-23 00:26
아직은 어렵지만 자주 보다보면 좀 더 익숙해지겠죠. 감사합니다.

 
Total 76
글번호 제목 작성자 작성날짜 조회수
초보는 초보가 가르쳐야 잘 가르친다...ㅋㄷ (66) 디블 04-27 12728
76 [자바스크립트] css text and img menu , ir , javascript menu (19) 디블 06-13 7616
75 [자바스크립트] 제이쿼리 셀렉트, css , bind (9) 디블 06-12 7836
74 [자바스크립트] 제이쿼리 시작 (2) 디블 06-10 7464
73 [자바스크립트] jquery(제이쿼리)를 위한 기초 스타일 (9) 디블 06-10 7531
72 [자바스크립트] 표준코딩? 비표준코딩? (5) 디블 06-04 7203
71 [자바스크립트] jquery(제이쿼리)? (4) 디블 06-01 7153
70 [플래시] 3.0_contextMenu (3) 디블 07-22 7694
69 [플래시] 3.0_php (11) 디블 06-22 5053
68 [플래시] 3.0_xml (10) 디블 06-18 5092
67 [플래시] 3.0_imgSkew (5) 디블 06-18 2655
66 [플래시] 3.0_textFormat (1) 디블 06-18 2927
65 [플래시] 3.0_loadMovie (6) 디블 06-18 3459
64 [플래시] 3.0_tween (2) 디블 06-17 2840
63 [플래시] 3.0_link (1) 디블 06-17 2703
62 [플래시] 3.0_hitTest (1) 디블 06-17 3509
 1  2  3  4  5  6  
디자인블랙 | 공세헌 | 부산 해운대구 중동 달맞이경동메르빌 104동 1607호 | 010-4577-5965
메일 : designblack@nate.com : 네이트온 : 10~18시
사업자등록번호 605-22-56543 | 통신판매신고 제 2008-부산진-0178호 | 이용약관
농협 : 177506-51-008469 : 공세헌