반응형
내용 필터
| 필터 | 내 용 |
| :contains(text) | 지정한 text를 포함하는 모든 요소를 반환 (대소문자 구분) 예) $(“p:contains(jQuery)”).css(…); $(“body *:contains(jQuery)”).css(…); $(“body : contains(jQuery)”).css(…); |
| :has(selector) | 지정한 selector를 포함하고 있는 모든 요소 반환 예) $(“div:has(p, span)”).css(…); |
| :empty | 자식 요소도 없고 text도 없는 모든 요소 반환 |
| :parent | 자식 요소 또는 text를 갖고 있는 모든 요소 반환 |
- 'jQuery'글자가 포함된 span 요소
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
// 'jQuery'글자가 포함된 span 요소
$('span:contains(jQuery)').css('color','blue');
});
</script>
</head>
<body>
<h4>내용필터 :contains(text), :has(selector), :empty(), :parent</h4>
<div>
<div></div>
<div>헬로~~<span>오늘도 즐겁게</span></div>
<p>Hello jQuery!!<span>Thanks, jQuery!</span></p>
<div>jQuery!!!!</div>
<span>쉬운 제이쿼리</span><br>
<p></p>
</div>
</body>
</html>
- 'jQuery'글자가 포함되지 않은 span 요소
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
// 'jQuery'글자가 포함되지 않은 span 요소
$('span:not(:contains(jQuery))').css('color','red');
});
</script>
</head>
<body>
<h4>내용필터 :contains(text), :has(selector), :empty(), :parent</h4>
<div>
<div></div>
<div>헬로~~<span>오늘도 즐겁게</span></div>
<p>Hello jQuery!!<span>Thanks, jQuery!</span></p>
<div>jQuery!!!!</div>
<span>쉬운 제이쿼리</span><br>
<p></p>
</div>
</body>
</html>
- span이 있는 div
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
// span이 있는 div
$('div:has(span)').css('border','4px ridge green').css('padding','10px');
});
</script>
</head>
<body>
<h4>내용필터 :contains(text), :has(selector), :empty(), :parent</h4>
<div>
<div></div>
<div>헬로~~<span>오늘도 즐겁게</span></div>
<p>Hello jQuery!!<span>Thanks, jQuery!</span></p>
<div>jQuery!!!!</div>
<span>쉬운 제이쿼리</span><br>
<p></p>
</div>
</body>
</html>
- 아무것도 없는 빈 div
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
// 아무것도 없는 빈 div
$('div:empty').css('border', '2px dotted red').css('padding','20px');
// $('div:empty').css({'border':'2px dotted gold','padding':'20px'});
});
</script>
</head>
<body>
<h4>내용필터 :contains(text), :has(selector), :empty(), :parent</h4>
<div>
<div></div>
<div>헬로~~<span>오늘도 즐겁게</span></div>
<p>Hello jQuery!!<span>Thanks, jQuery!</span></p>
<div>jQuery!!!!</div>
<span>쉬운 제이쿼리</span><br>
<p></p>
</div>
</body>
</html>
- 자식이 있는(=부모인) p
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
// 자식이 있는(=부모인) p
$('p:parent').css('text-shadow','2px 2px 4px purple');
});
</script>
</head>
<body>
<h4>내용필터 :contains(text), :has(selector), :empty(), :parent</h4>
<div>
<div></div>
<div>헬로~~<span>오늘도 즐겁게</span></div>
<p>Hello jQuery!!<span>Thanks, jQuery!</span></p>
<div>jQuery!!!!</div>
<span>쉬운 제이쿼리</span><br>
<p></p>
</div>
</body>
</html>
Form상태 필터
| 필터 | 설 명 |
| :enabled | 현재 사용 가능한 요소 |
| :disabled | 현재 사용 불가능한 요소 |
| :checked | 체크된 요소 - checkedbox, radio |
| :selected | 선택된 요소 - select option |
- enabled, disabled
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
$(':enabled').css('border','1px ridge blue');
$(':disabled').css('border','1px groove red');
// 자바스크립트 방식으로 하나의 요소만 활성화하기
let v_input = document.querySelectorAll('input');
// v_input[0].setAttribute('disabled', faluse); // 불가능
// v_input[0].setAttribute('enabled', faluse); // 불가능
v_input[0].removeAttribute('disabled');
});
</script>
</head>
<body>
<h4>:enabled :disabled</h4>
<form>
<input id="txt" disabled> <br>
<input type="password" id="pw" disabled> <br>
<select id="sel" disabled>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select> <br>
<textarea id="mtline" disabled>multiline</textarea> <br>
<input type="button" value="확인" onclick="alert()" disabled>
</form>
</body>
</html>
=> css가 모두 적용되게 수정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
:enabled {
border: 1px ridge blue;
}
:disabled {
border: 1px ridge red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
// 자바스크립트 방식으로 하나의 요소만 활성화하기
let v_input = document.querySelectorAll('input');
v_input[0].removeAttribute('disabled'); // 속성 상태 변경을 위해 제거해야 함
});
</script>
</head>
<body>
<h4>:enabled :disabled</h4>
<form>
<input id="txt" disabled> <br>
<input type="password" id="pw" disabled> <br>
<select id="sel" disabled>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select> <br>
<textarea id="mtline" disabled>multiline</textarea> <br>
<input type="button" value="확인" onclick="alert()" disabled>
</form>
</body>
</html>
=> JS 방식으로 일괄 활성화 처리
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
:enabled {
border: 1px ridge blue;
}
:disabled {
border: 1px ridge red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
// JS방식으로 일괄 활성화 처리하기
let v_all = document.querySelectorAll('form *');
console.log(v_all.length); // 13, 모든 요소 대상 (br, option태그 포함)
for(let i=0; i<v_all.length; i++) {
v_all[i].removeAttribute('disabled');
}
});
</script>
</head>
<body>
<h4>:enabled :disabled</h4>
<form>
<input id="txt" disabled> <br>
<input type="password" id="pw" disabled> <br>
<select id="sel" disabled>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select> <br>
<textarea id="mtline" disabled>multiline</textarea> <br>
<input type="button" value="확인" onclick="alert()" disabled>
</form>
</body>
</html>
=> 제이쿼리 방식으로 활성화 처리하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
:enabled {
border: 1px ridge blue;
}
:disabled {
border: 1px ridge red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
// 제이쿼리 방식으로 활성화 처리하기
// $('form *').attr('enabled', true); // x
// $('form *').attr('disabled', false); // o, 현재 요소에 적용된 속성을 대상으로만 boolean 처리 가능
$('form *').removeAttr('disabled'); // o
});
</script>
</head>
<body>
<h4>:enabled :disabled</h4>
<form>
<input id="txt" disabled> <br>
<input type="password" id="pw" disabled> <br>
<select id="sel" disabled>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select> <br>
<textarea id="mtline" disabled>multiline</textarea> <br>
<input type="button" value="확인" onclick="alert()" disabled>
</form>
</body>
</html>
- checked, selected
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h4>:checked :selected</h4>
<span>취미 : </span>
<input type="checkbox" value="여행" checked>여행
<input type="checkbox" value="블로그">블로그
<input type="checkbox" value="베이킹">베이킹
<input type="checkbox" value="슬라임" checked>슬라임
<input type="checkbox" value="골프">골프
<input type="button" value="선택">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$('input:button').on('click', function(){
// 입력양식선택자:상태필터
let hobby = [];
$(':checkbox:checked').each(function(){
console.log(this); // 선택된 요소 자체가 넘어옴
console.log($(this).val()); // 선택된 값만 넘어옴
hobby.push($(this).val());
});
console.log("나의 취미는 " + hobby);
});
</script>
</body>
</html>
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] 7장 get/set 메소드1 (0) | 2024.02.22 |
|---|---|
| [jQuery] 6장 기타 필터 (0) | 2024.02.21 |
| [jQuery] 4장 필터 및 기본 필터 (0) | 2024.02.21 |
| [jQuery] 3장 jQuery 선택자 (0) | 2024.02.21 |
| [jQuery] 2장 jQuery 기초 (0) | 2024.02.20 |
