12/15 수업 (32일차)

** jQuery란? **

제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈소스 기반의 자바스크립트 라이브러리 이다.

문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있으며, 현재 가장 인기있는 자바스크립트 라이브러리 중 하나이다.

 

* 가장 많이 사용하는 이유 *

제이쿼리는 주요 웹 브라우저의 구 버전을 포함한 대부분의 브라우저에서 지원됨.

HTML DOM을 손쉽게 조작할 수 있으며, CSS스타일도 간단히 적용할 수 있음.

애니메이션 효과나 대화형 처리를 간단하게 정용해 줌.

같은 동작을 하는 프로그램을 더욱 짧을 코드로 구현할 수 있음.

다양한 플러그인과 참고할 수 있는 문서가 많이 존대함.

오픈 라이센스를 적용하여 누구나 자유록게 사용할 수 있음

 

cf ) jQuery 버전 2,3 은 모두 익스플로러 9이상에서만 동작하기 때문에 아직도 많은 웹사이트에서는 jQuery 버전1을 사용하고 있음.

 

* 적용

제이쿼리는 자바스크립트 라이브러리이므로, 제이쿼리 파일은 자바스크립트 파일(.js 파일)

웹페이지에서 제이쿼리를 사용하기 위해서는 제이쿼리 파일을 먼저 웹페이지에 로드해야함

 

* 웹페이지에 제이쿼리파일을 로드한는 방법.

- 1.제이쿼리 파일을 다운받아로드

- 2.CDN을 이용하여 로드하는 방법

 

* 1. 제이쿼리 파일을 다운받아 로드하는 방법

서버에 저장하여 head scrip에 포함한다.

 

* 2. CDN을 이용하여 로드하는 방법 (잘 사용하지 않는다.)

CDN(content Delivery Netsork)이란 웹사이트의 접속자가 서버에서 콘텐츠를 다운받아야 할 때, 자동으로 가장 가까운 서버에서 다운받도록하는 기술.

이 기술을 이용하면 특정 서버에 트래픽이 집중되지 않고, 콘텐츠 전송 시간이 매우 빨라지는 장점이 있다.

이러한 CDN을 이용하면 제이쿼리 파일을 서버에 따로 저장하지 않아도 제이쿼리를 사용할 수 있습니다.

 

******************************************************************************************************************************************

 

* jQuery 문법

 문법)  $(선택자).동작함수();

달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자.

선택자를 이용하여 원하는 HTML요소를 선택하고 , 동작함수를 정의하여 선택된 요소에 원하는 동작을 설정한다.

 

* $() 함수 

$() 함수는 선택된 HTML요소를 제이쿼리에서 이용할 수 있는 형태로 생성해 주는 역할을 한다.$() 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택할 수 있음.이러한 $() 함수를 통해 생성된 요소를 제이쿼리 객체(jQuery object)라고 하며, 생성된 제이쿼리 객체의 메서드를 사용하여 여러동작을 설정할 수 있다.

 

* Document 객체의 ready() 메서드 (예제1215_2) 

자바스크립트 코드는 웹 브라우저가 문서의 모든 요소를 로드 한 뒤에 실행되어야 합니다.

보통은 별다른 문제가 바생하지 않지만, 다음과 같은 경우에는 오류가 발행 합니다.

- 아직 생서되지 않은 HTML요소에 속성을 추가하려고 할 경우

- 아직 로드되지 않은 이미지의 크기를 얻으려고 할 경우

 

* Window 객체의 onload() 메서드 (예제1215_2) 

자바스크립트에서는 Window 객체의 onload()메소드를 이용하여 문서가 모두 로드된 뒤에 코드가 실행되도록 설정

문법)

window.onload = function(){

       자바스크립트 고드;

};

 

* 제이쿼리에서는 Document객체의 ready()메서드를 이용하여 같은 결과를 보장 (예제1215_2) 

문법)

$(document).ready(function(){

    제이쿼리 코드;

});

 

* jQuery Team에서는 같은 결과를 보장하는 더욱 짧은 문법을 다음과 같이 제공 (예제1215_2) 

