[kh정보교육원 71일차] jQuery - 제이쿼리 설치 / selector / atter / prop / filter

https://jquery.com/

여기서 바로 다운로드 해주면 되는데, jQuery의 특징중 하나로

브라우저 호환이 잘 된다는 점이 있다!

이 장점때문에 실제로 많이 쓰였다고 하는데, 현재는 React가 대세라고 한다.

 

다운로드시에는 production ver가 아닌 development version을 받아준다.

production버전은 라이트해서 개발자에겐 맞지 않다고 한다.

slim버전은 ajax기능 (비동기처리) 없으므로 X!!

나는 uncompressed버전을 받았다.

파일이뜨면 오른쪽마우스버튼 - 저장!

 

 

    <script src="js/jquery-3.6.0.js"></script>

 

head안에 이렇게 써주면 로드 성공!

 

 

jQuery

기본선택자

    <div class="wrapper">
        <p id="p1" class="group1">안녕1</p>
        <p id="p2" class="group1" title="안녕2">안녕2</p>
        <p id="p3" class="group2">안녕3</p>
        <p id="p4" class="group2" title="안녕4">안녕4</p>
        <p id="p5" class="group1 group2">안녕5</p>
    </div>
    <button id="btn1">기본선택자</button>

 

    btn1.addEventListener('click',()=>{
        //const $el=$("#p1");
        //console.log($el);
        //$el.css('color','red');//js에는 css와 같은 함수 없음. 자바스크립트 순수메소드와 jquery메소드 구분

        const $group1=$(".group1");
        console.log($group1);
        $group1.css('color','blue'); 
        //실제요소 각각에 style 지정
        //method chaining : 메소드 리턴값이 다시 jquery 객체이므로 연달아 메소드 호출가능

        // document.querySelectorAll(".group1").forEach((p)=>{
        //     p.style.color='hotpink';
        // }) //순수 자바스크립트로 쓰면 이렇게 김.
        console.log(
        $group1
            .css('color','blue')
            .css('font-size','24px') ===$group1
        )
        
        $("[title]").css('text-decoration','underline');
    });

 

.group1 클래스를 가진 p 요소들은 파란색이 되었고, 크기가 커졌다.

title을 가진 클래스들은 밑줄이 그어졌다.

 

실제로 제이쿼리의 $group1.css('color','blue'); 이 코드 하나는 자바스크립트로 표현시

document.querySelectorAll(".group1").forEach((p)=>{

p.style.color='hotpink';

})

이렇게 길다.

 

jQuery객체

1. selector문자열

2. js객체

    btn2.addEventListener('click',(e)=>{
        $(p4).css('background-color',"yellow");

        $("#p1,#p2,#p3").css("color","springgreen");

        const group2=document.querySelectorAll(".group2");
        $(group2).css('text-decoration',"line-through");
    });

 

p4에 대해 배경색이 노란색이 되었고,

p1,p2,p3에 대해서는 css로 색깔을 넣어 색이 지정되었다(springgreen)

마지막으로 group2를 가진 셀렉터에 의해 취소선이 지정되었다.

맨 마지막은 selector문자열을 이용한 방법이다.

 

가상선택자

    <fieldset>
        <legend>input</legend>
        <input type="text" placeholder="text">
        <input type="password" placeholder="password">
        <br>
        <input type="radio">
        <input type="checkbox">
        <input type="button" value="버튼">
        <br>
        <input type="button" id="btn3" value="가상선택자">
    </fieldset>

 

    $(btn3).click((e)=>{
        $(":text, :password")
            .css("background-color",'tomato')
            .css("color","#fff");
        $(":radio, :checkbox").prop("checked",true);

        console.log($(":button:eq(2)").val());//getter(jquery객체가 아닌 실제 값 반환)
        $(":button:eq(2)").val('Button');// setter
    });

 

가상선택자 버튼을 클릭시, jQuery로 작성한 스크립트문이 작동한다.

