[jQuery] 1. jQuery 개요(구문 작성, 라이브러리 연결방법

1. jQuery 란?

- 기존에 자바스크립트 언어만으로 구현하기에 복잡했던 구문 작성들을 간소화하기 위해 "존 레식"에 의해 개발된 JavaScript기반의 라이브러리(유용한 기능들의 모음집)

 

- 즉, JavaScript언어로 유용한 함수나, 내용들이 이미 만들어져있는 모음집 

- 복잡한 자바스크립트 구문을 보다 짧고 쉽게 개발 가능(적은 양의 코드로 빠르고, 풍부한 기능 제공)

 

 

▶ jQuery 장점 
0) 국내에서 많은 회사들이 사용하고 있다.
1) DOM 요소와 관련된 스크립트를 보다 쉽게 구현할 수 있다
2) AJAX(비동기 통신), 이벤트 처리 등 다양한 기능들을 폭 넓게 지원한다 
3) jQuery기반의 확장형 플러그인, 오픈 API 등으 지원한다 (차트, 슬라이드, 애니메이션 등등..) 

 

 

 

2. jQuery 라이브러리 연결 방법

▶ head태그 내부에 script태그로 jQuery 관련 .js 파일 가져오기(오프라인/온라인 방식이 존재함)

 

 

1) jquery 라이브러리 직접 다운로드 받은 후 경로 지정(오프라인 방식)

☞ .js파일을 내가 직접 다운로드 받아 저장한 후 해당 저장된 파일 경로를 작성하는 방법

 

 

① https://jquery.com 접속   => 사이트 접속 후, Download 클릭 .( 아래 사이트는 jQuery 공식 사이트임)

jQuery

 

 

 

② 아래 버튼 클릭

 

 

 

 

③ 클릭하고 나면, 해당 페이지가 뜨는데 전체 복사 후, resources/js 폴더를 생성 후, "jquery-3.7.1.js"파일을 생성하여 위 코드를 복붙한다.

 

 

④ head태그에 scipt 태그를 추가하여 아래와 같이 입력

 

 

 

2) CDN(Content Delievery Network)를 통한 연결(온라인 방식)

☞ 라이브러리를 제공하는 사이트 url을 제시해서 파일경로를 저장

 

 

① jquery 사이트 -> Download 페이지 이동 후, 원하는 CDN 클릭

 

 

 

② 복사 후, 아래와 같이 head태그안에 붙여넣기 한다.

 

 

 

---

3. jQuery 구문 작성하기

- jQuery 구문으로 DOM 요소를 다루는 구문을 기본적으로 작성할 것이기 때문에  jQuery 명령은 문서상에 요소들이 다 로딩된 후 실행되어야한다.

 

- onload 함수 : 페이지가 로딩되면 자동으로 실행되는 함수
   → 단, javascript에서의 window.onload구문은 해당 문서의 요소들도 다 로딩되고 뿐만아니라 연동되어있는 외부문서들도 다 가지고 온 뒤에 실행됨

 

 

▶ 순수 자바스크립트

window.onload = function (){       // 실행내용 }

 

 

 

▶ jQuery에서의 해당 내용은 3가지 구문으로 제공

 

ⓐ

jQuery(document).ready(function(){     // 실행내용 });

ⓑ

$(document).ready(function(){      // 실행내용 })

 

☞ $ : jQuery 키워드를 나타낸다.

 

 

ⓒ

$(function(){        // 이것도 ready(function(){})  의 하나임      // 실행내용 });

 

☞ jquery에서의 해당 function은 DOM 요소들만 다 로드되면 바로 실행된다.

☞ 여러번 기술 가능함, 제한 없음

 

 

---

4. 자바스크립트 방식과 jQuery 비교

 

    <script>
        const div = document.querySelector("#test");
        console.log(div);    // null 

        // 1) 자바스크립트 방식
        window.onload = function() {
            const div = document.querySelector("#test");  // html 요소가 만들어지고나서 선택
            console.log(div);   // 정상적으로 div를 가져옴
        }


        // 2) jQuery 방식
        jQuery(document).ready(function() {
            const div = document.querySelector("#test");  // html 요소가 만들어지고나서 선택
            console.log("jQuery방식 1번", div);
        })

        // 3) jQuery 방식
        $(document).ready(function(){
            const div = document.querySelector("#test");
            console.log("jQuery방식 2번", div);
        })

        // 4) jQuery 방식
        $(function(){
            const div = document.querySelector("#test");  
            console.log("jQuery방식3번", div);

            // 모든 h3요소를 선택해서 배경색을 노란색으로 변경
            // - 순수 자바스크립트 방식으로
            const h3Arr = document.querySelectorAll('h3');
            h3Arr.forEach(function(h3, index) {
                h3.style.backgroundColor = 'yellow';
            })


            $("h3").css("backgroundColor","red");

        })
    </script>
    
    <div id="test"></div>

 

 

▶onload를 사용하지 않았을 경우

const div = document.querySelector("#test");         console.log(div);

 

☞ console.log(div)   => null 값 출력됨

☞ div 태그가 더 아래에 있기 때문에 null 값이 들어간다.

 

 

▶ 1) 자바스크립트 방식(onload 사용할 경우)

window.onload = function() {             const div = document.querySelector("#test");              console.log(div);          }

 

☞ window.onload를 사용함으로써 html요소가 만들어지고나서 실행이되기 때문에 div태그가 더 아래에 있어도 정상적으로 div값이 들어간다.

 

 

▶ 2) jQuery 방식 ①

jQuery(document).ready(function() {             const div = document.querySelector("#test");              console.log("jQuery방식 1번", div);         })

 

☞ jQuery 방식또한 html요소가 만들어지고 나서 실행되기 때문에 정상적으로 값이 들어간다.

 

 

▶ 3) jQuery 방식 ②

$(document).ready(function(){             const div = document.querySelector("#test");             console.log("jQuery방식 2번", div);         })

 

 

▶ 4) jQuery 방식 ③

$(function(){             const div = document.querySelector("#test");               console.log("jQuery방식3번", div);         })

 

 

 

 

 

 

Q. 모든 h3요소를 선택해서 배경색을 노란색으로 변경하려면...?

 

ⓐ 순수 자바스크립트 방식

const h3Arr = document.querySelectorAll('h3');             h3Arr.forEach(function(h3, index) {                 h3.style.backgroundColor = 'yellow';             })

 

 

ⓑ jQuery 방식 

- jQuery방식 : jquery 함수의 반환값은 항상 jquery 객체임. 함수 호출후, 다시한번 jquery내의 함수를 호출할 수 있다.
 

ex) 잘못된 방법

$("h3")  == document.querySelectorAll('h3');
$("h3").style.backgroundColor = "yellow";   => X

 

ex) 옳은 방법

$("h3").css("backgroundColor","yellow");

 

☞ $("선택자") : 해당 요소들을 선택
☞ .css() :선택된 요소들의 스타일과 관련된 기능을 수행하는 함수