selector(셀렉터)
셀렉터는 문서내에서 원하는 엘리먼트를 쉽게 식별하고 이를 추출하기 위해서
jQuery 에서 제공하는 기술이다.
selector 의 예 ( 자손 , 자식 차이점 )
<title>인접한 자손 엘리먼트를 노드로 추가하기</title>
<style type="text/css">
em{
font-size: 20pt; line-height:20pt;
margin: 20px; color:blue;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('p em').css('background-color','yellow').each(function(){
$('.result1').append($(this).text()+"\n");
// this 가 가르키는 것은 $('p em') 이다.
});
$('div > em').css('background-color','pink').each(function(){
$('.result2').append($(this).text()+"\n");
// this 가르키는 것은 $('div > em') 이다.
});
console.log("검색된 엘리먼트 갯수 : " + $('p em').length);
// p의 자손 em 을 모두 찾는의미
console.log("검색된 엘리먼트 갯수 : " + $('div > em').length);
// div 의 자식 em 을 찾는의미 '>' 는 바로 한단계 밑을 찾는의미이다.
});
</script>
</head>
<body>
<p>
<em>one</em>
<em>two</em>
<span><em> three</em></span>
</p>
<div>
<em>four</em>
<span><em> five </em></span>
<em> six </em>
<span><em> korea </em></span>
</div>
<hr size="5" color="green">
<div>
<span> ancestor descendant 로 검색된 엘리먼트</span>
<span class="result1"></span>
</div>
<div>
<span> parent > child 로 검색된 엘리먼트 four six</span>
<span class="result2"></span>
</div>
</body>
</html>실행 결과
위코드를 실행해보면 자손과 자식의 차이를 명확하게 구별 할 수 있다.
$('p em') 은 p의 자손 em 을 전부 가르키는 형태이고
$('div > em') 은 div 의 한단계 아래 자식 em 만 가르키는 형태이다. 그래서 밑에 코드에서
각각 $('p em') 에 해당하는 one , two , three 모두 노란색으로 표현되어 자손인것을 확인 할수있고
span 태그로 감싸져있는 em 코드도 자손이기때문에 모두 포함된다.
$('div > em') 에 해당하는 four , six 가 핑크색으로 표현되어 div의 자식이 두개인것을 확인 할 수 있다.
div에 span 태그 안의 em 태그는 div > span > em 의 모습으로 생각할수 있으므로 div와 자식이아닌 자손으로 관계가 형성된다 . 그러므로 five와 korea 는 표현되지 않았다.
removeClass , addClass
<title>n 번째 엘리먼트 이후 혹은 이전에
위치한 엘리먼트에 스타일 해제하기 - ":gt(n) , lt(n)"</title>
<style type="text/css">
table{table-layout:auto; width: 75%; }
.textstyle{color:blue; font-weight:bold;
background-color:#cccc66;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('td').addClass('textstyle');
$('td:lt(2)').removeClass('textstyle');
$('td:gt(4)').removeClass('textstyle');
});
/* removeClass() : jQuery 확장 객체 집합에 속한 모든 엘리먼트에 하나 이상의 클래스를 제거 */
</script>
</head>
<body>
<table>
<tr><td>zero</td></tr>
<tr><td>one</td></tr>
<tr><td>two</td></tr>
<tr><td>three</td></tr>
<tr><td>four</td></tr>
<tr><td>five</td></tr>
</table>
</body>
</html>실행 결과
add 와 remove 말그대로 더하고 지우는 의미이다.
$('td').addClass('textstyle'); => td 모두에게 textstyle 을 적용하라는 의미
$('td:lt(2)').removeClass('textstyle');
=> td < 2 ( lt는 < 로 표현된다. ) td 의 인덱스 0 , 1 의 값에 스타일을 지운다
$('td:gt(4)').removeClass('textstyle');
=> td > 4 ( rt 는 > 로 표현된다. ) td 인데스 4 이후 것의 스타일을 지운다.
Attribute(속성) 을 조건으로 제시하여 엘리먼트를 찾기
-E[A], E[A=V],E[A^=],E[A&=V],E[A*=V]
<title> Attribute(속성) 을 조건으로 제시하여 엘리먼트를 찾기
-E[A], E[A=V],E[A^=],E[A&=V],E[A*=V] </title>
<style type="text/css">
.spotlight{background-color:#ff0}
.redtext{color:red}
.bluetext{color:blue}
.largetext{font-size:30pt}
.italictext{font-style:italic}
.box{border:3pt solid #f00}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
var output = function(selector){
var resultText = "";
console.log("\n" + selector + "로 검색된 엘리먼트 갯수 : " + $(selector).length);
$(selector).each(function(){
resultText += $(this).text() + "\t"; // this 가 가르키는 것은 selector 이다.
});
};
$(document).ready(function(){
$('span[id]').addClass('spotlight');
$('span[id = "simpletext1"]').addClass('redtext');
$('span[id != "simpletext1"]').addClass('bluetext');
$('span[id ^= "complex"]').addClass('italictext'); /* [id ^= "complex"] => complex로 시작하는~ 이라는 의미 */
$('span[id $= "text1"]').addClass('largetext'); /* [id $= "text1"] => text1으로 끝나는~ 이라는 의미 */
$('span[id *="text"]').addClass('box'); /* [id *="text"] => id에 text가 들어가있는거~ 라는의미 */
output("span[id]");
output("span[id = 'simpletext1']");
output("span[id = 'simpletext1']");
output("span[id ^= 'complex']");
output("span[id $= 'text1']");
output("span[id *= 'text']");
});
</script>
</head>
<body>
<span id="simpletext1">simple</span>
<span class="simpletext2">jquery</span>
<span id="completext1">basic</span>
<span id="completext2">example</span>
<span id="complex">book</span>
</body>
</html>실행 결과
실행 결과를 보면 각각의 selector 형태를 이해 할 수 있다.
[id ^= "complex"] => complex로 시작하는~ 이라는 의미
[id $= "text1"] => text1으로 끝나는~ 이라는 의미
[id *="text"] => id에 text가 들어가있는거~ 라는의미
'국비 과정 > JQuery' 카테고리의 다른 글
| 국비 - 1021 ( 엘리먼트 ) (0) | 2022.10.23 |
|---|---|
| 국비 - 1019 ( jQuery ) (0) | 2022.10.19 |
