기본필터
| 필터 | 설 명 |
| :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>
'웹프로그래밍 > jQuery' 카테고리의 다른 글
| [jQuery] 이미지 변경 - mouseover / mouseout / dblclick (0) | 2024.05.22 |
|---|---|
| [jQuery] 메서드 (0) | 2024.05.20 |
| [jQuery] 선택자 (0) | 2024.05.17 |
| [jQuery] html, text +each문 (0) | 2024.05.17 |
| [jQuery] js와 차이 (0) | 2024.05.16 |
