Front5 [ jQuery ] - 선택자(자식, 부모, 형제) jQuery의 자식 노드 선택하기 자식노드란? 특정 노드의 바로 아래에 위치하는 노드를 말합니다. 하위 노드의 하위 노드는 같은 자식 노드가 아닌 자손 노드라고 할 수 있습니다. 아래 예제를 보면, 아이디 sample의 자식노드는 header, content, footer가 됩니다. header, content, footer 안에 자식 들은 sample의 자식이라고 할 수 없으며, 자손 노드라고 할 수 있습니다. header 영역 content 영역 ktko1 ktko2 ktko3 ktko4 footer 영역 자식노드 찾는 법 자식노드를 찾는 법은 children() 메서드를 사용하며, 해당 메서드를 통해 여러 자식들을 선택할 수 있습니다. 모든 자식 노드 찾기 : children() 특정 자식 노드 찾.. Front/JavaScript 2023. 9. 22. [jQuery] .detach() 메서드 .detach() .detach()는 선택한 요소를 제거한다는 점에서 .remove()와 같다고 할 수 있으나, 문서에서 제거 후 저장하여 다시 사용할 수 있다는 특징을 가지고 있습니다. 문법 var jb = $( "h1" ).detach(); 해당 코드는 h1 요소를 문서에서 제거하고, 변수 jb에 저장합니다. 해당 요소를 제거한 후 다른 위치에 append 한다거나 여러 가지 방법으로 활용할 수 있는 메서드입니다. Front/JavaScript 2023. 9. 22. jQuery - 선택자 jQuery의 선택자 찾기 기본 형식 $(Selector[attr]) - value 동일한 개체 선택 $(Selector[attr="value"]) - value와 불일치하는 개체 선택 $(Selector[attr!="value"]) - value로 시작하는 개체 선택 $(Selector[attr^="value"]) - value로 끝나는 값 선택 $(Selector[attr$="value"]) - value가 포함하는 값 선택 $(Selector[attr*="value"]) - value가 포함하는 값 선택 $(Selector[attr~="value"]) 예시 $("input[id^='chk_mileage']") Front/JavaScript 2023. 8. 16. jQuery - each() each() 메서드 jQuery를 통해 배열을 관리하고자 할 때 사용되는 메서드 입니다. type 1 - $. each() // jQuery 유틸리티 메서드 $.each(object, function(index, item){ }); $. each()는 object와 배열 모두에서 사용할 수 있는 일반적인 반복 함수입니다. 즉, 배열과 length 속성을 갖는 유사 배열 객체들을 index 기준으로 반복할 수 있습니다. 예제 // 객체을 선언 var arr= [ {title : '다음', url : 'http://daum.net'}, {title : '네이버', url : 'http://naver.com'} ]; // $.each() 메서드의 첫번째 매겨변수로 위에서 선언한 배열은 전달 $.each(arr.. Front/JavaScript 2023. 8. 16. DataTable 사용법 [ jQuery , JSON ] DataTable DataTables는 HTML의 을 데이터 그리드 형식으로 사용하기 위한 라이브러리입니다. 장점? 태그에 다음과 같은 기능을 빠르게 구현할 수 있습니다. 표시 건수 제어 기능 검색 기능 정렬 기능 필터 기능 스크롤 기능 DataTables - JSON 데이터 테이블에 출력하기 DataTables 사용을 위해선 DataTables의 JS파일 및 CSS파일, jQuery를 필요로 합니다. [ { "id" : "JSON1", "name" : "제이슨01", "location" : "서울"}, { "id" : "JSON2", "name" : "제이슨02", "location" : "경기도"}, { "id" : "JSON3", "name" : "제이슨03", "location" : "충청남도"}.. Front/JavaScript 2023. 5. 10. 이전 1 다음 반응형