티스토리 뷰

jQuery

[jQuery] 기본 선택자

기본 선택자

기본 선택자는 CSS와 동일하게 선택자를 선택하는 방법입니다. 가장 기본적으로 요소를 선택하는 방법입니다. 이 방법은 CSS와 동일합니다.


기본 선택자(Basic Selectors)

기본 선택자
종류 예시 설명
태그 선택자 $("p") 기본 태그를 선택합니다.
클래스 선택자 $(".class") 클래스 태그를 선택합니다.
아이디 선택자 $("#id") 아이디 태그를 선택합니다.
그룹 선택자 $("p, .class, #id") 여러가지 태그를 선택합니다.
전체 선택자 $("*") 전체 태그를 선택합니다.
Sample : 기본 선택자
<!DOCTYPE html>
<html lang="ko">
    <head>
    	<script>
        <meta charset="UTF-8">
        <title>제이쿼리(jQuery)</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		$(document).ready(function(){        
            $("h3").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
            $(".one3").css({ backgroundColor:"#ccc", border:"1px dashed #01584d" });
            $("#one10").css({ backgroundColor:"#ddd", border:"1px dashed #01584d" });
			$(".one5, .one8").css({ backgroundColor:"red", border:"1px dashed #01584d" });
			$("*").css({ border:"1px solid #01584d" });
        }); 
        </script>
    </head>
    <body>
	    <h3>기본 태그를 선택하는 방법</h3>
		<div>
			<ul class="list">
				<li class="one1">one1</li>
				<li class="one2">one2</li>
				<li class="one3">one3</li>
				<li class="one4">one4</li>
				<li class="one5">one4</li>
				<li class="one6">one4</li>
				<li class="one7">one4</li>
				<li class="one8">one4</li>
				<li class="one9">one4</li>
				<li id="one10">one4</li>
			</ul>
		</div>
    </body>
</html> 
댓글
댓글쓰기 폼