⁂ jQuery

[jQuery] #11 Ajax 알아보기

1. Ajax(asynchronous Javascript and XML) Ajax란 Asynchronous Javascript And XML 의 줄임말이다. 자바스크립트를 이용하여 비동기식으로 서버와 통신할 수 있도록 돕는 것이며 비동기통신이기 때문에 서버에 요청이 가더라도 화면의 깜빡 거림이나 화면이 이동 된다는 느낌을 주지 않고 상당히 자연스럽고 빠르게 클라이언트의 화면을 변화 시켜줄 수 있다. 최근에는 XML형식이 아닌 JSON형식을 더 많이 사용하고 있다. Ajax는 한 페이지를 유지하면서 내용을 실시간으로 바꿔주는 기능을 구현할 수 있다(한개의 페이지에서 요청과 응답이 동시에 이루어짐). 즉, 전체 페이지를 요청하지 않고 내가 원하는 페이지만 요청을 시킨다(댓글 더보기를 눌러도 전체 페이지가 새..

[jQuery] #10 offset()과 position()

1. 위치값 제이쿼리에서 선택된 객체의 위치값을 설정해주는 함수는 두 가지 종류가 있다. 브라우저를 기준으로 할 때는 offset(), 포지셔닝 컨텍스트()를 기준으로 할 때는 position()이 있다. 더 쉽게 표현하자면 offset은 절대좌표값을, position은 상대좌표값을 리턴한다. offset은 페이지의 상단으로부터 선택된 요소가 보이는 현재 위치값을 설정, 리턴을 한다. position은 선택한 요소가 속해있는 부모 요소를 기준으로 떨어져있는 위치값을 설정, 리턴한다. 이 두 메서드의 리턴 자료형은 객체인 top, left의 값이 반환이 된다. 아래의 두 상자를 보자. 파랑 상자를 클릭할 때마다 값이 출력된다. 이 때 브라우저의 크기에 따라 offset의 값은 바뀌지만 position의 값..

[jQuery] #9 Add 클래스 : 클래스 추가하기

먼저 결과물부터 확인해보자. 위의 사진처럼 CSS에서 효과를 주고 싶을 때 제이쿼리를 활용하여 존재하지 않는 클래스에 CSS를 삽입해둔 뒤 필요할 때 클래스를 생성해서 효과를 주는 방식을 사용할 수 있다. 이 때 사용하는 게 addClass 메서드이다. 사용하는 방식은 생각보다 간단하다. 우선 CSS로 존재하지 않는 open이라는 클래스에 스타일을 적용해두었다. #box.open #startBtn { left: -100%; transition: .4s ease; } #box.open img { opacity: 1; transform: scale(1); transition: .2s ease; } 그리고 jQuery를 활용하여 버튼과 이미지를 누를 때마다 class를 생성하고 지우는 것을 반복하면 open이..

[jQuery] #8 요소 탐색

1. 요소 탐색하기 제이쿼리로 요소들을 탐색할 수 있다. 요소를 탐색한다고? 이해를 돕기 위해 아래의 테이블을 만들었다. 요소 탐색 1 2 3 4 5 6 7 8 9 여기서 요소를 탐색한다는 것은, 예를 들어 5를 기준으로 앞에 있는 4를 찾는 방법을 뜻하거나, 부모-자식간의 관계를 찾는 것을 뜻한다. 이렇게 어느 요소를 기준으로 다른 요소에 접근하는 방법을 알아보자. 2. 요소의 관계에 따라 탐색하기 요소의 관계에 따라 탐색을 한다는 것은 DOM 구조에서 원하는 요소까지 이동하고 찾아가는 것을 의미한다. 여기서 DOM(Document Object Model) 구조란 웹 페이지에 대한 인터페이스를 뜻한다. 돔구조에 대해 좋은 블로그글을 아래 달아놓으니 같이 공부해도 좋을 듯 하다. 참조 : https://..

[jQuery] #7 요소 생성(append, prepend)

1. 요소를 생성하는 이유 제이쿼리로 요소를 생성할 수 있다. 그런데 요소를 왜 생성하는 것일까. 웹은 대체적으로 비동기식 구조에서 주로 사용되기 때문이다. 무슨 말이냐면 정해진 틀을 벗어나야하는 경우가 많다는 뜻이다. 누군가가 댓글을 보면서 더보기를 눌렀다. 그러면 HTML 문서상으로 테이블이 늘어나야하고, 그 안에 내용들이 채워져야한다. 이처럼 정해진 행과 열을 가진 테이블만을 고집하는 사이트에서는 댓글 더보기의 내용을 구현할 수가 없기 때문에 요소를 생성해주는 기능을 활용하는 것이다. 이 요소를 생성하는 방법은 아래와 같다. - append(), appendTo() 요소를 끝에 추가 - prepend(), prependTo() 요소를 앞에 추가 - 부모.append(자식) - 자식.appendTo(..

[jQuery] #6 This로 index 확인하기

1. This 연습하기 참조 : https://ddcloud.tistory.com/66 [JS] #11 This 참조 사이트 https://www.w3schools.com/js/js_this.asp JavaScript this W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects.. ddcloud.tistory.com 위의 내용으로 자바스크립트를 사용했었던 This를 되새겨보자! jQuery에서도 this를 활용해보려 한다. 우선 아래와 같은 버튼들을 만들었다. 이 버튼들을 눌렀을 때 각각의 버튼의 인덱스와 버튼의 정보들을 알아..