[2022.11.29.화] jQuery 선택자

수업내용/Javascript & jQuery

[2022.11.29.화] jQuery 선택자

주니어주니 2022. 11. 29. 17:32

1. jquery

- 경량의 자바스크립트 라이브러리
- 크로스 브라우징을 지원
- CSS3 선택자를 지원

* 선택자

<style>
p { color:red; } 태그 선택자
.btn { color:red; } 클래스 선택자
#users-table { color:red; } 아이디 선택자
div p { color:red; } 자손 선택자
#users-table td { color:red; } 자손 선택자
#users-table tbody tr { color:red; } 자손 선택자
</style>

document.querySelectorAll("p"); // 태그선택자, 태그명이 p인 엘리먼트 선택
document.querySelectorAll(".btn"); // 클래스선택자, class="btn"이 포함되어 있는 엘리먼트 선택
document.querySelectorAll("#users-table"); // 아이디선택자, id="users-table"인 엘리먼트 선택
document.querySelectorAll("div p"); // 자손선택자, div 안에 있는 p 엘리먼트 선택
document.querySelectorAll("#users-table td"); // 자손선택자, id="users-table" 안에 있는 td엘리먼트 선택
document.querySelectorAll("#users-table tbody tr"); // 자손선택자, id="users-table" 안에 있는 tbody 안에 있는 tr 엘리먼트 선택

.intro class="intro"인 엘리먼트 선택
.name1.name2 class="name1"이면서 "name2"인 것
.name1 .name2 class="name1" 안에 있는 "name2"
#firstname id="firstname"인 것
p <p>태그인 것
p.intro <p>태그 중에서 class="intro"인 것
div, p <div>와 <p> 태그
div p <div>태그 안에 있는 모든 <p>태그 다 찾음 (자손)
div > p <div>태그의 바로 다음 <p>태그만 찾음 (자식)
div + p <div>태그 형제들 중에서 바로 다음에 이웃하고 있는 <p>태그 선택
div ~ p <div>태그 형제들 중에서 모든 <p>태그
[target] target 속성이 있는 엘리먼트 선택
[type=text] type="text"인 input 엘리먼트 선택

$(선택자)

장점
- 강력한 선택자를 지원
- HTML DOM을 조작하는 다양한 메소드를 지원
- 스타일을 쉽게 조작할 수 있다.
- 애니메이션 효과 구현
- 단순한 이벤트 처리
- 쉬운 AJAX 처리

Write less, Do more
- 강력한 선택자 : 쉽게 엘리먼트를 찾을 수 있다.
- 메소드가 묵시적 반복을 수행한다.
- 메소드체이닝을 지원한다.
( 집합객체가 반환되니까 계속 그거에 대하 메소드를 실행할 수 있음 )

jquery 라이브러리 설치
- jquery 소스 다운받아서 설치하기
  
  1. jquery.com에서 소스를 다운받아서 프로젝트에 저장한다.
  2. HTML문서나 JSP에서 해당 위치에 저장된 소스를
  <script src="jquery-3.4.1.min.js"></script> 태그를 사용해서 해당 페이지에 포함시킨다.
- CDN을 이용하기
  
  CDN(Content Delivery Network)으로 부터 jquery 라이브를 받아서 사용한다.
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  * 사용자로부터 가장 가까운 CDN서버로부터 라이브러리를 가져온다.
  * 웹 서버의 트래픽을 감소시킨다.

$( ) 함수 사용법
- $("selector") : 선택자 표현식
  * selector 표현식에 해당하는 엘리먼트를 검색한다.
  * jquery 집합객체를 반환한다.
  * jquery집합객체 [선택자에 해당하는 엘리먼트 + 다양한 메소드] 획득
  => remove(), hide() 등의 메소드가 집합객체에 전체 적용됨
- $(function() { ... })
  * HTML Document객체가 준비되면 웹페이지 로딩시에 함수가 자동으로 실행된다.
  * $(document).ready(function() { ... })와 같은 싯점에 실행된다.
