제이쿼리, 라이브러리 연동하기

켄·2023년 7월 16일

Javascript(ES6)jquery

jQuery란?

자바스크립트 라이브러리 언어입니다.
라이브러리 언어란 자바스크립트로 만들어진 다양한 함수들의 집합을 말합니다.

장점

호환성 문제 해결
크로스 브라우저를 지원하기 때문에 대체 코드 불필요.

⚠️ 문서 객체모델 DOM(HTML 문서구조)과 이벤트 객체(Event Object)는 호환성(크로스 브라우징)이 떨어집니다.
대상의 선택 방법이 더 쉬움

쉽고 편리한 애니메이션 효과 기능 구현
바닐라 자바스크립트로 애니메이션 효과를 구현하려면 많은 코드를 사용해야 합니다. 제이쿼리는 애니메이션과 다양한 이펙트를 지원하는 메서드를 제공합니다.

라이브러리 연동하기

두 가지 방식이 있습니다.
head안에 script scr에 작성하면 됩니다.

다운로드 방식
사이트에서 라이브러리 파일을 직접 내려받아 HTML에 불러오는 방식
네트워크 전송 방식(CDN: Content Delivery Network)
온라인에서 제공하는 라이브러리 파일을 네트워크를 통해 HTML에 불러오는 방식

간편하게 연동할 수 있는 CDN 방식을 추천합니다.
아래는 CDN 방식 입니다.

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

구글에서 제공하는 jquery 3.6.0 버전입니다.

<head>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>

jquery 공식 사이트에서 제공하는 제이쿼리 항상 최신 버전을 불러오는 소스입니다.

선택자

HTML 요소를 선택하여 가져옵니다.

DOM(Document Object Model)이란?

HTML 문서 객체 구조를 말합니다.
최상위 객체인 <html>이 있고 하위 객체로 <head>, <body>가 있습니다.
<body> 태그는 문단 태그, 테이블 태그, 폼 태그 등을 포함 합니다.
모든 태그를 객체라고 부르며, 태그에는 기능과 속성이 포함되어 있습니다.
예로 <img> 태그는 이미지를 출력하는 기능이 있고, scr, alt, width, height와 같은 속성을 포함하고 있습니다.

선택자 사용하기

선택자를 사용하기 위해서는 문서 객체를 불러와야 합니다.
head 안에 script를 작성하면 body가 생성되기 전에 선택자가 먼저 실행되어 문서 객체 선택이 불가능 합니다.

body 아래에 script를 작성하거나, $()를 사용합니다

<script>
$(function(){
  // 여기에 작성
});
</script>

스타일이나 속성을 적용하는 방법

<script>
$("CSS선택자").css("스타일속성", "값");

$("CSS선택자").attr("속성", "값");
</script>

선택자 모음

여기에 적힌 것 이외에도 다양합니다.

<script>
기본 작성 방식
    jQuery('대상').method();
    $('대상').method();

    $('*'); 전체 선택자 탐색
    $('#id'); 아이디 선택자 탐색
    $('.class'); 클래스 선택자 탐색
    $('type'); 요소(타입) 선택자 탐색

    $('#id > .class type, #id'); 다중 선택자 탐색

    $('type:nth-child(n)'); n번째 요소만 선택
    $('type').eq(2); 인덱스 번호 2 요소만 선택
    $('type[attribute = value]');  //아래는 예시
    $('li[title = search]'); <li>의 요소 중 title 속성값이 search인 요소만 선택
    
    $(':hover') input 요소 중 hover 속성값이 일치하는 요소만 선택
    

    탐색 메서드();
    $().parent(); 대상의 직계 부모 요소 탐색
    $().parents(); 대상의 부모 요소 탐색
    $().children(); 대상의 직계 자식 요소 탐색
    $().siblings(); 대상의 형제 요소 탐색
    $().prev(); 대상의 이전 한개 형제 요소 탐색
    $().prevAll(); 대상의 이전 모든 형제 요소 탐색
    $().next(); 대상의 다음 한개 형제 요소 탐색
    $().nextAll(); 대상의 다음 모든 형제 요소 탐색
    
    $().find(); 선택한 하위 요소 중에서 find()로 필터링한 요소만 선택
    $().filter(); 선택한 요소 중에서 filter()로 필터링한 요소만 선택
    // 둘의 차이점은 필터링 대상이 선택요소 기준으로 '하위 요소'인지, '선택한 요소'인지로 구분
    $().is(); 선택한 요소 중에서 전달받은 선택자에 해당하는 요소가 하나라도 존재하면 참(true)을 반환함.

    $().method().method(); 메서드 chaining 방식. 아래는 예시
    $("#tit").css("background-color", "#ff0").css("border", "2px solid #f00")
    //체이닝 기법으로 선택한 요소의 css 메서드를 연속해서 2회 적용
    
    $("#tit").css(
		{
		"background-color": "#ff0", 
		"border": "2px soild #f00"
		} 
	); 	//json 방식으로도 여러개 적용할 수 있습니다.