버튼 클릭전 / 후

 

순서관련 가상선택자

:odd

:even

:first (css 에서는 first-child, first-of-type으로 사용했었음)

:last (css last-child, last-of-type)

 

:eq(index)

:gt(index) n번째보다 큰 애

:lt(index) n번째보다 작은애

 

:contains(text) 자식요소 textnode 포함 여부

:has(selector) 자식요소 selector 포함여부

:selected

 

https://www.w3schools.com/jquery/jquery_ref_selectors.asp

 

w3schools의 jQuery셀렉터들 확인해보기

      <table id="people">
        <thead>
          <tr>
            <th>이름</th>
            <th>혈액형</th>
            <th>주소</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>홍길동</td>
            <td>A</td>
            <td>서울시 강남구</td>
          </tr>
          <tr>
            <td>신사임당</td>
            <td>AB</td>
            <td>서울시 강서구</td>
          </tr>
          <tr>
            <td>장영실</td>
            <td>B</td>
            <td>서울시 강북구</td>
          </tr>
          <tr>
            <td><a href="#">이순신</a></td>
            <td>O</td>
            <td>서울시 강동구</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th colspan="2">총원</th>
            <td>4명</td>
          </tr>
        </tfoot>
        </table>
        <button id="btn4">확인</button>

 

        $(btn4).click((e)=>{
            let $selected;
            // $selected = $("#people tr:even");
            // $selected =$("#people tr:first,tr:last");

            // $selected=$("#people tr:eq(1)");
            // $selected=$("#people tr:gt(0)");
            // $selected=$("#people tr:lt(5)");

            $selected=$("#people tr:contains('A')"); //textnode 체크
            $selected=$("#people tr:has(a)"); //selector

            $selected.css({//여러개 지정시 객체사용
                'background-color':'gray',
                'color':'#fff'
            });
        });

 

윗줄부터 하나씩 주석을 없애가며 확인해보겠다.

$selected = $("#people tr:even");

$selected =$("#people tr:first,tr:last");

$selected=$("#people tr:eq(1)");

$selected=$("#people tr:gt(0)");

$selected=$("#people tr:lt(5)");

$selected=$("#people tr:contains('A')"); //textnode 체크

$selected=$("#people tr:has(a)"); //selector

 

attr(attribute)

• 태그 객체에 inline에 작성된 속성관리
• getter : 해당 속성값을 리턴(작성되어 있지 않다면 undefined 리턴)
  • n개의 요소를 가진 경우 0번지 요소의 값을 반환
  • method chaing 끝
• setter : 해당 속성을 작성
  • n개 모든 요소의 속성을 변경
  • method chaing 계속 가능

    <div class="img-wrapper">
        <img src="../sample/image/flower1.PNG">
        <img src="../sample/image/flower2.PNG" alt="꽃이미지2">
    </div>
    <button id="btn1">attr</button>

 

    $(btn1).click((e)=>{
        const $img = $(".img-wrapper img");
        console.log($img);

        //getter
        console.log($img.attr("src")); // ../sample/image/flower1.PNG
        console.log($img.attr("alt")); //undefined

        //setter
        $img.attr('src','../sample/image/hyunta.jpg');
    });

 

attr 클릭 전후

 

클릭 전후로 사진이 바뀐 것을 알 수 있다.

 

 

prop

• 논리형으로 처리될 값을 제어 (javascript를 이용한 동적제어)
  • checked : true | false 로 처리

