[jQuery] 제이쿼리란 ?

jQuery(제이쿼리)

오픈소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트(Event)에 관한 처리를 좀 더 쉽게 구현할 수 있습니다. 또한 Ajax 응용 프로그램도 제이쿼리를 통해 빠르게 개발이 가능합니다.

마이크로소프트가 90프로 이상의 점유률을 가졌을 때 제이쿼리를 사용하여 일반 자바스크립트를 썼을 때 익스플로러, 크롬 등 각자 다르게 표현해야 하는 부분을 공통적으로 표현해줬기 때문에 많이 사용했었다. 허나 익스플로러를 이제는 사용하지 않고, 크롬, 엣지 등의 사용빈도가 올라감으로써 사용량이 많이 줄었다.

제이쿼리 버전

ver 1.X : 익스플로러 6, 7, 8 버전에서의 동작까지 모두 지원하는 버전입니다.
ver 2.X : 버전 1에서 지원하는 익스플로러 6, 7, 8 버전에 대한 지원을 중단한 버전입니다.
ver 3.X : 제이쿼리의 표준입니다. 기존 버전과의 호환성을 유지한 더욱 간결하고 빠르게 동작되도록 설계되어 있습니다. 익스플로러 9이상에서만 동작합니다.

jQuery 공식 사이트
http://jquery.com/

Download the compressed, production jQuery 3.5.1
다운받아 그대로 개발에 사용하는 파일
<script src="파일명"></script>

Download the uncompressed, development jQuery 3.5.1
오픈소스 기반으로 수정하여 사용가능한 파일

* CDN(Content Delivery Network) 을 사용하여 적용하는 방법
구글에서 jquery cdn으로 검색

제이쿼리 문법

$(); 로 시작하며 선택자와 동작함수로 이루어져 있습니다.

window.onload = function(){    //HTML이 다 실행되고 나서 실행하라.
    실행문;
};

$(function(){
    실행문;
});

위 두 문장이 같은 방식이다.

