jQuery 정리 | css 스타일, 이벤트, 애니메이션

 

 

스타일 설정

 

 

css 스타일 설정

$("p").css("fontSize", "25px");.

$("p").css({

   fontSize: "25px",         // 모든 <p>요소의 글씨 크기를 25px로 설정함.

   backgroundColor: "yellow" // 모든 <p>요소의 배경색을 노란색으로 설정함.

});

ex)

$(function(){
	$("button").on("click",function(){
    	$("p").css("fontSize", "25px");
        
        $("#text").html($("p").css("fontSize"));
    });
});

 

 

---

 

 

속성과 프로퍼티 설정

속성은 HTML 문서에 존재하고 값이 변하지 않으며,

프로퍼티는 HTML DOM 트리에 존재하고 그 값이 변할 수 있습니다.

--> 체크박스가 체크되면 <check>노드의 프로퍼티 값은 "true"가 되는 것입니다.

 

 

속성

$("#word").attr("title", "즐거운 제이쿼리 수업이에요~")

<span id="word" title="즐거운 제이쿼리 수업이에요~" style="color: red;">단어</span>

$("#word").removeAttr("title") 

 

 

프로퍼티

.prop

<input type="checkbox" name="lecture" value="jquery"> jQuery

$("input[value='jquery']").prop({  checked: true });

.removeProp

$("input[value='jquery']").removeProp("checked"); // 해당 요소에서 checked 프로퍼티를 삭제함.

 

 

---

 

 

클래스 설정

메소드설명

.addClass()	선택한 요소에 인수로 전달받은 클래스를 추가함.
.removeClass()	선택한 요소에서 인수로 전달받은 클래스를 제거함.
.toggleClass()	선택한 요소에 클래스가 없으면 인수로 전달받은 클래스를 추가하고, 전달받은 클래스가 추가되어 있으면 제거함.
.hasClass()	인수로 전달받은 값이 선택한 요소의 클래스 이름과 일치하는지를 확인함. return true;

 

 

---

 

 

이벤트(event)

 

이벤트 핸들러 - 특정 요소에서 발생하는 이벤트 처리

 

 

이벤트 연결 - 특정 요소에서 발생하는 이벤트 처리

 

.on() 메소드

 

mouseenter: f(){}

click: f(){}

mouseleave: f(){}

$(function(){
	$("button").on({
            mouseenter:function(){
                $("#text").append("마우스 진입");
            },
            click: function(){
                $("#text").append("마우스 클릭");
            },
            mouseleave:function(){
                $("#text").append("마우스 빠져나감");
            }
    });
});

 

 

• 어떤 타입의 이벤트를 여러개 동시에 연결 가능

$("button").on("mouseenter mouseleave", function() {

    $("#text").append("마우스가 버튼 위로 진입하거나 빠져나갔어요!<br>");
});

 

.one() 메소드

• 연결된 이벤트 핸들러가 한 번 실행된 후에는 다른 이벤트 핸들러를 실행하고 싶을 때도 사용

$(function() {
    $("button").one("click", function() {
        // 모든 <button>요소가 처음 클릭됐을 때에만 실행됨.
        $("#text").append("첫 번째 클릭이에요!<br>");
        // 모든 <button>요소가 두 번째 클릭됐을 때부터는 이 이벤트 핸들러가 실행됨.
        $(this).click(function() {
            $("#text").append("이 버튼을 벌써 클릭했네요!<br>");
        });
    });
});

첫 번째 클릭이에요!
이 버튼을 벌써 클릭했네요!
이 버튼을 벌써 클릭했네요!

 

 

 

.off() 메소드

• 더는 사용하지 않는 이벤트와의 연결을 제거합니다.

$(function() {
    $("#clickBtn").on("click", function() {		// id가 "clickBtn"인 요소를 클릭했을 때 실행됨.
        $("#text").append("버튼을 클릭했어요!<br>");
    });
    $("#removeBtn").on("click", function() {
        $("#clickBtn").off("click");			// id가 "clickBtn"인 요소의 클릭 이벤트와의 연결을 제거함.
    });
});

"click" 이벤트를 제거

 

.dblclick() | "dblclick" 메소드

.hover() | "hover" 메소드

 

---

 

이벤트의 위임(event delegation)

$(function() {
    $("ul").on("click", "a", function(event) {
    	console.log(this.tagName) // this 는 a
        event.preventDefault();					// <a>요소의 클릭시 기본 동작인 링크의 작동을 중지시킴.
        $("#text").append("이 링크는 동작하지 않습니다!<br>");
    });
    $("button").one("click", function() {
        $("ul").append('<li><a href="/jquery/intro">jQuery</a></li>');
    });
});

 

on API 의 두번째 인자는 필터링 기능

.on("이벤트","두번째 인자",f)

 

"a" 태그가 동적으로 추가 되어도 위임을 통해 적용

>> 동적으로 추가되는 엘레멘트에 대해 대응 가능

>> 이벤트의 위임을 이용하면 현재 존재하는 자손 요소뿐만 아니라, 나중에 추가되는 자손 요소까지도 모두 자동으로 연결

 

---

 

마우스 관련

