1. jQuery 소개 - 자바스크립트 라이브러리 탄생 배경 자바스크립트가 광범위하게 활용되면서 코드의 복잡성을 해소하기 위해 기본 바탕은 특정 엘리먼트를 찾아서(셀렉터) 그 놈을 지지고 볶고(함수) 하는 거임
- 다운로드 사이트 : http://jquery.com/
2. 셀렉터 사용하기 CSS 셀렉트와 비교
jQuery가 지원하는 기본 CSS 셀렉터
jQuery가 지원하는 고급 위치 기반 셀렉터(from Dom)
jQuery 정의 필터 셀렉터
jQuery 의 선택자 예제 - $('.Class_Name') : Class 속성값이 'Class_Name' 값을 가지는 모든 엘리먼트를 선택합니다.
확장 집합 - 확장 엘리먼트 집합은 배열과 유사하다. 1. 사이즈 구하기(length) 커맨드 : size( ) 예제 : $('a').size() 모든 a 타입의 엘리먼트와 일치하는 엘리먼트의 개수 반환
2. 값 얻기 커맨드 : get( ) 예제 : $('a').get(0) = $('a')[0] var arrayA = $('a').get() arrayA 에 배열로 할당
3. 인덱스 구하기 커맨드 : index( ) 예제 : var n = $('a').index('a#abc')[0]); a엘리먼트 집합에서 아이디가 abc 인 0번째 엘리먼트의 인덱스
4. 확장 엘리먼트 집합에 추가하기 커맨드 : add( ) 예제 : $('p').add('<div>하이</div>'); p엘리먼트의 확장 엘리먼트를 생성 후 새로운 div를 추가함 * DOM 에 추가하기 위해서는 append( ) 메서드를 이용해야 한다.
5. 확장 엘리먼트 다듬기 커맨드 : not( ) 예제 : $('img[title]').not('[title*=puppy]') title이 puppy 가 아닌 이미지 엘리먼트
6. 확장 엘리먼트 다듬기2 커맨드 : filter( ) 예제 : $('img').filter('[title*=dog]') title 이 dog 인 img 엘리먼트
7. 확장 집합의 부분 집합 얻기 커맨드 : slice(begin, end ) 예제 : $('*').slice(2,3) 모든 엘리먼트를 선택 후 세번째 엘리먼트를 얻는다.
8. 찾기 커맨드 : find(셀렉터) 예제 : $('div').find('p hi') div 엘리먼트내에서 hi 문자열을 가지고 있는 p 태그를 찾는다.
9. 일치여부 커맨드 : is(셀렉터) 예제 : var hasImage = $('*").is('img'); 모든 엘리먼트 중에 img 태그가 있으면 true 없으면 false 를 리턴한다.
3. 엘리먼트 조작 1. 엘리먼트마다 함수 실행하기 - 커맨드 : each(함수) - 예제 : $('img').each(function(n){ this.alt = '하하';}); 모든 img 엘리먼트의 alt 속성을 '하하'로 바꿈 - 예제 : var arrA = new Array(); $('img').each(function(){ arrA.puch(this.alt);}); 속성을 배열에 넣음
2. 엘리먼트의 속성 가져오기 - 커맨드 : attr('속성이름') - 예제 : $('#img1').attr('alt') img1 이라는 아이디를 가진 엘리먼트의 alt 속성을 가져옴
3. 엘리먼트 속성 값 설정하기 - 커맨드 : attr('속성이름', '값' | 객체 | 함수) - 예제 : $('img').attr('alt',function(index){ return this.title; }); img 엘리먼트의 alt 속성을 함수를 이용하여 설정하기
- 커맨드 : attr(객체) - 예제 : $('img').attr({alt:'하하', title:this.id});
4. 엘리먼트 삭제하기 - 커맨드 : removeAttr('속성이름') - 예제 : $('#text1').removeAttr('readonly'); text1 의 readonly 속성을 false 로 바꾼다.(실제 속성이 지워지지는 않음)
5. 클래스 추가/삭제, 토글 - 커맨드 : addClass('클래스 이름') : removeClass('클래스 이름') : toggleClass('클래스 이름') -> 클래스 명이 존재하지 않으면 추가되고 존재하면 삭제함 : css('이름', value) - 예제 : $('div.ext').css('width',function(){ return $(this).width() + 10 + "px"; });
6.width() 함수, height() 함수
7. hasClass('이름') - return true or false
8. html() 함수, text() 함수 - 파라미터가 있으면 값을 설정, 없으면 값을 가져옴 - innerHTML 과 innerText 와 같음 - 예제 : var text1 = ('#text2').text();
9. 엘리먼트 복사 - 커맨드 : append, appendTo - 예제 : a.append(b) : a 엘리먼트에 b를 붙임 a.appendTo(b) : b 엘리먼트에 a를 붙임 - 커맨드 : prepend, prependTo -> append 와 같으나 앞쪽에 붙임 - 커맨드 : before, insertBefore, after, insertAfter -> 형제 노드로 붙임 - 커맨드 : clone -> 예제 : $('img').clone().appenTo('aa'); 모든 이미지를 복사하여 aa 엘리먼트에 덧붙인다.
10. 엘리먼트 감싸기 - 커맨드 : wrap(html 문자열 또는 엘리먼트) - 예제 : $('img.abc').wrap("<div class='gg'></div>") abc를 클래스로 갖고 있는 img 를 div 로 감싼다. - wrapAll : 일치하는 엘리먼트를 하나의 집합으로 하여 전체를 감싼다. - wrapInner : 엘리먼트의 콘텐츠를 감싼다.
11. 삭제하기 - 커맨드 : remove() - 커맨드 : empty()
4. 이벤트 1. 이벤트 바인딩 - 커맨드 : bind(이벤트타입, 핸들러 데이터, 핸들러(함수)), 없애기 : unbind -> 예제 : $('img').bind('click', function(event){ alert('안녕');}); -> 예제 : $('#img1').bind('click.group1', function(event){ alert('안녕');}); $('#img2').bind('click.group1', function(event){ alert('안녕');}); $('#img3').bind('click.group1', function(event){ alert('안녕');}); $('*').unbind('click.group1'); group1 으로 그룹 단위로 묶고 그룹 단위로 해제 할 수 있다. * 일회성 : one( ) : bind와 같으나 한번 실행 후 없어짐
2. 토글 이벤트 - 커맨드 : toggle(홀수함수, 짝수함수) -> 예제 : $('#abc').toggle(A, B); 홀수 번째 클릭 시는 A를 짝수 번째 클릭 시는 B를 실행한다.
3. 이벤트 전파 제어 - 커맨드 : stopPropagation() Dom 트리의 이벤트 전파를 막음 - 커맨드 : preventDefault() 이벤트의 기본 동작을 막음
4. mouseover 이벤트 - 커맨드 : hover(over 리스너, out 리스너) -> 예제 : $('#abc').hover(함수1, 함수2);
Event 인스턴스 프로퍼티
5. 애니메이션 1. 점진적으로 보이고 감추기 - 커맨드 : show(속도, 콜백함수), hide(속도, 콜백함수) -> 속도 : slow, normal, fast, 1/1000, 콜백 함수는 애니메이션 실행 후 호출하는 함수
2. 열리거나 닫힘 - 커맨드 : toggle(속도, 콜백함수)
3. 점차 보이고 감추기 - 커맨드 : fadeIn(속도, 콜백함수), fadeOut(속도, 콜백함수), fadeTo(속도, 투명도값, 콜백함수)
4. 슬라이드 효과로 보이고 감추기 - 커맨드 : slideDown(속도, 콜백함수), slideUp(속도, 콜백함수), slideToggle(속도, 콜백함수)
5. 애니메이션 멈추기 - 커맨드 : stop()
6. 사용자 정의 - 커맨드 : animate()
6. 문서 준비 핸들러 - 기존 : onload DOM 트리를 생성하고 모든 이미지와 다른 외부 리소스까지 로드된 후에야 onload 코드를 실행하고 페이지를 브라우저에 표시한다.(사용자의 기다림 시간이 길어짐) - JQuery : $(document).ready(function(){ 구현할 내용 }); 또는 $(function(){ 구현할 내용 }); DOM 트리가 로드 된 후 실행됨
7. 그 밖에... DOM 엘리먼트 생성하기 - 기존 : document.createElement('p'); - JQuery : $("<p>안녕</p>").insertAfter("#followMe"); 안녕이라는 값을 가진 P태그를 followMe 란 아이디를 가진 객체의 뒤쪽에 추가하는 작업
jQuery 맵
Simple example $("#fontControll li a").click(clickHandler); $('.test_error').hide(); $('.test_error').show(); event.preventDefault(); $(document).ready(init); $(this).attr("id"); $(".article").css("font-size") $(".article").css({"font-size":totalFontSize+"px"}); $('#country').change(update_cities); $("#newslist li").fadeOut("slow"); $(this).find("img") $(window).scroll() $("#slidemenu").stop().animate({"top":position+currentPosition+"px"},1000); $(this).next().slideUp(); $(this).next().slideDown();
|
jQuery 설명서
'javascript' 카테고리의 다른 글
| jquery iframe에서 부모창 제어하기 (0) | 2011.08.24 |
|---|---|
| jQuery Ajax (0) | 2011.08.23 |
| javascript(자바스크립트) : 입력 글자 수 제한 (0) | 2011.02.09 |
| 팝업으로 POST 로 값 넘기기 (0) | 2010.07.28 |
| 테이블 행추가 삭제 (0) | 2010.05.13 |