프로그래밍/JQuery
-
JQuery로 DOM 다루기 - 요소 삭제프로그래밍/JQuery 2022. 10. 27. 23:29
요소를 삭제하는 방법으로 다음과 같다. 종류 설명 remove() 선택한 요소를 DOM 트리에서 삭제하며, 삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트 모두 함께 삭제한다. detach() 선택한 요소를 DOM 트리에서 삭제하며, 삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트는 삭제되지 않고, 계속 유지한다. empty() 선택한 요소의 자식 요소를 모두 삭제하며, remove()나 detach() 메소드와 달리 선택된 요소 그 자체는 삭제되지 않는다. unwrap() 선택한 요소의 부모 요소를 삭제한다. 첫번째 아이템 두번째 아이템 세번째 아이템 네번째 아이템 다섯번째 아이템 아이템 삭제 div 요소 삭제 div 요소 복구 자식 요소 삭제 부모 요소 삭제 위 코드에 스크립트를 추가하여 각 버튼요소..
-
JQuery로 DOM 다루기 - 요소 복제프로그래밍/JQuery 2022. 10. 26. 21:58
요소를 복제할 수 있는 메소드로 clone()에 대해 알아보자. clone() 메소드는 선택한 요소를 복사하여 새로운 요소를 생성한다. append(), appendTo() 메소드와 같이 사용해야하며, 기존의 선택한 요소를 복사하여 새로운 요소를 생성하는 방식이다. 예제를 통해 알아보자. 첫번째 아이템 두번째 아이템 세번째 아이템 아이템 복사 스크립트 추가 버튼 이벤트를 주어 firstItem 요소를 복제하여 list에 추가하는 스크립트를 추가한다. 위 스크립트는 아래와 같이 appendTo를 활용하여 대체할 수 있다.
-
JQuery로 DOM 다루기 - 요소 포함프로그래밍/JQuery 2022. 10. 25. 20:15
요소를 포함 할 수 있는 메소드를 알아보자. 종류 설명 wrap() 선택한 요소를 포함하는 새로운 요소를 추가 wrapAll() 선택한 모든 요소를 포함하는 새로운 요소를 추가 wrapInner() 선택한 요소에 포함되는 새로운 요소를 추가 첫번째 컨텐츠 두번째 컨텐츠 div 요소 추가 1. wrap() 적용 $(function(){ $('button').on('click',function(){ $('.content').wrap(""); // 각자 감싼다. }); }); 2. wrapAll() 적용 $(function(){ $('button').on('click',function(){ $('.content').wrapAll(""); // 한번에 감싼다. }); }); 3. wrapInner() 적용 $(..
-
JQuery로 DOM 다루기 - 요소 추가프로그래밍/JQuery 2022. 10. 23. 09:36
요소를 추가 할 수 있는 메소드를 알아보자. 종류 설명 append() 선택한 요소의 하위 요소 마지막에 새로운 요소나 컨텐츠를 추가 appendTo() append() 메소드와 같지만 소스의 타켓의 위치가 서로 반대 prepend() 선택한 요소의 하위 요소 처음에 새로운 요소나 컨텐츠를 추가 prependTo() prepend() 메소드와 같지만 소스의 타켓의 위치가 서로 반대 $('선택자').append('요소'); $('요소').appendTo('선택자'); // 요소와 선택자의 위치를 바꿔서 표현도 가능하다. 안녕하세요 반갑습니다 좋은 하루 보내세요 (마지막부터)방명록 추가 (1번부터)방명록 추가
-
메소드 체이닝(Method Chaining)프로그래밍/JQuery 2022. 10. 22. 21:30
메소드 체이닝이란 요소에 여러 메소드가 체인 형식으로 연결되어 있는 것을 의미하며, 연관되어있는 요소와 요소간 메소드를 연속적으로 호출하기 위해 사용되는 방식이다. 메소드 체이닝을 활용하면 코드가 간결해져 하나의 문장처럼 읽기 쉽고, 장기적 유지보수가 쉬워지지만 하나의 라인에 너무 많은 작업이 일어날 수 있다. 종류 설명 add() 특정 요소를 추가로 선택할 때 사용 children() 매개변수로 전달된 요소를 하위 요소에서 찾아주며, 매개변수를 전달하지 않으면 하위 요소의 모든 요소를 선택함 addBack() 현재 선택한 요소와 함꼐 이전에 선택한 요소도 선택함 find() 선택한 요소의 자손 요소 중에서 전달 받은 선택자에 해당하는 자손 요소를 모두 선택하고 별표(*)를 인수로 전달하여 선택한 자손 ..
-
요소 접근 메소드프로그래밍/JQuery 2022. 10. 19. 22:37
Jquery에서 선택자로 선택된 요소에 접근하여 값은 대입하거나 값을 호출할 수 있는 메소드에 대해 알아보자. getter / setter 메소드에서 getter 메소드는 선택된 요소에 접근하여 값을 읽어오기 위한 메소드로 아무런 인수를 전달하지 않고 호출한다. setter 메소드는 선택된 요소에 접근하여 값을 설정하기 위한 메소드로 대입하고자하는 인수로 전달하여 호출한다. 메소드 이름이 같으나 getter 메소드는 인수를 전달하기 않고 setter 메소드는 대입하고자는 값을 인수로 전달한다. 종류 설명 html() 해당 요소의 HTML 컨텐츠를 반환하거나 설정(innerHTML과 같은 기능) text() 해당 요소의 텍스트 컨텐츠를 반환하거나 설정(innerText와 같은 기능) width() 선택한 ..
-
선택자프로그래밍/JQuery 2022. 10. 18. 07:36
JQuery 선택자는 함수에서 사용하거나 적용되길 원하는 특정 요소 혹은 속성으로 자바스크립트와 비교했을 때 굉장히 간단한 방법으로 요소와 속성을 지정할 수 있다. 자바스크립트는 요소를 선택하기위해서는 document.getElement를 활용하지만 제이쿼리는 $(‘’)로 간단하게 표현이 가능하다. 자바 스크립트와 제이쿼리를 코드를 통해 비교해보면 document.getElementsByTagName('요소이름'); // == $('요소이름); document.getElementsByClass('클래스명'); // == $('.클래스명); document.getElementById('아이디명'); // == $('#아이디명); 이런식으로 좌측이 자바스크립트 코드이고 우측이 제이쿼리 코드이다. 한눈에 봐도..