- $(document객체) 혹은 $(element객체)
  * $("#box") 함수의 실행결과 ----> jQuery집합객체 [전달받은 엘리먼트 + 다양한 메소드] 반환
  * var el = document.getElementById("box");
  el ----> 태그정보 + 허접한 메소드
  $(el) ----> jQuery집합객체[el + 좋은 메소드]
- $("html태그")
  * 작성된 html태그에 해당하는 엘리먼트 객체를 생성하고,
  생성된 엘리먼트를 포함하는 jQuery 집합객체 [html로 생성된 엘리먼트 + 다양한 메소드] 반환
  * $("<p>연습입니다.</p>") --> jQuery집합객체 [p엘리먼트 + 좋은 메소드]
  $("<p>연습입니다.</p>").css("color", 'red').click(function() { ... });

2. jQuery Selector

- jQuery 라이브러리에서 가장 중요한 부분이다.
- HTML문서에서 엘리먼트를 조작하기 위해서 반드시 선행되어야 하는 작업은
조작대상이 되는 엘리먼틀 선택하는 작업 <---- jQuery Selector를 활용하면 간단해진다.
- 모든 jQuery 작업의 시작은 $(select)함수로부터 시작한다.

표현식	예제	설명
기본선택자
*	$("*")	모든 엘리먼트 선택
#id	$("#box")	id="box"인 엘리먼트 선택
.class	$(".btn")	class="btn"인 모든 엘리먼트 선택
tag	$("p")	모든 P 엘리먼트 선택
tag,tag,tag	$('h1,h2,h3')	모든 h1, h2, h3 엘리먼트 선택
필터선택자
:first	$("p:first")	첫번째 P엘리먼트 선택
:last	$("p:last")	마지막번째 P엘리먼트 선택
:even	$("p:even")	짝수번째 P엘리먼트 선택
:odd	$("p:odd")	홀수번째 P엘리먼트 선택
자식, 자손, 형제 선택자
parent > child	$("div > p")	div의 자식 중에서 모든 P엘리먼트 선택
parent descendant	$("div p")	div의 후손 중에서 모든 P엘리먼트 선택
element + next	$("div + p")	div 바로 아랫동생 P엘리먼트 선택
element ~ siblings	$("div ~ p")	div 동생들중에서 P엘리먼트 선택
자식 필터선택자
:first-child	$("p:first-child")	p엘리먼트 중에서 장남인 모든 P엘리먼트 선택
:last-child	$("p:last-child")	p엘리먼트 중에서 막내자식인 모든 P엘리먼트 선택
:nth-child(n)	$("p:nth-child(2)")	p엘리먼트 중에서 둘째 자식인 모든 P엘리먼트 선택
순서 필터선택자
:eq(index)	$("p:eq(0)")	p엘리먼트 중에서 0번째 P엘리먼트 선택
:gt(index)	$("p:gt(2)")	p엘리먼트 중에서 2번째 다음의 모든 P엘리먼트 선택
:lt(index)	$("p:lt(2)")	p엘리먼트 중에서 2번째 이전의 모든 P엘리먼트 선택
기타 필터선택자
:contains(text)	$("p:contains('안녕')")	p엘리먼트 중에서 '안녕'이라는 텍스트를 포함하고 있는 모든 P엘리먼트 선택
:has(selector)	$("div:has(p)")	div엘리먼트 중에서 p엘리먼트 가지고 있는 모든 div엘리먼트를 선택
:not(selector)	$("p:not(:last-child)")	p엘리먼트 중에서 막내가 아닌 모든 p엘리먼트를 선택
속성 선택자
[attr]	$('[src]')	src속성을 가지고 있는 모든 엘리먼트 선택
[attr=value]	$('[type="date"]')	type속성값이 date인 모든 엘리먼트 선택
[attr!=value]	$('[type!="hidden"]')	type속성값이 hidden이 아닌 모든 엘리먼트 선택
[attr^=value]	$('[href^="http"]')	href속성값이 http로 시작하는 모든 엘리먼트 선택
[attr$=value]	$('[href$=".pdf"]')	href속성값이 .pdf로 끝나는 모든 엘리먼트 선택
[attr*=value]	$('[alt*="모자"]')	alt속성값에 '모자'가 포함되는 모든 엘리먼트 선택
[attr~=value]	$('[alt~="모자"]')	alt속성값에 '모자'가 분리된 단어로 포함되어 있는 모든 엘리먼트 선택
폼 선택자
:input	$(":input")	모든 폼요소엘리먼트(input,select,textarea)를 선택
:text	$(":text")	모든 <input type="text"> 엘리먼트 선택
:password	$(":password")	모든 <input type="password"> 엘리먼트 선택
:radio	$(":radio")	모든 <input type="radio"> 엘리먼트 선택
:checkbox	$(":checkbox")	모든 <input type="checkbox"> 엘리먼트 선택
:file	$(":file")	모든 <input type="file"> 엘리먼트 선택
:submit	$(":submit")	모든 <input type="submit"> 엘리먼트 선택
:reset	$(":reset")	모든 <input type="reset"> 엘리먼트 선택
:selected	$(":selected")	select엘리먼트에서 선택된 option 엘리먼트를 선택
:checked	$(":checked")	라디오버튼, 체크박스에 체크된 엘리먼트만 선택
:enabled	$(":enable")	활성화된 모든 폼요소 엘리먼트 선택
:disabled	$(":disable")	비활성화된 모든 폼요소 엘리먼트 선택
기타 필터 선택자
:animated	$(":animated")	현재 애니메이션효과가 실행중인 엘리먼트 선택
:focus	$(":focus")	현재 포커스를 가지고 있는 엘리먼트 선택
:empty	$('p:empty')	p엘리먼트 중에서 컨텐츠를 가지고 있지 않는 p엘리먼트 선택
:hidden	$(":hidden")	display:none 로 설정돼서 화면에 표시되지 않는 모든 엘리먼트 선택
:visible	$(":visible")	현재 화면에 표시되고 있는 모든 엘리먼트 선택

