분류 전체보기

[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를 활용해보려 한다. 우선 아래와 같은 버튼들을 만들었다. 이 버튼들을 눌렀을 때 각각의 버튼의 인덱스와 버튼의 정보들을 알아..

[jQuery] #5 each 반복문

1. 제이쿼리의 each 반복문 이번 게시글에서는 제이쿼리에서 자주 쓰이는 each 반복문을 알아보려한다. 참조 : https://www.w3schools.com/jquery/misc_each.asp jQuery Misc each() Method W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com each 반복문을 연습해보기 위해 버튼과 공간을 만든 뒤 버튼을 누르면 구구단 ..

[jQuery] #4 속성 관련 메소드

1. 요소와 속성 위의 코드를 살펴보자. 태그는 요소(element) 라고 불린다. 그리고 그 안에 있는 src, alt, tilte과 같은 것들을 속성(property, attribute)이라고 부른다. jQuery에서 요소에 접근을 하는 메서드로 우리는 이전 게시글에서 text(), html(), css() 와 같은 것을 배웠다. 그리고 이번 게시글에서는 속성에 접근하는 함수를 배우려한다. 각 영어의 앞자리를 따서 prop(), attr() 함수가 있다. 1) title 값 가져오기 위의 코드에서 의 title 값을 가져오는 방법은 아래와 같다(getter 개념). $("button:eq(0)").click(function(){ // alert(); // 요소의 title 속성값 가져오기(getter..