제이쿼리 문법
$(선택자).함수();
달러($) 기호는 제이쿼리 자체를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자라고 생각하시면 됩니다.
선택자를 이용하여 원하는 HTML 요소를 선택하고, 함수를 정의하여 선택된 요소에 원하는 동작을 설정합니다.
이해하기 쉽게 예제를 통하여 다시 한 번 확인해보겠습니다.
아래 코드는 <p> 태그를 클릭하면 <body> 태그의 글자크기가 100px로 바뀌는 예제입니다.
$(function() {
$("p").on("click", function() {
$("body").css("fontSize", "100px");
})
})
$() 함수의 인수로는 HTML 태그 뿐만 아니라, CSS 선택자도 가능하여 특정 HTML 요소를 선택할 수 있습니다.
이러한 $() 함수를 통해 생성된 요소를 제이쿼리 객체라고 합니다.
위의 예제에서도 <p> 태그와 <body> 태그 뿐만 아니라 CSS 까지 수정을 했었습니다.
이런식으로 제이쿼리 객체를 이용하면 다양하게 코딩을 할 수 있습니다.
이번에는 태그가 아닌 id 값으로 예제를 확인해 보겠습니다.
<script>
$(function() {
$("#test").on("click", function() {
$("#test").css("fontSize", "150px");
})
})
</script>
<p id="test"> 안녕하세요. </p>이렇게 $() 함수의 인수로 id 값까지도 받을 수 있습니다.
저 test라는 id를 가진 <p>태그의 '안녕하세요.' 을 클릭하면 글자크기가 150px로 바뀌겠죠?
id 뿐만 아니라 class를 $() 함수의 인수로도 받을 수 있습니다.
#은 id의 값을 가져오는거고
. 은 클래스의 값을 가져오는거니까 클래스의 .클래스명으로 #() 인수에 넣어주면 되겠죠??
이번에는 조금 더 응용해서 속성(attribute)을 사용한 예제를 살펴보도록 하겠습니다.
<script>
$(function() {
$("button").on("click", function() {
$("img[art=gold]").attr("src", "이미지경로");
})
})
<script>위에 것들보다 조금 어렵다고 생각할 수 있습니다.
코드를 해석해보면 다음과 같습니다.
<button> 태그를 클릭한 경우
<img> 요소 중에서 alt 속성 값이 "gold"인 요소를 모두 선택함
이렇게 속성(attribute)를 사용하여 조건에 맞는 HTML 요소를 선택할 수 있습니다.
'1. 웹개발 > 1_1_2 Jquery' 카테고리의 다른 글
| [Jquery] show(), hide() - 요소 표시하거나 숨기는 방법 (0) | 2020.04.12 |
|---|---|
| [Jquery] event - 이벤트 핸들러 (0) | 2020.04.12 |
| [Jquery] parent(), parents() - 상위 요소 가져오는 방법 (0) | 2020.04.12 |
| [Jquery] clone() - 요소 복사하는 방법 (0) | 2020.04.11 |
| [Jquery] 적용 방법 (0) | 2020.03.18 |
