웹프로그래밍/jQuery

[jQuery] 필터 (+ prop('속성'), attr(), tagName)

아잠만_ 2024. 5. 17. 17:21

기본필터

필터  설 명
:first  선택요소중 첫번째요소
:last  선택요소중 마지막요소
:not(selector)  괄호의 selector가 일치되는 모든요소를 제외
:even  선택요소중 짝수요소
:odd 선택요소중 홀수요소
:eq(index) 선택요소중 주어진 index에 일치하는 index를 갖는 요소
:gt(index) 선택요소중 주어진 index보다 큰 index를 갖는 요소
:lt(index) 선택요소중 주어진 index보다 작은 index를 갖는 요소

기본필터 :first, :last, :eq(), :lt() 예제

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://localhost/Jqpro/js/jquery-3.7.1.js"></script>
<script>
	$(function(){
		$('#btn1').on('click', function() {
			$('li:first,li:last').css("background","yellow");
			
			// index=5 배경 빨강
			$('li:eq(5)').css("background","red");
			
			// four보다 작은 값 글자 크게 li값에 4번째 index는 포함하지 않음 
			$('li:lt(4)').css("font-size","2rem");
		})
	})
</script>
</head>
<body>

	<div class="box">
		<h3>기본필터<br>
		:first / :last / :eq(index) / :gt(index) / :lt(index)</h3>
		<input type="button" value="확인" id="btn1"> <br> <br>

		<div id="result1">
			<ul>
				<li>one</li>
				<li>two</li>
				<li>three</li>
				<li>four</li>
				<li>five</li>
				<li>six</li>
				<li>seven</li>
				<li>eight</li>
				<li>nine</li>
			</ul>
		</div>
	</div>
</body>
</html>

기본필터 :even, :odd 예제

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://localhost/Jqpro/js/jquery-3.7.1.js"></script>
<script>
	$(function(){
		$('#btn2').on('click', function() {
			$('#result2 ul').css("list-style","none");
			$('#result2 li:even').css("background","gray");
			$('#result2 li').css("text-align","center");
			
			$('#result2 li:first').css({"background":"black","color":"white","font-size":"2.0rem"});
		})
	})
</script>
</head>
<body>
	<div class="box">
		<h3>기본필터<br>
		:even / :odd</h3>
		<input type="button" value="확인" id="btn2"> <br> <br>

		<div id="result2">
			<ul>
				<li>one</li>
				<li>two</li>
				<li>three</li>
				<li>four</li>
				<li>five</li>
				<li>six</li>
				<li>seven</li>
				<li>eight</li>
				<li>nine</li>
			</ul>
		</div>
	</div>
</body>
</html>

내용필터

필터  설 명
:contains(text) 지정한 테스트를 포함하는 요소
(대소문자 구분)
:empty 대상요소 중 자식요소도 없고 텍스트도 없는 요소
:has(selector) 지정한 selector에 해당하는 요소를 갖는 모든 요소와 일치
:parent 대상요소 중 자식요소를 갖거나 텍스트를 갖고 있는 요소와 일치 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://localhost/Jqpro/js/jquery-3.7.1.js"></script>
<script>
$(function(){
	$('#btn1').on('click', function(){
		$('#result1 div:empty').css("border","5px solid pink");
		
		$('#result1 div:parent').css("border","5px solid green");
		$('#result1 span:contains(jQuery)').css("background","gray");
		// jQuery 글자가 포함되지 않은 span
		$('#result1 span:not(:contains(jQuery))').css("background","skyblue");
		
		// span이 포함된 div
		$('#result1 div:has(span)').css("font-size","2.0rem");
	})
	
})
</script>
</head>
<body>

	<div class="box">
		<h3></h3>
		<input type="button" value="확인" id="btn1"> <br> <br>

		<div id="result1">
			<div></div>
			<div>
				헬로우~~ <span>오늘도 즐겁게~열심히!</span>
			</div>
			<p>
				Hello jQuery! <span>Thanks, jQuery!</span>
			</p>
			<div class="myClass">jQuery!</div>
			<span class="notMyClass">쉬운 jQuery~~!</span>
			
			<div></div>

		</div>
	</div>
</body>
</html>

자식필터

javascript의 가상클래스와 유사

필터  설 명
:nth-child
( index / even / odd / equation)		 자식 중 index로 지정된 위치의 요소들과 일치하거나 , 짝수. 홀수 번째의 요소들과 일치하거나, 방정식 값 위치의 요소들과 일치
:first-child 부모에 속한 자식 중 첫번째 자식요소와 일치
:last-child 부모에 속한 자식 중 마지막 자식요소와 일치
:only-child 자신이 부모요소의 유일한 자식요소인 것과 일치

Form 상태필터

필터  설 명
:enabled  현재 사용 가능한 요소와 일치
:disabled  현재 사용 불가능한 요소와 일치
:checked  체크된 요소와 일치-checkedbox, radio
:selected  선택된 요소들과 일치-select option

prop('속성이름', '속성값')

사용가능한 요소로 변경 - prop('속성이름', '속성값')
속성값 : true / false

