프로그래밍
-
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('아이디명'); // == $('#아이디명); 이런식으로 좌측이 자바스크립트 코드이고 우측이 제이쿼리 코드이다. 한눈에 봐도..
-
함수프로그래밍/JQuery 2022. 10. 17. 21:52
제이쿼리에서 함수를 표현하는 방법에 대해 배워보자. 자바스크립트는 HTML 문서가 전부 로드가 된 이후 실행이 되어야하는 규칙이 존재하기 한다. 특별히 문제가 발생하지 않지만 아직 존재하지않는 HTML 요소에 속성을 다루고자할때 문제가 발생할 수 있다. 따라서 자바스크립트에서 HTML 문서를 전부 로딩하고 실행되는 함수를 아래와 같이 표현하였다. window.onload = function(){ // HTML 문서를 다 읽고 실행하는 함수 실행문 ... } 제이쿼리에서도 똑같은 기능을 수행하는 함수를 아래와 같이 표현가능하다. $(document.ready(function(){ // 구버전 실행문 ... })); $(function(){ // HTML 문서를 다 읽고 실행하는 함수 실행문 ... }); ..
-
JQuery 들어가기프로그래밍/JQuery 2022. 10. 15. 09:35
제이쿼리는 오픈 소스 기반의 자바스크립트 라이브러리로 문서 객체 모델(DOM)와 이벤트에 돤한 처리를 쉽게 할 수 있다는 장점을 가지고 있다. 제이쿼리의 버전 1.x : 익스플로러 6, 7, 8 버전에서의 동작까지 모두 지원하는 버전 2.x : 버전 1에서 지원하는 익스플로러 6, 7, 8 버전에 대한 지원을 중단한 버전 3.x : 제이쿼리 표준. 호환성을 유지한 간결하고 빠른 설계. 익스플로러 9이상에서만 동작 제이쿼리를 사용하는 방법 1. 제이쿼리 파일을 다운 받는 방법 https://jquery.com/download/ 에 들어가면, Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery..