jQuery?

jQuery?

- 크로스브라우징

- 문법간결

- 요소를 선택하는 방법: $(css 선택자)

 

🙾 라이브러리 로드하기

- 반드시 라이브러리를 로드해야 실행됨 : <script src=""></script>

- <script></script>는 반드시 로드한 라이브러리 밑에 작성해야 실행됨

<script src="js/jquery-3.6.0.min.js"></script>
<script>
    // document.querySelector('h1').style.color = 'blue';
    $('h1').css({color:'blue'});
</script>

<script src="https://code.jquery.com/jquery-3.7.0.js"
integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
    $('h1').css({color:'blue'});
});
// js로 표현
// document.addEventListener('DOMContentLoaded',()=>{}); 
</script>

// $(document).ready(function(){ : jQuery 제일 첫 문장
// 더 간결하게 줄여쓰는 문법
$(function(){
    
    // css 속성을 한 번만 변경 가능
    $('h1').css('color','red');
    $('.list li').css('color','blue');

    // 한 번에 여러 스타일 변경
    // $(선택자).css({"속성명":"값", "속성명":"값", 등등})
    // 값이 문자면 ''에 입력, 숫자면 따옴표 필요없어도 됨
    $('h2').css({color:'green', fontSize:'40px', opacity:'.5', 
    transform:'rotate(45deg)', transformOrigin:'0'});

    // 선택자로 스타일 변경
    $('#box div div').css({background:'silver'});
    $('p:eq(1)').css({background:'silver'});
    // $('p:nth-of-type(2)').css('background','silver');
    // p:first, p:last, p:not('.active')

    // 메서드 체인 (= 하나로 이어 쓰기)
    let subTitle = $('h3');
    // subTitle.css('color','blue');
    // subTitle.css('fontSize','40px');
    // subTitle.css('fontWeight','bold');
    // 한번에 css를 연결 할 땐 앞 뒤로 '' 필수
    subTitle.css('color','blue').css('fontSize','40px').css('fontWeight','bold');
    // 제일 바람직한 방법 ({}안에 연결)
    subTitle.css({color:'blue', fontSize:'40px', fontWeight:'bold'});

}); // 문서가 준비되면 할 일

 

 

🙾  attr / prop 차이
- prop: 원래 기능을 알려주는 속성 (기능을 바꿀때도 사용)

🙾  contents / text / html 차이
- text: 글씨만 출력 (글씨로 가져옴)
- contents: 객체로 출력 (객체로 가져옴)
- html: 태그로 출력 (태그로 가져옴)

 

---

▏선택자 정리

참고사이트: https://inpa.tistory.com/entry/jQuery-%F0%9F%93%9A-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-%EC%84%A0%ED%83%9D%EC%9E%90-Selector-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC

📚 제이쿼리 선택자(Selector) 종류 총정리

- 순번요소 선택: 대상.eq(index)

- 대상의 직속 부모: 대상.parent('선택자')

- 대상의 가까운 조상 중: 대상.closest('선택자')

- 대상의 형제(자매): 대상.siblings('선택자')

- 대상의 바로 전 요소: 대상.prev()

- 대상의 바로 다음 요소: 대상.next()

- 대상.show()

- 대상.hide()

- 슬라이드 아래로 열고 접는 속성

⇨ 대상.slideDown()

⇨ 대상.slideUp()

- 슬라이드 펼치고 접는 속성

⇨ 대상.slideToggle()

 

🙾  대상 찾기

- 대상.children('선택자') = 대상.find('선택자')

대상.find('.active'); 
⇨ 대상의 자식요소 중
⇨ 공백이 있는 것
ex) images.find('active') == #images p .active

대상.filter('.active');
⇨ 대상 자신 중
⇨ 공백이 없는 것
ex) images.find('active') == #images p.active

 

---

▏event

$(function(){
/*
대상.on('이벤트종류',할일);
대상.on('이벤트종류',대상,할일);
*/

let mainTT = $('h1');
/*
mainTT.on('mouseover', function(){
    mainTT.css({background:'silver'})
});
mainTT.on('mouseout', function(){
    mainTT.css({background:'yellow'})
});
*/
// 첫번째 방법: 메소드 체인 방식으로 줄이기
/*
mainTT.on('mouseover', function(){
    mainTT.css({background:'silver'})
})
.on('mouseout', function(){
    mainTT.css({background:'yellow'})
});
*/
// 두번째 방법: on 없애기
mainTT.mouseover(function(){
    mainTT.css({background:'silver',  color:'black'})
})
.mouseout(function(){
    mainTT.css({background:'aquamarine', color:'blue'})
});
// 세번째 방법: function 없애기
/*
mainTT.mouseover(()=>{
    mainTT.css({background:'silver'})
})
.mouseout(()=>{
    mainTT.css({background:'yellow'})
});
*/

//h2와 h3에 마우스호버를 하면 글씨색이 blue, 나가면 black
//js의 this와 다르게 제이쿼리에선 $(this)로 사용
//js와 제이쿼리 둘 다 동일하게 arrow로는 this를 사용 할 수 없음
let subTT = $('h2, h3');
/*
subTT.mouseover(function(){
    $(this).css({color:'blue'})
})
.mouseout(function(){
    $(this).css({color:'black'})
});
*/

// 네번째 방법: hover라는 속성으로 할 일 입력
/*
대상.hover(
    function(){},
    function(){}
)
*/
subTT.hover(
    function(){
        $(this).css({color:'blue'})
    },
    function(){
        $(this).css({color:'black'})
    }
)

});//document ready 할일

 

🙾 이벤트 강제 실행

대상.trigger('이벤트종류');

 

🙾 keydown / keypress
- keydown: 입력 한 번만 작동

- keypress: 누르고 있을 때는 계속 작동

⇨ 글씨가 나오는 것만 확인 가능