본문 바로가기

자바스크립트(JavaScript)57

[Jquery] 제이쿼리 이벤트(Event) 제이쿼리 이벤트자바스크립트에서 사용자가 사이트에 방문 후 취하는 모든 행위는 이벤트라고 한다.로딩부터 시작해서 클릭과 같은 모든 동적인 행위(이벤트)가 발생하면 특정 코드가 발생하도록 입력할 수 있는데이렇게 실행되는 코드를 이벤트 핸들러라고 부른다.이벤트의 종류에는 로딩이벤트, 마우스 이벤트, 스크롤 이벤트, 포커스(폼) 이벤트, 키보드 이벤트가 존재하며 이벤트 메서드를 통해 실행 가능하다.이벤트 등록 메서드의 구조에는 하나의 이벤트만 등록할 수 있는 단독 이벤트 등록 메서드와 여러 이벤트를 등록하는 그룹 이벤트 등록 메서드가 있다.이렇게 실행된 이벤트는 이벤트를 제어하는 메서드와 프로퍼티를 통해 제어 가능하다.// 기본형 $("이벤트 대상").이벤트명(function(){ .. 2024. 8. 23.
[Jquery] 객체 조작 메서드 객체 조작 메서드 객체조작 메서드는 객체를 생성, 삭제, 복제, 속성 변환하는 메서드이다.객체 조작 메서드는 속성 조작 메서드와 수치 조작 메서드, 객체 편집 메서드로 나눠진다.속성 조작 메서드는 요소의 속성을 바꿀 때 사용하고, 수치 조작 메서드 요소의 넓이 높이나 위치 등을 조작할 때 사용하고, 객체 편집 메서드는 객체를 생성하거나 삭제 또는 복제할 때 사용한다. 속성 조작 메서드 속성 조작 메서드는 요소의 속성을 조작하는 메서드이다.1. html()  /  text() 메서드html() 메서드는  선택한 하위 요소를 가져와 문자열로 반환하거나 하위 요소를 전부 제거하고 새 요소로 바꿀 때 사용한다.text() 메서드는 선택한 요소에 포함되어 있는 전체 텍스트를 가져오거나 하위 요소를 전부 제거하고 .. 2024. 8. 20.
[Jquery] 제이쿼리 배열 관련 메서드 제이쿼리 배열관련 메서드자바스크립트와 제이쿼리에는 배열 안을 탐색하는 다양한 메서드들이 있다. 1. each / $.each()메서드 ★★ 선택자로 선택한 요소(배열에 담긴 요소들)을 순서대로 하나씩 선택하면서 인덱스 정보를 가져온다.// 기본형(1) $("요소").each(function(매개변수1, 매개변수2 ...){ 자바스크립트 코드 });// 기본형(2) $.each($("요소"), function(매개변수1, 매개변수2 ...){ 자바스크립트 코드 });기본형 1과 2 모두 배열에 저장된 요소의 개수만큼 메서드를 반복 실행한다.메서드를 실행 할 때마다 매개변수에는 배열에 저장된 요소와 인덱스의 값이 오름차순으로 대입된다.첫번째 매개변수는 인덱스 번호를 참조하고 두번째.. 2024. 8. 20.
[Jquery] 제이쿼리 선택자 총 정리 제이쿼리 선택자 제이쿼리 선택자란 DOM 안의 태그 요소를 선택할 때 사용하는 선택자이다.종류로는 크게 '직접 선택자'와 '인접 관계 선택자'로 나뉜다.제이쿼리에서 태그를 선택할 때에는 $(" ")안에 선택자명을 쓴다.직접선택자전체 선택자, id 선택자, class 선택자, 그룹 선택자, 종속 선택자와 같이 태그를 직접 선택하는 선택자이다. 직접 선택자 기본형$("*")전체선택자$("#아이디명")아이디 선택자$(".클래스명")클래스 선택자$("태그1, 태그2")그룹 선택자$("태그.클래스명") or $("태그#아이디명") 종속 선택자인접 관계 선택자인접 관계 선택자는 직접 선택자로 요소를 먼저 선택한 뒤 그와 가까이 있는 요소를 선택할 때 사용한다.선택한 요소를 감싸고 있는 바로 윗계층 요소는 부모요소(.. 2024. 8. 20.
[Jquery] 제이쿼리 기본형 및 태그 요소 불러오는 방법 제이쿼리 기본형제이쿼리를 사용하려면 먼저 제이쿼리를 연결한 후에 기본구조를 먼저 작성해야한다.기본형은 하나의 js 폴더에 한개만 있어야한다.제이쿼리에서 '달러($)기호'는 '제이쿼리'를 의미한다.달러 기호는 제이쿼리에 접근할 수 있도록 하는 식별자 역할을 한다.$()는 '제이쿼리 함수'를 의미하며, 기본형의 가장 바깥에 쓰인다.또한 $()는 css선택자를 전달하여 특정 html요소를 선택할 수 있도록 돕는다.$()를 통해 생성된 요소를 '제이쿼리 객체'라고 부른다.$()함수에 전달되는 인수는 반드시 "따옴표"를 이용하여 문자열 형태로 전달되어야한다.// 기본형(1) : 준비되면 바로 하라는 의미로 좀 더 빨리 처리된다. $(document).ready(function(){ 자바스크.. 2024. 8. 13.
[Jquery] 제이쿼리란? 제이쿼리 ( jquery )제이쿼리는 '모질라'사의 자바스크립트 개발자였던 '존 레식'이 자바스크립트를 이용해 만든 라이브러리 언어이다. 라이브러리 언어란 자바스클비트로 만들어진 다양한 함수들의 집합체를 말한다.자바스크립트에서 함수는 일련의 코드를 함수 내에 정의해놓고 필요할 때마다 호출헤서 사용하는 것이라고 배웠다.제이쿼리는 이런 다양한 함수들을 제공하고 있고, 자바스크립트에서 불편했던 몇가지 점들을 간편하게 사용할 수 있도록 개선한 언어이다. 1. 호환성 문제 해결 자바스크립트의 문서 객체 모델(DOM)과 이벤트 객체는 호환성(크로스브라우징)이 떨어진다는 단점이 있다.제이쿼리에서는 문서객체 선택자의 호환성 문제가 모두 해결되어있다.  2. 쉽고 편한 애니메이션 효과 기능 구현 자바스크립트로 애니메이션.. 2024. 8. 13.

티스토리툴바