[스마트인재개발원] jQuery 기초
jQuery ?
: 클라이언트 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리
- 웹사이트에 Javascript를 더욱 손쉽게 활용할 수 있게 해준다
- 짧고 단순한 코드로도 웹페이지에 다양한 효과나 연출을 적용할 수 있다
Javascript 라이브러리 중 jQuery가 특히 많이 사용되는 이유
- 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원됨
- HTML DOM을 손쉽게 조작 할 수 있으며, CSS 스타일도 간단히 적용 가능
- 애니메이션 효과나, 대화형 처리를 간단하게 적용해줌
- 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현 가능
jQuery 적용법
1. 라이브러리 다운로드
: 파일 을 다운로드 받아 서버에 파일을 넣는 방식
- jQuery는 Javascript 라이브러리이므로, .js형태로 존재한다.
- http://jquery.com/download 이곳에서 다운로드
jQuery파일을 webcontent에 다운로드 한 후, 적용시킬 html 파일 안에 적용시킬 부분 위쪽에다가 <script>태그 안에
src 속성에 경로를 적어준다.
<script src="./js/jquery-3.6.0.min.js"></script>
2. CDN
: 서버에 파일을 넣는것이 아니라 웹사이트의 접속자가 서버에서 콘텐츠를 다운받아야 할 때,
자동으로 가장 가까운 서버에 접속해서 다운받도록 하는 방식
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
이와같이 라이브러리를 넣어주지 않고 jQuery를 사용하면 이와같은 이와 같은 오류가 난다.
jQuery 문법
$(‘태그명’ or ‘선택자’).동작함수();
- $ : jQuery를 의미하며, jQuery에 접근할 수 있게 해주는 식별자
- 선택자나, 태그명을 이용하여 원하는 HTML요소를 선택
- 동작함수를 정의하여 선택된 요소에 원하는 동작을 설정
$()함수
: 선택된 HTML요소를 jQuery에서 이용할 수 있는 형태로 생성해주는 역할을 한다.
- $()함수의 인수 : HTML태그, CSS선택자
- jQuery 객체(jQuery Object) : $()함수를 통해 생성된 요소
- jQuery는 jQuery객체의 메소드를 사용하여 여러 동작들을 설정
요소 선택하기
1. 태그 이름으로 - $(“태그이름”)
: 요소(element)의 태그이름으로 HTML요소를 모두 선택할 수 있다
- Javascript 의 getElementsByTagName()메소드와 동일한 동작을 한다.
<script>
$(function() {
$("button").on("click", function() {
$("span").css("fontSize", "30px").css("color", "blue");
});
});
</script>
<body>
<h1>CSS Selector tagName</h1>
<p>안녕하세요. <span>코딩몬</span>입니다.</p>
<button>여기를 클릭해 주세요.</button>
</body>
2. 아이디로 - $(“#id”)
: 요소(element)의 아이디(id)로 특정 HTML 요소를 선택할 수 있다.
- Javascript 의 getElementById()메소드와 동일한 동작을 한다.
<script>
$(function() {
$("button").on("click", function() {
$("#developmon").css("fontSize", "30px").css("color", "blue");
});
});
</script>
<body>
<h1>CSS Selector id</h1>
<p>안녕하세요. <span id="developmon">코딩몬</span>입니다.</p>
<button>여기를 클릭해 주세요.</button>
</body>
3. 클래스로 - $(“.class”)
: 클래스(class)로 같은 클래스의 HTML 요소를 모두 선택할 수 있다.
- 이는 자바스크립트의 getElementsByClassName() 메소드와 동일한 동작을 한다.
<script>
$(function() {
$("button").on("click", function() {
$(".developmon").css("fontSize", "30px").css("color", "blue");
});
});
</script>
<body>
<h1>CSS Selector id</h1>
<p>안녕하세요. <span class="developmon">코딩몬</span>입니다.</p>
<button>여기를 클릭해 주세요.</button>
</body>
<결과화면>
<before> <after>
스마트인재개발원
4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관
www.smhrd.or.kr