2-1. 기본 선택자

1) 태그 선택자

<div class="container">
   <h1>jQuery 선택자 연습</h1>
   
   <div id="box-1" class="border mb-3 p-3">
   		<h3>첫번째 박스</h3>
   		<p>첫번째 박스의 p입니다.</p>
   		<div class="border p-3">
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   		</div>
   </div>
   <div id="box-2" class="border mb-3 p-3">
   		<h3>두번째 박스</h3>
   		<p>두번째 박스의 p입니다.</p>
   		<div class="border p-3">
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   		</div>
   </div>
</div>


<script type="text/javascript">
$(function() {
	// 태그 선택자
	$("h1").css("color", "red");
	$("h3").css("color", "green");
	$("p").css("color", "blue");
})
</script>

2) 클래스 선택자

<body>
<div class="container">
   <h1>jQuery 선택자 연습</h1>
   
   <div id="box-1" class="border mb-3 p-3">
   		<h3>첫번째 박스</h3>
   		<p>첫번째 박스의 p입니다.</p>
   		<div class="border p-3">
   			<p class="text-primary">div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   		</div>
   </div>
   <div id="box-2" class="border mb-3 p-3">
   		<h3>두번째 박스</h3>
   		<p>두번째 박스의 p입니다.</p>
   		<div class="border p-3">
   			<p class="text-primary">div 내부에 있는 p 입니다.</p>
   			<p class="text-primary">div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   		</div>
   </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	// 태그 선택자
	//$("h1").css("color", "red");
	//$("h3").css("color", "green");
	//$("p").css("color", "blue");
	
	// 클래스 선택자
	$(".text-primary").addClass("bg-danger");
})
</script>
</body>

3) 아이디 선택자

<body>
<div class="container">
   <h1>jQuery 선택자 연습</h1>
   
   <div id="box-1" class="border mb-3 p-3">
   		<h3>첫번째 박스</h3>
   		<p>첫번째 박스의 p입니다.</p>
   		<div class="border p-3">
   			<p class="text-primary">div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   		</div>
   </div>
   <div id="box-2" class="border mb-3 p-3">
   		<h3>두번째 박스</h3>
   		<p>두번째 박스의 p입니다.</p>
   		<div class="border p-3">
   			<p class="text-primary">div 내부에 있는 p 입니다.</p>
   			<p class="text-primary">div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   		</div>
   </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	// 태그 선택자
	//$("h1").css("color", "red");
	//$("h3").css("color", "green");
	//$("p").css("color", "blue");
	
	// 클래스 선택자
	//$(".text-primary").addClass("bg-danger");
	
	// 아이디 선택자
	$("#box-1").css("background-color", "lightgray");
	$("#box-2").css("background-color", "lightgreen");
})
</script>
</body>

