웹 기초 20강 - jQuery 필터2
- 자식필터
요소를 자식으로 갖는 부모의 구룹안에서 해당 자식을 찾는다
$(“td:first-child”) : td를자식으로 하는 tr 그룹에서 첫번째 자식
필터 설 명
:nth-child( index /even/odd/ equation)
자식 중 index로 지정된 위치의 요소들과 일치하거나 , 짝수. 홀수 번째의 요소들과 일치하거나,
방정식 값 위치의 요소들과 일치
:first-child 부모에 속한 자식 중 첫번째 자식요소와 일치
:last-child 부모에 속한 자식 중 마지막 자식요소와 일치
:only-child 자신이 부모요소의 유일한 자식요소인 것과 일치 - Form상태필터
입력양식의 현재 상태에 따라 선택되어진다
필터 설 명
:enabled 현재 사용 가능한 요소와 알치
:disabled 현재 사용 불가능한 요소와 일치
:checked 체크된 요소와 일치-checkedbox, radio
:selected 선택된 요소들과 일치-select option Form상태4-1
- 기타 필터
Visibility 필터 : 보임 상태에 따라 엘리먼트를 선택한다
필터 설 명
:hidden 1) display : none 인 것
2) type=hidden 인 것
3) width=0 height=0 인 것
4)부모요소가 hidden 인 것
:visible display :none 이 아니 것
type =hidden 이 아니 것
width=0 height=0 이 아닌 것
부모요소가 hidden 이 아닌 것
Visibility =hidden opacity=0 인 것
자식필터
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('.box1 button').on('click',function(){ //문서가 로드된 후에 버튼을 클릭하면
$('li:first-child').css('border','2px solid red');
$('li:first').css('background','yellow');
})
$('.box2 button').on('click', function(){
$('td:nth-child(1)').css('background','#5a5a5a');
$('td:nth-child(2)').css('background','#bebebe');
$('td:last-child').css('background','#dcdcdc');
$('#tab2 tr:first-child td').css('background','black') //첫번째줄에 있는 모든 td
.css('color','white')
.css('font-size','1.5em')
.css('font-weight','bold');
//$('#tab3 tr:nth-child(2n)')
$('#tab3 tr:nth-child(even) td').css('background','lightgreen');
$('#tab3 tr:nth-child(odd) td').css('background','lightgray');
})
})
</script>
<style>
table{
border : 2px solid black;
border-collapse: collapse;
}
td{
width: 300px;
height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div class="box box1">
first-child : 부모의 그룹에서 첫번째 자식을 선택한다<br>
last-child : 부모의 그룹에서 마지막 자식을 선택한다<br>
$('li:first-child') : ol 그룹에서 각각 첫번째 자식을 선택<br>
$('li:first') : 모든 li에서 첫번째 li를 선택<br>
<br>
<button type="button">확인</button>
<div id="result1">
<h2>여자에게 인기있는 남자들</h2>
<ol>
<li>능력있는 남자</li>
<li>잘생긴 남자</li>
<li>돈많은 남자</li>
<li>프로그래머</li>
</ol>
<h2>남자에게 인기있는 여자들</h2>
<ol>
<li>능력있는 여자</li>
<li>예쁜 남자</li>
<li>귀여운 남자</li>
<li>섹시한 남자</li>
</ol>
</div>
</div>
<div class="box box2">
td:nth-child(1), td:first-child<br>
td:nth-child(2)<br>
td:nth-child(3), td:last-child<br>
<br>
<button type="button">확인</button>
<div id="result2">
<table border="1">
<tr>
<td>이름</td>
<td>주소</td>
<td>전화번호</td>
</tr>
<tr>
<td>홍길동</td>
<td>대전</td>
<td>010-222-333</td>
</tr>
<tr>
<td>진달래</td>
<td>서울</td>
<td>010-444-555</td>
</tr>
<tr>
<td>개나리</td>
<td>부산</td>
<td>010-666-777</td>
</tr>
<tr>
<td>무궁화</td>
<td>대구</td>
<td>010-777-888</td>
</tr>
</table>
<br><br>
<table id="tab2" border="1">
<tr>
<td>이름</td>
<td>주소</td>
<td>전화번호</td>
</tr>
<tr>
<td>홍길동</td>
<td>대전</td>
<td>010-222-333</td>
</tr>
<tr>
<td>진달래</td>
<td>서울</td>
<td>010-444-555</td>
</tr>
<tr>
<td>개나리</td>
<td>부산</td>
<td>010-666-777</td>
</tr>
<tr>
<td>무궁화</td>
<td>대구</td>
<td>010-777-888</td>
</tr>
</table>
<br><br>
<table id="tab3" border="1">
<tr>
<td>이름</td>
<td>주소</td>
<td>전화번호</td>
</tr>
<tr>
<td>홍길동</td>
<td>대전</td>
<td>010-222-333</td>
</tr>
<tr>
<td>진달래</td>
<td>서울</td>
<td>010-444-555</td>
</tr>
<tr>
<td>개나리</td>
<td>부산</td>
<td>010-666-777</td>
</tr>
<tr>
<td>무궁화</td>
<td>대구</td>
<td>010-777-888</td>
</tr>
<tr>
<td>무궁화</td>
<td>대구</td>
<td>010-777-888</td>
</tr>
<tr>
<td>무궁화</td>
<td>대구</td>
<td>010-777-888</td>
</tr>
</table>
</div>
</div>
</body>
</html>상태필터_checked
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function proc1(){
//사용가능과 불가능을 구분한다
$('form *:enabled').css('border','2px dotted green');
$('form *:disabled').css('border', '3px solid red');
}
$(function(){
//$('#result2 input[type=button];').on('click',function(){}) //속성선택
$('#result2 :button').on('click',function(){//input[type=button]과 같음 - 폼양식선택
//$('input[type=checkbox]').each(function(i){})
//$(':checkbox').each(function(i){})
//$.each($('input[type=checkbox]'), function(i){})
str = "당신의 취미는 <br>";
$.each($(':checkbox:checked'), function(i){ //4개 중 1개 사용(다 같은 사용)
//this.value - dom객체 사용시
str += $(this).val() + " "
})
$('#result2 div').html(str);
})
})
</script>
</head>
<body>
<div class="box">
상태필터<br>
전송버튼 클릭시 체크된 항목의 값을 script에서 처리한다 -value - val()<br>
innerHTML - html()<br>
textContent - text()<br>
value - val()<br>
<br>
enabled : 사용가능 <br>
disabled : 사용불가능<br>
selected : select option <br>
checked : checked, radio<br>
<br>
<button type="button" onclick="proc1()">확인</button>
<div id="result1">
<form>
<input type="text" name="id" ><br>
<input type="password" name="pass" ><br>
<select name="disSelect">
<option>Option1</option>
<option>Option2</option>
<option selected="selected">Option3</option>
<option>Option4</option>
</select>
<br><br>
<textarea name="enTextarea" rows=10 cols=20 >text</textarea><br>
<input type="button" value="확인" onclick="alert('hello~~')" disabled="disabled"><br>
</form>
</div>
</div>
<div class="box">
상태필터<br>
<div id="result2">
<form>
취 미 :
<input type="checkbox" name="hobby" value="여행" checked >여행
<input type="checkbox" name="hobby" value="장기">장기
<input type="checkbox" name="hobby" value="바둑">바둑
<input type="checkbox" name="hobby" value="독서" >독서
<input type="checkbox" name="hobby" value="낚시">낚시<br><br>
<input type="button" value="전송">
</form>
<div></div>
<br>
</div>
</div>
</body>
</html>상태필터_selected
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
//str = "";
$('select').on('change', function(){
str = "";
$.each($('option:selected',this), function(){
//$('select option')//select가 여러개일 때 사용불가
str += $(this).val() + "<br>";
})
$('#result1 div').html(str);
})
})
</script>
<style>
select{
width: 200px;
height: auto;
font-size: 1.3em;
}
</style>
</head>
<body>
<div class="box">
select에 change이벤트를 설정<br>
option의 선택한 항목의 값을 script에서 처리 - value - val()
$.each($('select option:selected'),function(){})
$.each($('option:selected', this), function(){})
<br>
<button type="button" onclick="proc1()">확인</button>
<div id="result1">
<form>
봄소식 : <br>
<select name="spring" id="spring" multiple="multiple" size="6">
<option>개나리</option>
<option selected="selected">진달래</option>
<option>민들레</option>
<option>벚꽃</option>
<option selected="selected">목련</option>
<option>철쭉</option>
</select>
</form>
<div></div>
</div>
</div>
</body>
</html>Visibility필터
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('#visible').on('click', function(){
str = "";
$.each($('p:visible'),function(i){//보이는 p태그를 가지고 반복한다
str += $(this).text() + "<br>";//this는 p:visible의 i번째 요소
})
$('#result1 div:eq(0)').html(str);
//$('p:visible').each(function(i){})
})
$('#hidden').on('click', function(){
str = ""
$('p:hidden').each(function(i){
str += $(this).text() + "<br>";
})
$('#result1 div:eq(1)').html(str);
})
})
</script>
</head>
<body>
<div class="box">
<br>
<br>
<button type="button" id="visible">visible필터</button>
<button type="button" id="hidden">hidden필터</button>
<div id="result1">
<p> 보이는 문단</p>
<p style="visibility:hidden;">숨겨진 문단</p>
<p style="display:none;"> 자리를 차지 하지 못한 문단 </p>
<p style="opacity:0;"> 투명한 문단</p>
<div></div>
<div></div>
</div>
</div>
</body>
</html>Author And Source
이 문제에 관하여(웹 기초 20강 - jQuery 필터2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gksmf6699/웹-기초-20강-jQuery-필터저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
