본문 바로가기

프로그래밍/JQuery

 (8)
JQuery_내용과 속성 가져오기 .text(), .html(), .val() 내용과 속성 가져오기text() - 선택한 요소의 텍스트 내용을 설정하거나 반환한다. html() - 선택한 요소(HTML 마크업 포함)의 내용을 설정하거나 반환한다. val() - 필드의 값을 설정하거나 반환한다. 후미진 어느 언덕 글자 가지고 오기 html 요소 가지고 오기 value 가지고 오기
JQuery_Ajax 비동기 통신 Ajax 비동기 통신: Asynchronous Javascript And XML의 약자로 자바스크립트의 라이브러리 중 하나이다.자바스크립트를 통해서 비동기식으로 서버에 데이터를 요청하여 필요한 데이터를 받아와 전체 페이지를 새로 고치지 않고 변경이 필요한 페이지 부분만 고치는 기법 → 화면 전환 없이 클라이언트와 서버 간의 정보를 교환하기 위해 사용한다. Ajax 사용법$.ajax({ type: "get", // 요청 방식 url: "https://jsonplaceholder.typicode.com/posts/" + postsId, // 요청 url contentType: "application/json; charset=utf-8", dataType: "json", // 서버에서 반환되는 데이터 형식 d..
이벤트 등록 메서드 - 이벤트 등록 메서드란? 버튼 //이벤트 적용대상 $("#btn").click(function(){ 자바스크립트 코드; }); → #btn에 이벤트 대상, .click에 이벤트 종류, function함수에 처리할 이벤트 코드를 적으면 된다. - 이벤트 등록 방식 그룹 이벤트 등록 메서드 1. on() 메서드 등록 방식1 $("이벤트 대상 선택").on("이벤트 종류1 이벤트 종류2 ... 이벤트 종류n", function() { 자바스크립트 코드; }); 2. on() 메서드 등록 방식2 $("이벤트 대상 선택").on({ "이벤트 종류1 이벤트 종류2 ... 이벤트 종류n":function() { 자바스크립트 코드; } }); 3. on() 메서드 등록 방식3 $("이벤트 대상 선택").on({ "이..
JQuery_다양한 효과와 애니메이션 : 선택한 요소를 역동적으로 숨겼다가 보이게 만드는 기능 -효과 메서드 종류 구분 종류 설명 숨김 hide() 요소를 숨긴다. fadeOut() 요소가 점점 투명해지면서 사라진다. slideUp() 요소가 위로 접히며 숨겨진다. 노출 show() 숨겨진 요소가 노출된다. fadeIn() 숨겨진 요소가 점점 선명해진다. slideDown() 숨겨진 요소가 아래로 펼쳐진다. 노출, 숨김 toggle() hide(), show() 효과를 적용한다. fadeToggle() fadeIn(), fadeOut() 효과를 적용한다. slideToggle() slideUp(), slideDown() 효과를 적용한다. fadeTo() 지정한 투명도를 적용한다. -효과 메서드의 기본형 : $("요소 선택").효과 메서드(효..
JQuery_제이쿼리 이벤트 : 이벤트란 사이트에서 방문자가 취하는 모든 행위를 말하고, 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 코드를 말한다. ex) 버튼 $("#btn").click(function(){ 자바스크립트 코드; }); => $("#btn") →이벤트 대상 click() → 이벤트 등록 메서드 function(){...} → 이벤트 핸들러 구분 종류 설명 로딩 이벤트 load() 선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩이 완료된 후 이벤트가 발생한다. ready() 지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트가 발생한다. error() 이벤트 대상 요소에서 오류가 발생하면 이벤트가 발생한다. 마우스 이벤트 click() 선택한 요소를 클릭했을 때 이벤트가 발생한다. dbclick() 선택한..
JQuery_제이쿼리 문서 객체 선택자와 조작법(3) 6. 객체 조작 - 속성 조작 메서드 종류 사용법 설명 html() html("새 요소") $("요소 선택").html(); $("요소 선택").html("새 요소"); 선택한 요소의 하위 요소를 가져온다. 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 요소를 생성한다. text() text("새 텍스트") $("요소 선택").text(); $("요소 선택").text("새 텍스트"); 선택한 요소가 감싸는 모든 텍스트를 가져온다. 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 텍스트를 생성한다. attr("속성명") attr("속성명","새 값") $("요소 선택").attr("속성명"); $("요소 선택").attr("속성명","새 값"); 선택한 요소의 지정상 속..
JQuery_제이쿼리 문서 객체 선택자와 조작법(2) 4. 탐색 선택자 : 탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 선택한다. - 위치 탐색 선택자 : 기본 선택자로 선택한 요소는 배열에 담긴다. 이때 배열의 인덱스를 사용하면 특정 요소를 더 정확하게 선택할 수 있다. 종류 사용법 설명 $("요소 선택:first") $("요소 선택").first() $("li:first") $("li").first() 전체 요소 중 첫 번째 요소만 선택한다. $("요소 선택:last") $("요소 선택"):last() $("li:last") $("li").last() 전체 요소 중 마지막 요소만 선택한다. $("요소 선택:odd") $("li:odd") 요소 무리 중 짝수 번째(홀수 인덱스)요소만 선택한다. $..
JQuery_제이쿼리 문서 객체 선택자와 조작법(1) 1. 제이쿼리란? : 자바스크립트를 이용해 만든 라이브러리 언어(자바스크립트로 만들어진 다양한 함수들의 집합)이다. 2. 선택자 : 선택자는 HTML요소를 선택하여 가져온다. CSS는 정적인 반면 제이쿼리는 동적으로 스타일을 적용할 수 있다. -선택한 요소에 지정한 스타일을 적용할 때 $("CSS 선택자").css("스타일 속성명", "값"); -선택한 요소에 지정한 속성을 적용할 때 $("CSS 선택자").attr("속성명", "값"); -직접 선택자 구분 종류 사용법 설명 직접선택자 전체 선택자 $("*") 모든 요소를 설명한다. 아이디 선택자 $("#아이디명") id 속성에 지정한 값을 가진 요소를 선택한다. 클래스 선택자 $(".클래스명") class 속성에 지정한 값을 가진 요소를 선택한다. 요..

티스토리툴바