Chap1~2 선택자

김승현·2021년 11월 16일
jquery국비수업
0

사용 문법 및 기본 문법


jQuery CDN 사이트

  • [https://code.jquery.com](https://code.jquery.com/) 사이트에서 경로를 알 수 있음
  • uncompressed : 원본 파일 (확장자 .js)
  • minified : 원본을 압축한 파일 (확장자 .min.js)
  • slim : 해당 버전에서 필요한 내용만 있는 라이브러리 파일 (.slim.js)
  • slim minified : slim 파일을 압축한 파일 (.slim.min.js)



$()함수

👨‍🎓 작성 예시

$(selector).click();

또는

jQuery(selector).click();



기본 문법

  • jQuery에서는 함수 형태로 동작(자바스크립트에서는 속성값 형태)
  • 해당 함수의 인자값이 없으면 가져오는 코드
  • 인자값이 있으면 대입하는 코드

JavaScript->jQuery
innerHTML->html();
innerTEXT->text();
value->val();

EX) 작성 예시

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

   <style>
       .print {
           border: 1px solid red;
           width: 200px;
           height: 300px;
       }
   </style>
</head>

<body>

   <p class="print"></p>
   <input type="text" id="su1">+<input type="text" id="su2">
   <button id="btn">버튼</button>

   <script>
       $('#btn').click(function() {

           // 입력받은 데이터 Number 형태로 변경하여 가져오기
           var su1 = parseInt($('#su1').val());
           var su2 = parseInt($('#su2').val());
           
           // 요소 안에 있는 데이터 가져오기
           var printData = $('.print').html();
           
           // 요소 안의 내용과 새로운 내용 누적
           // printData = printData + su1 + su2 + '<br>';
           printData += su1 + su2 + '<br>';

           // 누적 데이터 요소안에 삽입
           $('.print').html(printData);

       });
   </script>
 
</body></html>



jQuery 선택자


기본 선택자, 자손 선택자, 후손 선택자

기본 선택자의미
$('*')HTML DOM의 모든 Element를 선택
$('tag')지정된 tag와 일치하는 모든 Element를 선택
$('#id')지정된 id와 일치하는 Element를 선택
$('.class')지정된 class와 일치하는 모든 Element를 선택
$('tag1,tag2')Multiple Selector

- 지정된 tag1과 tag2를 일치하는 모든 Element를 선택
- 다양한 선택자를 여러개 사용할 수 있음
자손 선택자
$('요소A>요소B')자손을 선택하는 선택자
후손 선택자
$('요소A 요소B')후손을 선택하는 선택자- 요소A의 후손으로 범위를 한정

속성 선택자

  • 기본 선택자 뒤에 붙여 사용
속성 선택자의미
요소[속성]특정 속성을 가지고 있는 요소 선택
요소[속성=값]속성 안에 값이 특정 값과 같은 요소 선택
요소[속성~=값]속성 안에 값이 특정 값이 단어로 포함되는 요소 선택 (띄어쓰기로 구분)
요소[속성^=값]속성 안에 값이 특정 값으로 시작하는 요소 선택
요소[속성$=값]속성 안에 값이 특정 값으로 끝나는 요소 선택
요소[속성*=값]속성 안에 값이 특정 값을 포함하는 요소 선택

EX) 작성 예시

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

    <style>

    </style>
</head>

<body>

    1. <input type="text" name="in-put1" value="사과" /><br>
    2. <input type="text" name="in-put2" value="배" /><br>
    3. <input type="password" name="input3" value="포도" /><br>
    4. <input type="password" name="input4" value="바나나" /><br>
    5. <input type="text" name="input5" placeholder="생 당근" /><br>
    6. <input type="text" name="input6" placeholder="생 마늘" /><br>
    7. <input type="text" name="input7" placeholder="생강" /><br>

    <button id="btn1">결과</button>


    <script>
        $('#btn1').click(function() {

            $('input[placeholder]').css('color', 'blue');
            $('input[type=password]').css('border', '2px solid red');
            $('input[placeholder~=생]').css('background-color', 'green'); //5, 6번
            $('input[placeholder^=생]').css('border', '2px solid yellow'); //5, 6, 7번
            $('input[name$=4]').css('border', '2px solid purple'); //4번
            $('input[name*=-]').css('background-color', 'gray'); // 1, 2번*/

        });
    </script>

</body></html>

입력 양식 필터 선택자

  • input 태그의 type 속성에 따라 문서 객체 선택 가능
  • 필터 선택자는 기본 선택자 뒤에 사용
선택자의미
$('input:type값')input 태그의 type 속성에 따라 문서 객체 선택 가능
ex) button 형태
$('input:checked')input 태그 중 체크된 요소
$('input:disabled')input 태그 중 비활성화된 요소
$('input:enabled')input 태그 중 활성화된 요소
ex) select태그의 option 선택시
$('option:selected')option 태그 선택시

EX) 작성 예시(checked)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <style>

    </style>
</head>

<body>

    <input type="checkbox" name="check" value="music" id="music">노래
    <input type="checkbox" name="check" value="dance">춤
    <input type="checkbox" name="check" value="coding">코딩
    <input type="checkbox" name="check" value="youtube">유튜브
    <input type="checkbox" name="check" value="lie">누워있기
    <button id="btn1">결과</button>


    <script>
        $('#btn1').click(function() {


            var arr2 = $('input:checked');

            for (var i = 0; i < arr2.length; i++) {
                console.log(arr2[i].value);
            }


        });
    </script>

