j-Query - 개요, 기본선택자, 추가적인 선택자

1. 개요

1) jQuery란?

---

- 기존의 자바스크립트 언어만으로 구현하기에 복잡했던 구문작성들을  간소화하기 위해 "존 레식"에 의해 개발된 
JavaScript기반의 라이브러리 (유용한 기능들의 모음집) 
즉, JavaScript언어로 유용한 함수나 내용들이 이미 만들어져 있는(정의되어있는) 모음집

-  jQuery의 장점

1) DOM요소와 관련된 스크립트를 보다 쉽게 구현할 수 있다.
2) AJAX(비동기식 통신), 이벤트 처리 등 폭 넓게 지원한다. 
3) jQuery와 관련된 확장 플러그인, 오픈 API 등을 지원한다.

=> 적은 양의 코드로 빠르고, 풍부한 기능을 제공함 == 생산성 향상 

 

2)  jQuery 라이브러리 연결방법

---

head태그 내부에 script태그로 jQuery관련 .js파일 가져오기
오프라인 / 온라인 방식이 있음

- jQuery공식 사이트 : https://jquery.com

<a href="https://jquery.com" target="_blank">jQuery 공식 사이트</a>

상 : 배포용 / 하 : 개발자용

- UnCompressed : 개발자를 위한
                            개발자같은 사람이 보기 쉽도록 주석, 코드 정렬 등을 활용해서 가시성(가독성)을 유지하는 파일
- Compressed : 배포
                          주석, 들여쓰기, 띄어쓰기 등을 최소화해서 파일 용량을 줄인 버전 

 

1) jquery 라이브러리 파일을 직접 다운로드 받은 후 경로지정(오프라인 방식) 
- .js파일을 다운로드받아 저장한 후 저장된 파일의 경로를 지정한다. 

 <script src="resources/script/jquery-3.6.1.min.js"></script>

2) CDN(Content Delivery Network)을 통한 연결(온라인 방식) 
- 라이브러리를 제공하는 사이트의 url을 제시해서 파일 경로를 지정하는 방식

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

3) jQuery 구문 작성하기

---

우리는 기본적으로 jQuery구문으로 DOM요소를 다룰 것이기 때문에
jQuery 명령은 문서상에서 요소들이 전부 다 로드된 후에 실행되어야 함 => window.onload

- 순수 자바스크립트에서 해당 내용
[표현법]
window.onload = function(){
    실행내용; 
}

onload 함수 : 페이지가 다 로딩되면 자동으로 한 번 실행되는 함수 
해당 HTML문서의 요소들이 다 로드되고, 연동되어 있는 외부문서들도 
다 로드된다음에 실행되는 특징을 갖는다. 
window.onload는 해당 HTML 문서에서 단 한 번만 작성이 가능하다. 

 

<script>
    window.onload = function(){
        console.log('안녕하세요.'); //문서 로딩이 끝나면 실행
    };

    window.onload = function(){
        console.log('반갑습니다.'); //위에 문장이 무시된 채 마지막 문장만 실행됨
    };
</script>

- jQuery에서의 해당 내용은 3가지 구문으로 제공
[표현법]
(1) 
jQuery(document).ready(function(){
     실행내용;
})

jQuery(document).ready(function(){
    console.log('문서 읽어들이기 완료');
});

(2) 
$(document).ready(function(){
    실행내용;
})
ㅍ
$ : jQuery키워드를 나타냄

jQuery에서 해당 function은 HTML문서 안에 있는 DOM요소들만 로드되면 바로 실행됨
여러 번 기술 가능. 횟수제한없음

$(document).ready(function(){
    console.log('문서 읽어들이기 완료2');
});

(3) 
$(function(){
    실행내용;
})

$(function(){
    console.log('문서 읽어들이기 완료3');
});

- h3요소를 선택해서 배경색을 yellow로 변경 

> 순수 자바 스크립트 방식

var h3Arr = document.getElementsByTagName('h3'); //[h3, h3, h3]
for(var i = 0; i<h3Arr.length; i++){
    h3Arr[i].style.backgroundColor = 'yellow';
};

> jQuery 방식

 $('h3').css('background', 'yellow');

$('선택자'): 해당 요소를 선택하겠다.
.css() : 선택된 요소들의 스타일과 관련된 기능 수행

 

> 순수 JavaScript

- pre태그에 대한 글자색을 red로 바꾸기

var preArr = document.getElementsByTagName('pre');
for(var i = 0; i<preArr; i++){
    preArr[i].style.color = 'red';
}

> jQuery 방식

 $('pre').css('color', 'red');

2. 기본선택자

1) 아이디 선택자

---

: 특정 고유한 아이디 속성값을 가진 요소 단 하나만을 선택하고자 할 때 사용

