JQuery 학습 01 - 액션, Math, 이벤트

1. 웹페이지 액션

 - 슬라이드 - 

            slideUp() : 요소의 높이를 0이 될때까지 줄이고 숨김 

            slideUp() : 요소의 높이를 원래값으로 만듬 

 

- 페이드 -

            fadeIn() : 투명상태에서 불투명상태로 만드는것 ()안에 밀리초(ms)를 사용 

            fadeOut(), fateTo(), fadeToggle() 까지 총 4가지

		<script>
			$(document).ready(function(){
				$("#clickMe").click(function() {
					$("img").fadeIn(1000);
					$("#picframe").slideToggle("slow");
				});

				$("#clickMe02").click(function() {
					$("#img02").fadeIn(1000);
					$("#picframe02").slideDown("slow");
				});
			});
		</script>

- Math -

           floor 매서드는 가장 가까운 정수를 반환 !

           random 매서드는 0 ~ 1 사이의 랜덤한 숫자를 반환 ! 

 

		<script>
			$(document).ready(function() {
				$(".guess_box").click( function() {
					$(".guess_box p").remove();
					const discount = Math.floor((Math.random()*5) + 5);
					const discount_msg = "<p>Your Discount is "+discount+"%</p>";
					$(this).append(discount_msg);
				});
			});
		</script>

 

- 이벤트 - 

이벤트 제거 : $("#myElement").unbind("click");

모든 이벤트 제거 : $("#myElement").unbind();

요소 전체에 대해 루프 : $("#myElement").each(function(){

       $(this).unbind("click");  

});

        $contains(document.body, document.getElementById("header"))

        $.contains 매서드란? 첫번째 매개변수의 자식 요소를 확인하면서 그중 두번째 매개변수가 들어있는지 확인

 

 

$("#myElement").addClass("hover") : 클래스 추가

$("#myElement").removeClass("hover") : 클래스 제거

$(".guess_box").each(function(index, value) {} index =>  루프에서 현재 위치, value = 는 현재 요소 this 와 마찬가지

return false; // return 은 루프에서 빠져나가는 함수 탈출 - break 는 루프 탈출

 

$(document).ready(function() {

	$(".guess_box").click( checkForCode );
	
	function getRandom(num){
		var my_num = Math.floor(Math.random()*num);
		return my_num;
	}
	
	var hideCode = function houdini(){
	  var numRand = getRandom(4);
	  $(".guess_box").each(function(index, value) {  // index => 현재 위치, value = 는 현재 요소 this 와 마찬가지
		 if(numRand == index){
			$(this).append("<span id='has_discount'></span>");
			return false; // return 은 루프에서 빠져나가는 함수 탈출 - break 는 루프 탈출
		 } 
	  });
	}
	
	hideCode();
	
	function checkForCode(){
		var discount;
	 	if($.contains(this, document.getElementById("has_discount") ) )
		{
			var my_num = getRandom(100);
			discount = "<p>Your Code: CODE"+my_num +"</p>";
		}else{
			discount = "<hr>Sorry, no discount this time!" ;
		}
		$(".guess_box").each(function() { 
			if($.contains(this, document.getElementById("has_discount") ) )
			{
				$(this).addClass("discount");
			}else{
				$(this).addClass("no_discount");            
			}
			$(this).unbind();
		});
		$("#result").append(discount);   
	} // End checkForCode function 
	
	$(".guess_box").hover(
	  function () {
		$(this).addClass("my_hover");
	   },
	   function () {
		  $(this).removeClass("my_hover");
	   });  // End hover
});

 

- 요약 - 

 

페이드 효과 : 투명상태에서 불투명상태로 만드는것 - 여러가지 방식으로 효과를 줄 수 있음

 

선택자

$(this) : 현재 요소를 선택

 

$("div") : 페이지에 div 요소를 모두 선택

 

$("div p") : div 요소에 들어있는 p 요소 모두

 

$(".my_class") : 클래스가 my_class인 요소 모두 선택

 

$("#my_id") : id가 my_id인 요소 선택

 

메서드 : JQuery 메서드는 JQuery 라이브러리에 정의되어 있는 재사용 가능한 코드

- appemd() , remove() 등

 

이벤트 : 웹 페이지 상호작용에 도움을 주는 객체, 대략 30가지 정도 존재