라이브러리 파일 다운로드, css 추가/변경
이번 강좌에서는 제이쿼리가 무엇인지.. 그리고 선택자는 어떤 종류가 있고 css를 어떻게 제어하는지 알아보겠습니다.
※제이쿼리란?
간단하게 정의를 내리자면 자바스크립트 라이브러리 입니다.
그렇다면 라이브러리는 무엇일까요?
라이브러리는 자주 사용하는 기능이나 코드들을 재사용 가능하게 만들어 프로그래밍을 하는데 있어 속도를 높히고 개발자에게 편의를 제공하는 기능을 말합니다.
즉 제이쿼리를 이용하면 자바스크립트 프로그래밍 작업의 효율성을 극대화 시킬 수 있다는 의미입니다.
라이브러리를 호출하는 방법은 아래와 같이 두 가지로 가능합니다.
(1)라이브러리 파일을 로컬 디렉터리에서 호출
<script src="js/jquery-1.8.3.min.js"></script>
(2)라이브러리 파일을 특정 url 경로에서 호출
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
라이브러리 파일은 아래 압축파일을 다운로드 받아서 압축을 풀고 사용하셔도 됩니다.
jquery-1.8.3.min.zip※선택자
1. 기본형태
$(선택할오브젝트)
2. 아이디 선택자
$("#아이디값")
3. 클래스 선택자
$(".클래스값")
4. 태그 선택자
$(":태그종류[속성종류='속성값']:속성옵션")
예)라디오버튼 선택자
$(":radio[name='agreeRadio']:checked").val();
선택자는 다양한 방법으로 응용이 가능합니다.
※제이쿼리 아이디 선택자 예제
1. 스타일코드
<style>
#divBox{width:100px; height:100px; border:1px solid red}
</style>
코드설명)
divBox의 스타일을 정의합니다. 크기는 100*100 사이즈 이고 테두리 선의 두께는 1px, 붉은색으로 정의했습니다.
2. 스크립트 코드
<script src="js/jquery-1.8.3.min.js"></script>
<script>
function changeCss(){
$("#divBox").css("border","1px solid blue");
}
</script>
코드설명)
changeCss() 라는 메소드는 아이디값이 divBox인 객체에게 css border값을 부여합니다.
3. 본문코드
<body>
<div id="divBox" onclick="changeCss()">
</div>
</body>
코드설명)
divBox를 클릭하면 changeCss()란 메소드를 실행합니다.
결과)
※제이쿼리 클래스 선택자 예제
1. 스타일코드
<style>
.divBox{width:100px; height:100px; border:1px solid blue}
</style>
코드설명)
divBox의 스타일을 정의합니다. 크기는 100*100 사이즈 이고 테두리 선의 두께는 1px, 파란색으로 정의했습니다.
2. 스크립트 코드
<script src="js/jquery-1.8.3.min.js"></script>
<script>
function changeCss(){
$(".divBox").css("background","blue");
}
</script>
코드설명)
changeCss() 라는 메소드는 클래스값이 divBox인 객체에게 css background값을 부여합니다.
3. 본문코드
<body>
<div class="divBox" onclick="changeCss()">
</div>
</body>
코드설명)
divBox를 클릭하면 changeCss()란 메소드를 실행합니다.
결과)
전체코드)
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
</head>
<style>
.divBox{width:100px; height:100px; border:1px solid blue}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
function changeCss(){
$(".divBox").css("background","blue");
}
</script>
<body>
<div class="divBox" onclick="changeCss()">
</div>
</body>
</html>
다음 강좌에서는 다양한 선택자를 가지고 활용하는 예제를 올려보겠습니다.
'코딩이야기 > jQuery' 카테고리의 다른 글
| 제이쿼리 ajax 예제 (0) | 2017.01.18 |
|---|---|
| 제이쿼리 setInterval,clearInterval 예제 (0) | 2016.12.29 |
| 제이쿼리 폼 검사 text/radio/checkbox/이메일검증 (1) | 2016.12.15 |