제이쿼리 선택자, 함수

https://www.samsungsds.com/kr/insights/jQuery.html

제이쿼리(jQuery)를 아직도 사용하나요? - 제이쿼리의 현재와 미래

- 결론 - 그 위상은 예전만 못하지만 제이쿼리는 지금도 수많은 오픈소스 컨트리뷰터(Contributor)들이 참여하여 더 가벼우면서도 강력해지도록 개선 중인 프로젝트입니다. 특히 높은 시장 점유율을 유지하고 있어 개발자를 확보하는데 용이하며 정적이고 가벼운 웹페이지를 신속하게 제작하는 용도로는 그 어느 라이브러리보다 적합합니다.

 

 

---

기본 

 

$('.class');         //클래스
$('#id');           //아이디

$('div');            //tag

$('div li');     //(해당 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' ) );    //#

 

 

 

$('div.pd_top_con h2').attr('projectTitle'); // 요소 속성 값 가져오기
$('div.pd_top_con h2').attr('projectTitle', 'change'); //요소 속성 값 변경하기

---

hasClass vs is

 

$(selecter).hasClass('foo'); // hasClass는 여러개 클래스를 멀티로 나열하여 체크할 수 없다. 
$(selecter).is('.foo, .box, .test'); // is로 체크

 

$(selecter).is(":checked") == true  // select될때 자주 쓰는 방식

 

---

$('#id').val();

$('#id').addClass('active');
$('#id').removeClass('active');

$('#id').show();
$('#id').hide();
$('#id').empty();
$('#id').remove();

$('#id').append(Html);
$('#id').after(Html);

 

---

 

속성으로 노드찾기

$("#projectList tbody").on('click', 'strong[event="clickProject"]', function(){ ... });

$("input[name=value]")

 

[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() - 선택한 요소 모두를 새로운 태그로 감싸는 메서드

Property
.length - 선택한 요소의 개수를 반환하는 속성

 

 

---

체크

 

체크여부
$('input:radio[id="ID"]:checked').val();
$("input:checkbox[id='ID']").is(":checked").val();
$("input[id='ID']").is(":checked").val();

체크처리
$("input:checkbox[id='ID']").prop("checked", true);
$("input:checkbox[id='ID']").prop("checked", false);
$( 'input[name="consent"]' ).attr( 'checked', true );

 

---

select

 

$("#tmpSelect option:eq(0)").text('전체');         //select 첫번째 값 변경

$("#tmpSelect").val("A").prop("selected", true);        //select option 값으로 선택

$("#tmpSelect option:eq(2)").prop("selected", true);   //select 순서로 선택

---

포커스

 

$('#textbox').focus()                      //특정 요소에 포커스를 줄 때

 

$('#textbox').blur()                        //특정 요소의 포커스를 뺄 때

 

---

css

 

$( "h1" ).css( "color" );  속성값을 가져옵니다.
$( "h1" ).css( "color", "green" );  style 속성을 추가합니다.

$( "h1" ).css( "color", "" );  style 속성을 제거합니다.

---

 

on , off     VS    bind  , unbind

 

바인딩 하는 다양한 방법

$("#btn").click(function(event) { // 실행하고자 하는 jQuery 코드 }); 

$("#btn").bind("click", function(event) { // 실행하고자 하는 jQuery 코드 }); 

$("#btn").on("click", function(event) { // 실행하고자 하는 jQuery 코드 }); 

$("body").on({"click": function(event) { // 실행하고자 하는 jQuery 코드 }}, "#btn"); 

$("body").on("click", "#btn", function(event) { // 실행하고자 하는 jQuery 코드 });

 

 

unbind()이 개선되어 나온 것이 off()이다.

그러므로 jquery 버전이 1.7이하인 곳은 off() 메소드를 지원하지 않는다.

 

jQuery 1.7부터는 .bind()나 .click() 메소드를 사용해도, 내부적으로 .on() 메소드를 이용하여 이벤트 핸들러와 바인딩한다.

 

고로  on  off  승

 

.one() 메소드는 바인딩(binding)된 이벤트 핸들러가 한번만 실행되고 나서는, 더는 실행되지 않는다.

---

클릭 이벤트 막기

 

$("#id").bind("click", false);

$("#id").unbind("click", false);

---