본문 바로가기

WEB/HTML CSS JS

 (75)
5. jquery animation method 애니메이션 메서드 기존 css에서도 transform 변형함수와 transition, @keyframes을 이용한 애니메이션을 만들 수 있지만, jquery로는 조금 더 쉽게 애니메이션을 만들 수 있습니다. 효과 메서드 메서드 설명 $("요소").hide() 숨김 $("요소").fadeOut() 점점 사라짐 $("요소").slideUp() 접히며 사라짐 $("요소").show() 나타남 $("요소").fadeIn() 점점 나타남 $("요소").slideDown() 아래로 펼쳐짐 $("요소").toggle() hide(), show() $("요소").fadeToggle() fadeIn(), fadeOut() $("요소").slideToggle() slideUp(), slideDown() $("요소").fadeTo() 투명도..
4. jquery event method 이벤트 등록 메서드(단일, 그룹) 제이쿼리를 사용하면 이벤트 등록 메서드를 통해 간단하게 이벤트 처리를 할 수 있다. 이벤트 등록 메서드 메서드 설명 $("대상").ready(function(){ }) DOM 객체의 로딩이 끝나면 $("대상").load(function(){ }) 외부 연동 소스의 로딩이 끝나면 $("대상").error(function(){ }) 오류가 발생하면 $("대상").click(function(){ }) 클릭 했을 때 $("대상").dbclick(function(){ }) 더블 클릭 했을 때 $("대상").mouseout(function(){ }) 마우스 포인터가 벗어났을 때 $("대상").mouseover(function(){ }) 마우스 포인터를 올렸을 때 $("대상").hover(function(){오버},..
3. jquery DOM maniputlation 객체 조작 메서드(속성, 수치, 편집) 2022.12.28 - [IT/javascript] - 2. jquery selectors 여러가지 선택자들(기본, 탐색) 앞에서 배운 jquery 선택자로 원하는 객체 요소를 가져올 수 있게 되었으니, 이번에는 객체 조작 메서드를 배워 원하는 스타일로 변경해 보려고 합니다. 속성 조작 메서드 메서드 $("요소").html() $("요소").html("새 요소") 해당 하위 요소 해당 모든 하위 요소를 제거하고 새 요소 생성 $("요소").text() $("요소").text("새 텍스트") 해당 요소 텍스트 제거후 새 텍스트를 생성 $("요소").attr("속성명") $("요소").attr("속성명","값") 해당 요소 속성값 새 값으로 적용 $("요소").removeAttr("속성명") 해당 요소 속성..
2. jquery selectors 여러가지 선택자들(기본, 탐색) css와 js, jquery에서는 마찬가지로 다양한 선택자들을 제공한다. 기본 선택자 태그, id, 클래스와 부모, 형제 선택자들 선택자 설명 $("*") 전체 $("#id") 아이디 $(".class") 클래스 $("p") 요소 $("선택자1, 선택자2, 선택자3") 그룹 $("p.class") class 속성을 가진 p 요소 $("요소 선택").parent() 부모 요소 $("요소 선택").parents() 상위 요소를 모두 $("선택자1>선택자2") 자식 요소 $("선택자1 선택자2") 선택자1 하위 요소 $("요소 선택").children() 모든 자식 요소 $("요소 선택").prev() 이전 요소 $("요소 선택").preAll() 이전 모든 요소 $("요소 선택").prevUntil("요소"..
1. jquery 연동하고 hello jquery jquery는 예전에는 많이 사용했던 라이브러리 입니다. 그렇다고 지금 사용하지 않는다는 건 아니니 배워서 나쁠 것은 없지만, jquery를 통해 javascript를 같이 학습하는 것이 가장 좋아보입니다. 요즘은 주로 가상 dom을 사용하는 vue, react를 주로 사용한다고 합니다. jquery 연동하기 다운로드 방식 대신, CDN으로 연동할 생각입니다. 방법을 모르는 사람은 아래 글을 참고할 수 있습니다. 2022.12.23 - [IT/javascript] - 4. javascript 외부 스크립트 연결하기, css 외부 연결하기 4. javascript 외부 스크립트 연결하기, css 외부 연결하기 css 파일은 link 태그를 사용해 외부파일을 연결했다면, js 파일은 script 태그로 연결..
7. javascript 함수, 재귀 함수, 내장 함수 정리 함수란 변수로는 데이터를 저장할 수 있지만, 함수로는 코드 자체를 저장할 수 있다. 자주 사용하는 코드를 저장해놓고 필요할 때 마다 함수를 호출하여 사용한다. 함수 정의 function textFnc(){ document.write("짧지만 나도 함수"); } var anonyFnc = function(){ document.write("나는 익명 함수"); } 일반 함수와 익명 함수 차이점은 호이스팅 가능다. 호이스팅이란 함수 호출이 함수 정의보다 먼저 되어도 정의부분을 끌어올려 호출 가능하게 해준다. 그러나 익명 함수은 호이스팅이 불가능해 정의보다 미리 호출되면 오류가 발생한다. 값을 전달 받는 함수 함수는 매개변수를 통해 값을 전달 받는다. 그러나 arguments 변수를 이용할 수도 있다. func..
6. javascript 브라우저 객체(Browser Object) 정리 브라우저 객체란 브라우저에 내장된 객체를 뜻합니다. 앞에서 정리한 내장객체는 javascript 언어에 내장된 객체입니다. 2022.12.24 - [컴퓨터/javascript] - 5. javascript 내장 객체(Built-in object) 정리 브라우저 객체 브라우저 객체는 계층적 구조로 되어있으며 브라우저를 구성하는 것들을 객체로 만들어놨습니다. 이를 브라우저 객체 모델(BOM, Browser Object Model)이라고 부릅니다. 그 중 document 객체 같은 경우 활용성이 높아 문서 객체 모델(DOM, document Object Model)로 따로 정리됩니다. 객체1 객체2 객체3 window document body, div, img, ... 태그 요소 console history ..
5. javascript 내장 객체(Built-in Object) 정리 자바스크립트 객체 종류 자바스크립트는 내장 객체, 브라우저 객체 모델(BOM), 문서 객체(DOM)를 제공합니다. 이번에 알아볼 것은 내장 객체입니다. 객체 기반 언어인 javascript는 내장 객체들을 제공합니다. 객체란 클래스를 생성자 함수를 통해 사용할 수 있게 만든 것입니다. 예를 들어 Date() 이런 식으로 대문자로 시작하는 함수가 생성자 함수이고, 객체를 반환합니다. 객체를 통해 미리 클래스에 정의된 속성(property), 기능(method)을 사용할 수 있습니다. 접근 방법은 생성된 객체에 객체.메서드(), 객체.속성 형태로 합니다. 내장 객체 내장 객체 만드는 법 참조변수 = new 생성자함수(); Date var date = new Date("1992-11-1 11:01:11.123..

티스토리툴바