[Spring] Day09 (Note): jQuery

 

2022/3/28

 

jQuery

존 레식이 자바 스크립트를 이용해 만든 라이브러리 언어. 함수들의 집합.

1) 호환성 문제 해결 -> jQuery에서 이를 해결하게 됨

2) 쉬운 애니메이션 효과 구현

 

라이브러리 연동

offline: 다운 받아서 resource 폴더에 넣기

online: CDN

<scrpit src=”https://code.jquery.com/jquery-3.6.0.min.js”> </script> 헤드 부분에 추가.

 

 

 

선택자 Selector

HTML 요소 선택해서 가져옴. 모든 태그들은 제이쿼리에선 객체라고 함.

#선택자 사용: $(“  ”) 안에 문자형 데이터로 CSS 선택자 입력.

$(“ 선택자 “).css(“스타일 속서명”, “값”); -> 스타일 적용

$(“ 선택자”).attr(“속성명”, “값”); -> 속성 적용

 

jQuery 기본 구조

1) ready() 함수: 문서 객체가 준비되면

<script>

          $(document).ready(function(){

                     //준비되면 부를 jQuery 작성

});

</script>

2) 즉시 함수로: 문서 객체가 준비되면…

<script>

          $(function(){

          //제이쿼리 작성

});

</script>

기본 선택자

1) 직접 선택자

전체: *           ex) $(“*”)

아이디: #아이디 값

클래스: .클래스 값

태그: 태그 명

그룹: 선택자, 선택자, …

종속: 태그명 #아이디값 태그명. 클래스 값

 

2)인접 관계 선택자

부모: $(“선택자”).parent(); (부모 하나) .parents() html까지 부모들 전부

하위 요소: $(“기준요소선택자 요소선택자”) #wrap h1

자식: $(“선택자 > 자식 선택자”)

     $(“선택자”).children(“자식 선택자”);

형:  $(“선택자”).prev(); (상위 하나) .prevAll() (상위 전체)

동생: $(“선택자”).next(); (동생 하나) .nextAll() 동생들

전체 형제: $(“선택자”).sibilings();

가장 가까운 상위: $(“선택자”).cloeset(“선택자”);

 

체이닝 기법

체인처럼 계속 호출하여 연결하는 것

$(“선택자”).css(“속성명”,”값”).css(“속성명”,”값”).css() ……

 

배열 관련 메서드

