알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)
JQuery 선택자 본문
JQuery 선택자
Jquery는 강력하게 엘리먼트를 선택할수 있는 수단들을 많이 제공 합니다.
생활코딩 사이트에서 선택자 예제중 가장 좋은 예제 같네요
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body{
font-size:12px;
}
.selected,.selected_parent {
background-color: red !important;
color:white;
border:2px solid red !important;
}
input.btn {
width:130px;
}
ul, .live{
float:left;
width:150px;
padding-left:20px;
margin:0;
}
textarea{
float:left;
width: 400px;
height:150px;
font-size:11px;
margin-left:20px;
}
.clear{
clear: both;
}
.sample{
margin-bottom: 20px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<fieldset>
<legend> 기본 </legend>
<div class="sample">
<ul id="tutorials">
<li class="tutorial" id="HTML"> HTML </li>
<li class="tutorial" id="CSS"> CSS </li>
<li class="tutorial" id="javascript"> javascript </li>
<li class="tutorial" id="jquery"> jQuery </li>
<li class="tutorial" id="PHP"> PHP </li>
<li class="tutorial" id="MYSQL"> MYSQL </li>
</ul>
<textarea>
<ul id="tutorials">
<li class="tutorial" id="HTML"> HTML </li>
<li class="tutorial" id="CSS"> CSS </li>
<li class="tutorial" id="javascript"> javascript </li>
<li class="tutorial" id="jquery"> jQuery </li>
<li jclass="tutorial" id="PHP"> PHP </li>
<li class="tutorial" id="MYSQL"> MYSQL </li>
</ul>
</textarea>
<div class="clear"></div>
</div>
<input class="btn" type="button" id="#jquerybtn" value="#jquery" /> - id 선택자 <br />
<input class="btn" type="button" id=".tutorial" value=".tutorial" /> - class 선택자 <br />
<input class="btn" type="button" value="li" /> - 엘리먼트 선택자 <br />
<input class="btn" type="button" value="#jquery, #MYSQL" /> - 다중 선택자 <br />
</fieldset>
<fieldset>
<legend> filter </legend>
<div class="sample">
<ul id="list">
<li> HTML </li>
<li> CSS </li>
<li> javascript </li>
<li> PHP </li>
<li> MYSQL </li>
</ul>
<textarea>
<ul id="list">
<li> HTML </li>
<li> CSS </li>
<li> javascript </li>
<li> PHP </li>
<li> MYSQL </li>
</ul>
</textarea>
<div class="clear"></div>
</div>
<input class="btn" type="button" value="#list li:eq(2)" /> - 인자와 인덱스가 동일한 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="#list li:gt(1)" /> - 인자 보다 인덱스가 큰 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="#list li:lt(2)" /> - 인자 보다 인덱스가 작은 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="#list li:even" /> - 첫번째, 세번째... 홀 수의 인덱스 값을 가진 엘리먼트에 대한 선택자 <br />
<input class="btn" type="button" value="#list li:odd" /> - 두번째, 네번째.... 짝 수의 인덱스 값을 가진 엘리먼트에 대한 선택자 <br />
<input class="btn" type="button" value="#list li:first" /> - 첫번재 인덱스 엘리먼트에 대한 선택자 <br />
<input class="btn" type="button" value="#list li:last" /> - 마지막 인덱스 엘리먼트에 대한 선택자 <br />
</fieldset>
<fieldset>
<legend> 속성 </legend>
<div class="sample">
<ul id="attribute">
<li target="ABCD">ABCD</li>
<li target="BCDE">BCDE</li>
<li target="CDEF">CDEF</li>
<li target="DEFG">DEFG</li>
<li target="EFGH">EFGH</li>
<li id="FGHI" target="FGHI">FGHI</li>
</ul>
<textarea>
<ul id="attribute">
<li target="ABCD">ABCD</li>
<li target="BCDE">BCDE</li>
<li target="CDEF">CDEF</li>
<li target="DEFG">DEFG</li>
<li target="EFGH">EFGH</li>
<li id="FGHI" target="FGHI">FGHI</li>
</ul>
</textarea>
<div class="clear"></div>
</div>
<input class="btn" type="button" value="[target*="BC"]" /> - 속성의 값에 주어진 문자열이 포함되는 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="[target="DEFG"]" /> - 속성의 값과 주어진 문자열이 일치하는 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="[target!="DEFG"]" /> - 속성의 값과 주어진 문자열이 일치하지 않는 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="[target^="B"]" /> - 속성의 값으로 주어진 문자열이 처음 등장하는 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="[target$="H"]" /> - 속성의 값으로 주어진 문자열이 마지막으로 등장하는 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="[target]" /> - 속성이 존재하는 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="[target][id]" /> - 속성들이 존재하는 엘리먼트를 찾아내는 선택자
</fieldset>
<fieldset>
<legend>Form</legend>
<div class="live">
<div>
<input type="text" disabled="disabled" value="disabled" />
<input type="text" value="enabled"/>
</div>
<div><input type="checkbox" checked="checked" /></div>
<div><input type="checkbox" /></div>
</div>
<textarea class="sample">
<div>
<input type="text" disabled="disabled" value="disabled" />
<input type="text" value="enabled"/>
</div>
<div><input type="checkbox" checked="checked" /></div>
<div><input type="checkbox" /></div>
</textarea>
<div class="clear"></div>
<input class="btn" type="button" value="[type="text"]" /> - 폼 엘리먼트를 선택할 때는 속성 셀렉터를 사용한다. <br />
<input class="btn" type="button" value="[type="text"]:disabled" /> - disabled 속성의 값이 disabled인 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="[type="text"]:enabled" /> - disabled 속성의 값이 enabled인 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="input:checked" /> - 체크박스 중 체크가 된 엘리먼트를 찾아내는 선택자 <br />
</fieldset>
<script>
// 1.7 부터는 .live가 .on 을 변경 되었습니다.
$('input').on('click', function() {
$this = $(this);
$('*').removeClass('selected');
switch($this.attr('value')) {
case '#jquery':
$('#jquery').addClass('selected');
break;
case '.tutorial':
$('.tutorial').addClass('selected');
break;
case 'li':
$('li').addClass('selected');
break;
case '#jquery, #MYSQL':
$('#jquery, #MYSQL').addClass('selected');
break;
case '#list li:eq(2)':
$('#list li:eq(2)').addClass('selected');
break;
case '#list li:gt(1)':
$('#list li:gt(1)').addClass('selected');
break;
case '#list li:lt(2)':
$('#list li:lt(2)').addClass('selected');
break;
case '#list li:even':
$('#list li:even').addClass('selected');
break;
case '#list li:odd':
$('#list li:odd').addClass('selected');
break;
case '#list li:first':
$('#list li:first').addClass('selected');
break;
case '#list li:last':
$('#list li:last').addClass('selected');
break;
case '[target*="BC"]':
$('li[target*="BC"]').addClass('selected');
break;
case '[target="DEFG"]':
$('li[target="DEFG"]').addClass('selected');
break;
case '[target!="DEFG"]':
$('li[target!="DEFG"]').addClass('selected');
break;
case '[target^="B"]':
$('li[target^="B"]').addClass('selected');
break;
case '[target$="H"]':
$('li[target$="H"]').addClass('selected');
break;
case '[target]':
$('li[target]').addClass('selected');
break;
case '[target][id]':
$('li[target][id]').addClass('selected');
break;
case '[type="text"]':
$('[type="text"]').addClass('selected');
break;
case '[type="text"]:disabled':
$('[type="text"]:disabled').addClass('selected');
break;
case '[type="text"]:enabled':
$('[type="text"]:enabled').addClass('selected');
break;
case 'input:checked':
$('input:checked').parent().addClass('selected');;
break;
}
})
</script>
</body>
</html>
해당 코드의 분석은
$('input').on('click', function() 부분은 input tag 에서 click을 할경우에 $('*') 모든 엘리먼트 선택을 한후에 selected 로 설정된 class 엘레먼트 들에 class 이름을 remove 합니다. 그리고 input 버튼 안에 text 를 가지고 와서 $this.attr('value') case 문을 통해 JQuery로 엘리먼트
를 선택한뒤에 클래스 이름을 selected 로 바꿔 줍니다.
바꿔주면 css 스타일에의해서
.selected,.selected_parent {
background-color: red !important;
color:white;
border:2px solid red !important;
}
배경이 빨갛고 글씨색이 흰색 부분을 변경됩니다.
해당 예제소스를 가지고 버튼을 눌러 보면서 선택자를 input 버튼의 text 처럼 입력 했을때 어떻게 선택 되는지 쉽게 알수가 있습니다.
또는
크롬에서 F12 개발자 도구를 열어서
이렇게 샘플코드의 설명을 보면서 필요할때 마다 해당 코드를 참조해서 사용 하면 됩니다.
처음부터 이 많은 선택자 문법을 모두 외워서 사용하기 힘들기 때문입니다.
물론 CSS 많이 하셧던 분들은 쉽게 하실수 있습니다.
'Web > JQuery' 카테고리의 다른 글
| [jQuery]엘리먼트 제어 (0) | 2017.08.23 |
|---|---|
| [javascript,jQuery] 이벤트란? (0) | 2017.08.23 |
| [jQuery] Chain이란? (0) | 2017.08.23 |
| javascript vs JQuery (0) | 2017.08.22 |
| jQuery란? (0) | 2017.08.22 |
'Web /JQuery' Related Articles
more
Comments