</script>

속성 조작

속성 조작 메서드

요소의 속성을 조작

<script>
data() // 선택한 요소에 속성을 추가합니다
.data({ text: "javascript" }); // 요소에 text 데이터: javascript 추가

text() // 선택한 요소가 감싸는 모든 텍스트를 가져옵니다.
text("새 텍스트") // 선택한 요소의 하위 요소를 모두 제거하고 새 텍스트를 넣습니다.
예시) $("#select").text("내용 추가"); // id select의 요소에 텍스트 추가

removeClass("클래스이름") // 선택한 요소의 class 속성에서 지정한 클래스를 제거합니다.
addClass("클래스이름") // 선택한 요소의 class 속성에 새 값을 추가합니다.
hasClass("클래스이름") // "클래스 이름" 클래스가 존재하는지 여부를 확인한다.
toggleClass("클래스이름") // 지우고 더하고 토글 기능
예시) $("#select").removeClass("active"); // id select 요소에 active 클래스 추가
	 $("#select").addClass("on"); // id select 요소에 on 클래스 제거
	 $("#select").toggleClass("click");  // id select 요소에 click를 붙였다 지웠다



attr("속성명") // 선택한 요소의 지정한 속성값을 가져옵니다.
attr("속성명", "새 값") // 요소를 선택하여 지정한 속성에 새 값을 적용합니다.
예시) $("#select").attr("href", "http://www.naver.com"); 
// id select 요소의 href를 네이버 주소로 적용

val() // 선택한 *폼* 요소의 value 값을 가져옵니다.
val("새값") // *폼* 요소를 선택하여 value 속성에 새 값을 적용합니다.
예시) $("#select").val("hello"); // id가 select인 폼 요소의 value를 hello로 적용
</script>

수치 조작 메서드

<script>
height() // 안쪽 여백과 선을 제외한 높이, 너비값을 반환하거나 변환
width()

innerHeight() // 안쪽 여백을 포함한 높이, 너비값을 반환하거나 변환
innerWidth()

outerHeight() // 안쪽 여백과 선을 포함한 높이, 너비값을 반환하거나 변환
outerWidth()

position() // 선택한 요소의 포지션 위치값 반환
offset() // 선택한 요소가 문서에서 수평/수직으로 얼마나 떨어져잇는지에 대한 값 반환

scrollLeft() // 브라우저 수평 스크롤 이동 너비값 반환
scrollTop() // 브라우저 수직 스크롤 이동 높이값 반환
</script>

객체 편집 메서드

요소를 복제하거나 새 요소 생성 및 삭제,
새로 생성한 요소를 의도한 위치에 삽입

<script>
before() // 선택한 요소의 이전 위치에 새 요소 추가
after() // 선택한 요소의 다음 위치에 새 요소 추가
예시) $("#select").before("<p>이전에 추가하기!</P>"); 
	 $("#select").after("<p>뒤에 추가하기!</P>"); 

wrapInner() // 선택한 요소의 내용을 새 요소로 각각 감싸기
unwrap() // 선택한 요소의 부모 요소를 삭제
예시) $("#select").unwrap(); // unwrap의 괄호 안은 비웁니다. id select의 부모 요소 삭제
	 $(".select").wrapInner("<span></span>"); // class select를 각각 span으로 감싸기
</script>