본문 바로가기
JS/jQuery

[jQuery] jQuery 선택자, 메소드

에띠 2022. 5. 9.
728x90

선택자

함수가 적용되길 원하는 요소 및 속성

 

JavaScript vs JQuery 선택자

JavaScript JQuery
document.getElementsByTagName("요소이름") $('요소이름')
document.getElementsByClassName("클래스명") $('.클래스명')
document.getElementsById("id명") $('#id명')


필터선택자

선택자명 설명 선택자명 설명
:eq(n) 선택한 요소 중에서 인덱스가 n인 요소를 선택함 :header 선택한 요소 중에서 h1부터 h6까지의 요소를 모두 선택함
:gt(n) 선택한 요소 중에서 인덱스가 n보다 큰 요소를 모두 선택함 :lang(언어) 선택한 요소 중에서 지정한 언어의 요소를 모두 선택함
:lt(n) 선택한 요소 중에서 인덱스가 n보다 작은 요소를 모두 선택함 :root 선택한 요소 중에서 지정한 선택자와 일치하지 않는 요소를 모두 선택함
:even  선택한 요소 중에서 인덱스가 짝수인 요소를 모두 선택함 :root 선택한 요소 중에서 최상위 루트 요소를 선택함
:odd 선택한 요소 중에서 인덱스가 홀수인 요소를 모두 선택함 :target 선택한 요소 중에서 웹 페이지 URI의 fragment 식별자와 일치하는 요소를 모두 선택함
:first 선택한 요소 중에서 첫 번째 요소를 선택함 :contains(텍스트) 선택한 요소 중에서 지정한 텍스트를 포함하는 요소를 모두 선택함
:last  선택한 요소 중에서 마지막 요소를 선택함 :has(선택자)  선택한 요소 중에서 지정한 선택자와 일치하는 자손 요소를 갖는 요소를 모두 선택함
:animated 선택한 요소 중에서 애니메이션 효과가 실행 중인 요소를 모두 선택함 :empty 선택한 요소 중에서 자식 요소를 가지고 있는 요소를 모두 선택함
    :parent 선택한 요소 중에서 자식 요소를 가지고 있는 요소를 모두 선택함

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>선택자 - 1</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        $(function(){
            $('p').on('click', function(){
                $('span').css('fontSize', '30px');//카멜표기법
            });//on: 이벤트를 연결해주는 함수

            $('#selector').on('click', function(){
                $('#selector').css('border', '3px solid deeppink');
            });
        });
    </script>
</head>
<body>
    <h2 id="selector">선택자 - 1</h2>
    <p><span>오픈소스</span> 기반의 자바스크립트 라이브러리</p>
    <p><span>문서 객체 모델(DOM)와 이벤트 (Event)</span>에 관한 처리를 쉽게 할 수 있음</p>
    <p><span>Ajax 응용 프로그램</span>을 빠르게 개발 가능</p>
    <p><span>크로스 브라우징</span>을 위해 사용</p>
</body>
</html>

span 태그 클릭 시

- P태그 글자 클릭 시 폰트 크기 변경

- id가 select인 선택자 - 1 클릭 시 글자 색 변경

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>선택자 - 2</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        $(function(){
            $('button').on('click', function(){
                $("img[alt='sunny']").attr('src', './flash.png');
            })
        })
    </script>
</head>
<body>
    <h2>선택자 - 2</h2>
    <p><img src="./sunny.png" alt="sunny"></p>
    <p><button>속성변경</button></p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>선택자 - 4</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        td { border: 1px solid orange; }
        li {
            color: white;
            margin: 5px;
        }
    </style>
    <script>
        $(function(){
            $('tr:even').css('background', 'red');
            $('tr:odd').css('background', 'green');
            $('td:first').css('background', 'yellow');
            $('td:last').css('background', 'orange');
            $(':header').css('background', 'blue'); //h요소
            $('li:eq(0)').css('background', 'navy');//인덱스가 0번인것
            $('li:gt(0)').css('background', 'purple');  //인덱스가 0번보다 큰것
            $('li:lt(3)').css('border', '3px solid red');
            $(':root').css('background', 'skyblue');    //최상위영역 body
            (function upDown(){
                $('h3').slideToggle(2000, upDown);//slide를 2초마다 반복
            })();//(function 함수명(){})()바로실행

            $(':animated').css('border', '3px solid deeppink');
            
        })
    </script>
