본문 바로가기

jQuery(제이쿼리)

jQuery(제이쿼리 이벤트 + Ajax(기본형)) <완결> 여러분 안녕하세요~ 19살 IT 개발자 포돌이입니다. 저번 시간에는 jQuery(수치 조작 메소드를) 끝내면서, 선택자 파트를 마무리하였습니다. 오늘은 jQuery(제이쿼리 이벤트+ Ajax)를 나가보려고 합니다. 그러면 한번 진행해보도록 하겠습니다. 중요한 메소드들로만 담았다는 점 양해 부탁드립니다. 이벤트 등록 메소드 이벤트란 사이트에서 방문자가 취하는 모든 행위를 말하고, 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 코드를 말합니다. 이 메소드를 이용하면 방문자가 지정한 요소에서 어떠한 특정 동작이 일어났을 때 저장된 코드를 실행시킬 수 있습니다. 기본형 기본형을 봤으니 본격적으로 이벤트 종류 메소드를 알아보도록 하겠습니다. 단독 이벤트 등록 메소드 단독 이벤트 등록 메소드는 대상에 한 가지 동작.. 더보기
jQuery(수치 조작 메소드) 여러분 안녕하세요 19살 IT 개발자 포돌이입니다. 지난 시간에는 jQuery(수치 조작 메소드)를 배웠습니다. 오늘은 jQuery(수치 조작 메소드)을 공부해보려고 합니다. 수치 조작 메소드 수치 조작 메소드는 요소의 속성을 조작할 때 사용하는 메소드 입니다. 요소의 높이 / 너비 메소드 height()와 width() 메소드는 여백 및 선 두께를 제외한 순수 요소의 높이값과 너비값을 계산합니다. innerHeight()와 innerHeight()와 innerWidth() 메소드는 여백을 포함한 요소의 높이값과 너비값을 계산합니다. outerHeight()와 outerWidth() 메소드는 여백 및 선을 포함한 요소의 높이값과 너비값을 계산합니다. 기본형 코딩해보기 요소 위치 메소드 요소 위치 메소드에.. 더보기
jQuery(속성 조작 메소드) 여러분 안녕하세요 19살 IT 개발자 포돌이입니다. 지난 시간에는 jQuery(탐색 선택자 2)를 알려드리면서 탐색 선택자를 마무리했습니다. 오늘은 jQuery(속성 조작 메소드)을 공부해보려고 합니다. 그럼 긴말 없이 들어가 보도록 하겠습니다. 가시죠! 객체 조작 메소드 객체를 생성, 복제, 삭제, 속성 변환하는 객체 조작 메소드에 대해 알아보겠습니다. 객체 조작 메서드는 속성 조작 메소드와 수치 조작 메소드 그리고 객체 편집 메소드로 나눌 수 있습니다. 속성 조작 메서드는 요소의 속성을 바꿀 때 사용하고, 수치 조작 메소드는 요소의 너비값 또는 높이값 같은 수치를 바꿀 때 사용합니다. 이 두 메서드는 선택한 요소의 속성을 바꾸는 메소드이므로 성격이 바슷하다고 볼 수 있습니다. 그리고 객체 편집 메소드.. 더보기
jQuery(탐색 선택자 2) 여러분 안녕하세요~ 19살 IT 개발자 포돌이입니다. 지난 시간에는 jQuery(탐색 선택자 1)를 배우면서 다양한 선택자를 알아가는 시간을 가지셨을 겁니다. 그리고 오늘도 마찬가지로 새로운 선택자를 배우게 될 거고 탐색 선택자를 마무리하는 시간을 가지려고 합니다. 그리고 댓글을 써주신 분들 너무 감사하게 생각합니다 솔직히 많이 힘들었어요.. 글을 작성하면서 어떻게 해야 사람들이 내 글을 쉽게 읽을 수 있을지.. 정말 고민 많이 했고 밤샘 작업도 해서 몸이 많이 지쳐있는 상태였습니다. 그런데 제 글에 댓글을 적어주신 분들을 읽고 힘이 되었습니다 그래서 더 열심히 작업을 하는 것 같고 그래서 더 세밀하게 하는 것 같아요 지금 몸 상태가 말이 아니지만 글 하나하나 최선을 다해서 적도록 노력하는 포돌이가 되겠.. 더보기
jQuery(탐색 선택자 1) 안녕하세요 19살 IT 개발자 포돌이입니다. 지난 시간에는 jQuery(인접 관계 선택자)에 대해서 알아보았습니다. 오늘은 jQuery(탐색 선택자 1)을 나가려고 합니다. 자 그러면 시작해보겠습니다. 제이쿼리 탐색 선택자 탐색 선택자 탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 선택할 수 있습니다. 대표적인 탐색 선택자에는 배열의 인덱스(index)를 사용해 선택하는 "위치 탐색 선택자"와 배열에 담겨진 요소중 지정된 속성과 값으로 선택하는 "속성 탐색 선택자"가 있습니다 위치 탐색 선택자 기본 선택자로 선택한 요소는 배열에 담깁니다. 이때 배열의 인덱스를 사용하면 특정 요소를 좀 더 정확하게 선택할 수 있습니다. first/last 선택자 f.. 더보기
jQuery(인접 관계 선택자) 안녕하세요 19살 IT 개발자 포돌이입니다. 지난 시간에는 jQuery(직접 선택자)의 직접 선택자를 공부했었는데요 오늘은 인접 관계 선택자를 한번 공부해보려고 합니다. 그럼 한번 들어가시죠~ 인접 관계 선택자 jQuery(선택자 1)에도 있지만 한번 더 복습하는 겸 다시 올렸습니다. 차례대로 기본형과 예제를 적으며 나아가도록 하겠습니다. 부모 요소 선택자 부모 요소 선택자는 선택한 요소를 감싸고 있는 부모 요소를 선택합니다. 기본형은 다음과 같습니다. 기본형 $("요소 선택").parent(); 코딩해보기 다음은 문단 태그 영역의 부모 요소 선택자를 적용한 예제입니다. 하위 요소 선택자 하위 요소 선택자는 선택한 요소로 선택한 하위 요소만 선택합니다. 기본형 $("기준 요소 선택 1 요소 선택 2") .. 더보기
jQuery(직접 선택자) 안녕하세요 19살 IT 개발자 포돌이라고 합니다. 지난번에는 jQuery에 대해 간단한 설명과 다운로드 방법을 알려드렸습니다 오늘은 jQuery(직접 선택자)에 대해서 알려드리도록 하겠습니다. 그럼 시작해볼까요? * 설명할 때는 jQuery와 제이쿼리 두 가지 방식으로 표기하겠습니다. 선택자 선택자는 HTML 요소를 선택하여 가져옵니다. 제이쿼리 선택자는 CSS 선택자와 마찬가지로 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있습니다. 이때 HTML에서 작성한 스타일(CSS)은 '정적이다'라고 표현합니다. 하지만 제이쿼리 선택자를 사용하면 "동적"으로 스타일을 적용할 수 있습니다. 선택자를 좀 더 정확하고 깊이있게 공부하려면 문서 객체 모델에 대해 알아두는 것이 좋을 겁니다~^^ 문서 객체 모델(D.. 더보기
jQuery(제이쿼리) 안녕하십니까 19살 IT 개발자 포돌이입니다. 자바스크립트 기초를 완결하면서 고민했습니다. 도대체 어떤 걸 배워야 할지.. 고민해 본 결과. 제이쿼리를 채택하게 되었습니다. 이유는 jQuery를 공부하시면 자바스크립트 언어의 활용도를 높일 수 있기 때문입니다. 그럼 출발해볼까요? 제이쿼리란 제이쿼리라는 모질라 사의 자바스크립트 개발자였던 존 레식(Join Resig)이 자바스크립트를 이용해 만든 라이브러리 언어입니다. 라이브러리 언어란 자바스크립트로 만들어진 다양한 함수들의 집합을 가리킵니다. 호환성 문제 해결 자바스크립트의 문서 객체 모델(DOM)과 이벤트 객체(Event Object)는 호환성(크로스 브라우징)이 떨어진다는 단점이 있습니다. 예를 들어 인접 요소 선택자 중 다음 요소 선택자(nextS.. 더보기

티스토리툴바