1. jQuery 시작
jQuery에서 HTML태그를 선택하는 것은 javascript에 비해 간편하게 할 수 있습니다.
jQuery의 시작은 다음과 같습니다.
$(document).ready(function(){
// 작성한 코드를 이곳에 넣으면 됩니다.
});
jQuery의 시작은 javascript에서의 window.onload()와 같이 $(document).ready(); 입니다.
ready는 document문서의 text가 모두 로드가 끝났을 때 발생하는 이벤트입니다.
위 코드를 다음 같이도 줄일 수 있습니다.
$(function(){
// 이곳에 작성한 코드를 넣으면 됩니다.
});
2. jQuery 선택자
- '$()' 함수
$()함수는 괄호 안에 있는 선택자를 정의하여 DOM element를 반환합니다.
이 선택자는 CSS와 동일하게 사용할 수 있습니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
var tag_p = $('p');
var tag_div = $('div');
var class_one = $(".one");
tag_p.css("color", "blue");
tag_div.css("color","red");
class_one.css("background", "#cdcdcd");
});
</script>
</head>
<body>
<p class="one">'p' tag, class 'one'</p>
<div class="one">'div' tag, class 'one'</div>
</body>
</html>
위 예제를 실행한 화면은 다음과 같습니다.
p태그는 color에 blue, div태그는 color에 red, one class는 background에 회색을 주었습니다.
$('p')는 p태그를 가지는 모든 엘리먼트를 반환하고,
$('div')는 div태그를 가지는 모든 엘리먼트를 반환하고,
$('.one')는 one class를 가지는 모든 엘리먼트를 반환합니다.
javascript에서는 꽤 길게 써야하는 코드를 jQuery에서는 짧고 간결하게 표현할 수 있습니다.
3. html(), text()
- html()
jQuery객체.html() => jQuery 객체가 가지고 있는 요소 중 첫 번째 요소의 내용을 반환합니다.
|
alert( $("p").html() ); |
위 예제를 실행한 결과는 다음과 같습니다.
- html( "새로운 내용" )
jQuery객체.html( "새로운 내용" ) => jQuery객체가 가지고 있는 요소의 내용을 "새로운 내용"으로 바꿉니다.
이 때 "새로운 내용"에 HTML태그가 있으면 이 태그가 적용되어 나타납니다.
|
$("div").html( "<h2>새로운 내용입니다.</h2>") |
위 예제를 실행한 결과는 다음과 같습니다.
- text()
jQuery객체.text() ==> jQuery객체가 가지고 있는 모든 요소의 내용 '문자열'만 반환합니다.
|
alert($(".one").text()); |
위 예제를 실행한 결과는 다음과 같습니다.
'Web > jQuery' 카테고리의 다른 글
| [jQuery] hover 이벤트를 적용한 성적 계산하기 예제 (0) | 2019.07.11 |
|---|---|
| [jQuery] CSS Selectors 표 (0) | 2019.07.03 |
| [jQuery] jQuery 설치 방법 (0) | 2019.07.02 |
댓글