</head>
<body>
    <h2>선택자 - 4</h2>
    <h1>제목 1</h1>
    <h3>제목 2</h3>
    <table>
        <caption>필터 선택자</caption>
        <colgroup>
            <col>
            <col>
            <col>
        </colgroup>
        <tbody>
            <tr>
                <td>1번</td>
                <td>2번</td>
                <td>3번</td>
            </tr>
            <tr>
                <td>4번</td>
                <td>5번</td>
                <td>6번</td>
            </tr>
            <tr>
                <td>7번</td>
                <td>8번</td>
                <td>9번</td>
            </tr>
            <tr>
                <td>10번</td>
                <td>11번</td>
                <td>12번</td>
            </tr>
        </tbody>
    </table>
    <ul>
        <li class="bg">내용1</li>
        <li class="bg">내용2</li>
        <li class="bg">내용3</li>
        <li>내용4</li>
    </ul>
</body>
</html>

 

메소드

동작함수
- 선택한 요소에 원하는 동작을 설정

    $(function(){
        $(선택자).동작함수();
    });

    $(function(){
        $('#btn').css('border', '3px solid deeppink');
    });


css() 메소드
- css의 속성 값을 설정
- 속성에 대한 이름은 카멜표기법을 사용

🎁 카멜표기법 : 낙타표기법
    fontSize, borderColor, paddingLeft ..
🎁 스네이크표기법
    font-size, border-color, padding-left ..
    tb_member, fn_sum ..

 

html()
- 해당 요소의 HTML 컨텐츠를 반환하거나 설정
    innerHTML과 같은 기능

text()
- 해당 요소의 텍스트 컨텐츠를 반환하거나 설정

width()
- 선택한 요소 중에서 첫번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정

height()
- 선택한 요소 중에서 첫번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정

attr()
- 해당 요소의 명시된 속성의 속성값을 반환하거나 설정

position()
- 선택한 요소 중에서 첫번째 요소에 대해 특정 위치에 존재하는 객체를 반환하거나 설정

val()
- form 요소의 값을 반환하거나 설정


getter, setter 메소드
- getter 메소드는 선택된 요소에 접근하여 값을 읽어오기 위한 메소드
- setter 메소드는 선택된 요소에 접근하여 값을 설정하기 위한 메소드
- 메소드 이름이 같음. getter 메소드는 인수를 전달하지 않으며, setter 메소드는 대입하고자 하는 값을 인수로 전달

    html()          //getter
    html('문자열')  //setter

    const text = document.getElementsById('text');
    text.innerHTML = '안녕하세요';

    <p id='text>안녕하세요</p>

    const text = $('#id').html();   //text = '안녕하세요'; getter
    $('#id').html('반갑습니다');    //setter

    <p id="text>반갑습니다</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getter / setter</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        $(function(){
            $('button').on('click', function(){
                const newText = $('h2').html(); //getter : "getter / setter"
                $('#text').html(newText);   //setter
            });
        })
    </script>
</head>
<body>
    <h2>getter / setter</h2>
    <p>버튼을 누르면 p 태그에 새로운 텍스트를 설정합니다.</p>
    <button>설정</button>
    <p id="text"></p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getter / setter - 2</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        $(function(){

            $('#getter').on('click', function(){
                const size = `너비는 ${$('#box').width()}px이고, 높이는${$('#box').height()}px입니다.<br>`;
                $('#text').html(size);
            })

            $('#setter').on('click', function(){
                const w = $('#box').width();
                const h = $('#box').height();
                $('#box').width(w/2).height(h/2);
                const size = `너비는 ${$('#box').width()}px이고, 높이는${$('#box').height()}px입니다.<br>`;
                $('#text').html(size);
            });
            
            $('#setter2').on('click', function(){
                const w = $('#box').width();
                const h = $('#box').height();
                $('#box').width(w*2).height(h*2);
                const size = `너비는 ${$('#box').width()}px이고, 높이는${$('#box').height()}px입니다.<br>`;
                $('#text').html(size);
            });

            
        })
    </script>
</head>
<body>
    <h2>getter / setter - 2</h2>
    <p>버튼을 누르면 div 요소의 크기를 읽어오거나 설정할 수 있습니다</p>
    <button id="getter">크기 읽어오기</button>
    <button id="setter">크기 줄이기</button>  <!--/2-->
    <button id="setter2">크기 늘리기</button>  
    <div id="box" style= "width: 400px; height: 200px; background-color: gold;">박스의 크기</div>
    <p id="text"></p>
</body>
</html>

 

크기 읽어오기 클릭 시




728x90
저작자표시 비영리 동일조건

'JS > jQuery' 카테고리의 다른 글

[jQuery] 요소의 탐색  (0) 2022.05.09
[jQuery] 요소  (0) 2022.05.09
[jQuery] jQuery로 DOM 다루기  (0) 2022.05.09
[jQuery] 메소드 체이닝(method chaining)  (0) 2022.05.09
[jQuery] jQuery  (0) 2022.05.09

'JS/jQuery' 관련글

티스토리툴바