<h1 id="id1">ID1</h1>
<h2 id="id2">ID2</h2>

> 순수 자바 스크립트 : 선택된 요소객체의 속성에 접근해서 값을 변경 

document.getElementById('아이디값'); > 대입을 통해 innerHTML / innerText

document.getElementById('id1').style.color = 'red';
document.getElementById('id1').innerHTML = '안녕';

>  jQuery방식 : $('#아이디명') 선택된 요소 객체에 메소드를 활용해서 값을 변경

$('#id2').css('color', 'pink');
$('#id2').html('잘가');

.html() : innerHTML과 관련된 기능을 수행하는 메소드 

2) 태그 선택자

---

: 해당 태그 요소를 전부 다 가져오고자 할 때 사용

<p>Java</p>
<p>Oracle</p>
<p>JDBC</p>

<h5>HTML</h5>
<h5>CSS</h5>
<h5>JavaScript</h5>

> 순수 자바스크립트 방식 :  document.getElementsByTagName('태그명'); => 배열형태

var p = document.getElementsByTagName('p'); //[p,p,p,...]
//p는 배열 배열 안에 p요소에게 스타일부여 
for(var i = 0; i<p.length; i++){
    p[i].style.color = 'red';    
}

> jQuery 방식 : $('태그명')

$('h5').css('color', 'blue');

$('p, h3, #id1').css('backgroundColor', 'pink');

3) 클래스 선택자

---

: 특정 클래스 속성값을 가진 요소들을 선택하고자 할 때 사용 

 <h1 class="item">Class1</h1>
 <h1 class="item select">Class2</h1>
 <h1 class="item select">Class3</h1>

> 순수 자바스크립트 방식 : document.getElementsByClassName('클래스속성값'); => 배열

대상 = 클래스 속성 값이 item인 요소들 

글자색 = orangered

클릭시 alert 

var items = document.getElementsByClassName('item');

for(var i = 0; i<items.length; i++){
items[i].style.color = 'orangered';
items[i].onclick = function(){
    alert('성공');
};
};

> jQuery 방식 : $('.클래스속성값')

$('.select').css('background', 'lightgray');
$('.select').click(function(){
    console.log('h1 클릭');
});

- .click() : 클릭이벤트와 관련된 기능 수행

 

< 정리 > 

순수 JavaScript 방식	jQuery 방식
document.getElementById('아이디속성값')	$('#아이디속성값')
document.getElementsByTagName('태그명')	$('태그명')
document.getElementsByClassName('클래스명')	$('.클래스명')

	순수 JavaScript 방식	jQuery 방식
	속성에 접근해서 대입하는 방식	메소드를 호출하는 방식
Style	.style.스타일속성 = '변경할값';	.css('스타일속성', '변경할값');
Content	.innerHTML = '변경할값';	.html('변경할 값');
Event	.on이벤트명 = function(){}	.이벤트명(function(){});

 

 

3. 추가적인 선택자

1) 자손선택자(>)와 후손선택자( )

---

- 자손선택자 : >

- 후손선택자 : (공백)

<div style="border: 1px solid pink;">
    <ul> div의 자손요소1이면서 li의 부모요소이면서 h3의 조상요소
        <li>div의 후손이면서 ul의 자손요소</li>
        <li>div의 후손이면서 ul의 자손요소2</li>
        <li class="ch">div의 후손이면서 ul의 자손요소3</li>
        <li class="ch">div의 후손이면서 ul의 자손요소4</li>
        <li> div의 후손이면서 ul자손요소5이면서 h3의 부모요소  
            <h3>div/ul의 후손이면서 li의 자손요소1</h3>
            <h4>div/ul의 후손이면서 li의 자손요소2</h4>
        </li>
    </ul>
    <li>
        <h3>예시1</h3>
    </li>
    <li>
        <h4>예시3</h4>
    </li>
    <li>
        <ul>
            <h4>예시2</h4>
        </ul>
    </li>
    <h3>div의 자손요소2</h3>
    <h3 class="ch">div의 자손요소3</h3>
</div>

<script>
    $(function(){

        $('div>h3').css('color', 'blue');
        $('div h3').css('background', 'violet');

        $('li>h3').css('color', 'white');
        $('ul h3').css('color', 'black');

        $('ul>li>h4').css('color', 'red');

        $('ul>.ch').css('background', 'yellow');

        $('li.ch').css('color', 'yellowgreen');

    })
</script>

- div의 자손 h3에 스타일 속성부여 

- div의 후손 h3에 스타일 속성부여 

- li의 자손 h3에게 스타일 속성부여

- ul의 후손 h3에게 스타일 속성부여

- ul의 자손, li의 자손, h4에게 스타일 속성부여

- ul의 자손 class ch에게 스타일 속성부여

- li의 클래스 ch에게 스타일 속성부여

 

