728x90 jquery7 [jQuery] 부모/자식 요소 선택자 jQuery에서 parent() 메서드와 children() 메서드를 이용해서, 특정 요소의 부모 요소와 자식 요소를 선택할 수 있습니다. 1st Line #target1 #target2 #target3 2nd Line #target4 #target5 #target6 3번째 줄의 코드에서는 id가 target1인 요소의 부모 요소의 background-color 값을 red로 설정합니다. 4번째 줄의 코드에서는 id가 line2인 요소의 자식 요소들의 color 값을 blue로 설정합니다. nth-child(n) 선택자를 사용하면 형제 요소들을 선택할 수도 있습니다. 괄호 안에는 숫자, an+b, even, odd와 같은 값이 들어갈 수 있습니다. * an+b : a, b는 상수이며, n에는 음이 아닌 .. 2023. 12. 29. [jQuery] 요소의 복제 - clone() 메서드 jQuery에서 clone() 메서드를 이용해 하나의 요소를 복제할 수도 있습니다. 다음의 예시에서는 clone() 메서드 다음에 appendTo() 메서드를 이어서 사용하였습니다. * 이렇게 메서드 여러개를 이어서 사용하는 것을 Method Chaining이라고 합니다. 1st Line #target1 #target2 #target3 2nd Line #target4 #target5 #target6 2023. 12. 28. [jQuery] 요소의 이동 (append, prepend) jQuery를 이용해서 웹페이지에 1) 새로운 요소를 추가하거나 2) 기존의 요소를 이동할 수 있습니다. 1) 새로운 요소를 추가하는 것은 append()나 prepend() 메서드를 활용할 수 있습니다. 2) 기존의 요소를 이동하기 위해서는 appendTo()와 prependTo() 메서드를 활용할 수 있습니다. 다음 코드와 실행 결과를 통해서 append() 와 appendTo() 메서드의 작동 방식을 알 수 있습니다. 1st Line #target1 #target2 #target3 2nd Line #target4 #target5 #target6 append() 의 경우, 어디에 넣을지 먼저 선택한 뒤에("#line2") 전달 받은 내용('#target7')을 삽입합니다. appendTo()의 경우,.. 2023. 12. 28. [jQuery] prop() 메서드 vs attr() 메서드 jQuery에서 prop() 메서드와 attr() 메서드는 이름으로부터 유추할 수 있듯이, 각각 property와 attribute을 가져오거나 변경합니다. property와 attribute는 둘 다 "속성"으로 번역이 될 수 있는데, 의미하는 바는 다릅니다. property의 경우, 자바스크립트의 관점에서의 속성을 뜻합니다. 버튼의 disabled 여부, 체크박스가 체크되었는지 등이 그 예시입니다. 즉, HTML 코드에서는 보이지 않는 요소의 상태와 관련된 역할을 합니다. 자바스크립트의 관점이기 때문에, property의 변경은 주로 페이지의 내부 동작을 변경하는 것입니다. 따라서 prop() 메서드는 주로 불리언 값을 다루게 됩니다. let isChecked = $('#ex_checkbox').pr.. 2023. 9. 21. [jQuery] html(), text() 메서드 jQuery에서 html() 메서드와 text() 메서드는 선택한 요소의 내용을 가져오거나 변경합니다. 다음은 각 메서드의 사용 구문입니다. .html() .html(htmlString) .text() .text(textString) 메서드가 인자를 받지 않으면, 선택된 요소의 내용을 가져옵니다. 만약 메서드가 인자를 받았다면, 선택된 요소의 내용을 전달받은 인자로 변경합니다. 다음의 코드 예시를 통해 메서드의 주요 사용 방법을 알아보겠습니다. Difference between html() and text() Hello World! 12행 : html() 메서드를 통해 가져온 h1 태그의 내용을 h1_content 변수에 저장합니다. 13행 : html() 메서드를 통해 id 값이 "ex1"인 요소의 h.. 2023. 9. 20. [jQuery] css() 메서드 jQuery에서 css() 메서드는 선택 요소의 css 속성 값을 가져오거나 변경합니다. 다음은 css() 메서드의 사용 구문입니다. .css(propName) .css(propName, value) 다음의 코드 예시를 통해 메서드의 주요 사용 방법을 알아보겠습니다. Title of Page 12행 : css() 메서드를 통해 가져온 h1 태그의 "color" 속성 값을 prev_color 변수에 저장합니다. 13행 : css() 메서드를 통해 기존 h1 태그의 "color" 속성 값을 변경합니다. css() 메서드가 선택할 수 있는 요소가 여러 개라면, 웹페이지에서 가장 먼저 찾은 요소에 동작하게 됩니다. css() 메서드 다수의 속성 값을 선택하거나 변경할 수도 있습니다. 이 때는 속성들로 구성된 배.. 2023. 9. 13. 이전 1 2 다음 반응형
