본문 바로가기

Front15

06. jQuery Effects 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() .. 2020. 8. 28.
05. jQuery Event Methods 이벤트 란? 웹 페이지가 응답 할 수있는 모든 방문자의 행동을 이벤트라고 하고 어떤 일이 발생하는 정확한 순간을 나타냅니다. 요소 위로 마우스 이동 라디오 버튼 선택 요소 클릭 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()메서드는 선택한 요소에 대해 하나 .. 2020. 8. 28.
04. jQuery HTML Dimensions Dimensions (박스 모델) width() 요소의 너비를 설정하거나 반환합니다 (패딩, 테두리 및 여백 제외) height() 요소의 높이를 설정하거나 반환합니다 (패딩, 테두리 및 여백 제외) innerWidth() 요소의 너비를 반환합니다 (패딩 포함) innerHeight() 요소의 높이를 반환합니다 (패딩 포함) outerWidth() 요소의 너비를 반환합니다 (패딩, 테두리 및 여백 포함) outerHeight() 요소의 높이를 반환합니다 (패딩, 테두리 및 여백 포함) width(), height() See the Pen vYGmpdm by miae (@flato) on CodePen. Document와 Window 비교 1. Document (전체 문서 크기) - 창크기에 상관없이 일정.. 2020. 8. 28.
03. jQuery HTML jQuery DOM 조작 jQuery의 매우 중요한 부분 중 하나는 DOM을 조작 할 수 있다는 것입니다. DOM = 문서 개체 모델 DOM은 HTML 및 XML 문서에 액세스하기위한 표준을 정의합니다. "W3C DOM (문서 개체 모델)은 프로그램과 스크립트가 콘텐츠, 구조 및 콘텐츠에 동적으로 액세스하고 업데이트 할 수 있도록하는 플랫폼 및 언어 중립적 인터페이스입니다. 문서 스타일. " 콘텐츠 가져오기 요소의 콘텐츠를 가져오거나 설정할 수 있습니다. text() 선택한 요소의 텍스트 내용을 설정하거나 반환합니다. html() 선택한 요소 (HTML 마크 업 포함)의 내용을 설정하거나 반환합니다. val() 양식 필드의 값을 설정하거나 반환합니다. text(), html() See the Pen MW.. 2020. 8. 20.
02. jQuery Selectors 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") 의 자식 중 요소 선.. 2020. 8. 20.
01. Hello jQyery jQuery란? jQuery의 목적은 웹 사이트에서 JavaScript를 훨씬 쉽게 사용할 수 있도록하는 것입니다. 여러 줄의 자바스크립트로 처리해야 할 작업을 한줄로 처리할 수 있도록 합니다. 예를 들어 폰트 사이즈를 35px로 변경하는 스크립트를 작성하려고 한다면... jQuery를 이용하면 훨씬 쉽게 작성할 수 있습니다. javascript document.getElementById("demo").style.fontSize = "35px"; jQuery $("#demo").css("font-size", "35px"); 웹페이지에 jQuery 추가 jQuery를 사용하려면 jQuery 라이브러리가 필요합니다. 아래의 2가지 방법으로 연결하여 사용할 수 있습니다. 1. jQuery 다운로드 아래 사이트.. 2020. 8. 20.
05. 함수 [펌] 벨로퍼트와 함께하는 모던 자바스크립트 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.. 2020. 8. 19.
04. 조건문 [펌] 벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us/basics/04-conditions.html 04. 조건문 · GitBook 04. 조건문 조건문을 사용하면 특정 조건이 만족됐을 때 특정 코드를 실행할 수 있습니다. if 문 가장 기본적인 조건문은 if 문입니다. if문은, "~~하다면 ~~를 해라" 를 의미합니다. 예시 코드를 한�� learnjs.vlpt.us 조건문을 사용하면 특정 조건이 만족됐을 때 특정 코드를 실행할 수 있습니다. if 문 가장 기본적인 조건문은 if 문입니다. if문은, "~~하다면 ~~를 해라" 를 의미합니다. 예시 코드를 한번 봅시다. const a = 1; if (a + 1 === 2) { console.log('a + 1 이 2 .. 2020. 8. 18.
03. 연산자 [펌] 벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us/basics/03-operator.html 03. 연산자 · GitBook 03. 연산자 연산자에 대해서 알아봅시다. 연산자는 프로그래밍 언어에서 특정 연산을 하도록 하는 문자입니다. 예를 들어서, 우리가 변수와 상수를 배울 때 다음과 같은 코드를 작성했었지요? let learnjs.vlpt.us 연산자에 대해서 알아봅시다. 연산자는 프로그래밍 언어에서 특정 연산을 하도록 하는 문자입니다. 예를 들어서, 우리가 변수와 상수를 배울 때 다음과 같은 코드를 작성했었지요? let value = 1; // 변수 선언 value = 2; // 대입 연산자 여기서 두번째 줄에서 사용된 = 문자가 바로 연산자입니다. 연산자의 종류.. 2020. 8. 17.
02. 변수와 상수 [펌] 벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us/basics/02-variables.html 02. 변수 · GitBook 02. 변수와 상수 변수와 상수에 대해서 알아봅시다. 변수와 상수는, 특정 이름에 특정 값을 담을 때 사용합니다. 예를 들어서 우리가 value 라는 이름에 1 이라는 값을 넣는다고 가정해봅시다. 그러 learnjs.vlpt.us 변수와 상수에 대해서 알아봅시다. 변수와 상수는, 특정 이름에 특정 값을 담을 때 사용합니다. 예를 들어서 우리가 value 라는 이름에 1 이라는 값을 넣는다고 가정해봅시다. 그러면, 코드를 이렇게 입력하면 됩니다. let value = 1; 그러면, 앞으로 우리가 value 를 조회하면 value 는 1을 가르키게.. 2020. 8. 17.