jQuery

jQueryの構文

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

jQueryの基本構造

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

	});
</script>

<script>
	$(function() {

	});
</script>

メソッドチェーン技術

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

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

selector

<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

코드를 입력하세요

코드를 입력하세요

코드를 입력하세요

    코드를 입력하세요

코드를 입력하세요

코드를 입력하세요

코드를 입력하세요

複文

코드를 입력하세요

$(this) vs this

Animation

hide/show/toggle

코드를 입력하세요

fade

slide

Animate

Web Storage