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) 수학, 난수 계산 Math 객체 4부, Max, Min 함수 (0) | 2024.12.05 |
---|---|
자바스크립트 반복문 종료, 유지 구문 continue, break 사용하기 (0) | 2024.11.12 |
자바스크립트 스크롤 최상단, 최하단 이동하는 방법 (0) | 2024.11.12 |
자바스크립트(Javascript) Date() 함수 (0) | 2024.08.08 |
자바스크립트(Javascript) 웹 페이지 자동 새로 고침 적용하기 (3) | 2024.04.17 |
자바스크립트(JavaScript) 웹 소스 테스트 사이트 소개 (0) | 2024.04.05 |
구글 크롬 개발자 도구 이용해서 자바스크립트 코드 실행하는 방법 (0) | 2024.03.20 |
자바스크립트 DOM document.write() 함수로 화면에 텍스트를 출력하기 (3) | 2024.02.06 |