Form 상태필터 :enabled & :disabled + prop() 예제 

폼상태필터.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#change2{
	display : none;
}
</style>
<script src="http://localhost/Jqpro/js/jquery-3.7.1.js"></script>
<script>
	$(function() {
		$('#btn1').on('click', function() {
			// 사용가능한 요소 선택
			$('#result1 form *:enabled').css("border","double teal");
			
			// 사용 불가능한 요소 선택
			$('#result1 form *:disabled').css("border","double maroon");
		})
		
		// 버튼을 클릭하면 select요소의 속성을 변경한다 - enabled속성
		$('#change1').on('click',function(){
			
			// select를 검색 - 사용가능한 요소로 변경 - prop('속성이름', '속성값')
			// 속성값 : true / false
			$('#result1 select').prop('disabled',false); // 사용가능 요소로 변경
// 			$('#result1 select').prop('disabled',true); // 사용불가능 요소로 변경

			$(this).hide();
			$('#change2').show();
		})
		
		$('#change2').on('click',function(){
			
			$('#result1 select').prop('disabled',true); // 사용불가능 요소로 변경
			$(this).hide()
			$('#change1').show();
		})
		
	})
</script>
</head>
<body>

	<div class="box">
		<h3>
		요소의 상태값을 변경 - prop()
		</h3>
		<input type="button" value="확인" id="btn1"> <br> <br>

		<div id="result1">
			<form action="폼상태필터.jsp" method="post">
				<input type="text"name="id" placeholder="아이디 입력" value="a001" disabled><br> 
				<input type="password" name="pass" placeholder="비밀번호 입력"><br> 
					<select name="disSelect" disabled> <!-- disabled 사용 불가능 -->
						<option>Option1</option>
						<option>Option2</option>
						<option>Option3</option>
						<option>Option4</option>
					</select> <br>
					<input type="button" value="변경" id="change1">
					<input type="button" value="변경" id="change2">
					<br>
				<textarea name="enTextarea" rows=10 cols=20>text</textarea>
				<br> <input type="button" value="확인 " onclick="alert('hello')" disabled> <br>
				<br> <input type="submit" value="제출 "> <br>
			</form>
		</div>
	</div>
</body>
</html>

폼상태필터.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>JSP: Java Server Page</h1>
<%
	request.setCharacterEncoding("UTF-8");
	String id = request.getParameter("id");
	String pass = request.getParameter("pass");
	String select = request.getParameter("disSelect");
	String text = request.getParameter("enTextarea");
%>

아이디 : <%=id %><br>
비밀번호 : <%=pass %><br>
선택 : <%=select %><br>
텍스트 : <%=text %><br>
</body>
</html>
disabled된 값은 jsp로 value값이 넘어가지 않는다!

Form 상태필터 :checked 예제

value값을 가져오기 위해서 val()를 사용

( javascript의 .value()와 같은 역할 )
선택된 요소 중 첫 번째꺼만 리턴 .val()
선택된 요소를 리턴받으려면 반복문 사용 each(function(index, item){ })

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://localhost/Jqpro/js/jquery-3.7.1.js"></script>
<script>
$(function(){
	$('#btn1').on('click',function(){
		// checkbox를 선택
// 		$('input[type=checkbox]:checked');
// 		$('input:checkbox:checked');

		// 누적변수
		let str = "";
		$(':checkbox:checked').val()
		$(':checkbox:checked').each(function(i, k){
// 			str += $(':checkbox:checked').eq(i).val()+" ";
			str += $(this).val()+" ";
// 			str += $(k).val()+" ";
		});
		alert(str);
	})
})

</script>
</head>
<body>

	<div class="box">
		<h3>필터 => :checked<br>
		선택된 요소 중 첫 번째꺼만 리턴 .val() <br>
		선택된 요소를 리턴받으려면 반복문 사용</h3>
		<input type="button" value="확인" id="btn1"> <br> <br>

		<div id="result1">

			<form>
			취 미 : 
			<input type="checkbox" name="hobby" value="여행">여행
			<input type="checkbox" name="hobby" value="장기">장기 
			<input type="checkbox" name="hobby" value="바둑">바둑 
			<input type="checkbox" name="hobby" value="게임" checked>게임 
			<input type="checkbox" name="hobby" value="음악감상" checked>음악감상 
			<input type="checkbox" name="hobby" value="독서">독서 
			<input type="checkbox" name="hobby" value="낚시">낚시<br>
			</form>
		</div>
	</div>
</body>
</html>

Form 상태필터 :selected 예제

checked와 동일하게 val()하면 처음값만 가져오기 때문에

전체를 가져오기 위해선 반복문 each를 사용해야한다

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://localhost/Jqpro/js/jquery-3.7.1.js"></script>
<style>
select {
	vertical-align: top;
}
</style>
<script>
	$(function() {
		$('#spring').on('change', function() {
			let str = "";
			// $('자식', this) this가 부모일 때 태그 검색!! 중요!!
			$('option:selected', this).each(function() {
				str += $(this).val() + "\n";
			});
			alert(str);
		})
	})
