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>

index가 0부터 시작이니까 결과 값 6

 

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>

저작자표시 비영리 (새창열림)