728x90
반응형
SMALL
안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)
yeonee 블로그 : 네이버 블로그
예쁘고 맛있게 먹고 건강하게,강인하지만 온화하게 행하라. ※맛스타운스타일상 인스타 www.instagram.com/s2._.y25n ※맛집감성일상 유튜브https://youtube.com/channel/@S2_yeonee 티스토리https://yeoneeluv.tistory.co
blog.naver.com
* 선택자란?
jQuery wrapper에는 CSS 선택자가 위치할 수 있는데, 이를 통해서 제어하려는 엘리먼트를 빠르고 정확하게 지정할 수 있다.
* 선택자 탐색기
선택자 기본
먼저, 위의 예제로 기본적인 선택자 사용에 대해 이해하고 난 다음의 필터 속성을 아는 것이 좋다.
https://api.jquery.com/category/selectors/basic-css-selectors/
Basic | jQuery API Documentation
Selects all elements with the given class. Selects all elements with the given tag name. Selects a single element with the given id attribute. Selects the combined results of all the specified selectors.
api.jquery.com
왼쪽 리스트 중에 selectors - Basic 을 선택하면 안에 자세한 설명과 예제가 함께 있어서 직접 코드를 실행해보면서 이해하는 것이 좋다.
선택자 filter
다음은 selector의 filter 기능들이다.
괄호 안의 수(인자)는 인덱스를 의미하며 java와 같이 가장 처음 인덱스는 0부터 센다.
선택자 속성
다음은 selector의 속성 기능들이다. 속성값을 통해서 필요로 하는 엘리먼트들을 찾아내는 기능이다.
속성값에는 어떠한 기호들이 들어가는데 그 기호에 따라서 미묘한 차이가 있어서 알맞게 잘 사용하는 것이 중요하다.
+ ! 는 부정이다.
위의 내용을 다 알고 외우기는 어렵다.
어떤 케이스에 직면했을 때, 이 api 사용법을 찾아서 사용하되 내가 스스로 필요한 것을 찾아낼 수 있는 능력이 중요하다.
https://api.jquery.com/category/selectors/attribute-selectors/
Attribute | jQuery API Documentation
Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-). Selects elements that have the specified attribute with a value containing a given substring. Selects elem
api.jquery.com
왼쪽 리스트 중에 selectors - Attribute 을 선택하면 안에 자세한 설명과 예제가 함께 있어서 직접 코드를 실행해보면서 이해하는 것이 좋다.
<!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>
$('input').live('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>
다음글>>
2023.07.09 - [VsCode(HTML)/4. JQUERY] - JQUERY - 5. Chain
+ 아래의 링크를 통해 공부내용을 참고하였습니다.
728x90
반응형
LIST
'VsCode(HTML) > 3. JQUERY' 카테고리의 다른 글
| JQUERY - 6. 이벤트 event (0) | 2023.07.09 |
|---|---|
| JQUERY - 5. Chain (0) | 2023.07.09 |
| JQUERY - 3. wrapper (0) | 2023.07.09 |
| JQUERY - 2. javascript VS jquery (0) | 2023.07.09 |
| JQUERY - 1. jQuery란? (0) | 2023.07.09 |