$(document.ready(funtion(){
    실행문;
});

아래는 제이쿼리의 옛 방식이다.

선택자 : 함수가 적용되기를 원하는 요소 및 속성
동작함수 : 선택된 요소에 원하는 동작을 설정

$(function(){
    $(선택자).동작함수();
});

$(function(){
    ${'button').css('border', '3px solid pink');
       ------
//      태그(id는 #button class는 .button 써주면 된다)
});

on( )

addEventListner와 비슷한 함수입니다. 이벤트와 이벤트 타겟을 연결합니다.

document.getElementsByTagName("요소이름") -> $("요소이름")
document.getElementById("id") -> $("#id")
document.getElementsByClassName("class이름") -> $(".class이름")

css( ) 메소드

css의 속성에 값을 설정합니다. 속성에 대한 이름은 카멜 표기법을 사용합니다.

스네이크 표기법
font-size, border-color

카멜 표기법(낙타 표기법)
fontSize, borderColor

속성 선택자

$("요소이름[속성='속성값']").동작함수()

$("h2[id='name']").css('fontSize', '40px');

필터 선택자

:eq(n)     선택한 요소 중에서 인덱스가 n인 요소를 선택함.
:gt(n)     선택한 요소 중에서 인덱스가 n보다 큰 요소를 모두 선택함.
:lt(n)     선택한 요소 중에서 인덱스가 n보다 작은 요소를 모두 선택함.
:even     선택한 요소 중에서 인덱스가 짝수인 요소를 모두 선택함.
:odd     선택한 요소 중에서 인덱스가 홀수인 요소를 모두 선택함.
:first     선택한 요소 중에서 첫 번째 요소를 선택함.
:last     선택한 요소 중에서 마지막 요소를 선택함.
:animated   선택한 요소 중에서 애니메이션 효과가 실행 중인 요소를 모두 선택함.
:header     선택한 요소 중에서 h1부터 h6까지의 요소를 모두 선택함.
:lang(언어)  선택한 요소 중에서 지정한 언어의 요소를 모두 선택함.
:not(선택자)  선택한 요소 중에서 지정한 선택자와 일치하지 않는 요소를 모두 선택함.
:root     선택한 요소 중에서 최상위 루트 요소를 선택함.
:target     선택한 요소 중에서 웹 페이지 URI의 fragment 식별자와 일치하는 요소를 모두 선택함.
:contains(텍스트) 선택한 요소 중에서 지정한 텍스트를 포함하는 요소를 모두 선택함.
:has(선택자)  선택한 요소 중에서 지정한 선택자와 일치하는 자손 요소를 갖는 요소를 모두 선택함.
:empty     선택한 요소 중에서 자식 요소를 가지고 있지 않은 요소를 모두 선택함.
:parent     선택한 요소 중에서 자식 요소를 가지고 있는 요소를 모두 선택함.

getter 메소드, setter 메소드

선택자에 의해 선택된 요소의 값을 읽거나 설정하기 위해 제이쿼리 메소드를 통해 해당 요소에 접근해야 합니다. getter 메소드는 선택된 요소에 접근하여 그 값을 읽어오기 위한 메소드입니다. getter 메소드는 아무런 인수를 전달하지 않고 호출합니다. setter 메소드는 선택된 요소에 접근하여 그 값을 설정하기 위한 메소드입니다. setter 메소드는 대입하고자 하는 값을 인수로 전달하여 호출합니다.

<p id="text"></p>
<script>
    const text = document.getElementById("text");
    text.innerHTML = "<b>안녕하세요.</b>";

    const text = $('#text').html()    // getter 메소드  파라미터값을 안넣을 때 사용
    $('#text').html('<i>안녕히가세요.</i>');	// setter 메소드 파라미터값을 대입해서 사용
</script>

html( ) : 해당 요소의 HTML 컨텐츠를 반환하거나 설정합니다. (js의 innerHTML과 같습니다.)
text( ) : 해당 요소의 텍스트 컨텐츠를 반환하거나 설정합니다. (js의 innerText와 같습니다.)
width( ) : 선택한 요소 중에서 첫번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정합니다.
height( ) : 선택한 요소 중에서 첫번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정합니다.
attr( ) : 해당 요소의 명시된 속성의 속성값을 반환하거나 설정합니다.
val( ) : <form>요소의 값을 반환하거나 설정합니다.

메서드 체이닝(method chaining)

getter 메소드는 선택된 요소의 값을 읽어서 그 값을 반환합니다. 만약 선택한 요소가 여러개 존재하면 getter 메소드는 가장 '첫번째 요소'의 값만 반환합니다. 하지만 setter 메소드는 선택된 모든 요소에 인수로 전달된 값을 설정합니다. 그리고 선택된 모든 요소에 접근할 수 있는 또 다른 제이쿼리 객체를 반환합니다. 반환된 제이쿼리 객체를 이용하면 세미콜론을 사용하지 않아도 바로 다른 제이쿼리 메소드를 점으로 연결해서 호출할 수 있습니다. 이런 방식의 여러 메소드가 연속적으로 호출되는 방식을 메소드 체이닝이라고 합니다.

add( ) : 특정 요소를 추가로 선택할 때 사용합니다.
children( ) : 매개변수로 전달된 요소를 하위 요소에서 찾아줍니다. 매개변수를 전달하지 않으면 하위 요소의 모든 요소를 선택합니다.
addBack( ) : 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하게 합니다.
find( ) : 선택한 요소의 자손 요소 중에서 전달받은 선택자에 해당하는 자손 요소를 모두 선택합니다. 별표를 인수로 전달하여 선택한 자손 요소를 모두 선택할 수도 있습니다.
end( ) : 현재의 연속적인 명령(메소드 체이닝)을 종료하고 선택 집합의 이전 요소를 찾아 반환합니다.
is( ) : 인수로 전달된 요소가 존재하는지 여부(true, false)를 리턴합니다.

attribute와 property의 차이

<input type="checkbox" name="hobby" value="트라이브" checked> // 요즘 방법
<input type="checkbox" name="hobby" value="트라이브" checked="checked"> // 옛날 방법

attr( ) : 해당 요소의 명시된 속성의 속성값을 반환하거나 설정합니다.
prop( ) : 제이쿼리 1.6부터 정의된 메소드입니다. 선택한 요소 집합의 첫번째 요소의 지정된 프로퍼티 값을 반환하거나, 선택한 요소의 지정된 프로퍼티를 전달받은 값으로 설정합니다.

둘은 호환이 안된다.

[jQuery] 제이쿼리란 ?