2) 속성선택자

---

선택자[속성] : 특정속성을 가지고 있는 모든 요소 선택
선택자[속성-속성값] ***: 속성값이 특정값과 "일치"하는 모든 요소 선택
선택자[속성~=속성값] : 속성값에 특정값을 "포함"하는 요소 선택(공백기준) 
선택자[속성^=속성값] : 속성값이 특정값으로 "시작"하는 요소 선택
선택자[속성$=속성값] : 속성값이 특정값으로 "끝"나는 요소 선택 
선택자[속성*=속성값] : 속성값에 특정값을 "포함"하는 요소 선택

<input type="text"> <br>
<input type="number" class="test test3 test4 test1"> <br>
<input type="radio"> <br>
<input type="checkbox"> <br>
<input type="button" value="button"class="test2"> <br>

- val() : value속성과 관련된 기능 수행 (getter/setter)

  $('input[class~=test]').val('1234');

클래스가 test를 포함하는 요소 value에 1234 입력(setter)

- attr() : 그 외 속성들과 관련된 기능 수행

$('input[type^=ra]').attr('checked', true);
$('input[type$=box]').attr('checked', true);

input의 type속성이 ra로 시작하는 요소에 cheked옵션 부여

input의 type속성이 ra로 끝나는 요소에 cheked옵션 부여

- 메소드 체이닝 : 요소.css가 먼저 실행되면 다시 실행된 결과의 요소가 돌아옴(반환) 다시 그 요소에 접근해 css, val실행

$('input[class*=st2]').css('width', '50px').css('height', '50px').val('button');

3) 입력양식선택자

(input태그 type속성 따라서도 요소 선택이가능)

---

[표현법]
: type속성값

: text, : radio, :number, :checkbox...

텍스트상자 : <input type="text"> <br>
일반버튼 : <input type="button"> <br>
체크박스 : <input type="checkbox"> <br>
첨부파일 : <input type="file"> <br>
비밀번호 : <input type="password"> <br>
라디오버튼 : <input type="radio"> <br>
초기화버튼 : <input type="reset"> <br>
제출 : <input type="submit"> <br>
제출2 : <input type="submit"> <br>

 $(':button').css({width:'200px', height: '200px'}).val('big');

- 부여하고자 하는 스타일에 대해 "객체 형태"로 묶어서 쓰는 것도 가능함. 

- 예시 ) 

$(':checkbox').attr('checked', true);
$(':file').css('background', 'yellow');
$(':password').css('background', 'yellowgreen');
$(':radio').attr('checked', true).css({width: '50px', height: '50px'});

- 객체 형태로 작성할 경우 가독성을 쉽게 하기 위해 보통 들여쓰기 함. 

$(':reset').css({ 
            background:'blue', 
            color:'white', 
            border: 'none'});

- 비밀번호 입력란에 작성한 값을 alert창에 띄워보기 

 val() : 인자값 없이 메소드를 호출하면 해당 값을 불러오는 역할 

→ setter, getter의 역할을 동시에 수행함

- 비밀번호 입력란에 작성한 값을 경고창에 띄워보기

 $(':submit').click(function(){
 	alert($(':password').val());
    });

< mouseenter : 요소의 경계 안으로 들어갈 때 > 

- 현재 이벤트가 발생한 이벤트 타켓 요소에 접근하는 방법

window.event.target ==  e.target == this

