[jQuery] 1. jQuery 선택자, 이벤트 부여, 메서드들

1. jQuery

jQuery란?

자바스크립트 언어만으로 구현하기에 복잡했던 구문들을 간소화하기 위해 개발된 자바스크립트 기반의 라이브러리이다.
DOM요소와 관련된 스크립트를 쉽게 구현해 놨으며, AJAX(비동기 통신), 이벤트처리, 확장 플러그인 및 오픈 API 등 각종 편의성 기능을 제공한다.

jQuery 라이브러리 사용방법

1. 내부방식 : jQuery 라이브러리를 직접 다운받아 script 태그 내 src경로를 로컬파일로 작성하는 방식

jQuery 홈페이지에서 다운로드 클릭 후 jQuery 라이브러리를 복사 -> js파일로 저장

<script src="jQuery 파일 경로"></script> 

2. 외부방식(CDN 방식) : Content Delivery Network 상에서 직접 다운로드하는 방식으로 파일을 다운받지 않아도 사용 가능하다.

jQuery 홈페이지 jQuery CDN 아래 other CDNs에서 google CDN을 사용했다. jQeury 3.x 스니펫 스크립트를 복사하여 사용할 html에 붙여넣기

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

1.1. jQuery 선택자

jQuery는 기본적으로 $ 기호 및 jQuery를 붙여서 사용한다.($만 쓰는듯 ㅅㄱ)

• 자바스크립트에서는 document.querySelector('선택자')를 쓴 반면 jQuery에서는 $('선택자')로 압축하여 표현한다.

  $('ul > li'); == document.querySelectorAll('ul > li');

• jQuery 변수를 선언할 때는 변수명 앞에 $를 붙이는 것이 관례이다.

  var $lis = $('ul >li');

• jQuery 예시

HTML
<ul>
        <li class="foo" id="bar1">안녕1</li>
        <li class="foo" id="bar2">안녕2</li>
        <li class="foo" id="bar3">안녕3</li>
        <li id="bar4">안녕4</li>
        <li id="bar5">안녕5</li>
</ul>
<input type="button" value="tag" onclick="test1();">

jQuery script
<script>
        function test1() {
            var $lis = $('ul > li'); 
            $lis.css("color", "springgreen"); 
...

아래 tag 버튼을 클릭하여 html을 조작	tag 버튼 클릭 1
	ul>li로 태그에 접근하여 css color 속성 변경

...
자바스크립트 방식으로 변경하는 방법
            var lis = document.querySelectorAll('ul > li');
            lis.forEach((element) => {
                element.style.color = "tomato";
            });

            $('.foo').css('font-size', '2em');

            var $bar1 = $('#bar1');
            var $bar1_;
            $bar1_ = $bar1.css('text-decoration', 'underline');

• jQuery의 css함수는 자기 자신의 주소값을 반환하므로 메서드 체이닝가능(method chaining)하다

            console.log($bar1);
            console.log($bar1_, $bar1 == $bar1_); 
            
            $('#bar1').css('font-size', '3em')
                      .css('background', 'deeppink')
                      .css('color','white');
        }
</script>

JS 방식으로 css 변경	jQUery 메서드 체이닝으로 css 속성 변경

1.2. jQuery 이벤트 부여

• 아래는 예시 html

menu 햄버거 교촌치킨 대창 삼겹살

fieldset 생략
<input type="checkbox" name="menu" id="menu1" value="햄버거"><label for="menu1">햄버거</label>
<input type="checkbox" name="menu" id="menu2" value="교촌치킨"><label for="menu2">교촌치킨</label>
<input type="checkbox" name="menu" id="menu3" value="대창"><label for="menu3">대창</label>
<input type="checkbox" name="menu" id="menuAll" value="삼겹살"><label for="menuAll">삼겹살</label>
        
<input type="button" value="get | set" id="checkGetSet">
<input type="button" value="확인" id="checkValue">

<script>
        $('[name=menu]').change(function(e) {
            console.log(e); 
            console.log(this);
            console.log(this.checked); 
            
            // 현재 객체의 속성 중 chcked 속성에 저장된 값을 getter하는 함수
            console.log($(this).prop('checked'));

            // setter :  현재 객체의 속성 중 checked 속성에 false를 대입해라
            // console.log($(this).prop('checked', false)); 
            
            // console.log($(this).val()); // getter: value에 매개변수없으면 getter
            // console.log($(this).val("ㅋㅋㅋ")); // setter: val에 매개변수있으면 setter check한 value의 속성값을 ㅋㅋㅋ로 바꿈
        });

• .change(fnc()) 메서드: 자바스크립트의 onchange()와 같다. 값이 바뀌는 이벤트를 감지한다.(내부의 on/off값이 바뀌는 것을 감지)
• 이벤트를 감지하는 메서드의 매개변수로 function()이 들어가는데 이 function의 매개변수로 이벤트가 발생한 이벤트 객체가 항상 들어가 있다.

위 필드셋 체크 시 아래와 같이 e와 this를 출력하면 서로 다른 객체값이 출력되는데 이는 JS와 jQuery의 객체가 서로 다름을 보여준다.
따라서 JS의 객체를 jQuery 문법으로 사용하려면 $(this) 형태로 $()를 붙여줘야 한다.