4) 선택자 둘다

<script type="text/javascript">
$(function() {
	// 태그 선택자
	//$("h1").css("color", "red");
	//$("h3").css("color", "green");
	//$("p").css("color", "blue");
	
	// 클래스 선택자
	//$(".text-primary").addClass("bg-danger");
	
	// 아이디 선택자
	//$("#box-1").css("background-color", "lightgray");
	//$("#box-2").css("background-color", "lightgreen");
	
	$("h1, h3").css("color", 'red');
})
</script>

5) 원하는 엘리먼트 고르기

<script type="text/javascript">
$(function() {
	// 태그 선택자
	//$("h1").css("color", "red");
	//$("h3").css("color", "green");
	//$("p").css("color", "blue");
	
	// 클래스 선택자
	//$(".text-primary").addClass("bg-danger");
	
	// 아이디 선택자
	//$("#box-1").css("background-color", "lightgray");
	//$("#box-2").css("background-color", "lightgreen");
	
	//$("h1, h3").css("color", 'red');
	$("h1, h3, .text-primary").css("background-color", "lightgreen");
})
</script>

2-2. 자식, 자손, 형제 선택자

6) 자손선택자, 자식선택자

<div class="container">
   <h1>jQuery 선택자 연습</h1>
   
   <div id="box-1" class="border mb-3 p-3">
   		<h3>첫번째 박스</h3>
   		<p>첫번째 박스의 p입니다.</p>
   		<div class="border p-3">
   			<p class="text-primary">div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   		</div>
   </div>
   <div id="box-2" class="border mb-3 p-3">
   		<h3>두번째 박스</h3>
   		<p>두번째 박스의 p입니다.</p>
   		<div class="border p-3">
   			<p class="text-primary">div 내부에 있는 p 입니다.</p>
   			<p class="text-primary">div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   		</div>
   </div>
</div>

<script type="text/javascript">
$(function() {
	
	// 자손 선택자
	$("#box-1 p").css("background-color", "lightgreen"); 
	
	// 자식 선택자
	$("#box-2 > p").css("background-color", "lightgreen");
	
	// 자식 선택자 
	$("#box-2 > div > p").css("background-color", "orange"); 
	
})
</script>

7) 형제 선택자

<div class="container">
   <h1>jQuery 선택자 연습</h1>
   
   <div id="box-1" class="border mb-3 p-3">
   		<h3>첫번째 박스</h3>
   		<p>첫번째 박스의 p입니다.</p>
   		<div class="border p-3">
   			<p class="text-primary">div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   		</div>
   </div>
   <div id="box-2" class="border mb-3 p-3">
   		<h3>두번째 박스</h3>
   		<p>두번째 박스의 p입니다.</p>
   		<div class="border p-3">
   			<p class="text-primary">div 내부에 있는 p 입니다.</p>
   			<p class="text-primary">div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   		</div>
   </div>
</div>

<script type="text/javascript">
$(function() {
	
	// 형제 선택자(+ 바로 다음 동생 선택자)
	$("h1 + div").css("background-color", "orange");
	
	// 형제 선택자(~ 동생들 선택자)
	$("h1 ~ div").css("background-color", "orange");
})
</script>

2-3. 필터 선택자

