[jQuery] 1215 제이쿼리 기본 문법+선택자+요소를 구하는 방법

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

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

     

    가장많이 사용하는 이유

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

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

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

    -같은 동작을 하는 플러그인과 참고할 수 있는 문서가 많이 존재함. 

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

     

    제이쿼리 버전2와 버전3은 모두 익스플로러 9 이상에서만 동작하므로, 이 때문에 지금도 많은 웹 사이트에서는 제이쿼리 1을 사용하고 있음.   

     

    ...이라고 배우지만, 제이쿼리의 미래에 관한 삼성 인사이트 리포트를 참고하니, 현재는 대체할수 있는 라이브러리가 꽤 생긴 것 같다. 하지만 여전히 현역임은 분명하므로, 배우는 의의가 있을 것이다. (리액트를 공부해보고 싶다)

    https://www.samsungsds.com/kr/insights/jquery.html 

     

    제이쿼리[jQuery]를 아직도 사용하나요 - 제이쿼리의 현재와 미래 | 인사이트리포트 | 삼성SDS

    제이쿼리는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리입니다. “write less, do more(적게 작성하고, 많은 것을 하자)”라는 모토로 2006

    www.samsungsds.com

    제이쿼리는 자바스크립틀 라이브러리이므로, 이 파일은 .js 파일 형태로 존재한다. 

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

     2가지

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

    방법은 아래와 같다. 

    더보기

    <head>

    <script src="/파일경로/제이쿼리 파일명.js"></script>

    </head>

    <title>jQuery</title>
       
            <script src="../js/jquery-1.12.4.min.js">//폴더 조상을 찾아서... 지금은 1촌이므로 ../ 같은 폴더 안에 있으면 ./</script>

     

    -cdn(Content Delivery Network)를이용하여 로드하는 방법

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

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

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

     

    -jQuery 문법

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

    달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게해주는 식별자. 선택자를 이용하여 원하는 HTML요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정.

    $() 함수

    $() 함수는 선택된 HTML 요소를 제이쿼리에서 이용할 수 있는 형태로 생성해 주는 역할을 함. 

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

    Document 객체의 ready() 메서드

    자바스크립트 코드는 웹 브라우저가 문서의 모든 요소를 로드한 뒤에 실행되어야 한다. 보통은 별다른 문제가 발생하지 않지만, 다음과 같은 경우에는 오류가 발생. 

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

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

     

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

     window.onload = function()

    -제이쿼리에서는 document. 객체의 ready() 메서드를 이용하여 같은 결과를 보장. 

     $(document).ready(function(){...제이쿼리 코드...});    < origin ver

     혹은 $(function(){ ...제이쿼리코드;...});     < short ver

    <script>
            $(document).ready(function(){
                $("#doc").text("현재 페이지가 모두 로드되었습니다.");
            });
            $(window).load(function(){
                $("#win").text("현재 모두 로드되었습니다. ");
            });
        </script>
    </head>
    <body>
        <h2>문서와 윈도우 창이 로드되는 시점 체크</h2>
        <p>아래 표시되는 문장의 시점 차이를 살펴보자. </p>
        <iframe src="http://www.daum.net" width="100%" height="230px"></iframe>
        <p id="doc">페이지가 로딩중입니다. </p>
        <p id="win">페이지가 로딩중입니다. </p>

    요기서 당연히 ready가 더 빠르다. 왜냐면 window는 모든 페이지가 다 로드되고 시작되는 것이므로...

    참고로 $(document).ready 부분은 아래와 같이 줄여서 사용할수도 있다. 

    $(function(){
                $("#doc").text("현재 페이지가 모두 로드되었습니다.");
            });

     

    CSS 선택자

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

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

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

    id를 이용하여 특정 html 요소를 선택할 수 있음. 

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

    class[.] id[#]

        <script src="../js/jquery-1.12.4.min.js"></script>
        <script>
            $(function(){
                $("p").on("click",function(){
                    $("span").css("fontSize","28px");
                    $("#jq").css("border","2px solid orange");
                });
            });
        </script>
    </head>
    <body>
        <h1>HTML CSS 적용</h1>
        <p>오늘부터 <span>jQuery</span>를 시작합니다.<br/>
        글자 위를 클릭해 보세요. </p>
        <p id="jq">1. 오늘부터 jQuery를 시작합니다.<br/>
        위글자를 클릭해 보세요. </p>
    </body>

     

    클래스(class)를 사용하여 같은클래스에 속하는 HTML 요소를 모두 선택할 수 있음. 자바스크립트의 getElementsByClassName();과 같은 동작을 함

    $(function(){
                $("p").on("click",function(){
                    $(".jq").css("backgroundColor","gray");
                });
                $("button").on("click",function(){
                    $("img[alt='flower']").attr("src","../img/computer2.jpg");
                });
            });
     <p class="jq">2. 오늘부터 jQuery를 시작합니다.<br/>
            위 글자를 클릭해 보세요!!!!!!!!</p>

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

     

    -jQuery 선택자

    -선택한 요소 저장. 

        <script src="../js/jquery-1.12.4.min.js"></script>
        <script>
            $(function(){
                var items = $("li");
                $("button").on("click",function(){
                    $("#len").text("현재 페이지의 <li> 태그는 총 "+items.length+"개 입니다.");
                });
            });
        </script>
    </head>
    <body>
        <h3>li 요소 개수 구하기</h3>
        <ul>
            <li>첫번째</li>
            <li>두번째</li>
            <li>세번째</li>
            <li>넷번째</li>
            <li>다섯번째</li>
       </ul>
       <ul>
        <li>첫번째</li>
        <li>두번째</li>
        <li>세번째</li>
       </ul>
       <button>li는 총?</button>
       <p id="len"></p>

    제이쿼리에서는 선택한 요소들을 변수에 저장하여 사용할 수 있음. 저장된 요소들은 변수에 저장될 당시의 요소들만 저장됨. 즉, 요소가 저장된 이후에 문서에 추가되거나 문서에서 삭제된 요소들을 자동으로 갱신하지 x

    -선택한 요소 필터링: 모든<li>요소 중에서 <span> 요소를 가지고 있는 element 만을 선택하는 예제.  

     <script>
            $(function(){
                $("button").on("click", function(){
                    $("li:has(span)").text("<span>태그를 가진 li");
                });
            });
        </script>

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

    -input 요소 선택: 입력 양식에 관련된 특정 요소들을 쉽게 선택할 수 있음.

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

     

    -getter / setter method (선택 요소에 접근)

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

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

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

    <h3>.html()메서드 getter, setter</h3>
        <p>버튼을 선택하시면, getter를 통해 얻은 값이 setter를 통해 나타납니다.</p>
        <button>실행하기</button>
        <p id="text"></p>
     //h3 태그에 text를 읽어오기...getter 의 역할(인수가 없으므로)
                var newText = $("#h3").html();    
                //id가 text에 newtext 값으로 setter
                $("#text").html(newText);

    #h3 아니고 그냥 h3 해야 값 나옴!

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

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

     

    -메서드체이닝(chaining): getter 메서드는 선택된 요소의 값을 읽어서 그 값을 반환함. 

    선택된 요소가 여러개 존재하면, getter 메서드는 가장 첫 번째 요소만을 반환함

    setter 메서드는 선택된 모든 요소에 접근할 수 있는 또 다른 제이쿼리 객체를 반환함. 

    이렇게 반환된 제이쿼리 객체를 이용하면 세미콜론을 이용하지 않고도 곧바로 다른제이쿼리 메서드를 호출할 수 있음. 

    여러개의 메서드가 연속으로 호출되는 것을 메서드 체이닝이라고 함. 

    ** eq() 메서드는 선택한 요소 중에서 지정된 인덱스에 해당하는 요소를 선택하는 메서드. 

    메서드 체이닝 도중에 .end() 메서드를 사용하면 바로 이전에 선택했던 요소의 집합을 다시 선택할 수 있음. 

        <script src="../js/jquery-1.12.4.min.js"></script>
        <script>
            $(function(){//페이지 레디. 온로드 개념
                $("button").on("click",function(){
                    $("#msg").find("li")
                    .eq(1).html("두번째 아이템을 선택하셨습니다.") //innerHTML 과 같음
                    .end()  //위로 다시 올라감~
                    .eq(2).html("세번째 아이템을 선택하셨습니다.")
                });
            });
        </script>
    </head>
    <body>
        <h2>메서드 체이닝</h2>
            <ul id="msg">
                <li>첫번째 순서입니다.</li>
                <li>두번째 순서입니다.</li>
                <li>세번째 순서입니다.</li>
            </ul>
            <button>텍스트 변경</button>

    ...

    $("#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);
                });
    실행은 안되는데 오류가 안뜨면 아이디 앞에 # 빠지진 않았는지... 메서드 뒤에 () 빠지진 않았는지... 스펠링은 틀리지 않았는지... 세미콜론(;)이 빠지진 않았는지...확인하기...

    -.attr() method

    선택한 요소의 특정 속성값을 반환하거나 설정하기 위해서 사용함.  

    attr은 기본적으로 인수가 두 가지 필요하기 때문에, 인수가 하나 있더라도 setter가 아니라 getter다. 

     

    'Study > JavaScript' 카테고리의 다른 글

    [제이쿼리] 1218 수업 아카이브  (0) 2023.12.18
    [자바스크립트] <br/> 과 &nbsp 의 차이점 / a href의 활용  (1) 2023.12.17
    [자바스크립트] 1214 수업 소스코드 아카이브 - 계산기 만들기, 윈도우 브라우저 활용,메서드가 안열리는데 디버그 콘솔에 아무것도 안뜸,  (0) 2023.12.14
    [자바스크립트] 1213 수업 소스코드 아카이브  (0) 2023.12.13
    [자바스크립트] 1212 수업 아카이브  (0) 2023.12.12

    관련글

    댓글

    라이브러리 브랜드 그룹 | 뇌약간고침

    티스토리툴바