쌍용 강북 교육센터 국비학원 Day 54일차
JQuery 주요 메소드
$.bind() , $.on()
bind(), on() 둘 다 이벤트(event) 처리기능을 하는 메소드이지만 약간의 차이가 있다. 선택자를 잡을때 선택자가 <body> 태그에 직접 기술한 것이라면 선택자를 제대로 잡을수가 있으나 스크립트내에서 기술한 것이라면 선택자를 못 잡아올수도 있다. 이러한 경우 $(document).on() 메소드를 사용해야 한다. (jQuery에서는 on 메소드를 사용하는 것을 권장하고 있다.)
$(document).on( "이벤트종류", "선택자", function( ){ } );
[문법]
$.on ( events , selector , data , function( ) );
1 2 3 4 (selector와 data는 생략가능하다)
1. events - 이벤트들을 나열. 하나이상의 이벤트를 나열하고자 할 때는 공백으로 구분한다.
2. selector - 자식 요소들을 필터링 할때 사용한다. ex) ' : not(#aa) '
3. data - 이벤트가 발생했을때 전달하고 싶은 데이터값. ex) ' {변수명 : 값} '
4. function - 특정 이벤트가 발생했을때 실행될 함수를 지정하며 괄호안에는 이벤트 객체가 매개변수로 전달되므로 이름을 지정해줘야 한다.
$.each (arr, function ( index, element ) { 반복문 } ); - (배열 사용)
- object 와 배열 모두에서 사용할 수 있는 JQuery의 일반적인 반복 함수이다. 배열과 length 속성을 갖는 배열과 유사 배열 객체들을 index를 기준으로 반복한다.
첫 번째 매개변수로 배열이나 객체를 받고 두번째 매개변수로 함수를 받으며 콜백함수의 인자로는 인덱스와 값을 인자로 갖는다.
$(선택자).each ( function ( index, element ) { 반복문 } ); - (Object 사용)
- 선택자를 기준으로 index와 element 값을 이용하여 함수를 반복한다. each에서는 break와 동일한 기능이 return false이다. (element 와 this 는 같은 걸 의미한다)
$.toggle();
- 선택자요소가 현재 사라진(.hide()) 상태라면 .show() 메소드의 동작을 수행하고, 나타나 있는 상태라면 .hide() 메소드의 동작을 수행한다.
$.empty();
- 선택자 안에 들어있는 내용물을 모두 비운다. (태그속에 들어있는 내용물을 비우는 것)
$.index();
- 일치하는 요소중에서 주어진 요소를 검색하여 반환한다. 요소가 없으면 -1을 반환 (파라미터는 Selector 또는 Element)
$.trigger (event종류);
- 문서가 로드되어진 다음에는 자동적으로 선택자에 event종류가 동작하도록 실행하는 것이다.
$.eq (index값);
- 선택자(배열, 복수개) 중에서 index값에 해당하는 요소(선택자) 를 얻어오는 것이다. 마치 배열에서 특정 index에 해당하는 배열요소를 얻어오는 것과 같은 의미이다.
$.hover (function ( ) { } , function ( ) { } );
- 첫번째 함수는 mouseover에 해당하는 내용이고, 두번째 함수는 mouseout에 해당하는 내용이다. (이벤트가 아닌 jQuery에서 제공하는 mouseover 와 mouserout의 합쳐진 메소드이기 때문에 사용에 주의)
$.prepend();
- 내용물을 선택자에 앞(위) 쪽 방향으로 덧붙여 가는 것
$.append();
- 내용물을 선택자에 뒤(아래) 쪽 방향으로 덧붙여 가는 것
$.remove();
- 선택자 태그를 삭제하는 것
$.toggleClass("클래스명1");
- 선택자에 "클래스명1" 이 이미 적용되어 있으면 선택자에 "클래스명1" 을 제거해주고, 만약에 선택자에 "클래스명1" 이 적용되어 있지 않으면 선택자에 "클래스명1" 을 추가해주는 것. (addClass와 removeClass 를 합친 것)
$.prop() 와 $.attr()
.attr() - 그 나머지 엘리먼트의 속성값 확인 또는 변경하는 경우에 사용함.
.prop() - form 태그내에 사용되어지는 엘리먼트의 disabled, selected, checked 의 속성값 확인 또는 변경하는 경우에 사용함.
선택자의 id, name, class명 알아오는법
- 선택자.attr('id', 'name', 'class') or 선택자.prop('id', 'name', 'class')
※ 엘리먼트와 엘리먼트가 같은지 다른지 비교할때 is 를 사용한다.
- 선택자1.is(선택자2) 은 선택자1과 선택자2가 동일한 엘리먼트를 가리키는 것이라면 true 이고, 아니라면 false 이다.
transition : second;
- transition은 CSS 속성으로 디자인을 서서히 변화시키는 속성이다. second값은 실행시간으로써 반드시 지정해주어야 한다. 지정하지 않으면 기본값인 0s가 적용되어 아무런 효과가 나타나지 않는다.
보통 transition은 태그(요소) 에 마우스오버 했을때 변화가 나타난다. 글꼴 크기가 12pt 이었다가 마우스 오버할 경우 20pt로 커지든지, 너비가 100px 이었다가 마우스 오버할 경우 200px로 늘어난다든지 할때 변화되는 과정을 부드럽게 표시할때 사용한다. (IE버전 10 이상부터 사용이 가능하다)
Accordion
아코디언 메뉴 (Accordion Menu)란 컨텐츠를 담는 방식 중 하나로 네비게이션을 클릭하면 컨텐츠를 담은 컨테이너가 열리고 다른 네비게이션을 클릭하면 열려있는 컨테이너는 닫히고 클릭한 컨테이너가 열리는 구조이다. 즉 한마디로 메뉴를 클릭하여 상세글을 보는 개념이다.
예시 - https://jqueryui.com/accordion/
※ slideUp(), slideDown() 메소드를 사용해 보다 자연스러운 애니메이션을 넣을 수도 있다.
'Web > JQuery' 카테고리의 다른 글
| 쌍용강북교육센터 국비 학원 Day 65일차 JQuery (Datepicker) (0) | 2023.04.05 |
|---|---|
| 쌍용강북교육센터 국비 학원 Day 56일차 JQuery (선택자 잡는법, animation 메소드) (0) | 2023.03.23 |
| 쌍용강북교육센터 국비 학원 Day 55일차 JQuery (Tabs 메뉴구현, Storage) (0) | 2023.03.22 |
| 쌍용강북교육센터 국비 학원 Day 53일차 JQuery (0) | 2023.03.20 |
