교육과정 기록/jQuery
Ajax 시작
Ajax를 테스트하려면 웹 서버(Web Server) 필요 Apache Tomcat 9 (1) Web Server = 파일서비스 (2) WAS (Web Application Server) - 기존에 scoop으로 설치해놓은 Tomcat 파워쉘로 실행 Ajax 관련 메서드 (제이쿼리 entry point 없이도 실행 가능) - $.ajax() 메서드 $.ajax({ // 1. 데이터 전송 및 요청할 외부 주소를 입력 url: "전송 페이지"(action url), // 2. 전송 방식을 입력 type: "전송 방식"(get, post 방식), // 3. 전송할 데이터 입력 data: "전송할 데이터", // 4. 서버로부터 받아올 데이터 형식을 지정 dataType: "요청한 데이터 형식"("html", ..
jQuery 이벤트
, 태그에 클릭 이벤트 적용 시, 기본 이벤트 차단하기 1. return false를 이용해 차단 $("a 또는 form").이벤트 메서드(function() { 자바스크립트 코드; return false; }); 2. preventDefault() 메서드를 이용해 차단 $(".btn1").on("click", function (e) { // 제이쿼리 이벤트 객체를 매개변수로 받음 e.preventDefault(); // *** 이벤트의 기본동작을 중지시킴 $(".txt1").css( { backgroundColor: "#ff0"}); }) // onclick mouseover() / mouseout() / hover() mouseout() 과 mouseleave() 의 차이 mouseout 내용1 내용..
jQuery - 객체 조작 메서드
속성 조작 메서드 1. html() / text() $("요소 선택").html(); $("요소 선택").html("새 요소"); $("요소 선택").text(); $("요소 선택").text("새 텍스트"); 객체 조작 및 생성> html() 내용1 텍스트() 내용2 2. attr() / removeAttr() $("요소 선택").attr("속성명"); $("요소 선택").attr("속성명", "새 값"); 여러개 속성 --> $("요소 선택").attr( {"속성명1" : "새 값1", "속성명2" : "새 값2" ...} ); $("요소 선택).removeAttr("속성"); 태그의 속성 조작 및 생성 이미지 속성 prop 와의 차이점 객체 조작 및 생성 이름 아이디 3. Class 조작 addCl..
jQuery - 배열 메소드
배열 관련 메소드 each() / $.each() 메소드 - 배열에 저장된 문서 객체만큼 메서드가 반복 실행. - 배열에 저장된 객체의 인덱스 순서대로 하나씩 접근하여 객체를 선택하고 인덱스를 구함 $("요소 선택").each(function) $.each($("요소 선택").function) $.map() 메소드 - 배열에 저장된 데이터 수만큼 메서드가 반복 실행. - 함수에서 반환된 데이터는 새 배열에 순서대로 저장됨. 새로 저장된 배열 객체를 반환 $.map(Array, function) $.grep() 메소드 - 배열에 저장된 데이터 수만큼 메서드가 반복 실행. - 반환값이 true인 경우에만 배열의 데이터가 인덱스 오름차순으로 새 배열에 저장되며 그 배열을 반환 $grep(Array, funct..
jQuery 시작 / 선택자
- 자바스크립트 라이브러리 ( 오픈소스 ) - 자바스크립트 코드 형식을 좀 더 직관적으로 이해할 수 있도록 짧고 단순한 코드 형태로 변형하여 제공 * 연동 방법 1. 다운로드 https://cdnjs.com/libraries/jquery 2. 네트워크 전송 방식 https://cdnjs.com 에서 링크 복사 후, html 파일 타이틀 밑에 아래와 같이 붙여넣기 * jQuery 함수 이해하기 결과값 모두 true * Entry Point 빼먹지 말기! * 선택자 - 문서 객체 모델 1. 기본 선택자 - 직접 선택자 - 인접 관계 선택자 2. 위치 탐색 선택자 - first / last 선택자 $("요소 선택:first") 또는 $("요소 선택").first() $("요소 선택:last") 또는 $("요소..