본문 바로가기

728x90

프로그래밍&IT/Javascript & jQuery

(11)

[Ajax (Asynchronous Javascript and XML)] 비동기 방식으로 자바스크립트를 이용해, 화면 전환없이(전체 페이지가 깜빡임없이..) 서버에 자료 (XML , HTML , JSON, 텍스트 유형 등)를 요청/수신할 때. 종류 설명 load() 외부 콘텐츠 가져올 때 사용한다. $.ajax() 데이터를 서버에 GET , POST 방식으로 전송이 가능한 데이터를 요청할 수 있는 통합적인 메서드. $.post() , $.get() , $.getJSON() 메서드의 기능을 하나로 합쳐놓은 거라 볼 수 있다. $.post() 데이터를 서버에 POST 방식으로 데이터를 송수신할 때 $.get() 데이터를 서버에 GET 방식 방식으로 데이터를 송수신할 때 $.getJSON() GET 방식으로 데이터를 전송한 이후에, 서버측 응답을 JSON 형식으로 받을 때 $.ge..

[JQuery] 효과 / 효과 제어 메서드 효과 메서드의 종류 종류 설명 hide() 노출되어 있는 요소를 숨긴다 show() 숨겨져있던 요소를 보여준다. toggle() 숨겨져있던 요소는 보여지고, 노출되어 있던 요소는 숨긴다. fadeIn() 숨겨져있던 요소가 점점 선명해지면서 보여진다 fadeOut() 노출되어 있던 요소가 점점 투명해지면서 숨겨진다. fadeToggle() 노출되어 있던 요소는 점점 투명해지며 사라지고, 사라져 있던 요소는 선명해지면서 보여진다. fadeTo() 노출되어 있던 요소에 투명도를 지정한 만큼 숨긴다 slideDown() 숨겨져 있던 요소가 밑으로 펼쳐지며 보여진다. slideUp() 숨겨져 있던 요소를 위로 접으며 숨긴다. slideToggle() 숨겨져 있던 요소는아래로 펼쳐지며 보여지고, 보여지고 있던 요소..

[JQuery] 이벤트 / 그룹 이벤트 등록 메서드 이벤트 등록 메서드 구분 종류 설명 로딩 이벤트 load() 선택한 이미지나 프레임 요소에 연동된 소스가 로딩이 완료된 후 이벤트가 발생 ready() 지정한 html 문서 객체가 로딩이 완료된 후 이벤트가 발생 마우스 이벤트 click() 선택한 요소 클릭했을 때 이벤트 발생 dbclick() 더블 클릭했을 때 mouseout() 선택한 요소의 영역에서 마우스가 벗어났을 때 이벤트 발생. 하위 요소의 영향을 받는다 mouseover() 선택한 요소의 영역에 마우스를 올렸을 때 hover() 마우스를 올렸을 때와 벗어났을 때 각각 이벤트 발생 [over + out] mousedown() 선택한 요소에서 마우스 버튼 눌렀을 때 mouseup() 마우스 버튼을 눌렀다가 떼었을 때 mouseenter() 선택..

