jquery11 JQuery_효과 메서드 선택한 요소를 역동적으로 숨겼다가 보이게 만드는 기능 1. 숨김 hide() : 요소를 숨김 fadeOut() : 투명해지면서 사라짐 slideUp() : 위로 접히며 서라짐 $(".btn1").on("click",function(){ $(".box").slideUp(1000,"linear",function(){ //효과주는 함수 포함 요소 (커튼느낌 시간, 가속도, 콜백함수) $(".btn1").hide(); $(".btn2").show(); }); }); 2. 노출 show() : 요소를 노출 fadeIn() : 숨겨진 요소가 점점 선명해짐 slide() : 숨겨진 요소가 아래로 펼쳐침 $(".btn2").on("click",function(){ $(".box").fadeIn(1000,"swing",.. 2022. 11. 18. JQuery_탐색 선택자 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색 1. 위치 탐색 선택자 : 기본 선택자로 선택한 요소는 배열에 담기고 배열의 인덱스를 통해 특정 요소 선택 $("요소선택:eq(index)") $("요소선택".eq(index) : 선택요소 중 지정한 인덱스가 참조하는 요소 $("#menu li").eq(2).css("background-color","coral"); //인덱스 2번 $("요소선택".lt(index) : 지정한 인덱스보다 작은 인덱스를 참조하는 요소 (지정 인덱스 미포함) $("#menu li:lt(2)").css("background-color","yellow"); //인덱스 2보다 작은애들 $("요소선택".gt(index) : 지정한 인덱스보다 큰 인덱스를 참조하는 요소 $(.. 2022. 11. 17. JQuery_이벤트 종류 단독 이벤트 메서드 : 한 가지 동작에 대한 이벤트(헨들러)만 등록 할 수 있다. 기본형 : $("이벤트대상").이벤트 등록 메서드(function(){ 자바스크립트 코드; }); 예) 익명함수를 사용 $(".btn1").click(function(){ $(".btn1").parent().next().css("color","red"); }); 그룹 이벤트 메서드 2022. 11. 17. JQuery_기본 선택자 1. 내부에 위치 : - $(document).ready(function(){}) 혹은 $(function{}()); 내부에 작성해야 함 2. 내부 위치 : - 스크립트 내용 그대로만 작성 1. 선택한 요소에 지정한 스타일 적용 $("css 선택자").css("스타일 속성명","값"); 2. 지정한 요소에 지정한 속성 적용 $("css 선택자").attr("속성명","값"); **체이닝 기법 선택한 요소에 메서드를 연속 사용 $(요소선택).css(속성1, 값1).css(속성2, 값2)...; 1. 직접 선택자 : 멀리 떨어진 요소를 직접 선택할 때 사용 $("*") : 전체 선택자 (현재 HTML의 모든 태그를 선택) $("*").css("border","2px solid blue") $("#아이디명").. 2022. 11. 15. JQuery - javascript 라이브러리 https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jquery.com 다운로드 or cdn 방식 head 내 title 아래 삽입 2022. 11. 15. 이전 1 2 다음
