2012-6-5 jQuery event메소드

프로그래밍/jQuery 2012. 6. 5. 15:53

jQuery event메소드 - 1

• bind(‘event type’,[data] , 처리 function)
– Event 등록
• unbind(‘event type’)
– Event 해제
• one(‘event type’, function)
– 한번만 실행되는 event 처리
• live(“event type”, function)
– 현재 조건이 맞거나 앞으로 조건이 맞을 모든 요소에 event 처리
– Ajax연동 시 강력
• event 도우미 메소드
– bind() 메소드를 wrapping한 메소드들로 event명을 메소드 명으로 사용
– http://api.jquery.com/category/events/ 참고
– ex : click(function(){}), mouseover(function(){})

• 처리 function
– 구문 : function([event]){처리 코드}
– 인수 : event 객체 받을 수 있음.
– event 객체 property
• data – bind() 에서 넘긴 Data
• target – event 소스 객체

'프로그래밍 > jQuery' 카테고리의 다른 글

2012-6-5 test_onload.html[실습]  (0) 2012.06.05
2012-6-5 02_table.html[실습]  (0) 2012.06.05
2012-6-5 jQuery 03_selector_attr.html[실습]  (0) 2012.06.05
2012-6-5 jQuery cssTest[실습]  (0) 2012.06.05
2012-6-5 selector를 이용한 HTML구조 접근  (0) 2012.06.05
Posted by 조은성
,

2012-6-5 jQuery 03_selector_attr.html[실습]

프로그래밍/jQuery 2012. 6. 5. 12:20

 

* 결과

 

 

'프로그래밍 > jQuery' 카테고리의 다른 글

2012-6-5 02_table.html[실습]  (0) 2012.06.05
2012-6-5 jQuery event메소드  (0) 2012.06.05
2012-6-5 jQuery cssTest[실습]  (0) 2012.06.05
2012-6-5 selector를 이용한 HTML구조 접근  (0) 2012.06.05
2012-6-4 jQuery개요 및 기본문법  (0) 2012.06.04
Posted by 조은성
,

2012-6-5 jQuery cssTest[실습]

프로그래밍/jQuery 2012. 6. 5. 12:18

 

jquery_src_tempalate1.zip

* 결과

 

 

 

'프로그래밍 > jQuery' 카테고리의 다른 글

2012-6-5 02_table.html[실습]  (0) 2012.06.05
2012-6-5 jQuery event메소드  (0) 2012.06.05
2012-6-5 jQuery 03_selector_attr.html[실습]  (0) 2012.06.05
2012-6-5 selector를 이용한 HTML구조 접근  (0) 2012.06.05
2012-6-4 jQuery개요 및 기본문법  (0) 2012.06.04
Posted by 조은성
,

2012-6-5 selector를 이용한 HTML구조 접근

프로그래밍/jQuery 2012. 6. 5. 09:55
기본 문법
• jQuery 라이브러리 등록
– <script>로 다운받은 파일 등록
– URL로 등록
• <script src="http://code.jquery.com/jquery-latest.js">
• Selector함수
– jQuery 함수를 적용할 요소를 찾는 함수
– jQuery(“selector”) 또는 $(“selector”)
• Selector함수.jQuery커맨드
– jQuery커맨드는 jQuery가 지원하는 메소드임
– jQuery Chain
• 예
– jQuery(“#layer”).html(“안녕”);
– $(“p”).css(“color”, “red”).css(“background”, “blue”);

Selector를 이용해 HTML구조 접근
• 구조 태그 (HTML 태그) 와 Javascript 분리
– 동작을 HTML에 적용하기 위해 HTML 태그에 접근할 필요
– CSS기본 selector나 jQuery 정의 selector이용해 접근
• CSS selector 예
body{
background-color:#D024FE;
}
div#message_layer{
font-color:red;
}

 

 

 

jQuery 기본문법 – selector 예
• $(‘a’) – page 내 모든 <a>
• $(‘div a’) – page 내 <div> 하위에 있는 <a>
• $(‘#test’) – id가 test인 태그
• $(‘.btn’) – class가 btn인 모든 태그
• $(‘tr:odd’) - <tr> 태그들 중 홀수번째들
• $(‘tr:last’) – 문서내의 마지막 <tr>
• $(‘b:contains(‘hi’)) – hi를 content로 가진 b태그
• $(‘div:has(‘ul’)) - <ul>을 가진 <div> 태그
• $(‘input:checkbox’) – input태그중 checkbox
• $(‘td nth-child(2n)’) –2의 배수 번째 <td>

$(document).ready(callback 함수)
• jQuery 이벤트 메서드 중 하나
• 문서의 DOM 요소들을 조작 할 수 있는 시점에서 호출
• javascript의 load 이벤트와 비슷
• 예
$(document).ready(function(){
alert('a');
}
);

'프로그래밍 > jQuery' 카테고리의 다른 글

2012-6-5 02_table.html[실습]  (0) 2012.06.05
2012-6-5 jQuery event메소드  (0) 2012.06.05
2012-6-5 jQuery 03_selector_attr.html[실습]  (0) 2012.06.05
2012-6-5 jQuery cssTest[실습]  (0) 2012.06.05
2012-6-4 jQuery개요 및 기본문법  (0) 2012.06.04
Posted by 조은성
,

2012-6-4 jQuery개요 및 기본문법

프로그래밍/jQuery 2012. 6. 4. 16:43

* jQuery 개요

• Javascript Library
    – 오픈소스 Javascript Library
    – 존 레시그, 2006년 발표
    – http://jquery.com

• 다운로드
    – http://docs.jquery.com/Downloading_jQuery
    – jquery-X.X.X-min.js 다운
    – js 파일 다운 로드 후 사용하고자 하는 페이지에서 script 태그의 src 속성
      으로 등록해 사용
• 참고 사이트
    – http://docs.jquery.com/
    – http://visualjquery.com/

jQuery?

• Rich Client UI를 개발하는 다양한 기능을 지원
    – HTML 문서 탐색 , 이벤트처리 ,애니메이션 , ajax 상호작용
• HTML에서 구조와 동작을 분리하여 작성
    – 구조 : HTML, 동작 : Javascript
    – 강력한 selector지원
• 크로스 브라우저 지원
• 메소드 체인
• 플러그인 지원

기본 문법
• jQuery 라이브러리 등록
    – <script>로 다운받은 파일 등록
    – URL로 등록
• <script src="http://code.jquery.com/jquery-latest.js">
• Selector함수
    – jQuery 함수를 적용할 요소를 찾는 함수
    – jQuery(“selector”) 또는 $(“selector”)
• Selector함수.jQuery커맨드
    – jQuery커맨드는 jQuery가 지원하는 메소드임
    – jQuery Chain
• 예
    – jQuery(“#layer”).html(“안녕”);
    – $(“p”).css(“color”, “red”).css(“background”, “blue”);

'프로그래밍 > jQuery' 카테고리의 다른 글

2012-6-5 02_table.html[실습]  (0) 2012.06.05
2012-6-5 jQuery event메소드  (0) 2012.06.05
2012-6-5 jQuery 03_selector_attr.html[실습]  (0) 2012.06.05
2012-6-5 jQuery cssTest[실습]  (0) 2012.06.05
2012-6-5 selector를 이용한 HTML구조 접근  (0) 2012.06.05
Posted by 조은성
,

티스토리툴바