-
[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; } ); });
2. class 추가 및 제거 - 1), 2), 3)의 결과 '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