8) p이면서 첫번째, 마지막번째 엘리먼트 선택자

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" >
<title>웹 애플리케이션</title>
</head>
<body>
<div class="container">
   <h1>jQuery 선택자 연습</h1>
   
   <div id="box-1" class="border mb-3 p-3">
   		<h3>첫번째 박스</h3>
   		<p>첫번째 박스의 p입니다.</p>
   		<div class="border p-3">
   			<p class="text-primary">div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   		</div>
   </div>
   <div id="box-2" class="border mb-3 p-3">
   		<h3>두번째 박스</h3>
   		<p>두번째 박스의 p입니다.</p>
   		<div class="border p-3">
   			<p class="text-primary">div 내부에 있는 p 입니다.</p>
   			<p class="text-primary">div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   		</div>
   </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
	// 첫번째 엘리먼트 선택
	$("p:first").css("background-color", "orange");
	// 첫번째 엘리먼트 선택
	$("#box-1 div p:first").css("background-color", "lightgreen");
	// 마지막번째 엘리먼트 선택 
	$("p:last").css("background-color", "orange");
	// 마지막번째 엘리먼트 선택 
	$("#box-1 div p:last").css("background-color", "lightgreen");
	
</script>
</body>
</html>

9) 짝수번째, 홀수번째

   <div id="box-1" class="border mb-3 p-3">
   		<h3>첫번째 박스</h3>
   		<p>첫번째 박스의 p입니다.</p>
   		<div class="border p-3">
   			<p class="text-primary">div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   		</div>
   </div>
   <div id="box-2" class="border mb-3 p-3">
   		<h3>두번째 박스</h3>
   		<p>두번째 박스의 p입니다.</p>
   		<div class="border p-3">
   			<p class="text-primary">div 내부에 있는 p 입니다.</p>
   			<p class="text-primary">div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   		</div>
   </div>

<script type="text/javascript">
	// 짝수번째 엘리먼트 선택
	$("#box-1 div p:even").css("background-color", "lightgreen");	// 0번째부터 시작
	// 홀수번째 엘리먼트 선택
	$("#box-1 div p:odd").css("background-color", "orange");

</script>

10) p이면서 첫번째, 마지막번째

<script type="text/javascript">
	
	// 부모엘리먼트를 기준으로 첫번째 자식 엘리먼트 선택하기
	$("p:first").css("background-color", "lightgreen");	// p이면서 첫번째인 것 (1개)
	$("p:first-child").css("border", "2px solid red");	// p이면서 첫째인 애들 (복수개 가능)
	// 부모엘리먼트를 기준으로 마지막번째 자식 엘리먼트 선택하기
	$("p:last").css("background-color", "orange");		// p이면서 마지막번째인 것 (1개)
	$("p:last-child").css("border", "2px solid blue");	// p이면서 막내인 애들 (복수개 가능)
	
</script>

11) n번째 자식 엘리먼트

<div class="container">
   <h1>jQuery 선택자 연습</h1>
   
   <div id="box-1" class="border mb-3 p-3">
   		<h3>첫번째 박스</h3>
   		<p>첫번째 박스의 p입니다.</p>
   		<div class="border p-3">
   			<p class="text-primary">div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   		</div>
   </div>
   <div id="box-2" class="border mb-3 p-3">
   		<h3>두번째 박스</h3>
   		<p>두번째 박스의 p입니다.</p>
   		<div class="border p-3">
   			<p class="text-primary">div 내부에 있는 p 입니다.</p>
   			<p class="text-primary">div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   			<p>div 내부에 있는 p 입니다.</p>
   		</div>
   </div>
</div>

<script type="text/javascript">

	// 부모엘리먼트를 기준으로 n번째 자식 엘리먼트 선택하기
	$("p:nth-child(2)").css("background-color", "orange");
	$(".container > div > p:nth-child(2)").css("border", "5px solid blue");
	$(".container > div > div > p:nth-child(2)").css("border", "5px solid red");
	
</script>

2-4. 순서 필터 선택자

12) eq (지정된 인덱스번째)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" >
<title>웹 애플리케이션</title>
</head>
<body>
<div class="container">
   <h1>jQuery 선택자</h1>
   
   <div id="box-1">
   		<p>첫번째 p엘리먼트</p>
   		<p>두번째 p엘리먼트</p>
   		<p>세번째 p엘리먼트</p>
   		<p>네번째 p엘리먼트</p>
   		<p>다섯번째 p엘리먼트</p>
   </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
	// 지정된 인덱스번째의 엘리먼트 선택하기(0부터 시작)
	$("#box-1 p:eq(0)").css("background-color", "red");
	$("#box-1 p:eq(1)").css("background-color", "blue");
	$("#box-1 p:eq(2)").css("background-color", "green");
	$("#box-1 p:eq(3)").css("background-color", "orange");
	$("#box-1 p:eq(4)").css("background-color", "pink");