</script>
</head>
<body>

	<div class="box">
		<h3>
			필터 > :selected<br> select에서 선택한 요소를 리턴
		</h3>

		<div id="result1">
			<form>
				<label>봄소식 :</label> <select name="spring" id="spring" multiple
					size="6">
					<!-- multiple이 빠지면 1개만 선택 가능 -->
					<option>개나리</option>
					<option selected>진달래</option>
					<option>민들레</option>
					<option selected>벚꽃</option>
					<option>목련</option>
					<option>철쭉</option>
				</select>
			</form>
		</div>
	</div>
</body>
</html>

기타필터

Visibility 필터 : 보임 상태에 따라 엘리먼트를 선택한다

.hide() / .show() 메서드를 사용하여 간단히 표현 가능

필터 설 명
:hidden  1) display : none 인 것
2) type=hidden 인 것
3) width=0 height=0 인 것
4)부모요소가 hidden 인 것
:visible  1) display :none 이 아닌 것
2) type =hidden 이 아닌 것
3) width=0 height=0 이 아닌 것
4) 부모요소가 hidden 이 아닌 것
5) Visibility =hidden opacity=0 인 것		 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://localhost/Jqpro/js/jquery-3.7.1.js"></script>
<style>
h2{
	margin: 1px;
}
</style>
<script>
	$(function() {
		$('#btn1').on('click',function(){
			let str = "<h2>hidden</h2>";
			$('#result1 p:hidden').each(function(){
				str += $(this).text()+"<br>";
			})
			$('#hidden').html(str);
		})
		
		$('#btn2').on('click',function(){
			let str = "<h2>visible</h2>";
			$('#result1 p:visible').each(function(){
				str += $(this).text()+"<br>";
			})
			$('#visible').html(str);
		})
	})
</script>
</head>
<body>

	<div class="box">
		<h3></h3>
		<input type="button" value="hidden" id="btn1"> <br> <br>
		<input type="button" value="visible" id="btn2"> <br> <br>

		<div id="result1">
			<p>보이는 문단</p> <!-- visible -->
			<p style="visibility: hidden;">숨겨진 문단</p> <!-- visible -->
			<p style="display: none;">자리를 차지 하지 못한 문단</p> <!-- hidden -->
			<p style="opacity: 0;">투명한 문단</p> <!-- visible -->
		</div>
		<div id="hidden"></div>
		<div id="visible"></div>
	</div>
</body>
</html>

tagName & attr('속성')

tagName

태그 이름 (DOM속성 이므로 ${}를 붙이지 않음)

attr('name')    /  attr('type')

이름 속성값   / 타입 값

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://localhost/Jqpro/js/jquery-3.7.1.js"></script>
<style>
h2{
	margin: 1px;
}
#result{
	display: flex;
	flex-direction: row;
}
</style>
<script>
	$(function() {
		$('#btn1').on('click', function() {
			let str = "<h2>hidden결과</h2>";
			$('#testForm *:hidden').each(function() {
				// 태그이름 비교 - input span인지 비교 - tagName (DOM속성) > 대문자
				if (this.tagName == 'INPUT') {
					// 이름 속성값 가져오기 attr('name')
					str += `${this.tagName}의 ${$(this).attr('name')} : ${$(this).val()}<br>`;
				} else if(this.tagName=='SPAN') {
					str += $(this).text() + "<br>";
				}

			})
			$('#hidden').html(str);
		})

		$('#btn2').on('click', function() {
			let res = "";
			let str = "<h2>visible결과</h2>";
			$('#testForm *:visible').each(function() {
				if (this.tagName=='INPUT') {
					str += `${this.tagName}의 ${$(this).attr('name')} : ${$(this).val()}<br>`;
					
					if($(this).attr('type')=="radio" && $(this).prop('checked')){
						res = "성별선택 : "+$(':checked').val()+"<br>";
					}
				} else if(this.tagName!='BR') {
					str += $(this).text() + "<br>";
				} 
			})
			str+= res;
			$('#visible').html(str);
		})
	})
</script>
</head>
<body>
	<div class="box">
		<h3></h3>
		<input type="button" value="확인" onclick="proc1()"> <br> <br>

		<div id="result1">
			<form id="testForm">
				<input type="hidden" name="userAge" value="33"> 
				<input type="hidden" name="userCity" value="대전"> 
				ID : 
				<input type="text" name="userID" value="hong"> 
				<span style="display: none">ID가 중복됩니다. </span> <br> 
				이름 : 
				<input type="text" name="userName" value="홍길동"> 
				<span style="visibility: hidden">이름을 입력하세요</span> <br> 
				성별 : 
				<input type="radio" name="sung" value="남" checked> 남자 
				<input type="radio" name="sung" value="여">여자
			</form>
		</div>
		<input type="button" value="hidden" id="btn1"> <input
			type="button" value="visible" id="btn2"> <br> <br>
			<div id="result">
				<div id="hidden"></div><br>
				<div id="visible"></div>
			</div>
	</div>
</body>
</html>