Web
-
[jQuery] 19. Traversing - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:25
jQuery Traversing 1. What is Traversing? jQuery traversing는 다른 요소와 그들의 관계를 기준으로 HTML 요소를 찾는데 사용됩니다. 한 요소 선택을 시작으로 원하는 요소에 도달할때까지 이동하여 찾습니다. 아래 이미지는 구성 트리를 묘사한 것 입니다. jQuery traversing에서, 위로 올라가거나(ancestor), 내려가거나(descendant), 옆으로 이동할 수 있습니다. 위 그림의 설명: - 요소는 의 부모(parent)이고, 모든 것의 조상(ancestor)이다. - 요소는 두 의 부모이고, 의 자식(child)이다. - 왼쪽 요소는 의 부모이고, 의 자식이고, 의 후손(descendant)이다. - 요소는 왼쪽 의 자식이고, 과 의 후손..
-
[jQuery] 18. dimension - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:25
jQuery - Dimensions 1. jQuery Dimension Methods jQuery는 면적을 작업하기 위한 중요한 여러가지 메소드를 가지고 있습니다: - width() - height() - innerWidth() - innerHeight() - outerWidth() - outerHeight() 2. jQuery Dimensions [ 출처: W3Schools ] 3. jQuery width() and height() Methods width() 메소드는 요소의 너비(width)를 설정하거나 반환합니다. height() 메소드는 요소의 높이(height)를 설정하고나 반환합니다. 아래 예제는 div 요소의 너비와 높이를 반환하는 예제입니다. 1234567 $("button").click(..
-
[jQuery] 17. CSS() - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:23
jQuery - css() Method 1. jQuery css() Method css() 메소드는 선택된 요소의 하나 이상의 스타일 속성을 설정하거나 반환합니다. 2. Return a CSS Property 특정 CSS 속성 값을 반환하기 위해서, 아래 문법을 사용합니다: css("propertyname"); 아래 예제는 처음 매치되는 요소의 배경색을 반환하는 예제입니다: 12345678910111213141516171819202122232425$(document).ready(function(){$("button").click(function(){alert("Background color = " + $("p").css("background-color"));});}); This is a heading T..
-
[jQuery] 16. CSS Classes - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:22
jQuery - Get and Set CSS Classes jQuery에서, CSS 요소를 조작하는 것은 쉽습니다. 1. jQuery Manipulating CSS jQuery는 CSS 조작을 위해서 몇 가지 메소드를 가지고 있습니다. - addClass() - removeClass() - toggleClass() - css() 2. Example Stylesheet 아래 나오는 스타일시트는 이번 페이지의 모든 예제에 사용될 것 입니다. 12345678.important { font-weight: bold; font-size: xx-large;}.blue { color: blue;}cs 3. jQuery addClass() Method 아래 예제는 다른 요소에 class 속성을 추가하는 방법을 보여줍니다..
-
[jQuery] 15. Remove - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:22
jQuery - Remove Elements 1. Remove Elements/Content 요소와 내용을 삭제하기 위한, 2 개의 jQuery 메소드가 있습니다: - remove() - empty() 2. jQuery remove() Method remove() 메소드는 선택된 요소와 그의 자식 요소들까지 제거합니다. 12345678910111213141516171819202122232425262728$(document).ready(function(){$("button").click(function(){$("#div1").remove();});}); This is some text in the div.This is a paragraph in the div.This is another paragraph ..
-
[jQuery] 14. Add - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:21
jQuery - Add Elements 1. Add New HTML Content 새로운 내용을 추가하는데 사용되는 4 가지 jQuery 메소드를 살펴볼 것입니다: - append() - prepend() - after() - before() 2. jQuery append() Method append() 메소드는 선택된 HTML 요소의 맨 끝에 내용을 추가하는 메소드입니다. 12 $("p").append("Some appended text.");cs 3. jQuery prepend() Method prepend() 메소드는 선택된 HTML 요소의 맨 처음에 내용을 추가하는 메소드입니다. 12 $("p").prepend("Some prepended text.");cs 4. Add Several New El..
-
[jQuery] 13. Set - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:20
jQuery - Set Content and Attributes 1. Set Content - text(), html(), and val() get과 마찬가지로 3 가지 메소드를 이용하여 설정합니다: - text() - html() - val() 123456789101112131415161718192021222324252627282930313233 $(document).ready(function(){$("#btn1").click(function(){$("#test1").text("Hello world!");});$("#btn2").click(function(){$("#test2").html("Hello world!");});$("#btn3").click(function(){$("#test3").val("..
-
[jQuery] 12. Get - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:20
jQuery - Get Content and Attributes jQuery는 HTML 요소와 속성을 변경하거나 조작하는 강력한 메소드를 가지고 있습니다. 1. jQuery DOM Manipulation jQuery의 가장 중요한 부분은 DOM을 조작하는 가능성입니다. jQuery는 DOM 관련 메소드의 다양한 종류로, 요소나 속성을 조작하거나 접근하는데 용이합니다. 2. Get Content - text(), html(), and val() 3 가지 간편하면서도 유용한 DOM 조작을 위한 jQuery 메소드: - text() - 선택된 요소의 텍스트 내용을 설정하거나 반환하는 메소드 - html() - 선택된 요소의 내용을 설정하거나 반환하는 메소드 - val() - 서식 필드의 값을 설정하거나 반환하..