220622) jQuery(3)

학습한 내용

Form 태그 선택자

• Form 태그 내부의 입력에 관련된 태그들에 대한 선택자
• :input : 모든 입력에 관련된 태그들을 선택
• :text : type 속성이 text인 input 태그를 선택
• :password : type 속성이 password인 input 태그를 선택
• :radio : type 속성이 radio인 input 태그를 선택
• :checkbox : type 속성이 submit인 input 태그를 선택
• :submit : type 속성이 submit인 input 태그를 선택
• :reset : type 속성이 rese 인 input 태그를 선택
• :button : type 속성이 button인 input 태그를 선택
• :image : type 속성이 image인 input 태그를 선택
• :file : type 속성이 file인 input 태그를 선택

<!-- Form 태그 선택자 -->
<!-- :input : 모든 입력에 관련된 태그들을 선택 -->
<script>
	$(function(){
		// $(":input").css("background-color", "yellow");
		$(":text").css("background-color", "yellow"); //type 속성이 text인 input 태그를 선택
		$(":password").css("background-color", "red"); //type 속성이 password인 input 태그를 선택
	})
</script>

• :enabled : 활성 상태인 input 태그가 선택
• :disabled : 비 활성 상태인 input 태그가 선택
• :selected : select 태그 내의 option 태그 중 현재 선택되어 있는 태그를 선택
• :checked : checked나 radio에서 현재 check 되어 있는 태그를 선택

• Form 태그 선택자를 활용하면 input 태그에 접근 할 수 있다.

<script>
    $(function(){
		$(":enabled").css("background-color", "yellow");
		$(":disabled").css("background-color", "red");
	})
</script>

jQuery 이벤트 함수

• jQuery는 여러 이벤트에 대해 이벤트 처리를 할 수 있는 함수를 제공
• 각 함수는 해당 이벤트가 발생됐을 때 등록된 함수를 자동으로 호출
• https://www.w3schools.com/jquery/jquery_ref_events.asp

• click : 클릭
• Dblclick : 더블 클릭
• Mouseenter : 마우스 커서가 들어왔을 때
• Mouseleave : 마우스 커서가 나갔을 때
• Mousedown : 마우스 키를 눌렀을 때
• Mouseup : 마우스 키를 떼었을 때
• Hover : 마우스 커서가 들어왔을 때와 나갔을 때

<script>

// 따로 쓴 것을 function 닫기 전에 안에 써도 됨

    $(function(){
        //클릭하면 함수실행
		$("#a1").click(function(){
            $("#a1").css("background-color", "black");
            $("#a1").css("color", "white");
        });
	})

    $(function(){
        //더블 클릭하면 함수실행
		$("#a2").dblclick(function(){
            $("#a2").css("background-color", "black");
            $("#a2").css("color", "white");
        });    
	})

//--------------------------------------------------mouse enter/leave   
    $(function(){
        //마우스 올리면 함수실행
		$("#a3").mouseenter(function(){
            $("#a3").css("background-color", "black");
            $("#a3").css("color", "white");
        });    
	})

    $(function(){
        //마우스 벗어나면 함수실행
		$("#a3").mouseleave(function(){
            $("#a3").css("background-color", "white");
            $("#a3").css("color", "black");
        });    
	})

//--------------------------------------------------mouse down/up
    $(function(){
        //마우스 누르면 함수실행
		$("#a4").mousedown(function(){
            $("#a4").css("background-color", "black");
            $("#a4").css("color", "white");
        });    
	})   

    $(function(){
        //마우스 떼면 함수실행
		$("#a4").mouseup(function(){
            $("#a4").css("background-color", "white");
            $("#a4").css("color", "black");
        });    
	})

//--------------------------------------------------mouse hover

    $(function(){       
        $("#a5").hover(function(){
            $("#a5").css("background-color", "black");
            $("#a5").css("color", "white");
        }, function(){
            $("#a5").css("background-color", "white");
            $("#a5").css("color", "black");          
        });    
	})

</script>

• focus : 포커스가 주어졌을 때
• Blur: 포커스를 잃었을 때

• on : 이벤트를 설정하는 함수
• off: 설정된 이벤트를 제거하는 함수
• one : 이벤트를 설정하고 이벤트가 발생했을 때 자동으로 제거