$(btn2).click(()=>{
        //attr | prop 비교
        // const $menu2=$(menu2);
        // console.log($menu2.attr("checked")); //check확인
        // console.log($menu2.prop("checked")); //true | false 
        // $menu2.prop("checked",true);   

        const $menuChecked = $("[name=menu]:checked");
        console.log($menuChecked);

        const checkedValues = [];

        // for(let i =0; i<$menuChecked.length;i++){
        //     const chk = $menuChecked[i];//순수js객체
        //     checkedValues.push(chk.value);
        // }

        
        $menuChecked.each((index,checkbox)=>{
            console.log(index,checkbox);
            checkedValues.push($(checkbox).val());
        })
        
        console.log(checkedValues);
        alert(checkedValues.length?checkedValues:"선택한 항목이 없습니다.");
    });
    $(checkAll).change((e)=>{
        // console.log(e.target);//js랑 같음
        // $("[name=menu]").prop("checked",e.target.checked);
        // $("[name=menu]").prop("checked",$(e.target).prop("checked")); //윗줄과같음
        $("[name=menu]").prop("checked",$(e.target).is(":checked"));
        console.log($(e.target).is(":checked"));//체크되어있으면 true, 아니면 false

    });

 

 

햄버거랑 핫도그를 선택하면 알람에 뜨고, console창에도 뜨는 것을 확인할 수 있다.

선택을 바꿔도 마찬가지이다.

 

 

 

filter

    <div class="wrapper">
        <p id="p1" class="group1">안녕1</p>
        <p id="p2" class="group1" title="안녕2">안녕2</p>
        <p id="p3" class="group2">안녕3</p>
        <p id="p4" class="group2" title="안녕4">안녕4</p>
        <p id="p5" class="group1 group2">안녕5</p>
    </div>

 

    <button id="btn1">filter</button>
    <button id="btn2">first | last</button>
    <button id="btn3">eq</button>
    <button id="btn4">not</button>
    <button id="btn5">get</button>

 

    $(btn1).click((e)=>{
        const $p=$("p");

        // filter(selector)
        // console.log(
        // $p
        //     .filter(".group1")
        //     .css("color","blueviolet")
        //     .filter(":even")
        //     .css("text-decoration","underline")
        // );

        //filter(callbackFunction) : true를 반환한 경우만 요소 유지
        $p
            .filter((index,p)=>{
                return $(p).is(".group1");
            })
            .css("color","blueviolet")
            .filter((index,p)=>$(p).is(":even"))
            .css("text-decoration","underline");
    });

 

그룹 1에 대해서 보라색으로 바꿈 , css를 underline으로 지정.

 

    $(btn2).click((e)=>{
        const $p=$("p");
        console.log(
        $p.first()
            .css("font-size","32px")
            .end() //prevObject 상태로 되돌아가기
            .last()
            .css("font-size","32px")
        );

    });

 

처음 [ .first() ] , 마지막 [ .end() ] 에 대해서 글씨 크기를 조정한다.

둘다 지정하려면 중간에 end()를 적어줘야한다. (prevObject로 돌아가는 명령어)

 

 

 

 

:eq(index) - 선택자일 경우

.eq(index) - 메소드일때

:not(selector)

.not(selector)

    $(btn3).click((e)=>{
        $("p").eq(3)
            .css("background-color","tomato");
    });

 

3번째 인덱스 (0부터시작)에 대해 배경색을 지정해주었다.

    $(btn4).click((e)=>{
        $("p").not(".group1")
            .css("color","hotpink");
    });

 

group1이 아닌 클래스명을 가지는 p인자에 대해서 글씨색을 핫핑크로 지정해주었다.

 

 

 

jquery 객체에서 해당 인덱스의 요소를 vanilla js객체로 변환

• 인덱스를 주지 않으면 배열로 반환
• 자바스크립트 객체 추출하고 싶을 때 사용(자바스크립트 값으로 추출함)

    $(btn5).click((e)=>{
        const $p=$("p");
        console.log($p.get(0));
        console.log($p.get(1));
        console.log($p.get());//[p#p1.group1, p#p2.group1, p#p3.group2, p#p4.group2, p#p5.group1.group2]
    });

 

첫번째줄 : 제이쿼리 객체가 p중 인덱스 첫번째인 것을 반환

두번째줄 : 제이쿼리 객체가 p중 인덱스 두번째인 것을 반환

세번째줄 : 제이쿼리 객체가 p인 것들을 모두 반환