① id
<li id="element'>hello</li>
$(document).ready(function(){
$('#element').css('color','red');
});
② class
<li class="element'>hello</li>
$(document).ready(function(){
$('.element').css('color','red');
});
③ ul 키워드로 구분한 class
<div>
rect
<ul id="ul">
<li class="elements'>hello</li>
<li class="elements'>hello</li>
<ul>
<li class="elements'>hello</li>
</ul>
</ul>
</div>
$(document).ready(function(){
$('#ul > .elements').css('color','red');
});
먼저 id값인 "ul"인 엘리먼트를 선택한 후 그 자식 엘리먼트 중 클래스 값인 "elements"인 엘리먼트만 선택합니다.
자식 엘리먼트를 선택하기 위해 ">" 자식 셀럭터를 사용 함.
#ul > .elements'도 자식을 선택할수 있지만 자손까지 모두 선택함으로 주의해야 함.
#ul .element와 #ul.element 의 의미가 다르니 잘 구분해서 사용 해야 함.
④ id 키워드 하단 형제 엘리먼트 찾기
<div>
rect
<ul>
<li id="elements'>hello</li>
<li>이부분 색상 수정</li>
</ul>
</div>
$(document).ready(function(){
$('#elements+li').css('color','red');
});
id가 elements인 엘리멘트를 찾아
아이디나 클래스가 없는 엘리먼트를 태그네임으로 접근하기 위한 방법.
"+"를 붙이고, 태그 네임인 "li"를 넣어 #element + li를 작성.
⑤ 어트리뷰트 속성 title값이 "subject"인 엘리먼트
<div>
rect
<ul>
<li title="subject">hello1</li>
</ul>
</div>
$(document).ready(function(){
$('[title=subject]').css('color','red');
});