문법)

$(function(){   제이쿼리코드   })

 

 

 

 

* CSS 선택자 (예제1215_3) 

- 태그 이름을 사용하여 같은 태그이름을 가지는 HTML요소를 모두 선택할 수 있음.

  자바스크립트의 getElementsByTagName() 메서드와 같은 동작을 함.

예제)

$(function(){         

                         $("p").on("click", function() {          //<p>요소를 모두 선택함 

                                                                          $("span").css("fontsize", "28px");        //span요소를 모두선택함

                                 });

});

            

cf ) $() 함수에 전달되는 인수는 반드시 따옴표("")를 사용한 문자열 형태로 전달되어야 함. 

 

- 아이디를 사용하여 특정 HTML요소를 선택할 수 있음.

  자바스크립트의 getElementsById() 메서드와 같은 동작을 함.

                               

 

* 클래스(class)를 사용하여 같은 클래스에 속하는 HTML요소를 모두 선택할 수 있음.

자바스크립트의 getElementsByClassName()메소드와 같은 동작을 함.

예제) &

 

* 속성(attribute)을 사용하여 속성이 조건에 맞는 특정 HTML요소를 선택할 수 있음. 

 

 

 

 

* jQuery 선택자

 

- 선택한 요소 저장

제이쿼리에서는 선택한 요소들을 변수에 저장하여 사용할 수 있음

아래 예제는 문서 내의 모든 <li>요소를 선택하여 변수에 저장한 후, 해당 변수를 사용하는 예제 ( 예제 1215_4 )

 

저장된 요소들은 변수에 저장 될 당시의 요소들만 저장됨.

즉, 요소가 저장된 이후에 문서에 추가되거나 삭제된 요소들을 자동으로 갱신하지는 않음.

 

- 선택한 요소 필터링 ( 예제 1215_5 )

문서 내의 모든<li> 요소 중에서 <span>요소를 가지고 있는 요소만을 선택하는 예제

// :has 선택자 → 선택한 요소중에서 지정한 선택자와 일치하는 자손요소를 갖는 요소 모두 선택함

 

- input 요소 선택

입력 양식에 관련된 특정 요소를 손귑게 선택할 수 있음. 예제)

선 택 자	설     명
:button	type 속성값이 " button "인 요소를 모두 선택함
:checkbox	type 속성값이 " checkbox "인 요소를 모두 선택함
:file	type 속성값이 " file "인 요소를 모두 선택함
:image	type 속성값이 " image "인 요소를 모두 선택함
:password	type 속성값이 " password "인 요소를 모두 선택함
:radio	type 속성값이 " radio "인 요소를 모두 선택함
:submit	type 속성값이 " submit "인 요소를 모두 선택함

 

 

 

- getter메서드와 setter메서드 (선택 요소에 접근)

선택자에 의해 선택된 요소의 값을 읽거나 설정하기 위해서는 메서드를 통해 해당 요소에 접근.

 

getter 메서드는 선택된 요소에 접근하여 그 값을 읽어오기 위한 메서드이며, 아무런 인수를 전달하지 않고 호출한다.

setter 메서드는 선택된 요소제 접근하여 그 값을 설정하기 위한 메서드, 대입하고자 하는 값을 인수로 전달하여 호출한다.

 

1. var newText = $("h1").html();             //<h1> 요소 텍스트를 읽어오는 getter메서드

2. $("#text").html(newText);                    // id 가 "text" 인 요소에 새로운 텍스트를 설정하는 setter 메서드

 

1번 라인처럼 html() 메서드에 인수를 절달하지 않고 호출하면, 해당 HTML요소에서 값을 읽어오는 getter메서드로 사용.

2번 라인처럼 html() 메서드에 인수를 절달하고 호출하면, 해당 HTML요소에서 값을 읽어오는 getter메서드로 사용.

 

대표적인 getter / setter 메서드

요소에 접근하여 요소의 값을 읽거나 설정할 수 있도록 해주는 대표적인 메서드.

