jQuery

jQuery의 문법

<script>
	$(selector).속성 또는 $(selector).함수() 
</script>

jQuery의 기본구조

<script>
	$(document).ready(function() {

	});
</script>

축약형

<script>
	$(function() {

	});
</script>

메소드 체인기법

한번에 여러개의 css 적용하기
1. $(selector).css().css().css()...;

<script>
  	$("h3").css("backgroundColor", "red").css("color", "white").css("font-size", "20px");
</script>

2. $(selector).css({key:value, key:value...});

<script>
  $("h3").css({backgroundColor:"red", color:"white", fontSize:"30px"});
</script>

selector

• class찾기
  $(".div").css({border:"dashed 3px blue"});

• id찾기
  $("#tag").css("textDecoration", "underline");

• 하위요소 찾기

<script>
	$(".div ol li").css("color", "red"); 

	$(".div ol li").css("color", "red"); //equals

	$(".div ol li:eq(0)").css("color", "red"); // less than

	$(".div ol li:gt(2)").css("color", "red"); // greater than

	$(".div ol li:not(:gt(2))").css("color", "red"); // not greater than 
		
	$(".div ol li:even").css("color", "red"); // 짝수

	$(".div ol li:odd").css("color", "blue"); // 홀수
</script>

child selector

<script>
	$("div span").css("background-color", "yellow"); // div의 모든 하위 span element를 찾는다
	   
	$("div > span").css("background-color", "yellow"); // div의 바로 하위 span element를 찾는다 
 </script>

attribute selector

<script>
  $("[type]").css("border", "1px red solid"); // [] 속성으로 찾기 

  $("[type=text]").css("backgroundColor", "blue");

  $("[name=name]").css({
      color:"white",
      backgroundColor:"pink",
      border:"dotted 3px red"
  });

  // $는 "사"로 끝나는 값 찾기 
  $("[value$=사]").css("color", "red");
</script>

selector Filter Table

<script>
  	$("tr:odd").css("backgroundColor", "pink"); // 홀수마다 (0부터 시작) : index 0부터 시작 -> nth:child(2n)과 똑같이 출력 
    
	$("tr:even").css("backgroundColor", "skyblue"); // 짝수마다 (0부터 시작) : index 0부터 시작 
    
	$("tr:eq(0)").css({backgroundColor:"blue", color:"white"}); // 0일때
		
	$("tr:nth-child(2n)").css("backgroundColor", "gray"); // 3의 배수마다 : nth-child는 배수나타낼때 많이 사용 
</script>

Event

focus, blur

<script>
    $(function(){
        $("[name=name]").focus(function() {
            // 기능
            $(this).css({border:"3px double red", color:"blue"}); // 이벤트를 일으키는 주체와 css 적용하는 주체가 같을 때 this!!! 
        }).blur(function() {
            // 기능 
            $(this).css("border", "1px solid gray").css("backgroundColor", "skyblue");

            // text박스의 값을 읽어오기
            let v = $(this).val() // .val() -> javaScript문법 ~.value = 값 속성과 동일 

            // text박스의 값 지우기 
            $(this).val("");

            // div 영역에 넣기 
            $("#result").html("입력값 = " + v + "<br>") // .html() -> javaScript문법 ~.innerHTML = 값 동일

        }); // selector가 focus,blur이벤트 둘 다 가져간다 
    });
</script>

change

<script>
    $(function() {
        $("select[name=job]").change(function() {
            // 선택된 값 가져오기 
             alert("$(this).val() = " + $(this).val()) // this는 select 
             alert("this.value =  " +this.value);

            // 선택된 index 가져오기 
             alert("선택된 Index : " + this.selectedIndex); // javaScript에서만 지원 	
        }); // select속성중에 Name이 job인 속성을 바꿔라 
    });
</script>

submit

<script>
    $(document).ready(function() {
        // submit은 form에 이벤트 준다 
        $("#form").submit(function() {
            // id와 pwd 값 유무 체크 
            // input text값 가져오는건 .val() 
            if($("#id").val() == "") {
                alert("아이디를 입력하세요.");
                $("#id").focus();
                return false; // 함수를 빠져나가라 return false 필수! submit 이동 막기  
            }
            if($("#pwd").val() == "") {
                alert("비밀번호를 입력하세요.");
                $("#pwd").focus();
                return false;   
            }
        }); 
    });	
</script>

click

• jQuery에서 제공하는 반복문

1. $.each(반복대상, function(index, item) { });

   • ex) let arr = [1,2,3,4,5];
   • 반복대상에 arr 넣음
   • index는 번지수, item은 항목들을 꺼내줌
     

   코드를 입력하세요

2. $(selector).each(function(index, item){ });
   - selector를 반복!!!
   - index는 번지수, item은 항목

   코드를 입력하세요

   keyup

   코드를 입력하세요

   on

3. 정적요소에 이벤트를 적용할 때

   • $(selector).이벤트종류(function() { });
     ex) $(selector).click().blur().focus();

4. 이벤트를 적용할 때 정적요소 또는 동적요소에 이벤트 적용

   • $(selector).on(”이벤트종류", function() { });
     ex) $(selector).on().on().on()...;
     → $(selector).on({이벤트종류:function(){ }, 이벤트종류:function(){ },...});

• checkboxAll

      코드를 입력하세요

• genderCheck

  코드를 입력하세요

  trigger

  코드를 입력하세요

  each

  코드를 입력하세요

반복문

코드를 입력하세요

$(this) vs this

• jQuery
  "$(this).val() = " + $(this).val();
  
• javaScript
  "this.value = " + this.value;

Animation

$(selector).속성(speed,callback)

hide/show/toggle

hide -> display: none 기본 적용

코드를 입력하세요

fade

opacity에 따라 - fadeIn, fadeOut, fadeToggle vs fadeTo

slide

slideDown(), slideUp()

Animate

Web Storage

1. sessionStorage
2. localStorage