[JQuery] 속성 / 요소 수치 조작 / 격체 편집 메서드들 속성 조작 메서드 종류 사용법 설명 html() $("요소선택").html() $("요소선택").html("새로운 요소") 선택한 요소에 하위 요소들을 반환하거나, 새 요소로 변환 text() $("요소선택").text() $("요소선택").text("새 텍스트") 선택한 요소에 포함하는 텍스트를 반환하거나 새 텍스트로 변환 css("속성") css("속성", "값") $("요소선택").css("color") $("요소선택").css("color", "blue") 선택한 요소에 CSS 속성값을 반환 또는 변환 removeAttr("속성") $("요소선택").removeAttr("title") 지정한 속성을 삭제 attr("속성") attr("속성", "값") $("요소선택").attr("href") $(..

[JQuery] 그외 선택자 그 외 선택자 콘텐츠 탐색 선택자 요소나 속성의 포함 여부에 따라 특정요소를 선택. 종류 사용법 설명 $("요소선택:contains(텍스트)") $("li:contains("내용")") 요소 중 "내용"이라는 텍스트를 포함하는 요소만 선택 $("요소선택").contents() $("p").contents() 선택한 요소의 하위 요소 중 가장 가까운 하위 요소 선택 $("요소선택:has(요소명)") $("요소선택").has(요소명) $("li:has("span")") 요소 중 을 포함하는 요소만 선택 $("요소선택:not(:제외요소)") $("요소선택").not(:제외요소) $("li:not(:first)") 요소 중 첫번째 요소만 제외하고 선택 $("요소선택").filter(필터요소) $("li").fi..

[JQuery] 탐색 선택자 / 속성 선택자 탐색 선택자 직접 선택자를 이용해 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 선택할 때. 위치 탐색 선택자 : 요소의 위치를 기준으로 선택 속성 탐색 선택자 : 요소의 지정된 속성을 기준으로 선택. 위치 탐색 선택자 종류 요소의 위치나 인덱스 번호를 이용해 특정 요소를 좀 더 정확하게 선택. 종류 사용법 설명 $("요소 선택:first") $("요소 선택").first() $("li:first") $("li").first() 전체 요소 중 첫번째 요소만 선택 $("요소 선택:last") $("요소 선택").last() $("li:last") $("li").last() 전체 요소 중 마지막 요소만 선택 $("요소 선택:odd") $("li:odd") 요소 그룹 중 홀수번째 요소만 선택 $("요소 선..

[JQuery] 기본 다지기 JQuery 자바스크립트를 이용해 만든 라이브러리 언어. 자바스크립트로 만들어진 다양한 함수들의 집합. 자바스크립트가 가지고 있는 "각 브라우저에 따른 호환성 문제"를 해결 쉽고 편리한 애니메이션 효과 기능 구현 1. jquery 사이트에서 라이브러리 파일을 다운받아 웹 문서에 연동 https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use AP..

[Javascript] events , 이벤트 객체 이벤트 (Events) 브라우저에서 방문객이 취하는 모든 동작 ex) 마우스 클릭, 키보드 타이핑 등 자바스크립트에 등록 가능한 이벤트들 종류 설명 마우스 이벤트 onmouseover 마우스가 지정한 요소에 올라갔을 때 발생 onmouseout 마우스가 지정한 요소를 벗어났을 때 onmousemove 마우스가 지정한 요소 영역에서 움직일 때 onclick 마우스가 지정한 요소를 클릭했을 때 ondbclick 마우스가 지정한 요소를 더블 클릭했을 때 키보드 이벤트 onkeypress 지정한 요소에서 키보드를 눌렸을 때 '입력되는 키를 눌렀을 때' 반응. ex) 한글 입력, 방향키 등 즉시 text에 입력되는 사항이 아닌 건 이벤트가 발생하지 않는다> onkeydown 지정한 요소에서 키보드를 눌렀을 때 (..

[Javascript] 문서 객체 모델 (DOM, Document Object Model) DOM , Document Object Model HTML 문서의 구조 의미. HTML tag는 각각의 기능 (Method)과 속성 (Properites)을 갖고 있다. 이런 태그들을 (트리) 구조적으로 갖고 있는 문서 객체라 보면 될듯. 배우는 목적 자바스크립트를 사용해 문서 객체를 선택하고 속성이나 스타일(CSS)을 적용하기 위해서 단, 브라우저별 (크롬, 오페라, 사파리 등) 차이가 존재하기에 호환성 문제가 있으므로, 브라우저별로 확인이 필요하다. html은 root가 되고, 그 아래는 node 라 부른다. node에는 아래와 같이 존재한다. html 태그를 연결하는 요소 노드 (Element node) 텍스트를 연결하는 Text node 태그에 속성을 연결해 주는 속성 노드 (Attribute n..

[Javascript] 브라우저 객체 모델 (BOM, Browser Object Model) 브라우저 객체 모델 (BOM, Browser Object Model) 브라우저에 대한 모든 내용을 담고 있는 객체. 뒤로가기, 북마크, 즐겨찾기, History, Url 등 브라우저가 가지고 있는 정보를 객체화시켜서 관리한다 계층적 구조 window (브라우저, 최상위 객체) document screen location history navigator body, div, img, a 등 사용자의 모니터 정보(속성)를 제공한다. 브라우저 주소창의 url에 대한 정보와 새로고침기능 등 제공 사용자가 방문한 사이트에 대한 이력(history) 브라우저의 정보 운영체제 정보 등 window 객체 메서드 종류 oper() , alert() , prompt() : 질의응답 창을 띄운다 , confirm() : 확인..

이전 1 2 다음

티스토리툴바