메 서 드	설   명
.html()	해당 요소의 HTML 콘텐츠를 반환하거나 설정함.
.text()	해당 요소의 텍스트콘텐츠를 반환하거나 설정함.
.width()	선택한 요소 중에서 첫 번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정함.
.height()	선택한 요소 중에서 첫 번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정함.
.attr()	해당 요소의 명시된 속성의 속성값을 반환하거나 설정함.
.position()	선택한 요소 중에서 첫 번째 요소에 대해 특정 위치에 존재하는 객체를 반환함 (getter메서드)
.val()	<form>요소의 값을 반환하거나 설정함.

 

- 메서드 체이닝 (method chaining)

.eq(index)

 

- width() / height() 메서드

 

- attr() 메서드 - 선태한 요소의 특정 속성값을 반환하거나 설정하기 위해 사용함. 

 

 

 

 

 

 

 

 

 

 

** 예제 1215 **

 

 

 

** 예제 1215_2 ( Document 객체의 ready() 메서드 / Window 객체의 onload() 메서드  ) **

 

 

 

 

** 예제 1215_3 ( CSS 선택자 ) **

 

 

** 예제 1215_3 ( CSS 선택자 ) **

 

 

** 예제 1215_4 (  ) **  li 갯수는 클릭시 <현재 체이지의 <li>태그는 총 8 개 입니다.> 나옴

 

 

 

** 예제 1215_5 (  ) **

 

 

 

 

** 예제 1215_6 (  ) **

 

 

** 예제 1215_6 (  ) **

 

 

** 예제 1215_6 (  ) **

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            /*
            $("button").on("click", function(){
                $("#msg").find("li")            //id 가 msg 인것의 li태그의
                .eq(1)                          //두번째 태그 선택 (eq(index)선택자)
                .html("두번째 아이템을 선택하셨습니다.")    //두번째 태그 내용을 ""안의 내용으로 변경
                .end()
                .eq(2)
                .html("세번째 아이템을 선택하셨습니다.");
            });
            */



            $("#getter").on("click", function(){
                var size = "너비는 " + $("#box").width() + "px이고 높이는 " + $("#box").height() + "px입니다.";
                $("#text").html(size);
            });

            $("#setter").on("click", function(){
                w = $("#box").width();
                h = $("#box").height();

                $("#box").width(w/2).height(h/2);

                var size = "너비는 " + $("#box").width() + "px 이고 높이는 " + $("#box").height() + "px 입니다.";
                $("#text").html(size);
            });

            //*****************************************************************************************************
            $("#imgchk").on("click", function(){
                //var imgSrc = $("img").attr("src");      //getter
                //$("img").attr("src", "../img/flower1.jpg");     //setter

                var imgSrc = $("#img2").attr("src");    //위 태그를 이용하면
                //alert("imsgArc : " + imgSrc);

                if(imgSrc == "../img/flower2.jpg"){
                    imgSrc = "../img/flower1.jpg";
                }
                else{
                    imgSrc = "../img/flower2.jpg";
                }

                $("#img2").attr("src", imgSrc);
            });

        });
    </script>
</head>
<body>
    <h2>메서드 체이닝</h2>
    <ul id="msg">
        <li>첫번째 순서 입니다.</li>
        <li>두번째 순서 입니다.</li>
        <li>세번째 순서 입니다.</li>
    </ul>
    <button>텍스트 변경</button>
    <br /><br />


    
    <h2>width() / height() 메서드</h2>
    <p>버튼을 각각 클릭해보세요.</p>
    <button id="getter">크기 읽어오기</button>
    <button id="setter">크기 설정하기</button>
    <br /><br />
    <div id="box" style="width:400px; height:200px; background-color:yellow;"></div>
    <p id="text"></p>



    <br /><br />
    <h2>.attr() 메서드</h2>
    <button id="imgchk">src속성변경</button><br />
    <img id="img1" src="../img/flower1.jpg" style="width:320px; height:210px; border:1px solid blue;">
    <br /><br />
    <img id="img2" src="../img/flower2.jpg" style="width:320px; height:210px; border:1px solid blue;">
    <br />



</body>
</html>