JQuery 복습 - Traversing 2 Siblings Siblings메서드들을 이용하여 선택자 기준으로 수직방향으로 형제노드를 탐색 할 수 있다. 형제는 동일한 부모노드를 갖는다. siblings 메서드 선택자의 모든 형제노드를 반환한다. $("h2").siblings().css({"color": "red", "border": "2px solid red"}); //자세히 살펴보면, h2와 수직으로있는(형제관계인) 메서드들은 선택되었지만, 하위레벨의 노드는 선택되지 않았다. siblings 메서드와 필터링 앞에서 보았던 메서드들과 마찬가지로 인자로 필터링 조건을 줄 수 있다. 형제노드중 특정한 노드를 선택 할 수 있다. $("h2").siblings("p.selected").css({"color": "red", "border": "2px solid red"}.. 2019. 8. 22. JQuery 복습 - Traversing https://www.w3schools.com/jquery/jquery_traversing_descendants.asp JQuery Traversing 선택자를 기준점으로 시작하여 원하는 요소에 도달 할 때까지 이동 할 수 있게 해준다. JQuery Traversing을 사용하면 선택한(현재)요소에서 시작하여 트리에서 쉽게 위(상위노드들), 아래(하위 노드들), 옆으로(형제노드들) 이동 할 수 있다. 이와같은 그림이 있을때 * 는 ul의 부모요소이다. 그리고 하위에 있는 모든 요소들의 ancestor(조상) 요소이다. * 요소는 양옆 li태그의 parent요소이다. 그리고 요소의 child이다. *왼쪽 태그는 태그들의 parant태그이다. 그리고 의 자식노드이며 또한 의 descendant노드이다. *양.. 2019. 8. 21. jQuery 복습 - 요소의 치수 //알다시피, Element는 Margin - Border - Padding순으로 껍데기(!)로 씌워져있다. 패!보!마!로 외웠던것을 기억하자(...) //width: 순수 Element의 너비 //height: 순수 Element의 높이 //innerWidth: Element 에 Padding을 더한 값 //innerHeight: Element에 Padding을 더한 값 //outerWidth: Element에 Border를 더한 값 //outerHeight: Element에 Boder를 더한 값 //width & height : 앞서 살펴본 메서드들처럼 파라미터를 넣어주면 set, 없으면 get이 된다. var txt = ""; txt += "Width of div: " + $("#div1").wid.. 2019. 8. 19. JQuery복습 - CSS 조작 //JQuery로 CSS를 조작 할 수 있다. //addClass - 선택된 요소에 하나 이상의 클래스를 추가 할 수 있다. //removeClass - 선택된 요소에 하나 이상의 클래스를 제거 할 수 있다. //toggleClass - 선택된 요소에 클래스를 추가/제거를 반복 할 수 있다. //css - style 속성을 지정 혹은 반환 (인자가 있느냐에 따라서 다름) //https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_addclass $("h1, h2, p").addClass("blue"); //세개의 태그에 blue클래스 추가 $("div").addClass("important"); //모든 div클래스에 important클래스 .. 2019. 8. 16. JQuery 복습 - DOM 추가 //새로운 HTML 내용을 덧붙이기. //append() : 선택자로 잡힌 요소의 "끝에" 콘텐츠를 넣는다. (자식노드로 들어간다) //prepend() : 선택자로 잡힌 요소의 "시작부분에" 콘텐츠를 넣는다. //after() : 선택자로 잡힌 요소의 "다음에" 콘텐츠를 넣는다. //before() : 선택자로 잡힌 요소의 "이전에" 콘텐츠를 넣는다. //append - 선택된 요소의 "마지막" 자식노드로 새로운 콘텐츠를 추가한다. $("p").append("Appended text "); //append 2 - ol하위의 "마지막" 자식노드로 새로운 li노드를 추가한다. $("ol").append("Appended item") //prepend - 선택된 요소의 "첫번째" 자식노드로 새로운 콘텐츠를 .. 2019. 8. 15. JQuery 복습 - DOM 조작1 https://www.w3schools.com/jquery/jquery_dom_add.asp 1) element의 값을 반환받을 수 있는 메서드들 //text - element의 textContent를 설정하거나 받환 받을 수 있다. //html - element의 content를 설정하거나 반환 받을 수 있다. //val - form fields의 값을 설정하거나 반환 받을 수 있다. //https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_html_get //text: textNode 내의 HTML Element를 무시하고 순수 Text Node만 반환한다. $("#btn1").click(function(){ alert("Text: " .. 2019. 8. 14. 이전 1 ··· 32 33 34 35 36 37 38 ··· 47 다음
