Web/jQuery
-
[jQuery] 22. Siblings - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:27
jQuery Traversing - Siblings 형제(Siblings)는 같은 부모를 공유합니다. 1. Traversing Sideways in The DOM Tree DOM 트리에서 옆으로 항해하는 여러가지 메소드가 있습니다: - siblings() - next() - nextAll() - nextUntil() - prev() - prevAll() - prevUntil() 2. jQuery siblings() Method siblings() 메소드는 선택된 요소의 모든 형제 요소를 반환합니다. 아래 예제는 의 모든 형제 요소를 반환합니다. 1234567891011121314151617181920212223242526272829303132.siblings * { display: block; borde..
-
[jQuery] 21. Descendants - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:27
jQuery Traversing - Descendants 1. Traversing Down the DOM Tree DOM 트리에서 내려가기 위한 2 가지 유용한 jQuery 메소드가 있습니다: - children() - find() 2. jQuery children() Method children() 메소드는 선택된 요소의 모든 직후 자식들을 반환합니다. 이 메소드는 DOM 트리의 단일 레벨 아래만 항해합니다. 123456789101112131415161718192021222324252627282930313233.descendants * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px;}$..
-
[jQuery] 20. Ancestors - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:26
jQuery Traversing - Ancestors 조상(ancestor)는 부모, 할아버지, 증조-할아버지, 등등 입니다. 1. Traversing Up the DOM Tree DOM 트리를 거슬러 올라가기 위한 3 가지 메소드가 있습니다: - parent() - parents() - parentsUntil() 2. jQuery parent() Method parent() 메소드는 선택된 요소의 직전 부모 요소를 반환합니다. 이 메소드는 DOM 트리의 단일 레벨만 거슬러 올라갑니다. 1234567891011121314151617181920212223242526272829303132333435363738394041 .ancestors * { display: block; border: 2px solid ..
-
[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 ..