</script>
</body>
</html>

13) lt, gt (지정 엘리먼트 이전, 이후)

<script type="text/javascript">
	
	// 지정된 인덱스번째 이전 엘리먼트 선택하기 
	$("#box-1 p:lt(2)").css("background-color", "green");
	// 지정된 인덱스번째 이후 엘리먼트 선택하기
	$("#box-1 p:gt(2)").css("background-color", "orange");
    
</script>

2-5. 기타 필터 선택자

14) 선택자 지정

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" >
<title>웹 애플리케이션</title>
</head>
<body>
<div class="container">
   <h1>jQuery 선택자</h1>
   
   <div id="box-1" class="border p-3 mb-3">
   		<h3>기타 선택자</h3>
   		<div class="border p-3 mb-3">
   			<p>아래의 메뉴를 확인하고 주문하세요</p>
   		</div>
   		<div class="border p-3 mb-3">
   			<h4>커피</h4>
   			<p>커피종류가 다양하게 준비되어 있습니다.</p>
   			<ul>
   				<li>아메리카노</li>
   				<li>카페 라떼</li>
   				<li>바닐라 라떼</li>
   				<li>아인슈페너</li>
   			</ul>
   		</div>
   		<div class="border p-3 mb-3">
   			<h4>케이크</h4>
   			<p>맛있는 케이크가 준비되어 있습니다.</p>
   			<dl>
   				<dt>케이크</dt><dd>생크림 케이크</dd><dd>고구마 케이크</dd><dd>초코 케이크</dd>
   				<dt>티라미수</dt><dd>치즈 티라미수</dd><dd>초코 티라미수</dd>
   			</dl>
   		</div>
   </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
	// 지정된 텍스트를 포함하고 있는 엘리먼트 선택하기 
	$("li:contains('라떼')").css("background-color", "orange"); 
	// 지정된 선택자에 해당하는 자손을 포함하고 있는 엘리먼트 선택하기 
	$("#box-1 div:has('dl')").css("background-color", "lightgreen"); 
	// 지정된 선택자에 해당하지 않는 엘리먼트 선택하기
	$("#box-1 div:not(:last-child)").css("background-color", "lightblue");
	$("#box-1 div:not(:has('dl'))").css("background-color", "lightblue");
</script>
</body>
</html>

2-6. 속성 선택자

