제이쿼리 기초,연결, ready 함수

jQuery 파일명 뜻

min (minify 축소하다 의 줄임) 코드압축을 얘기함  

코드가 몇천줄이기 때문에 압축된 파일을 사용한다.

---

파일명 프로그램 버전의 뜻

 

 

jquery-3.6.1.min

3 - 메이저 업데이트

6 - 마이너 업데이트

1 - 버그fix

 

2버전에서 쓰이던 메서드가 3버전에 없음. 사용불가

 

 

1버전만 사용해야하는경우 

솔루션일 경우 

대표적인 경우 카페24

10~15년전 제이쿼리1로 이미 홈페이지가 많이 만들어진 상황으로 

업데이트된 버전을 사용할수 없다.

---

 

제이쿼리 연결 확인하기

 

 

 

자바스크립트 시트에 코드작성 후 크롬으로 콘솔 확인

제이쿼리 함수는 $

console.log($);

 

 

제이쿼리테스트

 

 

구글확인

 

---

자동완성 기능 설치후 확인

.찍어보면 확인가능

 

 

 

제대로 적용완!

 

---

근데 html header 작성후 확인했더니

 

헤더가 찍히지 않음 

제이쿼리가 헤더를 연결하지 못함 

 

왜일까 ? 

 

 

 

 

html 시트를 보면

제이쿼리가 header 보다 먼저 위치해 있다.

html은 작성순서대로 로딩 되기 때문에 

header 보다 제이쿼리를 먼저 읽어서 header 를 읽지 못함

 

이떄 도큐멘트로 html을  먼저 읽어온다라는 제이쿼리 이벤트 함수로 ready 를 사용 

 

 

---

ready 함수 적용 

 

 

따라서 

$(document).ready(function () {

  console.log($('#header'));

});

 

제이쿼리 도큐멘트로 html을 먼저 로딩 불러와야함 

dom(html태그들)이 모두 로딩된 후 실행됨

그래서 반드시 ready 함수 안에다 작성해준다. 

 

 

 

왜 ready에 밑줄이갈까 ?

 

 

 

 

제이쿼리 홈페이지에서 검색 ㄱㄱ

 

 

https://api.jquery.com/ready/#ready-handler

.ready() | jQuery API Documentation

 

 

레디의 콜벡함수를 넣어라

 

 

 

제이쿼리 ready 호출방식 변경되었다.

축약형으로 사용

 

 

 

$(function() {

// Handler for .ready() called.

});

 

제이쿼리의 ready 이벤트 변경

 

 

// dom(html태그들)이 모두 로딩된 후 실행됨

// $(document).ready(function () {}) 축약형을 권장

$(function () {

  console.log($('#header'));

});

 

 

$ 제이쿼리로 function ready 함수를 동작하라

on 메서드 에 mouseenter, 마우스를 가따대면  function() 함수를 선언한것

$header .addClass 클래스를 추가하는 메서드 

앞에 지정한 on을 다시 지정 

 

 

 

---

마우스 on 넣어보기 

 

제이쿼리에넌 엄청나게 많은 이벤트가있다

모바일 터치이벤트 스크롤 마우스 등등 

 

 

 

 

$(function () {

  $('#header .gnb').on('mouseenter');

});

 

함수설명

메서드의 이벤트 on 의 mouseenter 을 사용 

핸들러는 (콜백 함수 자바용) 집어 넣어라 

 

 

$(function () {

  $('#header .gnb').on('mouseenter', function () {});

});

 

삽입 

 

$(function () {

  $('#header .gnb').on('mouseenter', function () {

    $('#header').addClass

  });

});

헤더에 클러스명을 문자열로 넣어라

 

 

css 내용에 지정된 클래스명

 

$(function () {

  $('#header .gnb').on('mouseenter', function () {

    $('#header').addClass('on');

  });

});

. 사용금지 

 

---

 

 

 

 

마우스를 가따대면 색이 바뀜 

 

---

 

// 마우스를 가따대면 색 바뀜
$(function () {
  $('#header .gnb').on('mouseenter', function () {
    $('#header').addClass('on');
  });
});

// 마우스를 떼면 다시 돌아옴
$(function () {
  $('#header .gnb').on('mouseleave', function () {
    $('#header').removeClass('on');
  });
});​