MSA Full-Stack 개발자 양성 과정 - jQuery 기초_220927

jQuery의 기본 문법

$(selector).속성 == jQuery(selector).속성

$(selector).함수이름() == jQuery(selector).함수이름()

 

**$: jQuery를 뜻함

 

jQuery 기본 골격

$(document).ready(function(){

    //jQuery문법 + javaScript 문법

}

: 적게 코딩하고 더 많은 일을 함

: CSS 조작

: Event 처리

: DOM 조작 (생성, 추가, 수정, 삭제

: Effect 효과

: Ajax 비동기화 처리

: 다양한 ui 제공 - jQueryUI

 

 

jQuery 문법    vs   javaScript 문법

-$(selector).val()     vs   this.value              ==> form 요소 접근

-$(selector).text()    vs   this.innerText        ==> form 요소가 아닌 요소 접근

-$(selector).html()   vs   this.innerHTML 

 

 

jQuery에서 제공하는 반복문
1) $.each(반복대상, function(index, item) { })
ex) let arr = [1,2,3,4,5,6];
2) $(selector).each(function(index, item) { })
ex) element를 찾아서 꺼내올 때, 사용

<script type="text/javascript" src="">
	$(document).ready(function() {
		
		$("input").wrap("<span style='background-color:skyblue'>");
		
		$(":button").click(function() { // type이 버튼
			let str="취미: ";
					
			$(":checkbox:checked").each(function(index, item) {
				str +=item.value+", "
			});
			
			str += "<br>성별: "+$(":radio:checked").val();
			
			//배열 선언
			let arr = [1, 3, '장희정', true];
			let result = "";
			$.each(arr, function(index, item) {
				alert(index+" = "+item);
			});
			
			//모든 checkbox의 value를 알고 싶다.
			$(":checkbox").each(function(index, item) {
			  $("div").append(index+", "+item+", "+item.value+", "+item.checked +"<br>");
			});
			
			$("div").append(str);
			
		});//clickEnd
		
	});

</script>

 

---

 

이벤트 등록

1. $().이벤트종류();      (→ 정적요소에만 적용됨)

ex) $().click(); / $().keyup(); / $().submit(); / $().change();

 

2. $().on("이벤트종류", function( ){  });

ex) $().on("click", function( ){  });

ex) $().on("change", function( ){  });

ex) $().on("submit", function( ){  });

 

**$().on("이벤트종류", function( ){  }, "이벤트종류", function( ){  }...); //하나의 element에 여러개의 이벤트 등록 가능

** 동적 요소와 정적 요소에 이벤트를 적용할 때, on 함수는 동적 + 정적 요소에 모두 적용 가능