자바스크립트 JQuery
개요
소개
- 2006년 Mozila의 자바스크립트 에반젤리스 Jhon Resig에 의해 개발 / 공개
- 여러 자바스크립트 라이브러리 ( prototype.js, Mootool.js 등) 중에 가장 주목 받고 있다.
- jQuery로 코딩하면 자바스크립트 코드가 간결해 진다.
- 가볍다 ( 90KB)
- IE6.0 이상, Firefox2.0 이상, Safari 3 이상, Opera 9이상, Google Chrome등의 주요 브라우저를 지원하여 클로스브라우징을 가능케 한다.
- 다운로드 ( http://jquery.com/download/ , 최신 버전 1.9.0 )
- 개발시에는 uncompressed 버전( jquery-1.9.0.js ) 으로 개발
- 릴리즈시에는 compressed 버전 ( jquery-1.9.0.min.js ) 으로 릴리즈한다.
사용준비
[실습예제 1] jQuery 설치 및 버전 확인
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery/jquery-1.9.0.js"></script>
<script>
alert( $().jquery );
</script>
</head>
<body>
</body>
</html>jQuery Basic
(X)HTML + CSS + JavaScript ( jQuery )
ready 함수
[실습예제 2 - 1] javascript의 실행 타이밍.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery/jquery-1.9.0.js"></script>
<script>
alert("hello jquery");
</script>
</head>
<body>
<p>
이 문장이 보이고 Hello World가 뜨면, 자바스크립트에서 HTML 엘리멘트에 접근할 수
있는 것입니다.
</p>
</body>
</html>[실습예제 2 - 2] javascript의 실행 타이밍.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery/jquery-1.9.0.js"></script>
<script>
$( document ).ready( function() {
alert( "Hello jQuery" );
});
</script>
</head>
<body>
<p>
이 문장이 보이고 Hello World가 뜨면, 자바스크립트에서 HTML 엘리멘트에 접근할 수
있는 것입니다.
</p>
</body>
</html>jQuery Basic - 선택자
선택자 ( selector )
- HTML Element를 선택하는 역할을 한다.
- 문서에서 Element 를 가져온 후, 반환된 객체 함수를 사용하여 Element를 조작하게 된다.
var object = $( “selector” ) ;
object.func();CSS 에서 자주 사용하는 셀렉터
CSS2 셀렉터
CSS의 속성 셀렉터
jQuery 자체 필터
CSS에서 자주 이용되는 셀렉터 - 태그
특정 HTML 태그를 컨트롤하기 위해 사용
[실습예제 3] ex3.html
- li 엘리멘트 색상 바꾸기 예제 입니다.
- ready function안을 비웠을 때와 비교 확인 해 보세요.
- css() 함수의 사용법도 익혀 보세요.
- CSS에서 자주 이용되는 셀렉터 - ID
- 특정 id 속성을 가진 HTML 태그를 컨트롤하기 위해 사용
- ID값에 #(hash)를 붙힌다.
[실습예제 4] ex4.html
- 특정 li 엘리멘트 색상 바꾸기 예제 입니다.
- 아이디를 바꾸어 가며 테스트 해보세요.
- CSS에서 자주 이용되는 셀렉터 - 클래스
- 특정 class 속성을 가진 HTML 태그를 컨트롤하기 위해 사용
- .(dot)에 class 속성값을 지정하여 선택.
[실습예제 5] ex5.html
- 특정 클래스를 가진 li 엘리멘트 색상 바꾸기 예제 입니다.
- class blue를 가진 li엘리멘트도 색상을 바꿔보세요.
- CSS에서 자주 이용되는 셀렉터 - 자손 셀렉터
- 여러 개의 셀렉터를 스페이스로 구분 지어 특정 태그안에 있는 자식 태그까지 컨트롤 한다.
[실습예제 6] ex6.html
- 특정 클래스를 가진 li 엘리멘트 의 엘리멘트의 색상 바꾸기 예제 입니다.
- class blue를 가진 li엘리멘트의 엘리멘트중 id가 S1인 엘리멘트의 색상을 바꿔보세요.
- CSS에서 자주 이용되는 셀렉터 전체 셀렉터
- 전체 태그를 선택할 수 있다.
[실습예제 7] ex7.html
- li 엘리멘트 안의 모든 자식 엘리멘트에 색상이 변경되는 예제 입니다.
- 빨간색으로 변하지 않는 부분에 대해 왜 그런지 생각해 보세요.
- CSS에서 자주 이용되는 셀렉터 - 그룹 셀렉터
- 여러 개의 셀렉터를 ,(콤마)로 구분하여 지정할 수 있다.
[실습예제 8] ex8.html
- li 엘리멘트 안에 특정 엘리멘트들을 그룹핑해서 한 번에 색상을 변경하는 예제 입니다.
- 아이디가 second, fourth 인
- 엘리멘트들은 폰트사이즈를 2.0em 으로 그리고 blue 색상으로 또 볼드 처리가 되게 스타일을 변경해 보세요.
- CSS2 셀렉터 - 자식 셀렉터 ( IE6 에서 지원 안함 )
- 특정태그의 바로 아래 위치한 태그를 선택
[실습예제 9] ex9.html
- li 엘리멘트의 자식 엘리멘트 중 엘리먼트의 색상을 변경하는 예제 입니다.
- 엘리멘트 의 자식 엘리먼트도 같은 스타일로 적용해 보세요.
- CSS2 셀렉터 - 인접 셀렉터 ( IE6 에서 지원 안함 )
- 특정 태그의 다음에 있는 태그를 선택할 수 있다.
[실습예제 10] ex10.html
- 세번째
- 엘리먼트를 선택해 색상을 변경하는 예제입니다.
- 네 번째
- 엘리먼트를 선택해 색상을 변경해 보세요.
- CSS2 셀렉터 - first-child 셀렉터 ( IE6 에서 지원 안함 )
- 특정 태그가 어떤 태그의 첫 엘리먼트인 경우 선택된다
[실습예제 11] ex11.html
- 모든 첫번 째
- 엘리먼트를 선택해 색상을 변경하는 예제입니다.
- CSS 속성 셀렉터 – [attribute]
- 특정 속성을 가진 태그를 선택한다.
[실습예제 12] ex12.html
- id 속성을 가지고 있는
- 엘리먼트를 선택해 색상을 변경하는 예제입니다.
- class 속성을 가지고 있는
- 엘리먼트를 선택해 색상을 blue로 변경해 보세요.
- CSS 속성 셀렉터 – [attribute=‘value’]
- 특정 속성이 특정 값을 가지고 있는 엘리먼트를 선택한다.
[실습예제 13] ex13.html
- title 속성이 “second” 속성을 가지고 있는
- 엘리먼트를 선택해 색상을 변경하는 예제입니다.
- title 속성이 “fourth” 속성을 가지고 있는
- 엘리먼트를 선택해 색상을 blue로 변경해 보세요.
- CSS 속성 셀렉터 – [attribute!=‘value’]
- 특정 속성이 특정 값을 가지고 있지 않은 엘리먼트를 선택한다.
[실습예제 14] ex14.html
- class가 “blue”가 아닌 속성을 가지고 있는
- 엘리먼트를 선택해 색상을 변경하는 예제입니다.
- class가 “normal”이 아닌
- 엘리먼트를 선택해 굵게 나오게 변경해 보세요.
- jQuery의 자체 필터 – first filter / last filter
- 셀렉터 안에서 첫 태그를 “first 필터”, 마지막 태그를 “last 필터”로 지정
[실습예제 15] ex15.html
- 첫번째
- 엘리먼트를 선택해 색상을 변경하는 예제입니다.
- 마지막
- 엘리먼트를 선택해 blue 색상으로 변경해 보세요.
- jQuery의 자체 필터 – even filter / odd filter
- 짝수 순서로 나타나는 엘리멘트는 even 으로 홀수 순서로 나타나는 태그는 odd 필터로 지정할 수 있다.
[실습예제 16] ex16.html
- 홀수 번째
- 엘리먼트를 선택해 색상을 변경하는 예제입니다.
- 짝수 번쨰
- 엘리먼트를 선택해 blue 색상으로 변경해 보세요.
- jQuery의 자체 필터 – contains 필터 / has 필터
- contains 필터는 특정 문자열이 포함되어 있는 엘리멘트를, has 필터는 특정 태그가 포함되어 있는 엘리멘트를 선택한다.
[실습예제 17] ex17.html
- 샘플이라는 단어가 들어간 콘텐츠를 가지고 있는 엘리먼트 와 태그를 포함하고 있는 엘리멘트를 골라 색상르 변경하는 예제입니다.
HTML / CSS 조작하기
- 텍스트의 변경
- .text() : 파라미터로 문자열을 넘기면 태그안의 텍스트를 문자열로 변경한다.
[실습예제 18] ex18.html
파라미터 내용에 태그를 붙여 넘겨 보세요. “<strong>가나다라마바사아자차카타파하</strong>”<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="./jquery/jquery-1.9.0.js"></script> <script type="text/javascript"> $( function() { $( "#p1" ).text( "가나다라마바사아자차카타파하" ); } ); </script> </head> <body> <p id="p1">이 안의 텍스트를 바꿉니다.</p> </body> </html>- 텍스트 가져오기
- .text() : 파라미터가 없으면 태그에 포함된 텍스트를 가져온다.
[실습예제 19] ex19.html
<p id=“p1”><strong>안녕하세요</strong></p> 로 바꾸고 결과를 확인해 보세요.<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="./jquery/jquery-1.9.0.js"></script> <script type="text/javascript"> $( function() { alert( $( "#p1" ).text() ); } ); </script> </head> <body> <p id="p1">안녕하세요.</p> </body> </html>- HTML의 변경
- .html() : 파라미터로 HTML문자열을 넘기면 태그안의 내용에 그 HTML 이 반영
[실습예제 20] ex20.html
실습예제18 와 비교, 확인해 보세요.<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="./jquery/jquery-1.9.0.js"></script> <script type="text/javascript"> $( function() { $( "#p1" ).html( "<strong>가나다라마바사아자차카타파하</strong>" ); } ); </script> </head> <body> <p id="p1">이 안의 HTML를 바꿉니다.</p> </body> </html>- HTML가져오기
- .html() : 파라미터가 없으면 태그에 포함된 html을 그대로 가져온다.
[실습예제 21] ex21.html
실습예제19 와 결과를 비교 확인해 보세요<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="./jquery/jquery-1.9.0.js"></script> <script type="text/javascript"> $( function() { alert( $( "#p1" ).html() ); } ); </script> </head> <body> <p id="p1"><strong>안녕하세요. </strong></p> </body> </html>HTML 삽입
html()은 태그안의 내용을 전부 변경
기존의 태그안의 내용은 남긴 채, HTML을 추가 삽입할 경우
다음과 같은 함수를 사용
prepend()
append()
before()
after()HTML 삽입 – prepend( )
지정한 태그 안의 내용의 앞에 파라미터 HTML를 삽입한다.
[실습예제 22] ex22.html
다음화면과 같은 결과가 나오도록 코드를 완성하세요.
- HTML 삽입 – append( )
- 지정한 태그 안의 내용의 뒤 에 파라미터 HTML를 삽입한다.
[실습예제 23] ex23.html
다음화면과 같은 결과가 나오도록 코드를 완성하세요.
- HTML 삽입 – before( )
- 지정한 태그 앞에 파라미터 HTML를 삽입한다.
[실습예제 24] ex24.html
다음화면과 같은 결과가 나오도록 코드를 완성하세요.
- HTML 삽입 – after( )
- 지정한 태그 뒤에 파라미터 HTML를 삽입한다.
[실습예제 25] ex25.html
다음화면과 같은 결과가 나오도록 코드를 완성하세요.
- HTML 이동 – prependTo( “이동할 곳의 선택자” )
- 선택자로 지정한 태그를 다른 태그 안에 포함된 텍스트 앞으로 이동
[실습예제 26] ex26.html
다음화면과 같은 결과가 나오도록 코드를 완성하세요
- HTML 이동 – appendTo( “이동할 곳의 선택자” )
- 선택자로 지정한 태그를 다른 태그 안에 포함된 텍스트 뒤로 이동
[실습예제 27] ex27.html
다음화면과 같은 결과가 나오도록 코드를 완성하세요.
- HTML 이동 – insertBefore( “이동할 곳의 선택자” )
- 선택자로 지정한 태그를 다른 태그 앞으로 이동
[실습예제 28] ex28.html
다음화면과 같은 결과가 나오도록 코드를 완성하세요.
- HTML 이동 – insertAfter( “이동할 곳의 선택자” )
- 선택자로 지정한 태그를 다른 태그 뒤로 이동
[실습예제 29] ex29.html
다음화면과 같은 결과가 나오도록 코드를 완성하세요.
- 다른 태그로 감싸기 – wrap()
- 선택자로 지정된 각 각의 엘리먼트를 파라미터에 지정된 태그로 감싼다.
[실습예제 30] ex30.html
다음화면과 같은 결과가 나오도록 코드를 완성하세요.
- 다른 태그로 감싸기 – wrapAll()
- 선택자로 지정된 복수의 엘리먼트를 파라미터에 지정된 하나의 태그로 감싼다.
[실습예제 31] ex31.html
다음화면과 같은 결과가 나오도록 코드를 완성하세요.
- 태그 변경 – replaceWith()
- 지정한 태그를 다른 태그로 바꾸고자 할 때
- 엘리먼트 내용까지 변경된다. (태그만 변경하는 것이 아님)
[실습예제 32] ex32.html
다음화면과 같은 결과가 나오도록 코드를 완성하세요.
- 태그 제거 – remove()
- 선택자로 지정된 태그들을 제거한다.
[실습예제 33] ex33.html
리스트에서 삭제할 아이템들을 삭제해 보세요.
2. jQuery Basic – Event
'Dev > JavaScript' 카테고리의 다른 글
자바스크립트 시작하기. (0) 2021.10.25 줌 클론코딩(WebSockets, SocketIO, WebRTC ) (0) 2021.10.04