자바스크립트(Javascript) jQuery 의 선택자(Selector) 기본 사용법

자바스크립트

자바스크립트(Javascript) jQuery 의 선택자(Selector) 기본 사용법

 

환경: Chrome

 

jQuery 라이브러리는 DOM(Document Object Model) 구조로 되어 있는 각 요소들을 쉽고 빠르게 접근할 수 있도록 해 줍니다. 그것이 바로 jQuery에서 제공하는 선택자(Selector) 입니다. jQuery 선택자(Selector) 는 표현식을 사용해서 DOM 기반으로 되어 있는 요소들을 쉽게 찾아 주는 함수 입니다.

 

jQuery 선택자의 구성은 달러기호와 괄호로 되어 있습니다. 이것을 $() 팩토리 함수라고도 합니다. 선택자 함수에 들어가는 인수의 종류는 3가지 입니다. 아래 3가지를 통해서 Document 의 각 요소에 접근하는 것입니다.

 

l  태그명 : HTML 태그에 해당하는 모든 요소에 접근할 수 있습니다. 예를 들어 $(‘div’) 라고 입력하면 <div> 태그 모두를 선택합니다.

l  클래스명 : 인수로 요소의 클래스 명을 입력하는 것입니다. $(‘.clsname’) 라고 입력하면 <div class=’clsname’> 요소를 선택합니다. 클래스는 중복이 가능하기 때문에 여러 개를 선택할 수 있겠죠.

l  아이디명 : 인수로 요소의 id 명을 입력하는 것입니다. $(‘#idname’) 라고 입력하면 <div id=’idname’> 요소를 선택합니다. 아이디는 유일하기 때문에 하나만 선택이 되겠죠.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
	               src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
			$(".clsname").css("background-color", "yellow");
			$("#idname").css("background-color", "blue");
			$("div").css("background-color", "red");
         });
      </script>
   </head>
	
   <body>
         <div class = "clsname">jQuery Selector Sample.</div>
         <div id = "idname">jQuery Selector Sample.</div>
         <div>jQuery Selector Sample.</div>
   </body>
</html>

자바스크립트(Javascript) jQuery 의 선택자(Selector) 기본 사용법

 

선택자 함수의 인수에 여러 요소의 값을 한번에 넣는 경우가 있습니다. 구조적으로 포함 관계에 있는 모든 요소들을 찾고자 할 때 사용합니다. 예를 들어 $(‘div p’) 로 조회를 했다고 합시다. div p 태그 모두를 선택하는 것이 아니라 div 에 포함되어 있는 p 태그를 찾으라는 의미입니다. 그러니까 뒤에 나오는 p 태그는 div 에 속해 있는 것이죠

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
	               src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
			$("div p").css("background-color", "yellow");
         });
      </script>
   </head>
	
   <body>
         <div class = "clsname">
			<p>div  p tag </p>
		 </div>
         <div id = "idname">
			div tag
		 </div>
		 <p>p tag</p>
   </body>
</html>


소스를 실행한 결과는 다음과 같습니다. div 에 속해 있는 p 태그에 배경이 노란색으로 바뀌었습니다. 이 문법은 AND 조건을 나타내는 것이죠

자바스크립트(Javascript) jQuery 의 선택자(Selector) 기본 사용법

 

그럼 OR 조건은 무엇일까요? 그것은 $(‘div, p’)  “,” 입니다. “,” 로 구분해서 넣으면 하나만 만족해서 선택이 됩니다. 위 소스에서 $(‘div p’) $(‘div, p’) 로 바꾼 결과입니다

자바스크립트(Javascript) jQuery 의 선택자(Selector) 기본 사용법

 

태그명뿐만 아니라 멀티 조합은 클래스명과 아이디를 조합해서 만들 수도 있습니다. 아래 소스에서 선택자 함수는 $(".one, #two") 로 두 개의 클래스명과 아이디 중 하나만 가지고 있어도 요소를 선택합니다

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
	               src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
			$(".one, #two").css("background-color", "yellow");
         });
      </script>
   </head>
	
   <body>
         <div class = "one">
			<p>div p tag 1 </p>
		 </div>
         <div id = "idname">
			<p>div p tag 2 </p>
		 </div>
		 <div>
			<p id="two">div p tag 3</p>
		 </div>
   </body>
</html>

자바스크립트(Javascript) jQuery 의 선택자(Selector) 기본 사용법

저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군


티스토리 툴바