본문 바로가기

Library/jQuery11

[메소드] 시각적인 효과 관련 Effect 메소드페이지 내에 애니메이션 효과를 주기위해 사용되는 메소드 집합 hide() / show() / toggle()객체 . hide ( ms단위 )- 크기가 작아지고 희미해지면서 사라진다.- f12 확인시 hight와 width가 점점 작아지더니 display=none 처리된다.- 매개변수로 사라지는데 소요되는 시간을 ms단위로 입력하며,   생략시 기본값은 0이다.객체 . show ( ms단위 )- 사라졌던 객체의 크기가 점점 커지고 선명해지면서 나타난다.객체 . toggle ( ms단위 )- hide상태이면 show로, show상태면 hide로 효과를 준다. fadeIn() / fadeOut() / fadeToggle()객체 . fadeOut ( ms단위 )- 요소가 점점 투명해지면서 사라.. 2022. 12. 29.
[메소드]이벤트 핸들러 / 이벤트 이벤트핸들러 연결이벤트 핸들러란? 이벤트 발생시 실행될 function을 말한다.연결방법1) 이벤트 메소드$( '선택자' ) . 이벤트 ( function(){ ... } )중복해서 작성했을 시 둘다 구현 됨(중복된 속성은 덮어쓰기가 됨)  연결방법2) on 메소드$( '선택자' ) . on ( "이벤트명", function(){ ... } )한 요소에 여러개의 이벤트를 걸고자 한다면,>> { 이벤트명: 익명함수, 이벤트명: 익명함수, ... } 의 객체를 만들어서 on의 매개변수로 넣는다. // 객체로 다수 전달하기, 이때는 이벤트명에 따옴표를 붙일 필요가 없다 $('#test').on({mouseenter:function(){}, mouseout:function(){}});  연결방법3) on 메소드.. 2022. 12. 27.
[외부툴] 편리한 UI 제작 : 부트스트랩 부트스트랩Bootstrap, 무료 프론트앤드 프레임워크간단하게 스타일을 적용할 수 있다.부트스트랩탄생배경 : 트위터의 직원인 Mark Otto와 Jacob Thornton가 수많은 직원들의 프론트엔드 결과물을 병합할때 생기는 일관성 유지의 문제를 해결하고자 만들게 됨.글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지, 아이콘, 드롭다운 메뉴, 버튼, 탭, 리스트, 메뉴바, 페이지 이동 바, 알림 메시지, 썸네일, 진행 바 등의 요소들을 내장하고 있다.반응형 웹 디자인을 지원한다. 준비하기W3Schools 들어가기    >  Tutorials  >  Learn bootstrap 어느정도 안정성이 인증된 Bootstrap 4버전 클릭왼쪽 목록 중 BS4 Get Started  > 스크롤 내려서 Bootst.. 2022. 12. 27.
[메소드] 반복할때는 each(), 일치여부는 is() each() 메소드jQuery식 반복문이다.jQuery용 반복용 메소드 : $ . each( 요소 , function(){ ... })배열의 모든 인덱스에 순차적으로 접근 혹은 객체가 가지고 있는 모든 속성에 순차적으로 접근하고자 할때 for in문과 유사하게 수행되는 메소드[표현법1]  $.each(배열|객체, function([매개변수1, 매개변수2]){ ... }) [표현법2]  $(배열).each(function([매개변수1, 매개변수2]){ ... })        >> 표현법2는 객체에서 정상작동 하지 않는다. *****삽입된 함수는 각 요소에 순차적으로 접근할때 마다 자동으로 실행이 된다.>> 이때 2개의 값을 전달받기 때문에 함수의 매개변수로 활용할 수 있다.매개변수 1 : - 배열을 제시.. 2022. 12. 27.
[메소드] 요소 생성 및 제거 요소 생성과 제거jQuery에서 활용하는 방법을 알아보자동적으로 요소 생성하기동적으로 요소를 생성한다는것은 , 처음에는 페이지에 없던 요소가 어떠한 이벤트로 인해 생성되는 것을 의미한다.방법1), 방법2) JavaScript 방식 사용하기- DOM 노드생성과 관련된 메소드 자세히 보러가기- 방법1)   document.getElementById() 와 innerHTML 속성 활용- 방법2)   document.createElement(), document.createTextNode(), appendChild() 사용방법3)  jQuery 방식 사용하기- 3-1) $('') 으로 태그 요소 생성 후       .text() , .html() 메소드를 사용하여 텍스트 노드 추가하기- 3-2) $('원하는 텍.. 2022. 12. 27.
[문법] 콜백 함수 활용하기 (JavaScript 개념) 콜백함수 Callback Function콜백함수는 JavaScript에서 함수를 활용하는 방법 중 하나로jQuery에서도 그 개념을 활용할 수 있다.콜백함수란?자바스크립트에서 함수는 객체이다. >> 함수의 파라미터로 함수를 전달할 수 있다.>> 함수 안에서 전달받은 또다른 함수를 실행한다 == 콜백함수비동기를 동기로 처리할 때 활용- 콜백은 테스크가 끝나기 전에 함수가 실행되지 않는 것을 보장하기 때문function print(callback) { //callback 함수를 파라미터로 받고있다. callback(); //해당 함수를 호출하고 있다}//콜백함수 예시1const message = function() { console.log("This message is shown after 3 s.. 2022. 12. 27.
[메소드] 속성에 접근하기 / JavaScript와 비교 메소드jQuery에서 활용되는 메소드들에 대해 알아보자 속성에 접근하는 메소드jQuery는 속성명으로 직접접근이 불가능하여 메소드를 활용해야 한다.일부 메소드들은 전달값을 없앨경우 요소의 속성값을 리턴한다.일부 메소드들은 값을 변경 후 요소를 다시 반환하기 때문에 메소드 체이닝이 가능하다 jQuery방식JavaScript방식■ 스타일 객체.css('스타일속성', '속성값') 객체.style.스타일속성 = '속성값'- 스타일속성만 입력하면 해당 값을 반환한다.- 메소드 체이닝 가능 (자기자신 리턴)- 매개변수로 속성이 담긴 객체 { } 를 넘김으로써 여러가지 속성을 지정할 수 있다. - 스타일속성명은 JavaScript방식과 동일하다.- 속성값으로 빈 문자열 "" 를 입력하면 원래의 값으로 돌아간다.■ 내.. 2022. 12. 27.
[메소드] 필터링으로 재선택 / 탐색해서 재선택 필터링 메소드선택된 요소들 중에서 다시 일부를 선택한다.필터링 관련 메소드$(A) . first()   :- 선택된 요소들 중에 첫번째 객체 반환$(A) . last()    :- 선택된 요소들 중에 마지막 객체 반환$(A) . eq(n)     :- 순번의 인덱스가 n번째인 객체 반환- 배열에서도 쓸 수 있다.$(A) . filter('선택자')  :- 선택된 요소들 중에 선택자에 만족하는 객체들 반환$(A) . not('선택자')     :- 선택된 요소들 중에서 선택자를 만족하지 않는 객체들 반환  순회 메소드탐색(순회) 메소드. Traversing선택된 요소들의 주변을 탐색해서 선택한다.Anscestors 메소드기준이 되는 요소의 상위요소들(조상)을 선택할 수 있는 메소드$(A) . parent(.. 2022. 12. 27.
[선택자] HTML 요소를 선택하는 방법 선택자jQuery에서 HTML요소를 선택하는 방법에 대해서 알아보자.일부는 순수 JavaScript에서 사용하는 방법과 비교해보았다.기본선택자태그선택자 : $( '태그명' )    / document.getElementsByTagName('태그명')아이디선택자 : $( '#아이디' )   /  document.getElementById('아이디')클래스선택자 : $( ' . 클래스' )   /  document.getElementsByClassName('클래스명')>>> 여러종류의 요소들 선택할때는 , 로 나열한다    ex) $( 'p, h5, #id1' )  자손선택자와 후손선택자자손선택자  : $( '선택자1 > 선택자2' )- 선택자1의 바로 하위에 있는 요소들 중 선택자2에 해당하는 요소들 선택.. 2022. 12. 26.
[기초] 기본 문법 / this키워드 기초문법jQuery을 활용하기 위한 필수 내용들에 대해 숙지하도록 한다.jQuery 구문 시작하기jQuery 로는 주로 DOM 요소를 다루는 구문을 작성하게 된다이때, jQuery가 요소보다 위에 기술되면 적용되지 않는다.>> 문서상에 요소가 다 만들어진 후 jQuery 구문들이 실행되도록 설정한다.   (선언적 함수 제외)이를 위한 방법으로는 JavaScript 방식, jQuery 방식 2가지로 나뉜다.순수 JavaScript 방식   - onload 이벤트속성으로 문서내의 모든 요소들이 다 로드되고 나서,     또한 연동되어있는 외부문서들도 다 가지고 온 뒤에 실행된다.   - 문서 내 단 한번만 작성가능하다. (중복작성시 마지막 작성건만 출력) jQuery 방식   - 외부 리소스 및 이미지 로딩.. 2022. 12. 26.
[개요] 정의 / 시작하기 jQuery 개요jQuery에 대해서 알아보고 사용할 준비를 해보자. jQuery란?자바스크립트 언어만으로 구현하기에 복잡했던 구문 작성들을 간소화 하기 위해 John Resig에 의해 개발된 JavaScript 라이브러리 DOM 조작, 이벤트 처리, 애니메이션, AJAX 요청 등을 간편하게 할 수 있다.본 정체성은 라이브러리 이지만 브라우저에서 제공하는 DOM API나 AJAX API를 사용하여 동작하기 때문에 API라고도 보는 경우가 있다.장점 : - DOM 요소와 관련된 구문을 보다 쉽게 구현할 수 있다.- AJAX(비동기식 통신), 이벤트 처리 등등 폭넓게 지원한다.단점 :- 다소 무거워진다.- 모던js와 리액트, 뷰 등의 프레임워크 등장으로 레거시가 되어가고 있다.jQuery 공식문서https:.. 2022. 12. 26.

티스토리툴바