15) 속성 선택자로 엘리먼트 선택하기

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" >
<title>웹 애플리케이션</title>
</head>
<body>
<div class="container">
	<h1>jQuery 선택자</h1>
	<form class="border bg-light p-3">
		<div class="mb-2">
			<label class="form-label">이름</label>
			<input type="text" class="form-control" name="name" id="user-name"/>
		</div>
		<div class="mb-2">
			<label class="form-label">아이디</label>
			<input type="text" class="form-control" name="id" id="user-id"/>
		</div>
		<div class="mb-2">
			<label class="form-label">비밀번호</label>
			<input type="password" class="form-control" name="pwd" id="user-pwd"/>
		</div>
		<div class="mb-2">
			<label class="form-label">이메일</label>
			<input type="text" class="form-control" name="email" id="user-email"/>
		</div>
		<div class="mb-2">
			<label class="form-label">전화번호</label>
			<input type="text" class="form-control" name="tel" id="user-tel"/>
		</div>
		<div class="mb-2">
			<label class="form-label">생일</label>
			<input type="date" class="form-control" name="birth" id="user-birth"/>
		</div>
		<div class="mb-2">
			<label class="form-label">보유기술</label>
			<div>
				<div class="form-check form-check-inline">
  					<input class="form-check-input" type="checkbox" name="skill" value="java" id="skill-1">
  					<label class="form-check-label">자바</label>
				</div>
				<div class="form-check form-check-inline">
  					<input class="form-check-input" type="checkbox" name="skill" value="python" id="skill-2">
  					<label class="form-check-label">파이썬</label>
				</div>
				<div class="form-check form-check-inline">
  					<input class="form-check-input" type="checkbox" name="skill" value="db" id="skill-3">
  					<label class="form-check-label">데이터베이스</label>
				</div>
				<div class="form-check form-check-inline">
  					<input class="form-check-input" type="checkbox" name="skill" value="javascript" id="skill-4">
  					<label class="form-check-label">자바스크립트</label>
				</div>
				<div class="form-check form-check-inline">
  					<input class="form-check-input" type="checkbox" name="skill" value="react" id="skill-5">
  					<label class="form-check-label">리액트</label>
				</div>
				<div class="form-check form-check-inline">
  					<input class="form-check-input" type="checkbox" name="skill" value="vuejs" id="skill-6" checked>
  					<label class="form-check-label">뷰</label>
				</div>
				<div class="form-check form-check-inline">
  					<input class="form-check-input" type="checkbox" name="skill" value="vallina" id="skill-7" checked="checked">
  					<label class="form-check-label">바닐라스크립트</label>
				</div>
			</div>
			<div class="mb-2">
				<label class="form-label">근무지</label>
				<select class="form-select" name="city" >
					<option value="" selected disabled> 선택하세요</option>
					<option value="seoul"> 서울</option>
					<option value="incheon"> 인천</option>
					<option value="kyungi"> 경기</option>
					<option value="sejong"> 세종</option>
				</select>
			</div>
			<div class="mb-2">
				<label class="form-label">기타 사항</label>
				<textarea rows="5" class="form-control" name="memo"></textarea>
			</div>
		</div>
	</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">

	// 속성선택자로 엘리먼트 선택하기
	$("input[name=birth]").val("2022-11-30");
	$("#user-birth").val("2022-11-30");
	
	// 속성선택자로 엘리먼트 선택하기
	$("input[name=pwd]").prop("disabled", true);
	$("#user-pwd").prop("disabled", true);
	
	// 속성선택자로 엘리먼트 선택하기
	$("input[name=email]").prop('readOnly', true);
	$("#user-email").prop('readOnly', true);
	
	// 속성선택자로 엘리먼트 선택하기
	$("input[name=skill]").prop("checked", true);
	$("#skill-1, #skill-2, #skill-3, #skill-4, #skill-5").prop("checked", true);
	
</script>
</body>
</html>

16) 태그명이 input인 엘리먼트 비활성화

<script type="text/javascript">
	
    	// 폼필터 선택자
	$("input").prop("disabled", true);	// 태그명이 input인 엘리먼트를 선택하고 비활성화 시킨다.

</script>

17) 모든 입력필드 비활성화

<script type="text/javascript">

	// 폼필터 선택자
	$(":input").prop("disabled", true);		// 모든 입력필드를 선택하고 비활성화 시킨다.
	
</script>

	// 폼 필터 선택자
	// $(":input")와 $("input, select, textarea")는 동일하다.
	// $(":text")와 $("input[type=text]")는 동일하다.
	// $(":password")와 $("input[type=password]")는 동일하다.
	// $(":radio")와 $("input[type=radio]")는 동일하다.
	// $(":checkbox")와 $("input[type=checkbox]")는 동일하다.
	// $(":file")와 $("input[type=file]")는 동일하다.
	// $(":disabled")는 비활성화된 폼요소를 선택한다.
	// $(":checked")는 체크된 체크박스나 라디오 버튼을 선택한다.
	// $(":selected")는 선택된 <option> 를 선택한다

저작자표시 비영리 변경금지 (새창열림)

'수업내용 > Javascript & jQuery' 카테고리의 다른 글

[세미프로젝트] * 엔티티 도출 (0)	2022.11.30
[2022.11.30.수] jQuery 이벤트 (0)	2022.11.30
[2022.11.25.금] web-board 에 자바스크립트 기능 (입력값 누락방지, 검색) (0)	2022.11.25
[2022.11.25.금] 자바스크립트3 - 이벤트 (0)	2022.11.25
[2022.11.24.목] 자바스크립트3 - 값 조회, 변경 (0)	2022.11.24

현재글[2022.11.29.화] jQuery 선택자

파이탱!!!!!!!!

Today :
Yesterday :

아좌좌