[JQuery] 속성/필터선택자, 배열

VScode/JQuery 2022. 9. 9. 14:35

속성 선택자

-기본 선택자 뒤에 붙여 사용

-입력 양식과 관련된 태그를 선택할 때 많이 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="script/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function(){
            $('input[type=text]').val('hello jquery').css("background","yellow");
        });
    </script>
</head>
<body>
    <input type="text"/><br>
    <input type="password"/><br>
    <input type="radio"/>선택1<br>
    <input type="checkbox"/>선택2<br>
    <input type="file"/><br>
    <input type="image" src="images/Koala.jpg" width="100"/><br>
</body>
</html>

필터 선택자

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>selected</title>
    <script src="script/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function(){
            setInterval(function(){
                var value=$('select>option:selected').val(); 
                // 현재 선택된 옵션의 값을 변수에 저장
            },500);
        });
    </script>
</head>
<body>
    <select>
        <option>Apple</option>
        <option>Bag</option>
        <option>Cat</option>
        <option>Dog</option>
    </select>
</body>
</html>

2. 위치 필터 선택자

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

-요소: odd → 홀수 번째에 위치한 문서 객체 선택

-요소: even → 짝수 번째에 위치한 문서 객체 선택

-요소: first → 첫번째에 위치한 문서 객체 선택

-요소: last → 마지막에 위치한 문서 객체 선택

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="script/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function(){
            $('tr:odd').css('background','yellow'); 
// odd: 홀수, even: 짝수
            $('li:first').css('background','blue');
            $('li:last').css('background','red');
        });
    </script>
</head>
<body>
    <h1>탐색 선택자</h1>    
    <ul>
        <li>내용1</li><li>내용2</li><li>내용3</li><li>내용4</li>
    </ul>
    <table border="1">
        <tr><th>이름</th><th>혈액형</th><th>지역</th></tr>
        <tr><td>홍길동</td><td>AB형</td><td>서울시 강남구</td></tr>
        <tr><td>홍길동</td><td>AB형</td><td>서울시 강남구</td></tr>
        <tr><td>홍길동</td><td>AB형</td><td>서울시 강남구</td></tr>
        <tr><td>홍길동</td><td>AB형</td><td>서울시 강남구</td></tr>
        <tr><td>홍길동</td><td>AB형</td><td>서울시 강남구</td></tr>
    </table>
</body>
</html>

3. 특정 필터 선택자

-$("요소선택: 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)): 요소 무리중 인덱스번호보다 큰 인덱스가 참조하는 요소

-$("요소선택: lt(index)): 요소 무리중 인덱스번호보다 작은 인덱스가 참조하는 요소

-$("요소선택").slice(index,index): 요소 중 인덱스 번호부터 뒤쪽 인덱스 번호전까지 참조하는 요소

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="script/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#menu li").eq(2).css("background-color","red"); // 인덱스는 0부터 시작
            $("#menu li:eq(3)").css("background-color","blue");
            $("#menu li:gt(7)").css({"background-color":"green"});
            $("#menu li:lt(2)").css({"background-color":"pink"});
            $("#menu li").slice(5,7).css({"background-color":"yellow"});
            $("#menu2 li:first-of-type").css({"background-color":"skyblue"});
            $("#menu2 li:last-of-type").css({"background-color":"gray"});
            $("#menu3 li:only-child").css({"background-color":"yellowgreen"});
        });
    </script>
</head>
<body>
    <h1>탐색 선택자</h1>
    <ul id="menu">
        <li>내용1</li>  <li>내용2</li>  <li>내용3</li>  <li>내용4</li>  <li>내용5</li>
        <li>내용6</li>  <li>내용7</li>  <li>내용8</li>  <li>내용9</li>  <li>내용10</li>
    </ul>
    <ul id="menu2">
        <li>내용1</li>  <li>내용2</li>  <li>내용3</li>  <li>내용4</li>
    </ul>
    <ul id="menu3">
        <li>내용one</li>
    </ul>
</body>
</html>

배열 관리

-배열의 생성은 자바스크립트와 같음

1. each()

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

- 매개변수로 배열이름과 익명함수를 갖음

-지정된 배열의 요소갯수만큼 반복실행하되 실행내용은 익명함수에 쓰임

