DAY_031[국비] 자바 웹프로그래밍 과정

Bona의 블로그 입니다.·2022년 11월 10일

jquery

국비과정

목록 보기

32/99

⛅ Day 031

jQuery

🪐 Navigator

navigator 객체

🌌 JQuery

🪐 jQuery 기본

모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리
다음의 기능을 위해 제작
- DOM과 관련된 처리를 쉽게 구현
- 일관된 이벤트 연결을 쉽게 구현
- 시각적 효과를 쉽게 구현
- ajax 애플리케이션을 쉽게 구현
http://jquery.com

🪐 jQuery 사용방법법

1) 직접 다운받아 사용하는 방법

2) CDN 호스트 사용하는 방법

Content Delivery Network
사용자에게 간편하게 콘텐츠를 제공하는 방식을 의미
구글, 마이크로소프트, jQuery측에서 사용자가 jQuery를 사용하기 편하게 콘텐츠를 제공

1. 라이브러리 다운받아 포함하는 방법 ( 2가지 방식 )

방법 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태그는 개수와 상관없이 추가가 가능 )

2. 제이쿼리를 사용한 웹페이지 형식

제이쿼리는 자바스크립트의 확장판이기때문에 작성영역이 script 태그 내부로 똑같다.
이 영역에 자바스크립트와 제이쿼리를 섞어서 사용해도 무방하다.
작성영역은 똑같지만, 작성된 내용의 시작이 다소 차이가 있다.
쉽게 말해 ‘이명령들(이코드들)은 제이쿼리 명령입니다.’라는 영역 표시가 필요하다.
모든 명령은 익명함수 안에 넣어서 작성하고, $(document).ready( function(){ });는 여러 번 쓸 수 있다.
위의 익명함수 안에 넣지 않은 제이쿼리 코드는 자바스크립트 문법으로 해석되며, 이런 코드는 실행되지 않거나 오류를 일으킬 수 있다.
위에 쓰인 제이쿼리 영역의 표식은 구문이 길어서 대개는 아래와 같이 간략하게 사용하는 것이 대부분이다.
앞으로 위 구문은 아래와 같이 document와 ready를 생략한 후 간결하게 사용한다. (document).ready를 생략 --> $(function(){});

※ 잘못된 제이쿼리 코드

$('#tit').css("color","red"); // 제이쿼리의 일반적인 명령

id가 'tit'인 태그의 글자색을 빨간색으로 변경하라는 명령
⇒ $(function(){}) 안에 넣지 않았으므로 실행되지 않고 에러를 발생

3. 일반적인 명령 형식

선택자로 대상 선택 ${'body'}
-> 이어서 (.)을 찍고 스타일 또는 구성요소 또는 함수를 선택 .css()
-> 함수 안에 변경 내용을 지정 ('background-color', '#00ffff')
즉, $(선택자).구성요소 또는 메서드(변경내용);

🎈 선택자

CSS에서 쓰던 선택자를 jQuery에서도 쓸 수 있다 (약간 다른 부분도 있음)

4. jQuery 자식(손)선택자와 후손 선택자

4-1 jQuery 자식(손)선택자와 후손 선택자 1

선택자1과 선택자2 사이의 공백(선택자1 선택자2)
: 선택자1의 자손 중 선택자2 모두(자손의 자손 포함)
$(function(){ $('div h1').css('color', 'red'); });
선택자1>선택자2
: 선택자1의 바로 아래 자손들 중 선택자2 모두(자손의 자손 미포함)
$(function(){ $('div>h1').css('color', 'blue'); });

4-2 jQuery 자식(손)선택자와 후손 선택자 2 - 두 개 이상의 요소를 한 번에 변경

.children()

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() : 요소선택자의 형제요소 전체를 선택

🌟 nextUntil(), prevUntil()

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

🌟 .parents(), .parents("div")

HTML
jQuery

🌟 closest("div")

HTML
jQuery

🪐 속성 선택자

jQuery 속성 선택자
- 기본 선택자 뒤에 붙여서 사용.
- 입력 양식과 관련괸 태그를 선택할 때 많이 사용

JQuery 필터 선택자
1) 입력 양식 필터 선택자 (상태에 의한)
- input:button | input:checkbox | input:radio | input:file
- input:image
  ➡️ <input type="image" src="">
  : submit 버튼을 이미지로 대신할 때 사용
  submit 버튼을 대신하는 이미지이기 때문에, 경로에 그림이 없으면 '엑박'이 표시되고 옆에 '제출'이라는 말이 같이 표시
- input:password | input:text | input:submit | input:reset
- 상태
  - 요소:checked | 요소:disabled | 요소:enabled | 요소:focus |
    요소:selected

🪐 특정 필터 및 탐색 선택자

선택자를 사용해 문서 객체를 선택한 수에 다음과 같은 위치를 지정한다

요소: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

🪐 jQuery를 사용한 배열 관리

each() 메서드 사용
- 매개변수로 입력한 함수 사용
- for in 반복문처럼 객체나 배열의 요소 검사하는 메서드

