프로그래밍/Jquery 28

생활코딩 jQuery 강의노트

생활코딩 jQuery 강의의 강의노트입니다(https://opentutorials.org/course/53) HTML CSS javascript jQuery PHP mysql jQuery HTML CSS javascript jQuery PHP mysql test2 test 예제 2. jQuery( element ) 기본 HTML CSS javascript jQuery PHP MYSQL HTML CSS javascript jQuery PHP MYSQL - id 선택자 /> - class 선택자 /> - 엘리먼트 선택자 /> - 다중 선택자 /> filter HTML CSS javascript PHP MYSQL HTML CSS javascript PHP MYSQL - 인자와 인덱스가 동일한 엘리먼트를 찾아내..

Jquery - addClass 메소드 사용법 및 설명

.addClass( className )Returns: jQuery .addClass( className ) className 특정 조건에 추가할 하나 이상의 클래스 명 .addClass( function(index, class) ) function(index, class) 함수에서 반환된 하나 또는 띄어쓰기로 구분된 그 이상의 클래스를 추가할 수 있습니다. Receives the index position of the element in the set and the old class value as arguments.(누가 해석 좀 해주세요.~~ ^^;;) 가장 중요한 것은 이 함수가 클래스를 대체하는 함수가 아니라는 것입니다. 단순히 클래스를 추가하는 기능만 가지고 있습니다. 하나 이상의 클래스를 추..

Jquery - html 메소드 사용법

.html()원문 링크 > http://api.jquery.com/html/함수들- html().html()- html( htmlString ).html( htmlString ).html( funtion(index, oldhtml) ).html()Returns : String개요 : 일치하는 요소 내부의 html을 문자열로 반환한다..html()html() 함수는 XML 문서에는 사용할 수 없습니다.HTML 문서에서 어떤 요소의 내부 내용을 알아내고자 할때 html() 함수를 사용할 수 있습니다. 만일 선택자에 의해 선택된 요소가 복수개일 경우 제일 처음 요소의 값만 취합니다. 아래 예제를 보도록 하죠.$('div.demo-container').html();이 구문은 div 태그들중 demo-contai..

Jquery - preventDefault() 메소드

자바스크립트 코드에서 이벤트 핸들러처리가 끝난 후 preventDefault() 와 return false 등의 코드를 본적이 있을 것이다. 간혹 stopPropagation() 호출도 보이는데 이들의 차이점을 알아보자 1) preventDefault vs return false, stopPropagation : jQuery를 사용하지 않은 경우 - stopPropagation 은 사용자 정의 이벤트의 bubbling up 되는 것을 막아준다 + 사용자 정의 이벤트는 개발자가 직접 이벤트 핸들러를 작성할 경우 + 즉, 사용자가 작성한 이벤트 핸들러의 동작을 막아준다 - preventDefault 는 기본 정의 이벤트의 동작을 막아준다 + 앵커 태그와 같은 기본 제공 이벤트 (사이트로 이동하는 것) + 즉..

Jquery -$ajax 크로스 도메인 문제 해결 방법

jax를 사용하다보면 외부 서버에 요청을 할 경우가 있다. 외부서버에 ajax호출을 하면 크로스 도메인 문제가 생긴다. 해결하는 방법은 아래와 같다. Proxy Server 이용 클라이언트에서 로컬서버로 호출 후 로컬서버에서 외부서버로 호출 하는 방식이다. 스크립트로 호출 서버쪽 언어로 데이터 처리를 하고 스크립트로 응답한다. 클라이언트는 해당 파일을 스크립트로 로드하여 사용한다. response시 도메인 허용 response header에 Access-Control-Allow-Origin속성을 추가하여 해당 도메인은 크로스도메인에 걸리지 않게 한다. 예)node.js 에 express사용할 경우 app.use(function(req, res, next) { res.header("Access-Contro..

Jquery - $.ajax() 메서드의 옵션

jQuery.ajax (options) HTTP 통신에서 페이지를로드합니다. 이 함수는 jQuery의 AJAX 통신의 기본 부분에서 실제로 $. get및 $. post 같은 함수를 사용하는 것이 쉽게 구현할 수 있습니다. 그러나 이러한 추상화된 함수는 구현의 용이성과 교환에 오류시 콜백과 같은 복잡한 기능을 잃고 있습니다. 그런 처리를 구현하려면, 역시 핵심이다이 함수를 사용해야합니다. $. ajax 함수는 반환값으로 XMLHttpRequest 객체를 반환합니다. 대부분의 경우이 개체를 직접 조작하는 것은 없다고 생각되지만, 예를 들어 던져 버린 요청을 중단하는 경우 등, 필요하면 이용하십시오. 이 함수는 인수를 하나만 취하지만, 실제로는 해시에서 키 - 값 조합은 많은 옵션을받습니다. 다음에 그 목록을..

jquery - 슬라이더 효과를 사용한 이미지 전환 방법 (이미지슬라이더)

라인같은 사이트를 보면 다음과 같은 이미지 슬라이더가 있습니다. 흰색 버튼을 누르면 화면이 전환됩니다. 이러한 기능을 이번에 구현해봅시다. 화면 구성을 먼저 html의 div 태그로 나누게 되는데 1. slider_panel : 실제 이미지가 들어가는 곳 2. slider_text_panel : 텍스트가 들어가는 곳 3. control_panel : 버튼이 들어가서 클릭시 이미지가 슬라이드됨. 위와같이 div태그로 화면을 구성하였습니다. 소스중에서 css에서 left 속성을 –300으로 보내는 것이 있는데 –300이면 화면 밖이므로 즉, 화면 밖으로 보내서 실제 유저의 화면에는 안보이게 하는 것입니다. 여기서 가장 주의해야 할 점은 제일 상위 css클래스인 animation_canvas(캔버스)는 ove..

jquery - Jquery UI Effect 플러그인 사용법

jquery UI Effect 플러그인을 다운 http://jqueryui.com 에서 download에서 받을 수 있습니다. 기본적으로 addClass메소드로 애니메이션을 추가하고 removeClass메소드로 애니메이션을 삭제 할 수 있습니다. 이를 사용하기 위해서는 과 이부분을 추가해줘야 플러그인을 사용할 수 있습니다. 소스 DOCTYPE html> .reverse{ color: white; background-color: black; } $(document).ready(function(){ $('div').hover(function(){ $(this).addClass('reverse', 1000); }, function(){ $(this).removeClass('reverse', 1000); });..

반응형