[jQuery] jQuery 정의 셀렉터 요소 접근

[jQuery] jQuery 정의 셀렉터 요소 접근

✔️ jQuery 사용하기

- jQuery( elements ) Returns : jQuery

- jQuery(원소), jQuery(원소.원소.원소) : 실행후 jQuery객체를 반환 하나 또는 다단계의 문서 원소로서 사용할수 있다.

- $()은 $(document).ready() 의 짧은 표현으로 사용가능하다.

- $(document).ready() 은 문서가 사용가능한 시점을 자동으로 인식하여 주어진 콜백 함수를 동작시킨다.

- 콜백함수란 지정된 행위가 끝난다음 자동적으로 실행될 함수를 의미한다.

✔️ jQuery 셀렉터

* : 모든 요소와 일치
태그 : 지정된 태그와 일치
#아이디 : 요소의 id 속성값과 일치
.클래스명 : 요소의 class 속성값과 일치
selector1, selector2 : 선택자 목록(,)은 일치하는 모든 요소를 선택(OR 연산)
selector1selector2 : 모든 조건을 만족하는 요소. 선택자끼리 띄어쓰기 없이 붙여 쓴다.(AND 연산)

E1 E2  : E1 요소의 자식인 모든 E2 요소와 일치. 자손(후손) 결합자
E1 > E2 : E1 요소 바로 아래 자식인 E2 요소와 일치. 자식 결합자(>)
E1 + E2 : E1 요소의 바로 다음에 나오는 형제요소 E2와 일치. 인접 형제 결합자(+)
E1 ~ E2 : E1 요소의 다음에 나오는 모든 형제 E2와 일치. 일반 형제 결합자(~) 

E1[attr] : attr 어트리뷰트를 갖는 E1 요소와 일치 
E1[attr=val] : attr 어트리뷰트의 값이 val을 갖는 E1 요소와 일치 
E1[attr^=val] : attr 어트리뷰트의 값이 val 값으로 시작하는 E1 요소와 일치 
E1[attr$=val] : attr 어트리뷰트의 값이 val 값으로 끝나는 E1 요소와 일치 
E1[attr*=val] : attr 어트리뷰트의 값이 val 값을 포함하는 E1 요소와 일치 

📓 예제 1

$(function(){
	//모든 요소
	$("*").css({color:'#333', 'font-size':'20px'});
	//태그 선택자
	$("p").css("border", "1px solid red");
	//아이디 선택자
	$("#layout1").css({width:'300px', padding:'10px', border:'2px solid green'});
	//클래스 선택자
	$(".red").css("color", "red");
	//AND
	$("label.underline").css("text-decoration", "underline");
	//바로 아래 자식 하나
	$("div > label").css("color", "tomato");
	//모든 자손
	$("div label").css("background", "yellow");
	//인접 형제. 바로 다음 형제 하나
	$("label + span").css("border", "1px dashed red");
	//다음에 오는 모든 형제
	$("label ~+ span").attr("title", "과목");
	
});

📓 예제 2

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
 
$(function(){
	//span 태그 글자색 토마토
	$("span").css("color", "tomato");
	//span 과 label 태그 밑줄(or)
	$("span, label").css("text-decoration", "underline");
	
	//div1 아이디 글자색 blue
	$("#div1").css("color", "blue");
	
	//div2 아이디 글자 진하게
	$("#div2").css("font-weight", "800");
	
	//c1 클래스 배경색 yellow
	$(".c1").css("background", "yellow")
	
	//속성
	//input 요소 중 name = subject 인 요소
	$("input[name=subject]").css("background", "#eee");
	
	//form 의 input 요소중 name 속성을 가진 요소 보더 없애기
	$("form input[name]").css("border", "none");
	
	$("form input[type=text], form input[type=password]").css("border-bottom", "1px solid blue");
	
	//form의 input 요소 중 name 속성이 a로 시작하는 요소
	$("form input[name^=a]").css("border-right", "3px solid red");
	
	//form의 input 요소 중 title 속성이 버튼으로 끝나는 요소
	$("form input[title$='버튼']").css("background", "green");
	
	//form의 input 요소 중 name 속성이 x를 포함하는 요소
	$("form input[name*=x]").css("border-left", "3px solid black");
	
	//form의 input 요소 중 title 속성에 내용이라는 단어가 들어간 요소
	$("form input[title~='내용']").css("background", "yellow");
	
	
	
});
 
 
</script>

📓 예제 3 - 이벤트 처리

button 제외 (: button)

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
 
$(function(){ 
	//form 안의 input 형제 요소 숨기기
	$("form input+span").hide();
	
	$("form input[type=text]").css("border", "1px solid #aaa");
	
	//focus 이벤트 처리. button 제외
	$("form input").not($(":button")).focus(function(){
		$(this).css("border", "1px solid #f28011");
		
		$(this).next("span").show();
	});
	
	//blur 이벤트 처리
	$("form input").not($(":button")).blur(function(){
		$(this).css("border", "1px solid #aaa");
		$(this).next("span").hide();
	});
});
</script>

✔️ jQuery 필터

