jQuery/jQuery 기본31 04_이벤트바인팅,이벤트객체, 이벤트전파 제이쿼리 이벤트란 ? 어떤동작이 발생되는것을 의미 예 ) 팝업띄우기, 마우스 버튼 누르기, 윈도우 사이즈 작아지기 스크롤바 움직이기 등 이벤트가 발생했을때 작동하는 실행문을 연결하는 것을 이벤트핸들러 라고한다 보통 이벤트 이름에 'on'을 연결해여 사용 만약 click 이벤트가 발생되었다면 onclick 이벤트핸들러가 작동하여 작업을 실행 작성법 $(function () { $('.선택자') .이벤트핸들러('이벤트명', function () {실행문} }); }); 예제 scroll 이벤트 (페이지 바닥감지) 스크롤 이벤트는 무엇인가? 우리가 브라우저 창에서 스크롤을 내리면 팝업창이 뜨거나 새로운 정보들이 뜰때가 있다. 이런 효과를 제이쿼리 window 객체인 scroll 이벤트로 쓰이며 반드시 trig.. 2022. 10. 20. 03_탐색메서드 $this 사용 $(this) 이벤트가 걸린 요소 자기자신 find() 이벤트 발생 대상 안쪽요소 탐색 prev() 이전요소 선택 / 모두선택 prevAll next() 다음요소 선택 / 모두선택 nextAll children() 선택요소의 자식요소 모두 선택 sibilings() 자신제외 (이벤트 발생 대상) 형제요소 모두선택 parent() 이벤트 발생대상의 부모 선택 closest() 자신의 조상 선택 end() 메서트 체인으로 여러요소 선택한 경우 이전요소 선택 $(this) .find('.depth02') .css('background', 'red') .end() .css('border', '10px solid black'); 제이쿼리 탐색 메서드는 자바스크립트엔 없는 기능이다. $(this) 제이쿼리 this.. 2022. 10. 20. 02_필터선택자(eq,even,odd,gt(),lt()) 필터선택자 종류 :eq (index) index 번호가 짝수 n번째 선택 지정값 선택 제이쿼리 배열인덱스 순서 0>1>2>3 0이 첫번째이다. :even index 번호가 짝수 n번째 선택 짝수값 선택 :odd index 번호가 홀수 n번째 선택 홀수값 선택 :gt (index) index 지정값보다 큰값 선택 초과 값 선택 :lt (index) index 지정값보다 작은값 선택 미만 값 선택 지정값 선택하기 :eq() 지정값을 선택하는 방법은 2가지가 있다. 함수에 작접 인덱스 값 입력 eq 메서드로 넣기 $('#header .gnb>li:eq(3)').css('border', '2px solid red'); $(function () { var idx = 3; $('#header .gnb>li:eq('.. 2022. 10. 20. 01_제이쿼리로 돔 조작하기 기본 설명, 선택자 $는 제이쿼리 선택자 함수 실행을 뜻한다. 실행시 제이쿼리는 body 문서를 확인후 작동하므로 document.ready() 를 사용해야하지만 생략가능. 선택자 함수 실행시 제이쿼리 객체가 return 되어 제이쿼리 메서드를 연결 할 수 있다. 자바스크립트 함수의 기본 실행문 축약문법 $(document).ready(function(){}) $(function () {}); ready 축약형을 사용하여 dom이 로딩된 후 안쪽 코드 실행 기본문법으로 사용 제이쿼리 명령어 사용법 1 #(' 선택자명 ') .명령어 () 2 #(' 선택자 ') .명령어 ( function (){실행문}); 익명함수 형식으로 사용 제이쿼리 선택자 함수 사용법은 css 와 동일하다 console.log($('#header .in.. 2022. 10. 20. 제이쿼리 자동완성기능 설치하기 제이쿼리 작성 자동완성기능 1. node.js 파일을 설치해야 자동완성 패키지를 사용가능 ( 용어 : 설치는 패치지/ 연결은 라이브러리) https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 다운로드 후 설치! 2.TERMINAL 셋팅 Visual Studio code > TERMINAL 에서 node -v 입력후 v16.18.0 버전뜨는것확인 npm init -y 작성시 에러 뜨면 한글 폴더이기 때문 이럴땐 npm init 로 입력 jquery 넣고 엔터엔터엔터 끗 3. 확인 폴더 안 패키지 폴더 설치 확인 이곳에 자동완성 패키지가 저장된다 5. nod.. 2022. 10. 13. 제이쿼리 기초,연결, ready 함수 jQuery 파일명 뜻 min (minify 축소하다 의 줄임) 코드압축을 얘기함 코드가 몇천줄이기 때문에 압축된 파일을 사용한다. 파일명 프로그램 버전의 뜻 jquery-3.6.1.min 3 - 메이저 업데이트 6 - 마이너 업데이트 1 - 버그fix 2버전에서 쓰이던 메서드가 3버전에 없음. 사용불가 1버전만 사용해야하는경우 솔루션일 경우 대표적인 경우 카페24 10~15년전 제이쿼리1로 이미 홈페이지가 많이 만들어진 상황으로 업데이트된 버전을 사용할수 없다. 제이쿼리 연결 확인하기 자바스크립트 시트에 코드작성 후 크롬으로 콘솔 확인 제이쿼리 함수는 $ console.log($); 자동완성 기능 설치후 확인 .찍어보면 확인가능 제대로 적용완! 근데 html header 작성후 확인했더니 헤더가 찍히지.. 2022. 10. 13. 제이쿼리 맛보기 $('.gnb').on('mouseenter', function() { $('#header').addClass('on'); }); 2번째 단어는 대문자 적용하기 Class 2022. 9. 16. 이전 1 2 3 다음
