본문 바로가기

전체 글127

[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.
[JavaScript] 자바스크립트에서 CSS에 접근하는 방법 자바스크립트에서 css에 접근하기자바스크립트로 CSS의 특정 속성을 제어하고 싶다면 먼저 제어하고 싶은 대상을 불러와야한다.이후 제어할 수 있는 속성이나 메서드를 활용하면 CSS 속성을 제어할 수 있다. 1. style 속성대상을 불러온 뒤 CSS에 접근을 할 때는 document 객체에 포함되어있는 style 속성을 이용한다.style을 이용해 CSS에 접근했다면 어떤 style 속성을 바꿀 것인지 명시한다.이 때, style 뒤에 바꾸고 싶은 속성을 카멜 표기법으로 작성한다. (ex. z-index = zIndex)이후 속성 값을 부여하면 해당 선택자에 속성이 적용된다.// 해당 id 선택자에 적용된 css 스타일 속성에 현재 들어있는 값을 알고 싶을 경우 document.선택자.styl.. 2024. 8. 8.
[JavaScript] DOM 이벤트란? 속성과 메서드 파악하기 DOM 이벤트(event)란? DOM 이벤트란 사용자가 해당 페이지에서 하는 모든 행위를 뜻한다.클릭이나 더블클릭, 마우스휠로 페이지를 위 아래로 이동하거나 태그위에 마우스를 올리는 등 모든 행위를 ' 이벤트 '라고한다.자바스크립트에서 이벤트를 실행시키려면 이벤트 처리기(event handler)를 연결해야한다.HTML 태그에 직접 이벤트 핸들러를 연결시킬수도 있지만 태그와 스크립트소스가 섞여있어 복잡한 프로그램에는 적합하지 않다.이럴 때 자바스크립트 내부에서 이벤트 핸들러를 연결하면 html태그와 스크립트 소스를 완전히 분리시킬 수 있다.1. 해당 요소에 이벤트를 직접 적용해당 요소에 이벤트를 1개만 직접 적용할 때 사용한다. 다른 태그에는 해당 이벤트가 적용되지 않는다. // 기본형 요소명.. 2024. 8. 7.

티스토리툴바