odada

Hide / Show hide()및 show()메서드를 사용하면 HTML 요소를 숨기고 표시 할 수 있습니다 hide() 요소를 숨깁니다. show() 요소를 보여줍니다. See the Pen OJNmQXr by miae (@flato) on CodePen. Fading 요소를 서서히 보여주거나 없앱니다. $(selector).fadeToggle(speed,callback); speed 매개 변수는 효과의 지속 시간을 지정하고 "slow", "fast"또는 milliseconds(2000) 값을 사용할 수 있습니다. 선택적 콜백 매개 변수는 페이딩이 완료된 후 실행되는 함수입니다. fadeIn() 숨겨진 요소를 서서히 보여줍니다. fadeOut() 요소를 서서히 안보이게 합니다. fadeToggle() ..

이벤트 란? 웹 페이지가 응답 할 수있는 모든 방문자의 행동을 이벤트라고 하고 어떤 일이 발생하는 정확한 순간을 나타냅니다. 요소 위로 마우스 이동 라디오 버튼 선택 요소 클릭 Mouse Events Keyboard Events Form Events Document/Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload 이벤트를 실행 시키려면 아래 구문과 같이 클릭 이벤트를 넣으면 됩니다. $("p").click(function(){ // action goes here!! }); on () 메서드 on()메서드는 선택한 요소에 대해 하나 ..

Dimensions (박스 모델) width() 요소의 너비를 설정하거나 반환합니다 (패딩, 테두리 및 여백 제외) height() 요소의 높이를 설정하거나 반환합니다 (패딩, 테두리 및 여백 제외) innerWidth() 요소의 너비를 반환합니다 (패딩 포함) innerHeight() 요소의 높이를 반환합니다 (패딩 포함) outerWidth() 요소의 너비를 반환합니다 (패딩, 테두리 및 여백 포함) outerHeight() 요소의 높이를 반환합니다 (패딩, 테두리 및 여백 포함) width(), height() See the Pen vYGmpdm by miae (@flato) on CodePen. Document와 Window 비교 1. Document (전체 문서 크기) - 창크기에 상관없이 일정..

애니메이션 스크롤링 공용 CDN 사용 script 추가 // scrollTo $('nav a').on('click', function (event) { $.scrollTo(this.hash || 0, 500); event.preventDefault(); }) https://github.com/flesler/jquery.scrollTo flesler/jquery.scrollTo Lightweight, cross-browser and highly customizable animated scrolling with jQuery - flesler/jquery.scrollTo github.com

https://github.com/eehd80/scrollup GitHub - eehd80/scrollup Contribute to eehd80/scrollup development by creating an account on GitHub. github.com ScrollUp은 모든 웹 사이트에서 쉽게 작동하는 사용자 정의 가능한 "Scroll to top"기능을 만드는 경량 jQuery 플러그인입니다. 사용하는 방법 jquery.scrollUp.min.js 파일을 포함하고 문서 헤드에 다음을 배치하기 만하면됩니다 (jQuery가 포함되어 있는지 확인). 기본 옵션 $(function () { $.scrollUp({ scrollName: 'scrollUp', // Element ID topDistanc..

jQuery DOM 조작 jQuery의 매우 중요한 부분 중 하나는 DOM을 조작 할 수 있다는 것입니다. DOM = 문서 개체 모델 DOM은 HTML 및 XML 문서에 액세스하기위한 표준을 정의합니다. "W3C DOM (문서 개체 모델)은 프로그램과 스크립트가 콘텐츠, 구조 및 콘텐츠에 동적으로 액세스하고 업데이트 할 수 있도록하는 플랫폼 및 언어 중립적 인터페이스입니다. 문서 스타일. " 콘텐츠 가져오기 요소의 콘텐츠를 가져오거나 설정할 수 있습니다. text() 선택한 요소의 텍스트 내용을 설정하거나 반환합니다. html() 선택한 요소 (HTML 마크 업 포함)의 내용을 설정하거나 반환합니다. val() 양식 필드의 값을 설정하거나 반환합니다. text(), html() See the Pen MW..

html의 요소를 선택하고 조작하려면 jQuery의 선택자를 사용해야 합니다. jQuery의 모든 선택기는 달러 기호와 괄호 ($ ())로 시작합니다. 태그 선택자 $("p") $("button").click(function(){ $("p").hide(); }); #id 선택자 $("#test") $("button").click(function(){ $("#test").hide(); }); .class 선택자 $(".test") $("button").click(function(){ $(".test").hide(); }); 추가 선택자 $("*") 모든 요소 선택 $(this) 현재 요소 선택 $("p.intro") 선택 $("p:first") 첫번째 요소 선택 $("ul > li") 의 자식 중 요소 선..

jQuery란? jQuery의 목적은 웹 사이트에서 JavaScript를 훨씬 쉽게 사용할 수 있도록하는 것입니다. 여러 줄의 자바스크립트로 처리해야 할 작업을 한줄로 처리할 수 있도록 합니다. 예를 들어 폰트 사이즈를 35px로 변경하는 스크립트를 작성하려고 한다면... jQuery를 이용하면 훨씬 쉽게 작성할 수 있습니다. javascript document.getElementById("demo").style.fontSize = "35px"; jQuery $("#demo").css("font-size", "35px"); 웹페이지에 jQuery 추가 jQuery를 사용하려면 jQuery 라이브러리가 필요합니다. 아래의 2가지 방법으로 연결하여 사용할 수 있습니다. 1. jQuery 다운로드 아래 사이트..

[펌] 벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us/basics/06-object.html 06. 객체 · GitBook 06. 객체 객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해줍니다. const dog = { name: '멍멍이', age: 2 }; console.log(dog.name); console.log(dog.age); 결과물은 다 learnjs.vlpt.us 객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해줍니다. const dog = { name: '멍멍이', age: 2 }; console.log(dog.name); console.log(dog.age)..

[펌] 벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us/basics/05-function.html 05. 함수 · GitBook 함수는, 특정 코드를 하나의 명령으로 실행 할 수 있게 해주는 기능입니다. 예를 들어서, 우리가 특정 값들의 합을 구하고 싶을 때는 다음과 같이 코드를 작성합니다. 한번, 이 작업을 함수로 만� learnjs.vlpt.us 함수는, 특정 코드를 하나의 명령으로 실행 할 수 있게 해주는 기능입니다. 예를 들어서, 우리가 특정 값들의 합을 구하고 싶을 때는 다음과 같이 코드를 작성합니다. const a = 1; const b = 2; const sum = a + b; 한번, 이 작업을 함수로 만들어보겠습니다. function add(a, b) { r..