모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리
다음의 기능을 위해 제작
1) 직접 다운받아 사용하는 방법
2) CDN 호스트 사용하는 방법
방법 1 : 링크 연결
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
방법 2 : 직접 다운로드하여 저장하고 script 태그에 위치를 지정
<script src="script/jquery-3.6.1.js"></script>
( script태그는 개수와 상관없이 추가가 가능 )
제이쿼리는 자바스크립트의 확장판이기때문에 작성영역이 script 태그 내부로 똑같다.
이 영역에 자바스크립트와 제이쿼리를 섞어서 사용해도 무방하다.
작성영역은 똑같지만, 작성된 내용의 시작이 다소 차이가 있다.
쉽게 말해 ‘이명령들(이코드들)은 제이쿼리 명령입니다.’라는 영역 표시가 필요하다.
모든 명령은 익명함수 안에 넣어서 작성하고, $(document).ready( function(){ });
는 여러 번 쓸 수 있다.
위의 익명함수 안에 넣지 않은 제이쿼리 코드는 자바스크립트 문법으로 해석되며, 이런 코드는 실행되지 않거나 오류를 일으킬 수 있다.
위에 쓰인 제이쿼리 영역의 표식은 구문이 길어서 대개는 아래와 같이 간략하게 사용하는 것이 대부분이다.
앞으로 위 구문은 아래와 같이 document와 ready를 생략한 후 간결하게 사용한다. (document).ready를 생략 --> $(function(){});
$('#tit').css("color","red");
// 제이쿼리의 일반적인 명령
$(function(){})
안에 넣지 않았으므로 실행되지 않고 에러를 발생선택자로 대상 선택 ${'body'}
-> 이어서 (.)을 찍고 스타일 또는 구성요소 또는 함수를 선택 .css()
-> 함수 안에 변경 내용을 지정 ('background-color', '#00ffff')
즉, $(선택자).구성요소 또는 메서드(변경내용);
CSS에서 쓰던 선택자를 jQuery에서도 쓸 수 있다 (약간 다른 부분도 있음)
선택자1과 선택자2 사이의 공백(선택자1 선택자2)
: 선택자1의 자손 중 선택자2 모두(자손의 자손 포함)
$(function(){ $('div h1').css('color', 'red'); });
선택자1>선택자2
: 선택자1의 바로 아래 자손들 중 선택자2 모두(자손의 자손 미포함)
$(function(){ $('div>h1').css('color', 'blue'); });
HTML
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<section>
<h1>자식 요소 선택자</h1>
<p>내용2</p>
</section>
<h1>인접 관계 선택자</h1>
</div>
jQuery
HTML
jQuery
$("선택자").parent() : 요소선택자의 부모 요소를 선택
$("선택자").parents() : 요소선택자의 상위 요소 모두 선택
$("선택자").closest("div")
: 요소선택자의 상위 요소 중 가장 가까운 div만 선택
$("선택자 하위요소") : 요소선택자의 지정하위요소 모두 선택
$("선택자>자식요소") : 요소선택자의 1단계 자식에 있는 자식요소만 선택
$("선택자+하위요소")
: 요소선택자의 바로 '다음'에 나오는 지정하위요소를 선택
$("선택자~하위요소") : 요소선택자의 뒤로 나오는 지정하위요소들을 선택
$("선택자").children() : 요소선택자의 모든 자식 요소를 선택
$("선택자").prev() : 요소선택자의 바로 이전 요소를 선택
$("선택자").prevALL() : 요소선택자의 모든 이전요소를 선택
$("선택자").prevUntil('요소명')
: 요소선택자의 요소명에 지정한 곳까지 모두 선택
$("선택자").next() : 요소선택자의 다음 요소를 선택
$("선택자").nextALL() : 요소선택자의 다음 모든 요소를 선택
$("선택자").nextUntil('h2') : 요소선택자부터 h2태그 요소까지 모두 선택
$("선택자").siblings() : 요소선택자의 형제요소 전체를 선택
HTML
<h1 class="title">선택자</h1>
<p>내용1</p>
<p>내용2</p>
<p class="txt3">내용3</p>
<p>내용4</p>
<p>내용5</p>
<p class="txt6">내용6</p>
jQuery
HTML
jQuery
HTML
jQuery
<input type="image" src="">
요소:odd -> 홀수 번째에 위치한 문서 객체 선택
요소:even -> 짝수 번째에 위치한 문서 객체 선택
요소:first -> 첫 번째에 위치한 문서 객체 선택
요소:last -> 마지막에 위치한 문서 객체 선택
$('요소선택:first-of-type') : 요소 무리 중 첫번째 요소 선택
$('요소선택:last-of-type') : 요소 무리 중 마지막번째 요소
$('요소선택:nth-child(3)') : 요소 무리 중 세번째 요소
$('요소선택:nth-child(3n)') : 요소 무리 중 3의 배수 번째 요소
$('요소선택:nth-last-of-type(2)') : 요소 무리 중 뒤에서 두번째 요소
$('요소선택:only-child') : 부모 요소 내에 자식 요소가 1개뿐인 요소 선택
➡️ $("li:only-child")
: 부모요소 내에 <li>
요소가 1개 뿐인 요소 선택
$('요소선택:eq(index)') : 요소 무리 중 인덱스번호가 참조하는 요소
➡️ $("요소선택").eq(index)
와 같은 표현
$('요소선택:gt(index)
: 요소 무리중 인덱스번호 보다 큰 인덱스가 참조하는 요소
$('요소선택:li(index)
: 요소 무리중 인덱스번호 보다 작은 인덱스가 참조하는 요소
$('요소선택').slice(index1, index2)
: 요소 무리중 인덱스번호1부터 인덱스번호2 ‘전’까지 참조하는 요소
HTML
jQuery
each는 매개변수로 배열이름과 익명함수를 갖는다.
지정 배열의 요소개수만큼 반복실행하되 실행내용은 익명함수에 쓰인다.
익명함수는 index와 item 변수를 매개변수로 받고 매 반복마다 해당 인덱스와 요소 값이 매개변수에 전달된다.
index : 반복 실행 배열의 현재 인덱스 번호
item : 반복실행 배열의 현재 값
제이쿼리 명령으로 태그에 class 추가 및 제거
.each(*)
가 일반 배열을 대상으로 실행되는 반복 실행문이었다면
$('h1').each();
는 h1태그들을 대상으로 h1태그들 개수만큼 반복되는 반복 실행문이다.
CSS
jQuery
DOM은 자바스크립트 보다 제이쿼리에서 훨씬 활용도가 높다
선택자 및 필터링으로서의 DOM
$(selector).filter(selector);
$(selector).filter(function(index){});
filter 괄호 안의 익명함수가 각 인덱스마다 true/false를 리턴해준다.
리턴된 true/false는 그때 그때의 index값과 매칭되어 결국 true일 때만의 index만 골라내는 효과를 얻을 수 있다.
다르게 말하면 filter()가 괄호 안에 리턴된 true/false 중에 true인 index만 사용
인덱스 3과 4만 골라내고 싶다면 익명함수 안에 return index==3 || index==4;
filter메서드의 괄호 안에...
적용될 인덱스를 지정할, 키워드 또는 익명함수로 인덱스를 골라 넣을 수 있게 코딩하면 된다.
체이닝을 사용해 한 줄로 서로 다른 문서 객체에 스타일 적용 가능
전체 배경 오렌지색, 짝수번째들만 글자 빨간색
첫번째 .css()메서드의 리턴 값이 css가 적용된 $('h3')
이며,
그 뒤에 다시 .filter()
를 붙여서 필터링이 가능하다.
전혀 관련없는 제3의 대상을 체이닝 하지는 않는다.
$('h3').css('background','orange').$('h1').css();
(X) 잘못된 사용 예
전체 배경은 오렌지, 짝수번째 글자색 흰색, 홀수번째 글자색 빨강
1차 filter가 적용된 후 아무런 조치 없이 다시 filter를 쓰면 먼저 필터링된 결과들 중에 두번째 필터링이 적용되어 짝수번째 코드들 중에서 홀 수번째 코드만 적용됨
end()
를 이용하여 짝수번째 필터링을 제거한 후 다시 홀수번째 필터링을 적용해야 의도한 필터링이 진행된다.
end()
: 문서 객체 선택을 필터일 이전 한 단계 뒤로 돌리는 함수
$('h1').each(function(index, item){})
의 사용방식에서...
this를 사용하면서 index 값이나 item 변수를 function() 안에서 생략하여 사용이 가능하다.
다만 이경우 현재 this의 인덱스를 알아내려면 별도의 함수가 필요하다
$(this).index()
: 현재 객체의 인덱스값 (자주 사용)
$(this).is(선택자)
: 종속 선택자같은 this내부에서 선택자로 추가 필터링한 객체
$(function(){ $('h1').addClass('item_1'); });
현재 h1태그가 3개가 있을 때...
각각의 h1에 다른 클래스 적용할 수 있다.
인덱스값(0,1,2)을 전달 인수로 전달받은 익명함수의 리턴값('item_1', 'item_2', 'item_3')이 addClass()에 적용된다.
익명함수의 위치가 addClass메서드 안쪽에 위치하기 때문에 익명함수의 리턴값이 addClass에 적용될 class이름들이다.
removeClass() : 문서 객체의 클래스 속성 제거
html
첫번째 h1태그의 class 제거하기 🔽
attr()
속성과 관련된 모든 기능 수행한다.
값을 얻는 동작에 인덱스가 사용되지 않았다면 첫번째 문서객체
(인덱스 0번)이 사용된다.
검사라는 표현보다 조회하여 얻어내는 동작이 더 어울리는 표현이다.
위 1,2번 정리와 CSS, HTML 동일
➡️ 'img태그의 src값을 내용으로 넣은 h2태그'와
'img태그의 width값을 내용으로 넣은 h2태그'가
생성되어 body 하위 태그로 추가됨