Coding/JQuery
탐색 선택자2
찡콩찡
2022. 6. 10. 13:55
2) 배열관련 메소드
(1) each / $.each() 메소드
: jquery를 사용해 배열을 관리하고자 할 때 each() 메서드를 사용할 수 있음
: each() 메서드는 매개 변수로 받은 것을 사용 for in 반복문과 같이 배열이나 객체의 요소를 검사할 수 있음
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="./resources/jquery.js"></script>
<script>
$(function() {
$.each($("#index li"), function(i) {
$(this).css("color", "red");
});
});
</script>
</head>
<body>
<h3 id="title">JQuery의 이해</h3>
<ol id="index">
<li id="title1">선택자1</li>
<li id="title2">선택자2</li>
<li id="title3">전체선택자</li>
<li id="title4">아이디 선택자</li>
<li class="title5">클래스 선택자</li>
</ol>
<ul id="index1">
<li id="title6">선택자1</li>
<li id="title7">선택자2</li>
<li id="title8">전체선택자</li>
<li id="title9">아이디선택자</li>
<li class="title10">클래스 선택자</li>
</ul>
***자료구조***
<script>
$(function() {
var obj=[{"subject":"영어"},{"subject":"수학"},{"subject":"국어"}]
$(obj).each(function(i,o){
console.log(i+":",o);
});
});
</script>
<script>
$(function() {
/* var obj=[{"subject":"영어"},{"subject":"수학"},{"subject":"국어"}]
$(obj).each(function(i,o){
console.log(i+":",o); */
$.each($("th"), function(i) {
$(this).css("color", "red");
});
});
</script>
(2) $.map() / $.grep() 메소드
$.map() 는 배열에 저장된 데이터 수만큼 메서드를 반복 실행
메서드에서 반환된 데이터는 새 배열에 저장되고 그 배열에 객체를 반환
$.grep() 메서드는 배열에 저장된 데이터 수만큼 메서드를 반복 실행
인데스에 오름차순으로 배열의 데이터를 불러옴. 메서드 반환값이 true면 데이터가 새 배열에 저장되고 배열을 반환
****** 배열에 저장된 요소만큼 메서드를 반복하며, 실행될 때마다 매개변수1, 매개변수2에는 배열의 데이터와 인덱스 값이 오름차순으로 대입된다. 반환된 데이터는 새 배열에 저장되고 새롭게 가공된 배열 객체를 반환한다.*******
1. $.map() 메서드
$.map(Array, function(매개변수1, 매개변수2) {
return 데이터;
});
2. $.grep()메서드
$grep(Array, function(매개변수1, 매개변수2) {
return[ true | false ];
});
<script>
$(function() {
var obj=[{"subject":"영어","score":"100"},{"subject":"수학","score":"80"},
{"subject":"국어","score":"50"}];
var obj1 =$.map(obj,function(a,b){
if(a.subject == "수학") {
return a;
}
});
console.log(obj1);
var obj2=$.grep(obj, function(a,b) {
if(a.score =="100"){
return true;
}else {
return false;
}
});
console.log(obj2);
});
</script>
(3).inArray()/$.isArray()/$.merge() 메소드
1) inArray() : 배열에 해당 값이 있는지 확인해 인덱스를 반환한다. (값이 없을 시 -1 반환)
2) isArray() : 배열 여부를 확인하여 Bool 값을 반환한다.
$.inArray(검색단어, 배열명)
3) merge() : 배열을 하나로 연결하여 반환한다.
$.merge(배열1, 배열2)
<script>
$(function() {
var obj =["영어" , "수학", "국어"];
var obj1 = ["100", "80", "50"];
var obj2 = [{"subject":"영어", "score":"100"},
{"subject":"수학","score":"80"},{"subject":"국어","score":"50"}];
var idx = $.inArray("국어",obj);
console.log(idx);
var isArray = $.isArray(obj2);
console.log(isArray);
var merg = $.merge(obj, obj1);
console.log(merg);
});
</script>
(4)index() 메소드
: 같은 태그 요소들이 여러개 있는데 , 이들의 인덱스를 구해서 순서로 제어하고 싶을 때 사용할 수 있는 메소드 이다.
$("li").index(this);
<li> 태그 요소들 중에서 this의 인덱스를 반환 이때! this는 <li> 태그 형제들에 속해있어야 함
<script>
$(function() {
var idx = $("li").index($("#title7"));
console.log(idx);
});
</script>
</head>
<body>
<h3 id="title">JQuery의 이해</h3>
<ol id="index">
<li id="title1">선택자1</li>
<li id="title2">선택자2</li>
<li id="title3">전체선택자</li>
<li id="title4">아이디 선택자</li>
<li class="title5">클래스 선택자</li>
</ol>
<ul id="index1">
<li id="title6">선택자1</li>
<li id="title7">선택자2</li>
<li id="title8">전체선택자</li>
<li id="title9">아이디선택자</li>
<li class="title10">클래스 선택자</li>
</ul>
3) 속성 탐색 선택자
(1) 속성과 값에 따른 탐색 선택자
<script>
$(function() {
$("#index li[id]").css({"color":"red"}).css({"border":"1px solid #0000ff"});
$("#index1 li[id=title7]").css({"color":"yellow"}).css({"border":"1px solid #0000ff"});
});
</script>
</head>
<body>
<h3 id="title">JQuery의 이해</h3>
<ol id="index">
<li id="title1">선택자1</li>
<li id="title2">선택자2</li>
<li id="title3">전체선택자</li>
<li id="title4">아이디 선택자</li>
<li class="title5">클래스 선택자</li>
</ol>
<ul id="index1">
<li id="title6">선택자1</li>
<li id="title7">선택자2</li>
<li id="title8">전체선택자</li>
<li id="title9">아이디선택자</li>
<li class="title10">클래스 선택자</li>
</ul>
(2) 속성 상태에 따른 탐색 선택자
<script>
$(function() {
var obj1=$("#index :selected").val();
console.log(obj1);
var obj2=$("#index2 :checked").val();
console.log(obj2);
var obj3=$("#index3 :checked").val();
console.log(obj3);
$("h3:hidden").css({"display":"inline","background":"#ff0000"});
});
</script>
</head>
<body>
<h3 id="title" style="display:none">JQuery 이해</h3>
<form action="#" id="form">
<div id="index">
<select name="option-kind" id="option-kind">
<option value="opt1">선택1</option>
<option value="opt2">선택2</option>
<option value="opt3" selected>선택3</option>
</select>
</div>
<div id=index1>
<label for="id">사용자</label>
<input type="text" nzme="id" id="id">
<label for="pass">비번</label>
<input type="text" nzme="pass" id="pass">
</div>
<div id=index2>
<input type="checkbox" name="chk1" value="체크1">체크1
<input type="checkbox" name="chk2" value="체크2" checked>체크2
</div>
<div id=index3>
<input type="radio" name="rad1" value="선택1" checked>선택1
<input type="radio" name="rad2" value="선택2">선택2
</div>
</form>
4) 기타 선택자
(1) contains() / contents() / has() / not() 탐색 선택자
* contains() : 선택한 요소 중 지정한 텍스를 포함하는 요소 선택
$("요소 선택: contains(텍스트)")
* contents()
$("요소선택").contents()
*has() : 선택한 요소 중 지정한 태그를 포함하는 요소만 선택
$("요소선택: has(요소명)") or $("요소선택").has("요소명")
*not() : 지정한 요소만 제외한 채 선택
$("요소 선택: not(제외요소명)") or $("요소선택").not("제외요소명")
*end():필터링되기 이전의 선택자가 적용
$("요소선택").탐색선택자().end()
<script>
$(function() {
$("#index1 label:contains(사용자)").css({"color":"red"}).css({"border":"1px solid #0000ff"});
$("#form div:has(input)").css({"color":"yellow"}).css({"border":"1px solid #0000ff"});
$("#index select").contents().css({"color":"blue"}).css({"border":"1px solid #0000ff"});
$("#index4 li").not(":first").css({"color":"orange"}).css({"border":"1px dashed #0000ff"});
});
</script>
</head>
<body>
<h3 id="title">JQuery 이해</h3>
<form action="#" id="form">
<div id="index">
<select name="option-kind" id="option-kind">
<option value="opt1">선택1</option>
<option value="opt2">선택2</option>
<option value="opt3" selected>선택3</option>
</select>
</div>
<div id=index1>
<label for="id">사용자</label>
<input type="text" nzme="id" id="id">
<label for="pass">비번</label>
<input type="text" nzme="pass" id="pass">
</div>
<div id=index2>
<input type="checkbox" name="chk1" value="체크1">체크1
<input type="checkbox" name="chk2" value="체크2">체크2
</div>
<div id=index3>
<input type="radio" name="rad1" value="선택1">선택1
<input type="radio" name="rad2" value="선택2">선택2
</div>
</form>
<ol id="index4">
<li id="title1">선택자1</li>
<li id="title2">선택자2</li>
<li id="title3">전체선택자</li>
<li id="title4">아이디 선택자</li>
<li class="title5">클래스 선택자</li>
</ol>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="./resources/jquery.js"></script>
<script>
$(function() {
$("#index").find("#opt2").css({"color":"red"}).css({"border":"1px solid #0000ff"});
$("#index section h3").filter(".opt3").css({"border":"1px solid #ff0000"});
$("#index1 ol li").filter(function(idx,obj) {
console.log(idx);
return idx % 2 == 0;
}).css({"border":"1px dashed #0000ff"});
});
</script>
</head>
<body>
<h3 id="title">JQuery 이해</h3>
<div id="index">
<section name="sec1" id="sec1">
<h3 id="opt1">선택1</h3>
<h3 id="opt2">선택2</h3>
<h3 class="opt3">선택3</h3>
</select>
</div>
<div id=index1>
<ol id="index4">
<li id="title1">선택자1</li>
<li id="title2">선택자2</li>
<li id="title3">전체선택자</li>
<li id="title4">아이디 선택자</li>
<li class="title5">클래스 선택자</li>
</ol>
</div>