Traversing(순회) "순회"를 의미하는 traversing은 다른 요소와의 관계를 기반으로 HTML 요소를 찾거나 선택하는데에 사용된다. 하나의 선택으로 시작하여 원하는 요소에 도달할 때까지 해당 선택을 통해 이동한다. 아래 이미지는 HTML 페이지를 트리(DOM 트리)로 보여준다. traversing을 사용하면 선택한(현재) 요소에서 시작하여 트리에서 쉽게 위(상위), 아래(자손) 및 옆으로(형제) 이동할 수 있다. 이 이동을 DOM 트리 통과(또는 순회)라고 한다. 요소는 의 부모 이며 그 안에 있는 모든 것의 조상이다. 요소는 요소의 부모이자 의 자식이다. 왼쪽 요소는 의 부모 , 의 자식 및 의 자손이다. 요소는 왼쪽 의 자식 이며 및 의 자손이다. 두 요소는 형제다. (같은 부모를 공유함..
jQuery의 레이아웃 메소드 Layout 작업을 위한 몇 가지 중요한 메소드가 있다. width() height() innerWidth() innerHeight() outerWidth() outerHeight() width() / height() width() 메소드는 요소의 padding, border, margin를 제외한 width를 설정하거나 반환한다. height() 메소드는 요소의 padding, border, margin를 제외한 height를 설정하거나 반환한다. 지정된 요소 의 width와 height를 반환받기: $("button").click(function(){ var txt = ""; txt += "Width: " + $("#div1").width() + ""; txt += "H..
CSS 조작 jQuery에는 CSS 조작을 위한 몇 가지 방법이 있다. addClass() : 선택한 요소에 하나 이상의 클래스를 추가. removeClass() : 선택한 요소에서 하나 이상의 클래스를 제거. toggleClass() : 선택한 요소에서 클래스 추가/제거 간을 전환. css() : 스타일 속성을 설정하거나 반환. addClass() 다른 요소에 클래스 속성을 추가한다. 물론 클래스를 추가할 때 여러 요소를 선택할 수 있다. $("button").click(function(){ $("h1, h2, p").addClass("blue"); $("div").addClass("important"); }); addClass()메소드 내에서 여러 클래스를 지정할 수도 있다. $("button").c..
새 HTML 콘텐츠 추가 새 콘텐츠를 추가하는 데 사용되는 네 가지 jQuery 메소드는 아래와 같다. append() : 선택한 요소의 끝에 내용 삽입 prepend() : 선택한 요소의 시작 부분에 콘텐츠 삽입 after() : 선택한 요소 뒤에 내용 삽입 before() : 선택한 요소 앞에 콘텐츠 삽입 append() / prepend() append()메소드는 선택한 HTML 요소의 끝에 콘텐츠를 삽입한다. prepend()메소드는 선택한 HTML 요소의 처음에 콘텐츠를 삽입한다. $("p").append("Some appended text."); $("p").prepend("Some prepended text."); append() 및 prepend()를 사용하여 여러 새 요소 추가 appen..
jQuery의 매우 중요한 부분 중 하나는 DOM을 조작할 수 있는 가능성이다. jQuery에는 요소와 속성에 쉽게 액세스하고 조작할 수 있는 DOM 관련 메서드가 함께 제공된다. 콘텐츠 가져오기 - text(), html(), val() DOM 조작을 위한 간단하지만 유용한 세 가지 jQuery 메서드는 아래와 같다. text() : 선택한 요소의 텍스트 내용을 설정하거나 반환. html() : 선택한 요소의 내용을 설정하거나 반환(HTML 마크업 포함). val() : 양식 필드의 값을 설정하거나 반환. text() ,html()메소드를 사용하여 콘텐츠를 가져오기 : $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#b..
jQuery의 다양한 Effect hide() 와 show() hide() 와 show() 메소드를 사용하면 HTML 요소를 숨기거나 표시할 수 있다. $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); 문법 $(selector).hide(speed,callback); $(selector).show(speed,callback); speed 매개변수는 hide/show 속도를 지정하며 “slow”, "fast" 또는 밀리초 값을 사용할 수 있다. callback 매개변수는 또는 메소드가 완료된 후 실행되는 함수다. 속도 매개변수를 사용하여 hide()사용하기: $("button").cli..
DOM 이벤트 웹 페이지가 응답할 수 있는 모든 방문자의 행동을 이벤트라고 한다. 이벤트는 어떤 일이 발생하는 정확한 순간을 나타낸다. 예: 요소 위로 마우스 이동 라디오 버튼 선택 요소 클릭 "fires/fired" 라는 용어는 종종 이벤트와 함께 사용된다. 예: "키를 누르는 순간 키 누르기 이벤트가 발생한다." 몇 가지의 일반적인 DOM 이벤트 Mouse Events Keyboard Events Form Events Document/Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload 이벤트 메소드 문법 jQuery에서 대부분의 D..
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.com 기본 문법 jQuery는 HTML 요소를 선택 하고 요소에 대해 일부 작업을 수행하기 위해 맞춤 제작되었다. 기본 문법 : $(selector).action() jQuery 정의/액세스를 위한 $ 기호 (selector)..