🌟 배열관리 1

each는 매개변수로 배열이름과 익명함수를 갖는다.
지정 배열의 요소개수만큼 반복실행하되 실행내용은 익명함수에 쓰인다.
익명함수는 index와 item 변수를 매개변수로 받고 매 반복마다 해당 인덱스와 요소 값이 매개변수에 전달된다.
index : 반복 실행 배열의 현재 인덱스 번호
item : 반복실행 배열의 현재 값

🌟 배열관리 2

제이쿼리 명령으로 태그에 class 추가 및 제거
.each(*) 가 일반 배열을 대상으로 실행되는 반복 실행문이었다면
$('h1').each();는 h1태그들을 대상으로 h1태그들 개수만큼 반복되는 반복 실행문이다.
CSS
jQuery

🌌 DOM

🪐 filter()

DOM은 자바스크립트 보다 제이쿼리에서 훨씬 활용도가 높다
선택자 및 필터링으로서의 DOM

기본 필터링 메서드
- filter() 메서드 사용하여 대상 요소들을 선택. 다음은 두가지 형태
  (1) $(selector).filter(selector);
  (2) $(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메서드의 괄호 안에...
적용될 인덱스를 지정할, 키워드 또는 익명함수로 인덱스를 골라 넣을 수 있게 코딩하면 된다.

🪐 문서 객체 탐색 체이닝과 종료

예제 1

체이닝을 사용해 한 줄로 서로 다른 문서 객체에 스타일 적용 가능
- 전체 배경 오렌지색, 짝수번째들만 글자 빨간색
- 첫번째 .css()메서드의 리턴 값이 css가 적용된 $('h3')이며,
  그 뒤에 다시 .filter()를 붙여서 필터링이 가능하다.
전혀 관련없는 제3의 대상을 체이닝 하지는 않는다.
$('h3').css('background','orange').$('h1').css();
(X) 잘못된 사용 예

예제 2.

위의 체이닝 방식으로 실행하기 곤란한 상황에는 어떻게?

전체 배경은 오렌지, 짝수번째 글자색 흰색, 홀수번째 글자색 빨강
1차 filter가 적용된 후 아무런 조치 없이 다시 filter를 쓰면 먼저 필터링된 결과들 중에 두번째 필터링이 적용되어 짝수번째 코드들 중에서 홀 수번째 코드만 적용됨
end()를 이용하여 짝수번째 필터링을 제거한 후 다시 홀수번째 필터링을 적용해야 의도한 필터링이 진행된다.
end() : 문서 객체 선택을 필터일 이전 한 단계 뒤로 돌리는 함수

🪐 문서 객체 추가 선택

add() : 기존 문서 객체를 포함하여 추가로 문서 객체를 선택

🪐 문서 특징 판별

$('h1').each(function(index, item){})의 사용방식에서...
this를 사용하면서 index 값이나 item 변수를 function() 안에서 생략하여 사용이 가능하다.
다만 이경우 현재 this의 인덱스를 알아내려면 별도의 함수가 필요하다
$(this).index() : 현재 객체의 인덱스값 (자주 사용)
$(this).is(선택자)
: 종속 선택자같은 this내부에서 선택자로 추가 필터링한 객체

🪐 문서 객체의 클래스 속성 추가 [ 정리 ]

예제1. 매개변수에 문자열(클래스이름) 입력

$(function(){ $('h1').addClass('item_1'); });
➡️ 전체 h1태그에 하나의 클래스 적용
addClass('클래스이름')

예제2. 매개변수에 클래스 이름으로 된 문자열을 리턴하는 익명 함수 입력

현재 h1태그가 3개가 있을 때...
각각의 h1에 다른 클래스 적용할 수 있다.
인덱스값(0,1,2)을 전달 인수로 전달받은 익명함수의 리턴값('item_1', 'item_2', 'item_3')이 addClass()에 적용된다.
익명함수의 위치가 addClass메서드 안쪽에 위치하기 때문에 익명함수의 리턴값이 addClass에 적용될 class이름들이다.

🪐 문서 객체의 클래스 속성 제거

removeClass() : 문서 객체의 클래스 속성 제거
html
- 첫번째 h1태그의 class 제거하기 🔽

🪐 3. 4. 문서 객체의 속성 검사/추가

attr()
- 속성과 관련된 모든 기능 수행한다.
- 값을 얻는 동작에 인덱스가 사용되지 않았다면 첫번째 문서객체
  (인덱스 0번)이 사용된다.
- 검사라는 표현보다 조회하여 얻어내는 동작이 더 어울리는 표현이다.
위 1,2번 정리와 CSS, HTML 동일

➡️ 'img태그의 src값을 내용으로 넣은 h2태그'와
'img태그의 width값을 내용으로 넣은 h2태그'가
생성되어 body 하위 태그로 추가됨

Bona의 블로그 입니다.

제가 공부하고 공유하고 싶은 글을 올리고 있습니다.

이전 포스트

DAY_030[국비] 자바 웹프로그래밍 과정

다음 포스트