• .checked : 이벤트 객체가 체크되어 있으면 true 체크되어 있지 않으면 false 반환
• .prop(속성) 메서드 : 선택한 객체의 속성 중 매개변수 속성의 상태를 getter해준다.
• .prop(속성, 속성값) 메서드 : 선택한 객체의 속성 중 매개변수 속성의 상태를 속성값으로 setter해준다.

...     
$('#menuAll').change(function(e) {
            $('[name=menu]').prop('checked', this.checked); // this.checked // 현재 요소의 체크상태
        });

        $('#checkValue').click(function(e) {
            //jQuery 방식 객체 순회
            $('[name=menu]').each(function(index, element) { // js의 foreach함수와 유사한 jQuery식 each함수
                // element == HTMLInputElement
                console.log(index, element);

                // element는 js객체이므로 jquery 함수 사용불가
                // element.prop('checked', false);
                $(element).prop('checked', false);

                console.log(element.value, $(element).val());
            })})
    </script>

1.3. attr 속성

js의 속성은 property, HTML의 속성은 attribute이다.
HTML 태그 상에 기록된 속성을 가져오거나 설정할 경우 사용한다.

• attr()은 html에 기록된 속성을 가져오는 함수
  (inline으로 기록된 속성만 가져올 수 있다)
• img 태그를 변경하여 attr 속성변경하기(잘쓰진 않음ㅅㄱ)

<img src="/resources/이미지경로.jpg" style="margin: 50px 20px; width: 300px; " >

$('img').click(function() {
            console.log($(this).attr('src'), $(this).attr('style')) 
            console.dir(this); 
            console.log($(this).prop('src')) 
            $(this).attr('src','../resources/image/flower2.jpg');
});

img onclick 전	onclick 후

console

1.4. jQuery의 각종 메서드

각종 메서드를 활용할 html, 버튼 클릭 시 해당 메서드 실행

<div class="wrapper">
        <p>안녕1</p>
        <p>안녕2</p>
        <p>안녕3</p>
        <p>안녕4</p>
        <p>안녕5</p>
        <p>안녕6</p>
        <p><a href="#">안녕7</a></p>
        <p>안녕8</p>
        <p>안녕9</p>
        <p>안녕10</p>
</div>

<input type="button" value=":eq()" onclick="test2()">
<input type="button" value=":gt() :lt()" onclick="test3()">
<input type="button" value=":contains()" onclick="test4()">
<input type="button" value=":has()" onclick="test5()">
<input type="button" value=":not()" onclick="test6()">

(1) :eq(index)

• 태그:eq(인덱스) 형태로 태그의 인덱스번째 요소를 가져온다.
• p:nth-child(4) == p:eq(3) 는 동일
  (js는 수열, eq는 인덱스)

<script>
function test2() {
            $('.wrapper p:eq(3)').css('font-size','3em') 
                                 .css('color','blue');

            $('.wrapper>p:nth-child(4)').css('font-size','3em') 
                                        .css('color','blue');
        }
...

• wrapper 클래스

클릭 전	클릭 후

(2) :gt(index), :li(index)

• greater than / less than의 약자
• :gt(index) : index보다 큰 태그 가져오기
• :li(index) : index보다 작은 태그 가져오기

 function test3() {
            $('.wrapper p:gt(3)').css({   
                'font-size' : '3em',
                'color' : 'blue' 
            });

            $('.wrapper p:lt(3)').css({
                'font-size' : '3em',
                'color' : 'pink' 
            })
        }

• p:gt(3) : p태그의 인덱스 3번 보다 큰 요소의 css변경(4번인덱스부터~)
• p:lt(3) : p태그의 인덱스 3번 보다 작은 요소의 css변경(2~0번 인덱스)

클릭 전	클릭 후

(3) :contains(문자열)

특정 문자열을 가진 태그요소를 조회

p태그 중 '안녕8'이라는 문자열을 가진 태그 요소 조회

function test4() {
            $(".wrapper p:contains('안녕8')")
                    .css('text-decoration', 'line-through');
        }

(4) :has(selector)

해당 selector를 가지고 있는 요소를 선택

p태그 중 a태그를 가지고 있는 요소 선택

function test5() {
		$('.wrapper p:has(a)').css('background-color','lightgray');
        }

(5) :not(selector)

해당 selector를 가지고 있지 않은 요소 선택

p 태그의 첫번째 요소를 제외한 나머지 요소의 css 변경

function test6() {
            $('.wrapper p:not(:first-child)').css('color','green');
        }

:contains(문자열)	:has(선택자)	:not(선택자)

(6) .filter(selector)

• filter(selector) 형태로 해당 선택자 기준으로 필터링 처리
• :even : index 기준 짝수만 가져옴
• :odd : index 기준 홀수만 가져옴

function test1() {
            var $p = $('.wrapper>p'); 
            var filteredP = $p.filter('.test');
            console.log(filteredP);
            
            var evenP = $p.filter(':even');
            console.log(evenP);
            
            var oddP = $p.filter(':odd');
            console.log(oddP);

(7) first(), last()

• .first() : 선택된 요소의 첫번째 객체 리턴
• .last() : 선택된 요소의 마지막 객체 리턴

function test2() {
            var $p = $('.wrapper>p');   
            console.log($p.first()); 

            $p.last()
                .css('font-size', '3em')
                .css('color', 'springgreen');

first() % last()