1.    each() / $.each()
선택한 요소들의 배열에 저장된 요소를 순서대로 하나씩 선택하면서 인덱스 정보를 가져옴.
$(“선택자”).each(function(매개변수 1, 매개변수 2){ //실행 코드 }); function이 매번 반복하면서 돌아감. 인덱스가 필요하면 이렇게…
매개변수 1 인덱스, 매개변수2=요소대입 //forEach문과 비슷하다고 보면됨

$(“선택자”).each(function(){$(this)});
$.each($(“선택자”), function(매개변수1, 매개변수2){//실행코드});
$(this) = 배열에 저장된 요소가 대입. 인덱스 필요 없으면 이렇게.

2.    $.map()
배열에 저장된 데이터 수만큼 메서드 반복, 리턴은 메서드에서 반환되는 데이터가 새 배열에 저장된 그 배열을 리턴함.
$.map(Array, function(매개변수 1, 매개변수 2){
          //실행할 코드들
          return 데이터;
});
매개 변수 1= 데이터 / 매개변수 2 = 인덱스 (위에 each와는 거꾸로)

 

속성 탐색자

선택한 요소를 기준으로, 일치하는 속성의 포함 여부를 따져 요소를 선택.

1.   $(“선택자[속성명]”): 선택한 요소에 지정한 속성이 있는 요소만 선택 $(“h1[class]”)

2.   $(“선택자[속성명=값]”): 선택한 요소에 속성 명= 값이 맞는 요소

3.   $(“선택자[속성명] ^= 값”): 해당 속성에 값으로 시작하는 요소 선택

4.   $(“선택자[속성명$=값]”): 해당 속성에 값으로 끝나는 요소 선택

5.   $(“선택자[속성명 *= 값]”): 해당 속성에 값을 포함하는 요소 선택

6.   $(“:type속성값”): input 태그의 type 속성 값이 일치하는 요소만 선택 $(“:radio”)

7.   $(“선택자:visible/hidden”): 선택 요소가 visible / hidden 상태인 것

8.   $(“선택자:selected”): selected 상태인 요소 선택

9.   $(“선택자:checked”): 체크된 상태인 요소 선택

 

유용한 메서드

1.    is(): 선택한 요소의 상태가 지정한 속성과 일치하면 true, 아니면 false
$(“선택자”).is(“:checked”);

2.    get(): 선택자에 get(0)을 적용함녀 자바스크립트 DOM 방식 스타일에 사용 가능
$(“선택자”).get(0).style.color=”#fff”;

3.    has(): 선택 요소 중 지정요소를 포함하는 것만 선택
$(“li”)has(“span”): li중 span을 포함하는 li

4.    not(): 선택 요소 중 not으로 지정한 것 제외하고
$(“li”).not(“:first”);

5.    find(): 선택 요소 중 특정 요소를 한 번 더 찾기
$(“li”).find(“strong”);

 

속성 조작 메서드

1.    $(“선택자”).html(): 선택 요소의 하위 요소를 가져와 문자열로 리턴
.html(“새 요소”): 선택 요소의 하위 요소를 모두 지우고 새 요소로 바꿔줌

2.    $(“선택자”).text(): 선택 요소의 텍스트만 가져옴
.text(“새 텍스트”): 새 텍스트로 바꾸기

3.    $(“선택자”).attr(“속성 명”): 해당 속성 값 리턴
.attr(“속성 명”, “새 값”): 속성의 값 변경 $(“a#test).attr(“href”,http://naver.com);
.attr({“속성명”:”새값”, “속성명”:”새값”, ……});

4.    $(“선택자”).removeAttr(“속성”): 선택한 속성 삭제

5.    $(“선택자”).css(“속성 명”): 속성값 리턴
.css(“속성명”, “새값): 속성 값으로 지정

6.    $(“선택자”).addClass(“class값”): class값 추가
$(“선택자”).removeClass(“class값”): class값 삭제
$(“선택자”).toggleClass(“class값”): class값이 있으면 삭제, 없으면 추가
$(“선택자”).hasClass(“class값”): class 값이 있으면 true, 없으면 false 리턴

7.    $(“선택자”).val(): input 태그에서 주로 사용. value 속성 값 리턴
.val(“새 값”): value값 새 값으로 적용

 

수치 조작 메서드

1.    height() 높이 값 리턴 (안쪽 여백과 선 두께 제외)

2.    height(새 값): 높이 값 수정

3.    width() 너비 값 리턴

4.    width(새 값) 너비 값 수정

5.    innerHeight() / innerWidth() 안쪽 여백 포함 높이값/ 너비값 리턴, 매개변수 주면 수정

6.    outerHeight() / outerWidth() 선 두께와 안쪽 여백 포함 높이값/너비값 리턴, 매개변수 주면 수정

7.    position() 요소의 포지션 우치ㅣ 값 (선택한 기준 요소로부터의 상대 값)
.position().left(x)
.position().left(y)

8.    offset() 문서 기준으로 수평/수직 떨어져 있는 값
.offset().left;
.offset().top;

9.    scrollLeft(): 수평 스크롤 이동한 값 $(window).scrollLeft();

10. scrollTop(): 수직 스크롤 이동한 값

 

객체 편집 메서드

요소를 복제, 새 요소 생성, 의도한 위치에 삽입, 삭제

1.    $(“선택자”).before(“새 요소”); 선택 요소 이전 위치에 새 요소 추가

2.    .after(“새 요소”) 선택 요소 뒤에 새 요소 추가

3.    .append(“새 요소”) 선택 요소 안에 마지막 위치에 새 요소 추가

4.    .prepend(“새 요소”) 선택 요소 안에 앞 위치에 새 요소 추가

5.    .clone() 요소 복제, 매개 변수 true=이벤트까지 복제, false= 요소만 복제

6.    .empty() 선택 요소의 모든 하위 요소 삭제

7.    .remove() 선택 요소 삭제

8.    .replaceAll() 선택한 요소를 새 요소로 바꿈

9.    .unwrap() 선택한 요소의 부모 요소를 삭제

10. .wrap(“새 요소”) 선택한 요소를 새 요소로 감싸기

11. wrapInner(“새 요소”) 선택한 요소의 모든 하위 요소를 새 요소로 감싸기

 

이벤트 등록 메서드

이벤트: 사용자가 브라우저에서 취하는 모든 행위

이벤트 핸들러: 이벤트가 발생했을 때 실행되는 코드. function(){……}

이벤트 등록 메서드: 특정 동작이 일어났을 때 저장된 핸들러를 실행시키는 일을 함
.click(function(){이벤트 실행 시 실행할 코드들}); 클릭 이벤트 등록 메서드

1.    단독 이벤트 등록 방식
$(“이벤트 대상 선택”).이벤트 등록 메서드(function( ){ //js 코드… });
$(“이벤트 대상 선택”).on(“이벤트 종류”, function( ){ //js 코드… });

2.    그룹 이벤트 등록 방식: 2개 이상의 동작에 대한 이벤트를 등록 on()
#type1
$(“이벤트 대상 선택”).on(“이벤트 종류1 이벤트 종류2……”, function( ){ //js 코드… });
#type2
$(“이벤트 대상 선택”).on({
          “이벤트 종류”, function( ){ //js 코드… },
          “이벤트 종류”, function( ){ //js 코드… },
          “이벤트 종류 이벤트 종류” : function() {},
          ……
});

3.    이벤트 제거 메서드
$(“이벤트 대상”).off(“제거할 이벤트 종류”);

4.    로딩 이벤트 메서드
사용자가 브라우저에서 HTML 문서를 요청, HTML 문서의 로딩이 완료되면 이벤트 핸들러 실행

①    ready() 요청한 HTML 문서 객체의 로딩이 끝나면 이벤트 발생

②    load() 외부에 연동된 소스 (img, video…)의 로딩이 끝나면 이벤트 발생시킴

③    error() 이벤트 대상요소에서 오류가 발생하면 이벤트 발생

마우스 이벤트

마우스를 이용해 취하는 모든 행위

1.   click()

2.   dbclick() 더블 클릭

3.   <a>, <form> 태그에 클릭 이벤트 적용 시 기본 이벤트 차단
<a> -> 클릭 -> 링크로 이동
<form><submit> -> 클릭 -> action에 등록된 주소로 이동
#차단법

①    return false 이용
$(“a  또는 form”).이벤트 메서드(function(){
js코드…
return false;
});

②    preventDefault() 메서드 이용
$(“a 또는 form”).이벤트 메서드(function(e){ // e = 이벤트 발생시킨 객체
     e.preventDefault();
     js 코드…
});

4.   mouseover() 커서가 올라가서 가만히 있을 때

5.   mouseout() 커서가 올라갔다가 요소 범위 바깥으로 나갔을 때

6.   hover() 마우스의 커서가 요소가 올라가고 내려갔을 때. 위에 있을 때.

7.   mouseenter() 요소 경계 범위 안으로 들어갔을 때

8.   mouseleave() 요소 경계 범위 밖으로 나갔을 때

9.   mousemove()

10. mousedown() 마우스 버튼 누른 순간

11. mouseup() 마우스 버튼을 눌렀다가 뗀 순간

12. scroll()

 

포커스 이벤트

포커스: 마우스로 <a> 또는 <input> 태그를 클리하거나 tab키를 누르면 생성됨

1.    focus() focus 됐을 때

2.    blur() 포커스 되어 있던게 빠져나가 이동했을 때

3.    focusin() 어떤 대상의 하위 요소로 포커스가 발생했을 때 부모 요소에 이벤트 걸어줌

4.    focusout() 대상의 하위 요소에서 외부로 이동했을 때

 

data()

:HTML 요소에 데이터를 저장하고 읽는 역할을 하는 함수

쉽게 적용 가능, HTML 요소에 data를 저장하기 때문에, js에 data 저장을 위한 변수 설정이 필요 없어짐 -> 간결해짐

1.    저장
$(“선택자”).data(“key”, “value”);
key = 문자열
value=object

HTML5에서는 data-* 형식으로 미리 데이터를 저장할 수 있다.
< … data-key = “value”>

2.    읽기
$(“선택자”).data(“key”); -> value 리턴

3.    삭제
$(“선택자”).removeData(“key”);

 

change()

선택한 폼 요소의 값을 새 값으로 바꾸고, 포커스가 다른 요소로 이동하면 이벤트 발생

.change(function(){});
.on(“change”, function(){});

 

키보드 이벤트

1.    keydown() 누르는 순간

2.    keypress() 눌렀을 때

3.    keyup() 떼는 순간

 

이벤트 발생한 요소 추적

이벤트를 발생시킨 요소의 정보를 구하는 방법

$(this) 이벤트 핸들러에서 $(this)를 사용하면 이벤트가 발생한 요소를 선택하여 추적 가능

 

효과 Effect 메서드

hide() 숨기기
fadeout()
slideUIp()

show()
fadeIn()
slideDown()

toggle()
fadeToggle()
slideToggle()

위 효과 메서드 (소요 시간, 가속도, 콜백함수);
fadeTo(소요 시간, 투명도, 콜백 함수)

소요 시간: slow, normal, fast / 1000(1초), 500(0.5초)
가속도: swing, linear
콜백 함수: 효과가 끝난 후 실행할 함수 (생략 가능)
투명도: 0~1 사이 (1에 가까울수록 선명)