.click()
.dblclick()
.hover()	"mouseenter" + "mouseleave"
.mousedown()	자바스크립트의 "mousedown" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "mousedown" 이벤트를 발생시킴.
.mouseenter()	해당 요소 위로 마우스가 진입할 때 발생하는 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 마우스 진입 이벤트를 발생시킴.
.mouseleave()	해당 요소에서 마우스가 빠져나갈 때 발생하는 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 마우스가 빠져나가는 이벤트를 발생시킴.
.mousemove()	자바스크립트의 "mousemove" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "mousemove" 이벤트를 발생시킴.
.mouseout()	자바스크립트의 "mouseout" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "mouseout" 이벤트를 발생시킴.
.mouseover()	자바스크립트의 "mouseover" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "mouseover" 이벤트를 발생시킴.
.mouseup()	자바스크립트의 "mouseup" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "mouseup" 이벤트를 발생시킴.

 

 

키보드 이벤트와 관련된 메소드

.keydown()	자바스크립트의 "keydown" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "keydown" 이벤트를 발생시킴.
.keyup()	자바스크립트의 "keyup" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "keyup" 이벤트를 발생시킴.
.keypress()	자바스크립트의 "keypress" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "keypress" 이벤트를 발생시킴. (Shift, Esc, Delete) (X)

 

 

input 태그와 관련된 메소드

.blur()	"blur" 는 포커스 벗어남
.change()	자바스크립트의 "change" 는 값이 변할 때
.select()	자바스크립트의 "select" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "select" 이벤트를 발생시킴.
.submit()	자바스크립트의 "submit" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "submit" 이벤트를 발생시킴.
.focus()	자바스크립트의 "focus" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "focus" 이벤트를 발생시킴.
.focusin()	"focusin" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "focusin" 이벤트를 발생시킴.
.focusout()	"focusout" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "focusout" 이벤트를 발생시킴.

$(function() {
    // 아이디가 "focus"인 요소에 focusin 이벤트를 설정함.
    $("#focus").on("focusin", function(event) {
        $(this).css("backgroundColor", "yellow");
    });

    // 아이디가 "focus"인 요소에 focusout 이벤트를 설정함.
    $("#focus").on("focusout", function(event) {
        $(this).css("backgroundColor", "white");
    });
});

 

---

 

애니메이션 effect 효과

파라미터 : "slow"(600) , "normal"(400) , "fast"(200) , 2000 가능

• 나타나기 숨기기 : display  변경

.show();

    .show(2000); // 2초간

.hide();   // display  : none

    .hide("fast"); // 빠르게, "slow" // 느리게

.toggle();  // show, hide 번갈아 수행

 

 

• 페이드 효과 : opacity 변경

.fadeIn()

.fadeout()

.fadeTo(2000, 0.2)  // 2초가 0.2까지 변경

.fadeToggle()

 

 

• 슬라이드 효과 : height 변경

.slideUp()

.slideDown()

.slideToggle()

 

 

• 이펙트 효과 딜레이/지연 설정

.delay()

$("#divBox").fadeOut(500).delay(1000).fadeIn(2000);

 

 

• 이펙트 효과 중지와 제거

.stop()   // 실행 중인 모든 이펙트 효과 즉시 중지

.finish(); // 실행 중인 모든 이펙트 효과 즉시 중지 후, 큐에서 제거

$(function(){
	$("#toggleBtn").on("click",function(){
    	$("#divBox").slideToggle(2000);
    });
    
    $("#stopBtn").on("click", function(){
    	$("#divBox").stop();
    });
    
    $("#finishBtn").on("click", function(){
    	$("#divBox").finish();
    });
});

 

 

---

 

jQuery.fx 객체

이펙트 효과 제어

jQuery.fx.speeds.

$("#setBtn").on("click", function(){
	jQuery.fx.speeds.fast =1000;
});

 

jQuery.fx.interval : 프레임 제어

 

jQuery.fx.off = true : 이펙트 효과 비활성화

>> 구형 버전의 브라우저 다룰 때 유용하다고 함.

 

 

---

 

 

사용자 정의 이펙트 애니메이션

.animate()

 

$(선택자).animate(프로퍼티[,지속시간][,시간당속도함수][,콜백함수]);

사용예)

$("#divBox").animate(
	{
    	left:"+=100",
        opacity:0.2
    },
    500
    ,function(){
    	$("#text").html("..")
    }
);

 

 

시간당 속도 함수 추가

$(function(){
	$("#divBox").mouseenter( function(){
    	$(this).stop().animate({
        	width: "300px"
        },1000, "linear");
    });
    $("#divBox").mouseleave( function() {
        $(this).stop().animate({
            width: "50px"   // CSS width 프로퍼티의 값을 "50px"로 설정함.
        }, 1000, "swing");  // 시간당 속도 함수를 "swing"으로 설정함.
    });
});

  $(this).stop().animate()  // 이펙트 효과를 사용할 때만 적용

 

 $(this).animate() // 이펙트 효과가 계속 남아 있음

 

 

 

jQuery의 .animate()에서 .stop()의 중요성 | 부빠기별

 

 

 

---

 

 

jQuery 비동기 서버 통신 Ajax

		$.ajax({
			type:"post",
			url:"/register",
			contentType:"application/json;charset=utf-8",
			data:JSON.stringify(data),
			success:function(resp){
				if(resp=="success"){
					alert("성공")
					location.href="/login"
				}
				if(resp=="fail"){
					alert("이미 존재하는 사용자명입니다.")
					$("#name").focus();
					$("#name").val("");
				}
			},error:function(e){
				alert("실패: "+e)
			}
		})

jQuery 비동기 서버 통신 Ajax