$(":submit").mouseenter(function(){
        $(':submit').css('background', 'pink');

        this.css('background', 'pink');
        $(this).css('background', 'pink');

jQuery 선택자로 바꿔줌 => 인라인방식으로 스타일

* 고급기술 : 직접 css()호출해서 스타일을 부여하는 것이 아니라 
                     클래스 속성값을 추가해서 이미 정의된 스타일 입히기

- 미리 head영역의 style태그에 class선택자로 스타일 지정 

    <style>
        .pinkStyle{
            background-color: pink;
        }
    </style>

> 자바스크립트 방식

    btn3.classList.add('style');
    btn3.classList.remove('style');

> jQuery 

$(this).addClass('pinkStyle');

$(this).addClass('추가하고싶은 클래스 속성값');

- .addClass() : 선택된 요소에 클래스 속성값을 추가해주는 메소드

 

< mouseout : 요소의 경계 밖으로 나갈 때 > 

    $(':submit').mouseout(function(){
        $(this).removeClass('pinkStyle');
    });

< mouseenter + mouseout: hover > : jQuery에도 hover메소드 존재

$(':submit').hover(function(){
    $(this).addClass('pinkStyle');
}, function(){
    $(this).removeClass('pinkStyle');
});

3) 상태선택자

---

- checked. selected. enabled, disabled 

 

(1) checked 상태선택자(radio, checkbox)

체크되어있는 입력양식 태그를 선택
$('input:checked')

취미 : 
<input type="checkbox" name="hobby" value="영화보기">영화보기
<input type="checkbox" name="hobby" value="게임하기">게임하기
<input type="checkbox" name="hobby" value="산책하기">산책하기
<br>

<button id="btn1">취미가 무엇인가요?</button>

- 버튼 클릭 시 현재 checked된 요소만 선택해서 스타일 부여

  $(function(){
     $('#btn1').click(function(){
         $('input:checked').css({width: '50px', height: '50px'})

- 버튼 클릭 시 현재 checked된 요소만 선택해서 alert창으로 

"당신의 취미는 XX XX XX 입니다. 형식 출력

> 자바스크립트 방식

    var hobby = document.getElementsByName('hobby')

    var checkedItem = '';
    for(var i = 0; i<hobby.length; i++){
        if(hobby[i].checked){
        checkedItem += hobby[i].value + ' ';
        } 
    }
    alert('당신의 취미는 ' + checkedItem + '입니다.');

> jQuery 방식

    str = '';
    $('input[name=hobby]').filter(':checked').each(function(){
        str +=  $(this).val() + ' ';
    });

    console.log( str );

==> 왜 출력이 안되지 ? 

 

(2)  selected 상태 선택자(select>option)

option 요소 객체 중 선택된 태그를 선택
$('option:selected')

지역 : 
<select name="location">
    <option value="X">선택안함</option>
    <option value="NY">남양주</option>
    <option value="GD">강원도</option>
    <option value="BS">부산</option>
</select>

<button onclick="test();">확인</button>

선택한 지역 : <label id="result">없음</label>

* url에 location=value /

만약 value값을 적지 않았다면 content값이 value로

    console.log($('option:selected').val());
    console.log($('option:selected').html());

    $('#result').html(($('option:selected')));

- 자바스크립트와 jQuery 함께 사용 가능

document.getElementById('result').innerHTML = $('option:selected').html();

(3)  enabled, disabled 상태(input, button, textarea...)

활성화 / 비활성화된 요소 선택
: enabled
: disabled 

<div id="wrap">
    활성화 텍스트 상자 : <input type="text"> <br>
    비활성화 텍스트 상자 : <input type="text" disabled> <br>

    활성화 버튼 : <input type="button"> <br>
    비활성화 버튼 : <input type="button" disabled> <br>
</div>

-각 상태에 스타일 부여

$(function(){
    $('#wrap>:enabled').css('background', 'yellowgreen');
    $('#wrap>:disabled').css('background', 'greenyellow');
});

4. 필터링 관련 선택자

1) 필터 관련 선택자

---

- 테이블 생성

<table border="1">
    <tr>
        <td>이름</td>
        <td>MBTI</td>
        <td>혈액형</td>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>ENTP</td>
        <td>B형</td>
    </tr>
    <tr>
        <td>이순신</td>
        <td>JDBC</td>
        <td>A형</td>
    </tr>
    <tr>
        <td>안철수</td>
        <td>INFP</td>
        <td>AB형</td>
    </tr>
    <tr>
        <td colspan="2">총인원</td>
        <td>3명</td>
    </tr>
</table>

(1) first : 첫번째 요소를 의미 

$(function(){
	  $('tr:first').css('background', 'black').css('color', 'white')

(2) last : 마지막 요소를 의미

  $('tr:last').css({background:'orangered', color:'white'});

(3) even : 짝수번째 요소 (시작이 0부터)

  $('tr:even').css('background', 'gray');

(4) odd : 홀수번째 요소 (시작이 0부터)

 $('tr:odd').css('background', 'yellowgreen');

2) 필터 관련 메소드

---

기준이 되는 요소 중에서 특정 요소만을 걸러서 선택해주는 메소드 
first(), last(), filter(), not(), eq()

<h4 class="test">test-1</h4>
<h4 class="test">test-2</h4>
<h4 class="test">test-3</h4>
<h4 class="test">test-4</h4>
<h4>test-5</h4>
<h4 class="test">test-6</h4>

(1) .first() : 기준 중에서 가장 첫 번째를 선택 

$(function(){
 	$('h4').first().css('font-size', '20px');

(2) .last() : 기준 중에서 가장 마지막을 선택   

 $('h4').last().css('font-size', '50px');

(3) .filter('선택자') : 기준 중에서 해당 선택자만 선택

  $('h4').filter('.test').html('테스트');

(4) .not('선택자') : 기준중에서 해당 선택자가 아닌 것만 선택

$('h4').not('.test').css('color', 'skyblue');

(5) .eq(위치) : 0부터 시작, 몇번째 요소 선택 ** 중요

 $('h4').eq(0).text('<b>eq(0)선택됨</b>');

* text() : 선택된 요소의 innertText와 관련된 기능을 수행