:eq(n) : 선택한 요소 중에서 인덱스가 n인 요소를 선택. $("ul li:eq(3)")
:gt(n) : 선택한 요소 중에서 인덱스가 n보다 큰 요소를 모두 선택. $("ul li:gt(3)")
:lt(n) : 선택한 요소 중에서 인덱스가 n보다 작은 요소를 모두 선택. $("ul li:lt(3)")
:even : 선택한 요소 중에서 인덱스가 짝수인 요소를 모두 선택. $("tr:even")
:odd : 선택한 요소 중에서 인덱스가 홀수인 요소를 모두 선택. $("tr:odd")
:first : 선택한 요소 중에서 첫 번째 요소를 선택. $("p:first")
:last : 선택한 요소 중에서 마지막 요소를 선택. $("p:last")
:animated : 선택한 요소 중에서 애니메이션 효과가 실행 중인 요소를 모두 선택. $(":animated")
:header : 선택한 요소 중에서 <h1>부터 <h6>까지의 요소를 모두 선택. $(":header")
:lang(언어) : 선택한 요소 중에서 지정한 언어의 요소를 모두 선택. $("p:lang(ko)")
:not(선택자) : 선택한 요소 중에서 지정한 선택자와 일치하지 않는 요소를 모두 선택. $("input:not(:empty)")
:root : 선택한 요소 중에서 최상위 루트 요소를 선택. $(":root")
target : 선택한 요소 중에서 웹 페이지 URI의 fragment 식별자와 일치하는 요소를 모두 선택. $("a[target='_blank']")
:contains(텍스트) : 선택한 요소 중에서 지정한 텍스트를 포함하는 요소를 모두 선택. $(":contains('Hello')")
:has(선택자) : 선택한 요소 중에서 지정한 선택자와 일치하는 자손 요소를 갖는 요소를 모두 선택. $("p:has(span)")
:empty : 선택한 요소 중에서 자식 요소를 가지고 있지 않은 요소를 모두 선택. $(":empty")
:parent : 선택한 요소 중에서 자식 요소를 가지고 있는 요소를 모두 선택. $(":parent")

-- 자식 필터
:first-child : 셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 선택.
:last-child : 셀렉터에 해당하는 모든 요소 중 마지막 자식인 요소를 선택.
:nth-child(n) : 셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식인 요소를 선택. n은 0부터 대입하고, 요소의 index는 1부터 시작
:nth-child(even/odd) : even, odd에 해당하는 자식들과 일치.
:nth-last-child(n) : 셀렉터에 해당하는 모든 요소 중 뒤에서 n번째 자식인 요소를 선택.
:only-child : 자신이 부모 요소의 유일한 자식인 모든 요소와 일치. 

📓 예제 1

$(function(){
	//첫번째 tr
	$("tr:first").css("border", "2px solid darkblue");
	//$("tr:eq(0)").css("border", "darkblue");
	
	//홀수 tr
	$("tr:odd").css("background", "#efefef");
	
	//마지막 tr
	$("tr:last").css("border-bottom", "2px solid #777");
	
	//전체 td 중 첫번째 td 하나
	//$("td:first").css("background", "yellow");
	
	//tr의 첫번째 td 하나
	//$("td:first-child").css("background", "yellow");
	
	//n번째 자식요소(요소의 처음이 1)
	//n은 0부터 대입, 1, 3, 5
	$("td:nth-child(2n+1)").css("background", "yellow");
});

📓 예제 2

$(function(){ //td:contains : 내용 찾기!!
	$("table.tc td:empty").css("background", "yellow");
	$(".tc td:contains('오라클')").css("color", "red");
	
	$(".tc td:contains('스프링')").parent().css("background", "pink"); //tr
	
	$("table.tc tr:eq(1)").css("background", "tomato");
	$("table.tc tr:gt(5)").css("background", "#eee");
	
	$("table.tc td").each(function(idx){
		if(idx !==0 && idx %6===0){
			$(this).css("background", "lightblue")
		}
	})
	
});

✔️ jQuery 선택된 요소 접근

-- 선택된 요소 접근 
  .html() : 해당 요소의 HTML 콘텐츠를 반환하거나 설정한다.
  .text() : 해당 요소의 텍스트 콘텐츠를 반환하거나 설정한다.
  .val() : <form>요소의 값을 반환하거나 설정한다
  .attr() : 해당 요소의 명시된 속성의 속성값을 반환하거나 설정한다.
  .width() : 선택한 요소 중에서 첫 번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정한다.
  .height() : 선택한 요소 중에서 첫 번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정한다.
  .position() : 선택한 요소 중에서 첫 번째 요소에 대해 특정 위치에 존재하는 객체를 반환한다.(getter 메소드)

-- 메소드 체이닝(method chaining)
  여러 개의 메소드가 연속으로 호출되는 것
  예 : $("ul").find("li").eq(1).append("자바");

📓 예제 1

$(function(){
	$(".btnOk").click(function(){
		//text - 텍스트 형태, html - html형태
		let name = $(".std").text;
		
		//속성이름을 data-num 이라고 주면, 해당 값을 가져올 수 있다.
		let num = $(".std").attr("data-num");
		
		//form 하위 요소(input 등)에 value 값 설정
		$("#score").val(90);
		
		//form 하위 요소(input 등)의 value 값 반환
		let subject = $("#subject").val();
		let score = $("#score").val();
		
		let s = "<p>학번:"+num+"</p>";
		s += "<p>이름:"+name+"</p>";
		s += "<p>과목:"+subject+"</p>";
		s += "<p>점수:"+score+"</p>";
		
		$("#layout").html(s);	//html 콘텐츠 설정
		//$("#layout").text(s); //텍스트 설정! html 태그도 텍스트로 처리한다.		
		
	});
});

✔️ jQuery 애니메이션

-- 선택

$(function(){
	function move(){
		$(".box").animate({width: "50%"}, "slow");
		$(".box").animate({width: "100%"}, "slow", move);
		
	}
	
	move();
	
	$(".btn").click(function(){
			//: = 모든 것
		$(":animated").css("background-color", "red");
	});
	
	
});