jQuery 직접선택자는 주로 멀리 떨어진 요소를 직접 선택할 때 사용하는 선택자이며 그 종류는 전체선택자, 아이디선택자, 클래스선택자, 요소선택자, 그룹선택자가 있습니다. 각 종류별 예제도 확인해봅니다.
전체선택자는 전체의 요소를 선택 할 때 사용하는데 현재 HTML의 모든 태그를 선택하게 되며 기본형은 $("*")로 *기호를 사용합니다.
전체선택자 예제
<script>
$(document).ready(function(){
$('*').css('color','red'); //* : 전체선택
});
</script>
태그선택자 예제
<script>
$(document).ready(function(){
$('h1').css('color','red');
$('p').css('color','green');
$('li').css('color','blue');
});
</script>
<body>
<h1>제목태그</h1>
<p id="text01">문단태그</p>
<p id="text02">문단태그</p>
<ul>
<li>리스트태그</li>
<li>리스트태그</li>
</ul>
</body>
아이디 선택자는 아이디 속성에 지정한 값을 포함하는 요소를 선택하는 것인데요. 기본문법은 $("#아이디명")으로 표기합니다. 아이디선택자는 #아이디명으로 작성하면 되는데요. html에 한번만 존재 할 수 있으며 유일한 식별자로 나타냅니다. 아이디명 중복은 불가합니다.
아이디선택자 예제
클래스 선택자는 클래스 속성에 지정한 값을 포함하는 요소를 선택하며 기본문법은 $(".클래스명")으로 작성합니다. 클래스선택자는 .클래스명으로 작성하고 html에 중복적용이 가능합니다.br 클래스선택자 예제
<script>
$(document).ready(function(){
$('.odd').css('color','red');
$('.even').css('color','green');
</script>
속성선택자(요소명)는 지정한 요소명과 일치하는 요소를 모두 선택하는데요. 기본문법은 $("요소명") 입니다. 속성선택자 : 요소명[태그속성명=태그속성값]
속성선택자 예제
<script>
$(document).ready(function(){
$('input[type=text]').css('border','1px solid red');
$('input[type=password]').css('border','1px solid blue');
});
</script>
댓글