본문 바로가기

jQuery

[jQuery] 8. HTML Set 이전에 HTML 페이지에서 값을 가져오는 방법을 배웠습니다.같은 메서드를 사용해서 메서드내에 파라메터값을 넣으면 HTML 페이지의 값을 변경할 수 있습니다. 1. text("텍스트")2. html("태그가포함된내용")3. val("폼필드값")4. attr("바꿀속성값") [예제1] 값을 대체하는 예제 This is a paragraph.This is another paragraph.Input field: Set TextSet HTMLSet Value [예제2] 콜백을 사용 This is a bold paragraph.This is another bold paragraph.Show Old/New TextShow Old/New HTML [예제3] 속성을 바꾸는 예제 W3Schools.comChange hre.. 더보기
[jQuery] 7. HTML Get jQuery는 HTML엘리먼트와 속성들을 변화시키고 다룰 수 있는 파워풀한 메서드를 가지고 있습니다.즉 DOM을 jQuery를 사용하여 쉽게 조작할 수 있습니다. DOM이란?DOM은 HTML과 XML 문서에 액세스하기 위한 표준을 정의하는 W3C 문서 객체 모델입니다.W3C Document Object Model (DOM)은 프로그램과 스크립트를 동적으로 실행하고 문서내의 컨텐츠와, 구조, 스타일을 업데이트 할 수 있도록 하는 플랫폼이자 언어중립적인 인터페이스입니다. 컨텐츠 얻기 Get Contents DOM 조작을 위한 세 가지 간단하지만 유용한 방법은 다음과 같습니다.1. text() : 설정하거나 반환 선택된 요소의 텍스트 내용2. html() : (HTML 태그를 포함) 선택된 요소의 내용을 설정.. 더보기
[jQuery] 5. jQuery 이펙트 와우 정말 기대하고 고대하던 강좌입니다.이번강좌에서 다룰 예제는 아래와 같습니다. Hide, Show, Toggle, Slide, Fade, Animate jQuery 에서 엘리먼트를 숨기고 보이기 jQuery를 사용하면 HTML엘리먼트들을 숨기고 보여줄 수 있습니다.hide() and show() 메서드를 쓰면 됩니다.아래 예제를 실행해 보겠습니다. If you click on the "Hide" button, I will disappear.HideShow hide() and show() 는 두개의 파라메터를 사용할 수도 있습니다. speed와 callback입니다.문법은 다음과 같습니다. $(selector).hide(speed,callback)$(selector).show(speed,callback.. 더보기
[jQuery] 4. jQuery이벤트 이벤트란 무엇인가요?웹페이지가 응답할 수 있는 모든 사용자의 행동을 이벤트라 합니다.이벤트는 무언가가 일어나는 정확한 순간을 말합니다.예를 들면 엘리먼트 위에 마우스를 이동한다던가라디오버튼을 클릭하기엘리먼트를 클릭하기 등등 DOM 이벤트는 다음과 같은 것이 있습니다. jQuery 이벤트 함수 jQuery 이벤트 핸들링 메서드는 jQuery 내에 있는 코어함수들입니다.이벤트 핸들러는 무언가가 HTML에서 발생할때 호출되는 메서드들입니다. 만일 태그를 클릭했을경우에 이벤트가 발생하게 하려면 다음과 같이 사용할 수 있겠죠.$("p").click();그러나 이것만으로는 동작하지 않습니다.이벤트가 발생했을 때 처리하려면 이런식으로 이벤트에 함수를 전달해야 합니다.$("P").click(function(){ //여.. 더보기
[jQuery] 2. jQuery 문법 jQuery 문법 jQuery 문법은 HTML elements를 선택하고 액션을 주는 형태로 만들어져 있습니다.처음 보면 좀 이상한 자바스크립트 문법에 당황할 수도 있겠지만 몇번 사용해 보면 매우 직관적이고 편리하다는 것을 알 수 있습니다. 기본형태 : $(selector).action() - $는 jQuery라는 단어를 대체합니다. 즉 $로 줄여서 쓸 수 있습니다.- selector는 HTML elements를 찾습니다. - action은 elements를 수행합니다. 메서드의 형태로 되어 있습니다. 예)$(this).hide() --> 현재 element를 숨깁니다.$("p").hide() --> 모든 를 숨깁니다.$("p.test").hide() --> 모든 를 숨깁니다.$("#test").hide.. 더보기
[jQuery] 1. jQuery 시작하기 jQuery 1. jQuery 시작하기 w3school에 올라와 있는 내용을 번역하면서 공부한 내용입니다. jQuery를 시작하기 전에 알아야 하는 것들- html- css- javascript 위의 주제를 먼저 공부해야 합니다. jQuery란 무엇인가? jQuery는 자바스크립트 함수의 모음입니다.자바스크립트 프레임워크라고도 하지요. jQuery는 최고의 자바스크립트 라이브러리로서 가볍고 단순합니다. jQuery라이브러리는 다음의 것들을 담고 있습니다. • HTML element selections• HTML element manipulation• CSS manipulation• HTML event functions• JavaScript Effects and animations• HTML DOM tra.. 더보기