You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
📚 제이쿼리 AJAX 요청 문법 정리
제이쿼리 AJAX 요청 이번 포스팅에는 ajax의 기본개념 간단 정리와 제이쿼리 ajax 메소드를 살펴봅니다. AJAX 란? AJAX란 asynchronous Javascript and XML입니다. 요즘은 XML보다 HTML이나 JSON을 더 많이 쓰지만, 개발 당시 xml이 주류라서 이름이 그렇게 된 것입니다. 기존의 웹에서는 한 번 페이지를 로딩하면 다른 페이지를 로딩하기 위해서 링크를 타고 넘어가야 했습니다. 그렇게 되면 흔히 말하는 페이지 깜빡임이 발생합니다. 구글 검색을 해보면, 페이지를 전환하지 않고도 예상 검색어와 결과를 보여줍니다. Gmail도 마찬가지죠. 바로 AJAX 기술을 사용하였기 때문입니다. 이처럼 비동기적으로 서버에 요청을 하여 페이지 전환 없이도 새로운 데이터를 가져올 수 있..
📚 제이쿼리 이벤트 종류 & 설정 총정리
jQuery 이벤트 문법 웹 페이지는 사용자와 수많은 상호작용을 하게 된다. 사용자는 마우스를 움직이거나, 요소를 클릭하거나, 텍스트 박스에 글을 쓰는 등 수많은 종류의 동작(action)을 수행한다. 이러한 사용자의 동작들이 모두 이벤트(event)를 발생시키는 것이다. 정리하자면, 이벤트가 발생했다는 것은 웹 페이지에서 특정 동작이 발생하여, 웹 브라우저가 그 사실을 알려주는 것을 의미한다. 특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler)라는 함수를 작성하여 연결해야만 한다. 이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행하게 되는 원리이다. 제이쿼리는 자바스크립트의 이벤트 헨들러와 동일하게 ..
📚 제이쿼리 메소드 종류 총정리
jQuery 메소드 정리 요소 getter & setter 메소드 설명 .html() 해당 요소의 HTML 콘텐츠를 반환하거나 설정함. .text() 해당 요소의 텍스트 콘텐츠를 반환하거나 설정함. .width() 선택한 요소 중에서 첫 번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정함. .height() 선택한 요소 중에서 첫 번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정함. .attr() 해당 요소의 명시된 속성의 속성값을 반환하거나 설정함. .val() 요소의 값을 반환하거나 설정함. .value = 같은 거 html() == innerHTML과 같다. 안녕하세요. text() == textContent와 같다. 안녕하세요. width(), height() // setter $("i..
📚 제이쿼리 선택자(Selector) 종류 총정리
jQuery CSS 선택자 모음 기본 선택자 선택자 예제 설명 * $("*") 모든 요소를 선택 .class $(".class") 지정한 클래스를 가지는 모든 요소를 선택 element $("element") 지정된 태그명을 가지는 모든 요소를 선택 #id $("#id") 지정한 ID 속성을 가지는 하나의 요소를 선택 , $("selector1, selecotr2") 모든 지정한 선택자들의 결과들을 결합하여 선택 자식 선택자 (child) 선택자 예제 설명 :first-child $("div:first-child") 부모의 첫 번째 자식인 모든 요소를 선택 :first-of-type $("div:first-of-type") 동일한 요소 이름의 형제 중 첫 번째 요소를 모두 선택 :last-child ..
📚 자바스크립트 this vs 제이쿼리 $(this) 차이
자바스크립트 this 자바스크립트에서 this는 현재 실행 컨텍스트에서 참조되는 객체를 가리킨다. 일반적으로 함수 내에서 사용되며, 함수 호출 방식에 따라 this가 가리키는 객체가 달라지게 된다. 예를들어 이베트 핸들러를 인라인으로 등록할 경우 함수내의 this는 버튼이 아닌 window 객체를 가리키게 된다. Button 반면 addEventListener 이벤트 핸들러 같은경우 이벤트에 바인딩된 요소를 가리킨다. 이것은 이벤트 객체의 currentTarget 프로퍼티와 같다. Button 제이쿼리 $(this) 자바스크립트 this와 제이쿼리 $(this)는 명칭은 같을 지라도 실제로 표시되는 정보는 서로 다르다. 제이쿼리에서 $(this)는 이벤트 핸들러 내에서 이벤트가 발생한 요소를 가리키는 역..
📚 jQuery 기본 문법 $() 정리
jQuery 기본 문법 $(선택자).동작함수1().동작함수2() $(선택자).동작함수1().동작함수2() 달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자이다. - 선택자를 이용하여 원하는 HTML 요소를 선택하고, - 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정한다. jQuery $객체 jQuery를 사용하기 위해서는 먼저 jQuery 객체를 생성하여야 한다. 생성된 jQuery 객체는 다양한 메소드를 가지는데, jQuery를 학습한다고 하는 것은 대체로 이 메소드를 사용하는 방법을 익히는 것이다. $() // jQuery() 함수의 축약형 jQuery() 함수는 전달되는 인수의 종류에 따라 다른 움직임을 하지만 결국 jQuery 객체를 반환한다. 인수의 종류..
📚 jQuery 설치 & 적용 방법
제이쿼리 설치 한때 전세계에서 가장 많이 쓰던 자바스크립트 라이브러리 설치 & 적용 방법에 대해 포스팅 해본다. 1. 로컬 다운로드 방법 아래 링크로 들어가 jquery 파일을 다운로드 한뒤, 자신의 프로젝트에 넣으면 된다. jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jquery.c..
