728x90 Frontend52 [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] remove(), empty() 메서드 jQuery의 remove() 메서드는 선택한 요소를 웹 페이지에서 삭제합니다. empty() 메서드는 삭제한다는 점에서 유사하지만, 선택된 요소의 내용/자식 요소만 삭제한다는 차이가 있습니다. 다음 코드는 remove() 메서드와 empty() 메서드가 사용된 코드입니다. 111 222 333 444 이 HTML 코드는 삭제되는 요소를 제외한 다음 코드와 같은 결과를 만듭니다. 444 2023. 9. 22. [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. [jQuery] addClass(), removeClass() 메서드 HTML 삽입 미리보기할 수 없는 소스 addClass()를 사용해서 만든 버튼입니다. 이번 글에서는 이러한 버튼을 만드는 코드에 대해서 설명하겠습니다. $ 함수는 요소, 클래스, 태그 등을 선택할 수 있습니다. 이 때 여러 개의 요소, 클래스, 태그 등을 선택하고자 할 때는 쉼표로 구분해서 작성하면 됩니다. $("#id3, .class2, h1") $ 함수로 선택한 것들에 일괄적으로 클래스를 추가하거나 삭제할 수 있습니다. addClass() 메서드가 전자에, removeClass() 메서드가 후자에 해당합니다. 여러 개의 클래스를 동시에 추가하거나 삭제할 수 있는데, 이 때는 스페이스로 각 클래스명을 구분하면 됩니다. $("#button_ex").addClass("animated bounce"); /.. 2023. 9. 12. 이전 1 2 3 4 5 6 ··· 9 다음 반응형