<script>
//--------------------------------------------------focus/blur
    $(function(){
		$("#a6").focus(function(){
            $("#a6").css("background-color", "blue");
        });
		$("#a6").blur(function(){
            $("#a6").css("background-color", "red");
        });  
//--------------------------------------------------on/off, one  
   
        $("#a7").on("click", function(){
            alert('a7');
        }); 

        $("#a8").one("click", function(){
            alert('a8');
        }); 

        $("#a9").on({
            click : function(){
                alert('click');
            },
            mouseenter : function(){
                $("#a9").css("background-color", "blue")
            },
            mouseleave : function(){
                $("#a9").css("background-color", "white")
            }
        });

        function remove_event(){
            $("#7").off("click");
        }
	})
</script>

• jQuery는 다양한 이벤트를 처리할 수 있도록 함수를 제공한다.
• 이벤트의 이름과 동일한 함수를 이용해 이벤트를 처리할 수 있 다.
• on을 사용하면 지정된 이벤트를 등록할 수 있다.
• off를 사용하면 지정된 이벤트를 제거할 수 있다.
• one을 사용하면 1 회성 이벤트 드록이 가능하다.

DOM(Document Object Model)

• text : 태그 사이의 문자열을 제어 (링크도 텍스트로 인식)
• html : 태그 내부의 html을 제어
• val : 입력 도구들의 value 속성값을 제어
• attr: 태그의 속성을 제어

<script>
	function getA1(){
        var str = $("#a1").text();
        alert(str);
    }

	function getA2(){
        var str = $("#a2").text();
        alert(str);
    }

	function setA3(){
        $("#a3").text("문자열 설정");
        alert(str);
    }

	function setHtml(){
        $("#a3").text("<a href='http://apple.co.kr'>apple</a>");
    }

</script>

<script>
    function getAttr(){
        var src = $("#a1").attr("src");
        var width = $("#a1").attr("width");
        var height = $("#a1").attr("height");
        var id = $("#a1").attr("id");

        $("#result").html("src : " + src + "<br>"
        + "width : " + width + "<br>"
        + "height : " + height + "<br>"
        + "id : " + id + "<br>");
    }

    function setAttr(){
        $("#a1").attr("width", 544);
        $("#a1").attr("height", 184);
    }
</script>

• append : html코드나 태그를 태그 내부의 뒤에 추가
• prepend : html코드나 태그를 태그 내부의 앞에 추가

• after : html 코드나 태그를 태그 다음에 배치
• before : html 코드나 태그를 태그 앞에 배치

• remove : 태그를 제거
• empty : 태그 내의 모든 태그를 제거

<script>
	function append1(){
		$("#a1").append("<p>새롭게 추가한 p1</p>");
	}
	
	function append2(){
		var p = $("<p>");
			p.text("새롭게 추가한 p2");

			$("#a1").append(p)
	}
	

	function prepend1(){
		$("#a1").prepend("<p>새롭게 추가한 p3</p>");
	}
	
	function prepend2(){
		var p = $("<p>");
			p.text("새롭게 추가한 p4");

			$("#a1").prepend(p)
	}
</script>

<script>
	function after1(){
		$("#a1").after("<p>새롭게 추가한 p태그 1</p>");
	}
	
	function after2(){
		var p = $("<p>");
			p.text("새롭게 추가한 p태그 2")
		$("#a1").after(p);
	}


	function before1(){
		$("#a1").before("<p>새롭게 추가한 p태그 3</p>");
	}
	
	function before2(){
		var p = $("<p>");
			p.text("새롭게 추가한 p태그 2")
		$("#a1").before(p);
	}
</script>

<script>
	function remove_a2(){
		$("#a2").remove();
	}
	
	function empty_a1(){
		$("#a1").empty();
	}

</script>

• append : html 코드나 태그를 태그 내부의 뒤에 추가
• prepend : html 코드나 태그를 태그 내부의 앞에 추가
• after: html 코드나 태그를 태그 뒤에 붙힘
• before : html 코드나 태그를 태그 앞에 붙힘
• remove : 태그를 제거
• empty : 태그 내의 모든 태그를 제거

학습 소감

열심히 따라 적기는 했는데 이걸 나중에 어떻게 쓸지는 감이 잘 안오는거같다.
필요할 때 딱딱 떠올려서 적으면 좋을거같은데 아직은 무리고 찾아보기도 힘들거같아서 약간 걱정이 된다..