DOM(Document Object Model; 문서 객체 모델)DOM : HTML과 XML 문서에 대한 구조적 정보를 제공하는 양식즉, DOM이 HTML과 XML 문서의 뼈대DOM은 문서구조나 외양 및 내용을 바꿀 수 있도록 프로그램에서 접근할 수있는 방법을 제공하는 인터페이스DOM은 프로퍼티와 메소드를 가지는 객체와 노드의 트리형 구조로 표현되는데, 이 구조는 스크립트나 다른 언어에서 웹페이지에 접근할 때 필수적이다 DOM 의 구성요소Element : (= HTML 태그) 하나의 태그 요소Attribute : (= HTML 태그 속성) 하나의 Element에 속해 있는 속성들Node : 하나의 Element에서 시작되는 트리 구조, 하나의 노드 안에는 여러 개의 노드가 포함되어 있을 수 있다 ..
WEB
slideUp(), slideDown(), slideToggle()반드시 태그에 width, height 속성을 주어야 한다그렇지 않으면 toggle()와 똑같은 동작을 한다slideUp(speed) : speed값을 지정해서 슬라이드업 효과를 줄 수 있다speed : "slow" or "fast" or milliseconds(1/1000초) ⚒️ 예제// jQuery\webapp\05_jQueryAnimationexam01.htmlslideUp, slideDown, slideToggle, toggle, fadeIn, fadeOut this / $(this)$('#sh > input').not(this).removeClass('btn'); this$(this)자바스크립트제이쿼리 문법해당 이벤트가 발생..
스타일 지정속성값 읽기 var 변수명 = $("요소").css("CSS 속성이름"); 속성값 변경 및 추가하기 ("요소").css("속성이름", "값"); $("요소").css({ "속성1이름": "값", "속성2이름": "값", "속성3이름": "값" }); 클래스 속성 지정CSS 클래스의 적용 여부 알기 var 변수 = $("요소").hasClass("클래스이름"); 클래스의 적용과 해제 $("요소").addClass("클래스이름");$("요소").removeClass("클래스이름"); 클래스의 적용과 해제의 반복 처리 HTML 태그 요소의 CSS 클래스에 대한 적용과 해제를 자동 순환 반복$("요소").toggleClass("클래스이름"); load()파일 읽어오는 함수 .not()제이쿼..
HTML 요소의 속성이나 속성 값을 조작jQuery 1.6버전 이전에는 attr() 만으로 가능하던 처리를 1.6 업데이트로 attr()과 prop() 으로 나뉘어졌다이전에는 attr() 하나로 많은 것을 처리하려다 보니 버그 및 문제가 발생하여 업데이트를 통해 불완전을 해소했다고 한다 attr()1. 개념HTML에 작성된 속성값을 문자열로 받아온다 2. 형식속성값 가져오기var 변수명 = $("요소").attr("속성이름"); // 속성이름 : 꺼내오는거 속성값 넣기$("요소").attr("속성이름", "값"); // 값 : 넣는거 $("요소").attr({ "속성1이름": "값", "속성2이름": "값", "속성3이름": "값"}); .attr()을 사용하면 전체 선택/전체 해..
jQuery 이벤트 정의$(function() { $("셀렉터").이벤트이름(function() { ... 처리 내용 ... }); }); key Event1. event.keyCodeJavaScript에서 event.keyCode 를 하면 각 키보드에 해당하는 고유번호를 알 수 있다이 메소드가 jQuery에서는 event.which 으로 사용하게 된다 .keydown, .keyup - 대소문자 구별X (A도 a도 65라고 나온다) 2. .keypress대소문자 구별 가능Ctrl, Shift, Alt 구별 불가능 ⚒️ 예제// jQuery\webapp\02_jQueryEvent [ event.css 공통] exam01.htmlmember.js회원가입exam02.html마우스 이벤트 확인하기exam03..
jQuery 개념전 세계에서 가장 많이 사용되는 JavaScript 라이브러리HTML 요소 제어HTML 요소를 손쉽게 획득, 제어 가능손쉬운 이벤트 처리단 한번의 이벤트 정의로 크로스 브라우징 해결요소의 탐색과 생성DOM 요소를 제어하기 위한 간결한 기능 제공Ajax 통신 처리페이지 이동이 없는 비동기 데이터 통신 jQuery 특징크로스 브라우징한 번의 코딩으로 거의 모든 브라우저에게 적용간결한 문법HTML 태그(element)를 제어하거나 이벤트를 처리하는 부분 등 JavaScript 의 전반에 걸쳐서 구문이 짧아지기 때문에 개발 효율성 상승익숙한 구문CSS 에서 사용하던 속성과 값을 그대로 JavaScript 구문에 적용할 수 있어서 document 내장 객체가 제공하는 기능을 쉽게 사용 가능다양한..