반응형
- All Selector
jquery selector 중에 ("*")는 document에서 모든 요소를 찾습니다.
모든 요소에 무언가 일괄 적용하는 일을 극히 드물겠죠.
무튼 이것을 사용하는 경우 일괄 적용하므로 속도에 영향을 끼치니 주의해서 사용해야 합니다.
예제)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>all demo</title>
<style>
h3 {
margin: 0;
}
div, span, p {
width: 80px;
height: 40px;
float: left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
<script>
var elementCount = $( "*" ).css( "border", "3px solid red" ).length;
$( "body" ).prepend( "<h3>" + elementCount + " elements found</h3>" );
</script>
</body>
</html>실제 적용 후)
$( "*" ).css( "border", "3px solid red" ) 이 구문에서 모든 엘리먼트를 찾아 3px 두께의 빨간 선을 적용한 것인데
빨간 선이 적용된 엘레먼트 수인 13을 body 앞에 <h3>태그로 추가하였습니다.
<html>요소 부터 <head>, <meta>, <title>, <style>, <script> 등등 모든 엘레먼트에 적용이 된 것입니다.
자 이때 document내의 전체 요소가 아닌 특정 요소의 자식+자손들만 일괄 적용하고 싶을 때는 어떻게 하면 될까요?
아래 예제처럼 특정 요소에 id를 지정하고 그 id를 지목하고 find함수를 사용하여 전체 엘레먼트에 적용하면 됩니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>all demo</title>
<style>
h3 {
margin: 0;
}
div, span, p {
width: 80px;
height: 40px;
float: left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
#test {
width: auto;
height: auto;
background-color: transparent;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="test">
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
</div>
<script>
var elementCount = $( "#test" ).find( "*" ).css( "border", "3px solid red" ).length;
$( "body" ).prepend( "<h3>" + elementCount + " elements found</h3>" );
</script>
</body>
</html>$( "#test" ) 구문으로 <div id="test">를 찾고 find()로 자손들에서 찾아라 뭐를? "*" 전체를 말이죠.
결과는? test 아이디를 가진 div 자식들인 <div> <span> <p> 태그와 <p>의 자식인 <button>까지 모두 일괄 적용된 모습니다.
참조) https://api.jquery.com/all-selector/
반응형
'Programming' 카테고리의 다른 글
| jQuery selector [name=”value”] (0) | 2018.03.08 |
|---|---|
| jQuery 접두사 일치 찾기 셀렉터 (0) | 2018.03.07 |
| jQuery 문자열 포함 찾기 셀렉터 (0) | 2018.03.07 |
| jQuery closest - 나의 첫번째 조상 찾기 (0) | 2018.03.07 |
| jQuery selector - 간단 설명 기본 모음 (0) | 2018.03.07 |