목록Front-End (웹)/jQuery (15)
EverGiver
웹 요소를 클릭했을 때 실행할 함수를 연결하려면 다음과 같은 기본 형식으로 사용한다. 웹 요소.onclick = 함수; 자바스크립트에서는 웹 요소를 여러 방법으로 가져올 수 있는데 그중에서 함수 querySelector( )를 사용하여 가져오는 것이 쉽다. - querySelector( )의 괄호 안에는 클래스 이름이나 id 이름 또는 다양한 선택지를 넣을 수 있다. 예시 1. querySelector( )를 사용해 버튼 요소를 가져오고 변수 changeBttn에 저장한다. 그리고 changeBttn에 onclick을 사용해 changeColor( ) 함수를 연결한다. ▷ 이때 주의할 점은 함수의 이름만 사용하고 괄호는 붙이지 않아야 한다는 것이다. 2. 웹 요소의 프로그램 안에서 여러 번 사용하지 않..
MENU menu1 menu2 menu3 menu4 menu5 menuA subA subA subA subA menuB subB subB subB subB menuC subC subC subC subC menuD subD subD subD subD Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quam reiciendis provident doloribus saepe facere facilis atque aliquid, veritatis magni dignissimos quidem obcaecati quos illum animi officiis! Velit vel rerum facilis. menuA subA subA subA subA menuB ..
아이디 비밀번호 아이디 비밀번호 아이디 비밀번호 글자를 표시하지 않는 방식 1. 시각장애인 X → display:none; 2. 시각장애인 O, 영역 O (배경 이미지를 설정하는 경우) → text-indent:-9999px;overflow:hidden; 3. 시각장애인 X, 영역 X → text-indent:-9999px;overflow:hidden;width:0;height:0;position:absolute; → position:absoulte;left:-9999px; (주로 blind나 screen_out이라는 class를 추가하여 사용한다)
each() 란? jQuery를 사용해 배열을 관리하고자 할 때 each() 메서드를 사용할 수 있다. each() 메서드는 매개 변수로 받은 것을 사용해 for in 반복문과 같이 배열이나 객체의 요소를 검사할 수 있다. // jQuery 유틸리티 메서드 $.each(object, function(index, item){ }); // jQuery 일반 메서드 $(selector).each(function(index, item){ }); each() 예시 사과 딸기 바나나 수박 1 - 오리인테이션 5 - 실습 9 - 쪽지시험 17 - 조별실습 28 - 시험
1. 하나씩 열리는 아코디언 형식의 리스트 제목영역1 내용영역1 제목영역2 내용영역2 제목영역3 내용영역3 제목영역4 내용영역4 제목영역5 내용영역5 2. 자유롭게 열고닫는 아코디언 형식의 리스트 제목영역1 내용영역1 제목영역2 내용영역2 제목영역3 내용영역3 제목영역4 내용영역4 제목영역5 내용영역5 stop() : 앞의 동작을 멈추고, 다음 동작을 실행하여라 not(:animated) : 움직이는 것을 제외하고 실행하여라 / 움직이지 않을 때에만 실행하여라 $('dt').click(function(){ $(this) : dt $('dd', this) : dt dd → 클릭한 dt 안에 있는 dd $('+dd', this : dt + dd → 클릭한 dt 뒤에있는 dd })
클래스 활용 addClass - class를 추가할 때 사용 removeClass - class를 삭제할 때 사용 toggleClass - class를 추가 / 삭제 hasClass - class의 유무를 확인 addClass : class를 추가할 때 사용 addClass removeClass : class를 삭제할 때 사용 removeClass toggleClass : class를 추가/삭제 toggleClass hasClass : class의 유무를 확인 hasClass