</body>

</html>

EX) 작성 예시(selected)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>

<body>

    <select id="car">
        <option value="K5">K5</option>
        <option value="K7">K7</option>
        <option value="Genesis">제네시스</option>
        <option value="Grandure">그랜져</option>
        <option value="Starex">스타렉스</option>

    </select>

    <button id="btn">버튼</button>

    <script>
        $('#btn').click(function() {

            var $select = $('#car>option:selected');
            console.log($select.val());
        });
    </script>

</body>

</html>

위치와 관련된 필터 선택자

선택자의미
$('요소:even')짝수 번째에 위치한 객체 선택(0부터 시작)
$('요소:odd')홀수 번째에 위치한 객체 선택(0부터 시작)
$('요소:first')첫번째 위치한 객체 선택
$('요소:last')마지막에 위치한 객체 선택

EX) 작성 예시

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

    <style>

    </style>
</head>

<body>

    <table>
        <tr>
            <th>순번</th>
            <th>이름</th>
            <th>혈액형</th>
            <th>지역</th>
        </tr>
        <tr>
            <td>1</td>
            <td><span>홍길동</span></td>
            <td>B형</td>
            <td>인천</td>
        </tr>
        <tr>
            <td>2</td>
            <td>김말똥</td>
            <td>A형</td>
            <td>서울</td>
        </tr>
        <tr>
            <td>3</td>
            <td>고길똥</td>
            <td>AB형</td>
            <td>경기</td>
        </tr>
        <tr>
            <td>4</td>
            <td>유비</td>
            <td>O형</td>
            <td>부산</td>
        </tr>
        <tr>
            <td>5</td>
            <td>관우</td>
            <td>B형</td>
            <td>충남</td>
        </tr>
        <tr>
            <td>6</td>
            <td>장비</td>
            <td>A형</td>
            <td>경상</td>
        </tr>
        <tr>
            <td>끝</td>
            <td>끝</td>
            <td>끝</td>
            <td>끝</td>
        </tr>
    </table>

    <button id="btn">결과</button>


    <script>
        $('#btn').click(function() {

            $('tr:first').css('background-color', 'skyblue');
            $('tr:last').css('background-color', 'pink');
            $('tr>td:even').css('color', 'green');
            $('tr>td:odd').css('color', 'red');

        });
    </script>


</body></html>

함수 형태의 필터 선택자

  • 함수 형태를 가지고 있는 선택자
선택자의미
$('요소:contains(문자열)')특정 문자열을 포함하는 요소 선택
$('요소:eq(n)')N번째에 위치하는 요소 선택 (0부터 시작)
$('요소:gt(n)')N번째를 초과하는 요소 선택 (0부터 시작)
$('요소:lt(n)')N번째 미만에 위치하는 요소 선택 (0부터 시작)
$('요소:has(h1)')H1태그를 가지고 있는 요소 선택
$('요소:not(선택자)')선택자와 일치하지 않는 요소 선택 (부정)
$('요소:nth-child(식)')식 값의 일치하는 요소 선택
ex) 3n+1 인 경우 (1,4,7,10 ....)
ex) 2n+1 인 경우 (1,3,5,7,9, ...)

EX) 작성 예시

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

    <style>

    </style>
</head>

<body>

    <table>
        <tr>
            <th>순번</th>
            <th>이름</th>
            <th>혈액형</th>
            <th>지역</th>
        </tr>
        <tr>
            <td>1</td>
            <td><span>홍길동</span></td>
            <td>B형</td>
            <td>인천</td>
        </tr>
        <tr>
            <td>2</td>
            <td>김말똥</td>
            <td>A형</td>
            <td>서울</td>
        </tr>
        <tr>
            <td>3</td>
            <td>고길똥</td>
            <td>AB형</td>
            <td>경기</td>
        </tr>
        <tr>
            <td>4</td>
            <td>유비</td>
            <td>O형</td>
            <td>부산</td>
        </tr>
        <tr>
            <td>5</td>
            <td>관우</td>
            <td>B형</td>
            <td>충남</td>
        </tr>
        <tr>
            <td>6</td>
            <td>장비</td>
            <td>A형</td>
            <td>경상</td>
        </tr>
        <tr>
            <td>끝</td>
            <td>끝</td>
            <td>끝</td>
            <td>끝</td>
        </tr>
    </table>

    <button id="btn">결과</button>


    <script>
        $('#btn').click(function() {

            $('td:contains(똥)').css('color', 'red');
            $('td:eq(10)').css('background-color', 'yellow');
            $('td:gt(10)').css('background-color', 'blue');
            $('td:lt(10)').css('background-color', 'green');
            $('td:has(span)').css('color', 'skyblue');
            $("td:not(td:contains(홍))").css('background-color', 'blue');
            $('td:nth-child(2n)').css('background-color', 'green');

        });
    </script>


</body></html>
profile
김승현
개발자로 매일 한 걸음
이전 포스트

Chap 8. 이벤트

다음 포스트

Chap 3. jQuery 객체 탐색

0개의 댓글