자바스크립트(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>
▼ 선택자 함수의 인수에 여러 요소의 값을 한번에 넣는 경우가 있습니다. 구조적으로 포함 관계에 있는 모든 요소들을 찾고자 할 때 사용합니다. 예를 들어 $(‘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 조건을 나타내는 것이죠.
▼ 그럼 OR 조건은 무엇일까요? 그것은 $(‘div, p’) “,” 입니다. “,” 로 구분해서 넣으면 하나만 만족해서 선택이 됩니다. 위 소스에서 $(‘div p’) 을 $(‘div, p’) 로 바꾼 결과입니다.
▼ 태그명뿐만 아니라 멀티 조합은 클래스명과 아이디를 조합해서 만들 수도 있습니다. 아래 소스에서 선택자 함수는 $(".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) display 속성 이용해서 접거나 펴는 방법 (1) | 2023.09.22 |
---|---|
자바스크립트(Javascript) form 의 submit (전송)을 자바스크립트로 실행하는 방법 (1) | 2023.09.22 |
자바스크립트 크롬 브라우저로 디버깅 하는 방법 (0) | 2022.08.17 |
자바스크립트(JavaScript) 웹 소스 테스트 사이트 소개 (0) | 2022.08.04 |
[Javascript] 자바스크립트 웹 페이지 자동 새로 고침 적용하기 (1) | 2020.02.16 |
자바스크립트(Javascript) 뒤로 가기 막는 방법 (1) | 2020.01.08 |
자바스크립트 구구단 출력하는 방법 (0) | 2019.11.06 |
웹 개발을 위한 아톰 에디터 설치, 사용하는 방법 (0) | 2019.07.13 |