$("#id").on('click', function(){ ... }); vs $("#id").on('click', '.class', function()){ ... });
----------------------------------------------------------------------------------------------------------- 보통 jquery 로 이벤트를 걸 때 $(id).click(function() { }); 형태로 많이 사용한다.
위의 경우로 사용할 경우, element가 나중에 생긴 경우에는 위의 click 이벤트 적용이 되지 않는다. (나중에 생긴 경우 ex) - append()로 추가된 엘리먼트...)
그럴때 필요한 코드가 다음과 같다.
$(document).on('click', id, function)
다음과 같이 걸면 element가 나중에 동적으로 생성되었다 하더라도, 이벤트가 걸리게 된다.
- 결론 - 그 위상은 예전만 못하지만 제이쿼리는 지금도 수많은 오픈소스 컨트리뷰터(Contributor)들이 참여하여 더 가벼우면서도 강력해지도록 개선 중인 프로젝트입니다. 특히 높은 시장 점유율을 유지하고 있어 개발자를 확보하는데 용이하며 정적이고 가벼운 웹페이지를 신속하게 제작하는 용도로는 그 어느 라이브러리보다 적합합니다.
기본
$('.class'); //클래스 $('#id'); //아이디
$('div'); //tag
$('divli'); //(해당 div 자식노드의 li)
$('div.class'); //해당 div의 클래스 $('div#id'); //해당 div의 id
엘리먼트 찾는 방법
$( ':button' ).css( 'font-style', 'italic' ); //타입으로 찾을땐 $( 'p:contains("ab")' ) //문자열 포함 여부 $( 'div:empty' ) //div 요소 중 내용이 없는 것 $( 'p:has(span)' ) //span 요소를 가지고 있는 p 요소를 선택합니다. $( 'ul' ).add( 'p' ) //ul 요소를 선택하고, 추가로 p 요소를 선택합니다. $( 'p' ).appendTo( 'blockquote' ); //p 요소를 blockquote 요소 안으로 이동시킵니다.
형제요소 선택자
.siblings() 선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택한다. ex)$(this).parent("li").siblings().removeClass("active"); .next() 선택한 요소의 바로 다음에 위치한 형제 요소를 선택한다. .nextAll() 선택한 요소의 다음에 위치한 형제 요소를 모두 선택한다. .nextUntil() 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택한다. .prev() 선택한 요소의 바로 이전에 위치한 형제 요소를 선택한다. .prevAll() 선택한 요소의 이전에 위치한 형제 요소를 모두 선택한다. .prevUntil() 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 다음까지의 요소를 모두 선택한다.
attr과 prop의 차이
.prop()는 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가합니다. 주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript 입장에서의 속성(property)이라는 것입니다. <a href="#">Link</a> document.write( $( 'a' ).attr( 'href' ) ); // Link document.write( '<br>' ); document.write( $( 'a' ).prop( 'href' ) ); //#
[name] //해당하는 속성을 가지고있는 노드 [name=value] //주어진 문자열과 속성이 동일한 노드 [name~=value] //공백으로 구분된 단어와 속성이 일치하는 노드 [name*=value] //주어진 문자열을 포함하고있는 노드 [name$=value] //주어진 문자열로 끝나는 노드 [name!=value] //주어진 문자열이 속성과 다른 노드 [name^=value] //주어진 문자열로 시작하는 노드 [name=value][name2=value2] //다중속성선택자 예) $("input[type=radio][name=radio]:checked").val();
변화 감지
$("#id").on('change', function(){ ... });
$("#id").on("propertychange change paste input", function (){ ... }); // 실시간으로 input의 변화 감지
Selector :button - type이 button인 요소를 선택하는 선택자 :contains() - 특정 문자열을 포함한 요소를 선택하는 선택자 :empty - 내용이 없는 빈 요소를 선택하는 선택자 :even - 짝수 인덱스 요소를 선택하는 선택자 :has() - 특정 요소를 포함하는 요소를 선택하는 선택자 :nth-child() - 형제 요소 중 an+b번째 요소들을 선택하는 선택자 :odd - 홀수 인덱스 요소를 선택하는 선택자
Method .add() - 요소를 추가로 선택하는 메서드 .addBack() - 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하는 메서드 .addClass() - 클래스 값을 추가하는 메서드 .after() - 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드 .animate() - 애니메이션 효과 만드는 메서드 .append() - 선택한 요소의 내용의 끝에 콘텐트를 추가하는 메서드 .appendTo() - 선택한 요소를 다른 요소 안에 넣는 메서드 .attr() - 속성(attribute)의 값을 가져오거나 속성을 추가하는 메서드 .before() - 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드 .children() - 어떤 요소의 자식 요소를 선택하는 메서드 .click() - 선택한 요소를 클릭했을 때 특정 작업을 하는 메서드 .clone() - 선택한 요소를 복제하는 메서드 .css() - 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가하는 메서드 .delay() - 실행 중인 함수를 정해진 시간만큼 중지(연기) 시키는 메서드 .detach() - 선택한 요소를 문서에서 제거하고 저장하는 메서드 .each() - 선택한 요소 각각에 대하여 함수를 실행시키는 메서드 .empty() - 선택한 요소의 내용을 지우는 메서드 .fadeIn() - 선택한 요소를 서서히 나타나게 하는 메서드 .fadeOut() - 선택한 요소를 서서히 사라지게 하는 메서드 .fadeToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드 .find() - 어떤 요소의 하위 요소 중 특정 요소를 찾는 메서드 .get() - 선택한 요소를 배열로 가져오는 메서드 .has() - 특정 요소를 가지고 있는 요소를 선택하는 메서드 .hide() - 선택한 요소를 사라지게 하는 메서드 .hover() .html() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드
jQuery.inArray() jQuery.trim() - 문자열에 있는 공백(whitespace)을 제거하는 메서드 .load() .not() - 선택한 요소 중 특정 선택자를 제외한 요소를 선택하는 메서드 .offset() - 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시키는 메서드 .parent() - 부모 요소 선택하는 메서드 .prepend() - 선택한 요소의 내용의 앞에 콘텐트를 추가하는 메서드 .prop() - 속성값을 가져오거나 추가하는 메서드 .remove() - 선택한 요소를 제거하는 메서드 .removeAttr() - 선택한 요소의 특정 속성을 제거하는 메서드 .removeClass() - 선택한 요소의 클래스 값을 제거하는 메서드 .replaceWith() - 선택한 요소를 다른 것으로 바꾸는 메서드 .resize() - 윈도우 크기 변할 때 어떤 작업하기 .scrollTop() - 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정하는 메서드 .slice() - 일치하는 요소의 일부분만 선택하는 메서드 .slideDown() - 요소를 아래쪽으로 나타나게 하는 메서드 .slideToggle() .slideUp() - 요소를 위쪽으로 사라지게 하는 메서드 .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드 .toggle() - 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 하는 메서드 .toggleClass() - 선택한 요소에 클래스 값을 넣었다 뺐다 하는 메서드 .width() - 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경하는 메서드 .unwrap() - 선택한 요소의 상위 태그를 제거하는 메서드 .val() - 양식(form)의 값을 가져오거나 값을 설정하는 메소드 .wrap() - 선택한 요소를 원하는 태그로 감싸는 메서드 .wrapAll() - 선택한 요소 모두를 새로운 태그로 감싸는 메서드