-익명함수는 index와 item 변수를 매개변수로 갖으며 매 반복마다 해당 인덱스와 요소값이 매개변수에 전달됨

1) 사이트로 이동하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="script/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        // 객체를 배열의 요소로 넣어서 배열을 생성할 수 있음
        var array=[ {name:'Naver',link:'https://www.naver.com' },
                    {name:'Daum',link:'https://www.daum.net' },
                    {name:'Nate',link:'https://www.nate.com' }
                ];
        // each 함수를 이용한 배열의 각 요소 접근
        $(function(){
            $.each(array,function(index,item){
                // index: 반복 실행 배열의 현재 인덱스 번호
                // item: 반복 실행 배열의 현재 값
                var output='';
                output+="<a href='" + item.link +"'>" +item.name+"</a><br>";
                // "<a href='" + "https://www.naver.com" +"'>"+ "Naver" +"</a>"  배열 요소 중 name과 link를 이용해 anchor 태그 구성 
                document.body.innerHTML+=output; 
                // 그것을 body의 내용으로 맨 끝에 삽입
            });
        });
    </script>
</head>
</html>

2) 날짜 표시하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="script/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function(){
            var m_days=[31,28,31,30,31,30,31,31,30,31,30,31];
            // 특정 배열을 대상으로 하는 반복실행. m_days 배열의 값을 하나씩 item 변수에 전달하면 반복을 진행. index는 그때 그대의 첨자(인덱스). 배열을 대상으로 하는 반복 실행
            $.each(m_days,function(index,item){
                var output= '';
                output=(index+1)+'월 마지막 날짜: '+item+'일<br>';
                document.body.innerHTML+=output;
            })
        });
    </script>
</head>
</html>

2. class 추가 및 제거

1) addClass()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="script/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function(){
            $('h1:eq(0)').addClass('high-light-0');
            $('h1').eq(1).addClass('high-light-1');
            $('h1').eq(2).addClass('high-light-2');
            $('h1').eq(3).addClass('high-light-3');
            $('h1').eq(4).addClass('high-light-4');
        });
    </script>
    <style type="text/css">
        .high-light{background:pink;}
        .high-light-0{background:yellow;}
        .high-light-1{background:orange;}
        .high-light-2{background:blue;}
        .high-light-3{background:green;}
        .high-light-4{background:red;}
    </style>
</head>
<body>
    <h1>item - 0</h1>
    <h1>item - 1</h1>
    <h1>item - 2</h1>
    <h1>item - 3</h1>
    <h1>item - 4</h1>
</body>
</html>

* 코드의 script 내용만 변경

2) each()

-배열을 대상으로 하는 each: $.each(배열이름, 매개변수가 있는 익명함수){});

-selector 선택한 다수의 동일한 태그를 대상으로 할 때: $('selector').each(매개변수가 있는 익명함수(){});

$(function(){
    $('h1').each(function(index,item){
        // index:0~4 item: $('h1').eq(0)~$('h1').eq(4)  
        $(item).addClass('high-light-'+index);
        // $(this).addClass('high-light-'+index);
        // this: 반복 실행문에선 해당 인덱스번째의 아이템(h1태그)을 지목함
    });
    // $.each($('h1'),function(index,item){}); 
    // 배열의 이름처럼 selector를 지정할 수 있음
});

3) return

-인덱스 값과 연산된 결과를 리턴해서 addClass의 적용값이 사용된 예

-$('h1')에 의해 선택된 태그들과 그들에 부여된 index가 서로 매칭되어 함수를 index만큼 호출함

-다수의 태그(또는 class)를 선택자로 선택하면 선택자 내부에 자동으로 index 값이 부여됨. 이 index 값은 위와 같은 each 함수 뿐만 아니라 일반 익명함수에서도 사용될 수 있음.

$(function(){
    $('h1').addClass(
        function(index){
            return 'high-light-'+index;
        }
    );
});

저작자표시

'VScode > JQuery' 카테고리의 다른 글

[JQuery] button, effect (0)	2022.09.09
[JQuery] event (0)	2022.09.09
[JQuery] DOM (0)	2022.09.09
[JQuery] 인접관계선택자 (0)	2022.09.09
[JQuery] selector (0)	2022.09.09

ABOUT ME

im hippo im hippo

'VScode > JQuery' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'VScode > JQuery' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바