[DAY34]_개발일지: JQuery 선택자

hanseungjune·2022년 6월 21일
DaeguFE
0

DaeguFE

목록 보기
40/48

✅ 이클립스 자동완성 기능

압축파일 다운로드!

압축 풀지 않고 이클립스를 실행 → Help → install new software → add → location: 해당 압축파일 저장경로 → Archive → 모두 선택 → 다운로드 및 설치 진행하면 됨(전부 다 동의하는게 좋음)

✅ JQuery 함수

  • jQuery에서 가장 중요한 함수
  • • javaScript는 생성된 객체 맴버를 추가하는 것이 자유롭다. 이것을 이용해 만들어진 라이브러리가 jQuery 라이브러리
  • JavaScript에서 객체를 jQuery 함수에 매개변수로 넣어주면 객체에 jQuery에서 만든 여러함수를 추가하여 반환
  • JavaScript에서 객체를 jQuery 함수에 매개변수로 넣어주면 객체에 jQuery에서 만든 여러함수를 추가하여 반환

☑️ Ready 함수

  • JavaScript의 window.onload와 흡사
  • Window.onload는 태그 객체가 모두 생성되면 발생되는 이벤트로 웹 화면이 처음 나타날 때 필요한 작업이 있다면 여기서 구현
  • Ready도 동일한 시점에 동작
  • 차이점은 window.onload는 여러 개 있을 경우 제일 마지막 것만 동작, Ready는 모든 부분이 동작

☑️ Ready Project

window.onload

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	window.onload = function() {
		var result = document.getElementById("result");
		result.innerHTML = "on load 1<br/>";
	}
	window.onload = function() {
		var result = document.getElementById("result");
		result.innerHTML = "on load 2<br/>";
	}
	window.onload = function() {
		var result = document.getElementById("result");
		result.innerHTML = "on load 3<br/>";
	}
</script>
</head>
<body>
	<div id="result"></div>
</body>
</html>

ready

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(document).ready(function(){
		$("#result").append("ready 1<br/>");
	});
	$(document).ready(function(){
		$("#result").append("ready 2<br/>");
	});
	$(document).ready(function(){
		$("#result").append("ready 3<br/>");
	});
</script>
</head>
<body>
	<div id="result"></div>
</body>
</html>

✅ JQuery 선택자

    1. 기본 선택자
    1. 순서 필터 선택자
    1. 인덱스 필터 선택자
    1. 속성 선택자
    1. 상태 선택자
    1. Form 태그 선택자

☑️ BasicSelector

  • 가장 기본이 되는 선택자, 다른 선택자는 기본 선택자를 조합하여 만듬
  • 가장 기본이 되는 선택자, 다른 선택자는 기본 선택자를 조합하여 만듬
  • 태그이름 선택자(태그이름) : 지정한 태그이름에 해당하는 태그 객체를 가져 온다
  • 아이디 선택자(#아이디) : id 속성을 통해 태그 객체를 가져온다
  • 클래스 선택자(.클래스) : class 속성을 통해 태그 객체를 가져온다

Selector1

<script>
	$(function(){
		$("*").css("background-color", "yellow");
		$("p").css("background-color", "blue");
		$("div").css("background-color", "green");
	});
</script>
<body>
	<p id="test1">문자열1</p>
	<p class="test3">문자열2</p>
	<div id="test2">문자열3</div>
	<div class="test3">문자열4</div>
</body>

<script>
	$(function(){
		$("*").css("background-color", "yellow");
		$("p").css("background-color", "blue");
		$("div").css("background-color", "green");
	});
</script>
<body>
	<p id="test1">문자열1</p>
	<p class="test3">문자열2</p>
	<div id="test2">문자열3</div>
	<div class="test3">문자열4</div>
</body>

* 은 모든 태그를 의미함 ( html과 body 태그도 포함 )

Selector2

<script>
	$(function(){
		// $("div").css("background-color", "yellow");
		// $("p").css("background-color", "yellow");
		
		$("div, p").css("background-color", "yellow");
		
		// $("#a1").css("color", "red");
		// $("#a2").css("color", "red");
		
		$("#a1, #a2").css("color", "red");
	});
</script>
<body>
	<div id="a1">div 1</div>
	<div>div 2</div>
	<p id="a2">p 1</p>
	<p>p 2</p>
</body>

, 를 쓰면 한번에 사용 가능

Selector3

<script>
	$(function(){
		$("#a1 > h1").css("background-color", "yellow");
	});
</script>
</head>
<body>
	<div id="a1">
		<h1>자식 태그 h1</h1>
		<div>
			<h1>자손 태그 h1</h1>
		</div>
	</div>
</body>

<script>
	$(function(){
		$("#a1 h1").css("background-color", "yellow");
	});
</script>
</head>
<body>
	<div id="a1">
		<h1>자식 태그 h1</h1>
		<div>
			<h1>자손 태그 h1</h1>
		</div>
	</div>
</body>

#a1 > h1 은 바로 자식 태그를 의미
#a1 h1 은 모든 자식 및 자손을 의미함

Selector4

<script>
	$(function(){
		$("div.a1").css("background-color", "yellow");
		$("div.a2").css("background-color", "red");
		$("p.a1").css("background-color", "purple");
		$("p.a2").css("background-color", "blue");
	});
</script>
</head>
<body>
	<div class="a1">div a1</div>
	<div class="a2">div a2</div>
	<p class="a1">p a1</p>
	<p class="a2">p a2</p>
</body>

div.a1(p.a1) 은 div태그(p태그)의 a1 클래스에 대한 것임을 의미

Selector5

<script>
	$(function(){
		$("#a1 ~ div").css("background-color", "yellow");
	});
</script>
</head>
<body>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	<p id="a1">p 태그</p>
	<div>div 태그1</div>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	<div>div 태그2</div>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	<div>div 태그3</div>
	<p>p 태그</p>
</body>

#a1 ~ div #a1 다음으로 그 이후에 나오는 모든 div 태그에 대한 것을 의미

<script>
	$(function(){
		$("#a1 + div").css("background-color", "yellow");
	});
</script>
</head>
<body>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	<p id="a1">p 태그</p>
	<div>div 태그1</div>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	<div>div 태그2</div>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	<div>div 태그3</div>
	<p>p 태그</p>
</body>

#a1 + div #a1 다음으로 나오는 첫 번째 div 태그에 대한 것만 의미

☑️ OrderSelector

OrderSel1

<script>
	$(function(){
		$("p:first").css("background-color", "yellow");
		$("p:first-child").css("color", "orange");
		$("p:first-of-type").css("font-size", "30px");
	});
</script>
</head>
<body>
	<p>태그</p>
	<hr/>
	<div>
		<p>div 안의 p태그</p>
		<p>div 안의 p태그</p>
		<p>div 안의 p태그</p>
	</div>
	<hr/>
	<div>
		<p>div 안의 p태그</p>
		<p>div 안의 p태그</p>
		<div>div 안의 div태그</div>
	</div>
</body>

<script>
	$(function(){
		$("p:first").css("background-color", "yellow");
		$("p:first-child").css("color", "orange");
		$("p:first-of-type").css("font-size", "30px");
	});
</script>
</head>
<body>
	<p>태그</p>
	<hr/>
	<div>
		<p>div 안의 p태그</p>
		<p>div 안의 p태그</p>
		<p>div 안의 p태그</p>
	</div>
	<hr/>
	<div>
		<p>div 안의 p태그</p>
		<p>div 안의 p태그</p>
		<div>div 안의 div태그</div>
	</div>
</body>

child가 붙으면, child 인덱스 중에서 해당 태그를 의미
of-type이 붙으면, 해당 태그 중에서 몇번째 인덱스를 의미

OrderSel2

<script>
	$(function(){
		$("p:odd").css("background-color", "yellow");
		$("p:even").css("background-color", "red");		
		
	});
</script>
</head>
<body>
	<p>태그</p>
	<p>태그</p>
	<p>태그</p>
	<div>div 태그</div>
	<p>태그</p>
	<p>태그</p>
	<p>태그</p>
	<p>태그</p>
	<div>div 태그</div>
	<p>태그</p>
	<p>태그</p>
	<p>태그</p>
	<p>태그</p>
	<p>태그</p>
	<div>div 태그</div>
	<p>태그</p>
	<p>태그</p>
</body>

→ 이미지가 안나오니까 나중에 확인하고 싶으면 코드복붙하자

odd는 홀수, even은 짝수

OrderSel3

<script>
	$(function(){
		$("p:only-child").css("background-color", "yellow");
		$("p:only-of-type").css("color", "orange");
	});
</script>
</head>
<body>
	<div>
		<p>p 태그</p>
		<p>p 태그</p>
	</div>
	<hr/>
	<div>
		<p>p 태그</p>
	</div>
	<hr/>
	<div>
		<p>p 태그</p>
		<p>p 태그</p>
		<div>div 태그</div>
	</div>
</body>

only 시리즈는 그냥 특정 태그의 자식이 하나만 있을때 적용된다고 생각하자

☑️ IndexSelector

IndexSel1

<script>
	$(function(){
		// $("p:eq(0)").css("background-color", "yellow");
		// $("p:nth-child(1)").css("color", "orange");
		// $("p:nth-of-type(1)").css("font-style", "italic");		
	
		$("p:gt(0)").css("background-color", "yellow");
		$("p:lt(7)").css("color", "blue");
		$("p:nth-last-child(1)").css("font-size", "30px");
		$("p:nth-last-of-type(1)").css("font-style", "italic");	
	});
</script>
</head>
<body>
	<div>
		<p>p 태그</p>
		<p>p 태그</p>
		<p>p 태그</p>
	</div>
	<hr/>
	<div>
		<p>p 태그</p>
		<p>p 태그</p>
		<p>p 태그</p>
	</div>	
	<hr/>
	<div>
		<p>p 태그</p>
		<p>p 태그</p>
		<div>div 태그</div>
	</div>
</body>

gt(0)은 인덱스 0 이후의 해당 태그들에게 적용
lt(7)은 인덱스 7 이전의 해당 태그들에게 적용

<script>
	$(function(){
		$("p:eq(0)").css("background-color", "yellow");
		$("p:nth-child(1)").css("color", "orange");
		$("p:nth-of-type(1)").css("font-style", "italic");		
	
		//$("p:gt(0)").css("background-color", "yellow");
		//$("p:lt(7)").css("color", "blue");
		//$("p:nth-last-child(1)").css("font-size", "30px");
		//$("p:nth-last-of-type(1)").css("font-style", "italic");	
	});
</script>
</head>
<body>
	<div>
		<p>p 태그</p>
		<p>p 태그</p>
		<p>p 태그</p>
	</div>
	<hr/>
	<div>
		<p>p 태그</p>
		<p>p 태그</p>
		<p>p 태그</p>
	</div>	
	<hr/>
	<div>
		<p>p 태그</p>
		<p>p 태그</p>
		<div>div 태그</div>
	</div>
</body>

IndexSel2

<script>
	$(function(){
		$("p:not(.a1)").css("background-color", "yellow");
	});
</script>
</head>
<body>
	<p>p 태그</p>
	<p class="a1">p태그 a1 class</p>
	<p class="a2">p태그 a2 class</p>
</body>

NOT 논리 연산자 생각하면 될듯

☑️ AttributeSelector

AttrSel

<script>
	$(function(){
		$("p[title ~= 'aa']").css("color", "red");
		$("p[title *= 'aa']").css("font-size", "30px");
	});
</script>
</head>
<body>
	<p>속성이 없는 p태그</p>
	<p title="aaa1">title이 aaa1인 p 태그</p>
	<p title="aaa2">title이 aaa2인 p 태그</p>
	
	<p title="aaa3">title이 aaa3인 p 태그</p>
	<p title="aaa3-test">title이 aaa3-test인 p 태그</p>
	<p title="aaa3test">title이 aaa3test인 p 태그</p>
	
	<p title="aaa4">title이 aaa4인 p 태그</p>
	<p title="aaa5">title이 aaa5인 p 태그</p>
	<p title="aa a6">title이 aa a6인 p 태그</p>
	<p title="aa">title이 aa인 p 태그</p>
</body>

title 이라는 속성에서 *= 은 해당 단어 포함이고,
~= 은 해당 단어를 가진 경우만 해당

<script>
	$(function(){
		$("p[title $= 'aaa3']").css("background-color", "green");
		$("p[title |= 'aaa3']").css("color", "gray");
		$("p[title ^= 'aaa3']").css("font-size", "30px");

	});
</script>
</head>
<body>
	<p>속성이 없는 p태그</p>
	<p title="aaa1">title이 aaa1인 p 태그</p>
	<p title="aaa2">title이 aaa2인 p 태그</p>
	
	<p title="aaa3">title이 aaa3인 p 태그</p>
	<p title="aaa3-test">title이 aaa3-test인 p 태그</p>
	<p title="aaa3test">title이 aaa3test인 p 태그</p>
	
	<p title="aaa4">title이 aaa4인 p 태그</p>
	<p title="aaa5">title이 aaa5인 p 태그</p>
	<p title="aa a6">title이 aa a6인 p 태그</p>
	<p title="aa">title이 aa인 p 태그</p>
</body>

$= 은 해당 값으로 끝나는 태그
|= 일치하거나,일부 포함되어있지만 하이픈으로 연결된 태그
^= 해당 값으로 시작하는 모든 태그

<script>
	$(function(){
		$("p[title]").css("background-color", "yellow");
		$("p[title = 'aaa1']").css("color", "skyblue");
		$("p[title != 'aaa1']").css("color", "blue");
	});
</script>
</head>
<body>
	<p>속성이 없는 p태그</p>
	<p title="aaa1">title이 aaa1인 p 태그</p>
	<p title="aaa2">title이 aaa2인 p 태그</p>
	
	<p title="aaa3">title이 aaa3인 p 태그</p>
	<p title="aaa3-test">title이 aaa3-test인 p 태그</p>
	<p title="aaa3test">title이 aaa3test인 p 태그</p>
	
	<p title="aaa4">title이 aaa4인 p 태그</p>
	<p title="aaa5">title이 aaa5인 p 태그</p>
	<p title="aa a6">title이 aa a6인 p 태그</p>
	<p title="aa">title이 aa인 p 태그</p>
</body>

! 은 역시나 NOT

☑️ StatusSelector

StatusSel

<script>
	$(function(){
		$(":header").css("color", "red");
	});
</script>
</head>
<body>
	<p>p 태그</p>
	<h1>h1 태그</h1>
	<h3>h3 태그</h3>
	
	<input type="text" autofocus="autofocus"/><br>
	<input type="text"/><br>
	
	<div>Hello World</div>
	<div>Hello World</div>
	<div>Hi World</div>
	
	<div>
		<p>p 태그를 가지고 있는 div 태그</p>
	</div>
	<div>
		<div>div 태그를 가지고 있는 div 태그</div>
	</div>
</body>

h1~h6 태그에만 걸려면 :header

<script>
	$(function(){
		$(":focus").css("background-color", "green");
	});
</script>
</head>
<body>
	<p>p 태그</p>
	<h1>h1 태그</h1>
	<h3>h3 태그</h3>
	
	<input type="text" autofocus="autofocus"/><br>
	<input type="text"/><br>
	
	<div>Hello World</div>
	<div>Hello World</div>
	<div>Hi World</div>
	
	<div>
		<p>p 태그를 가지고 있는 div 태그</p>
	</div>
	<div>
		<div>div 태그를 가지고 있는 div 태그</div>
	</div>
</body>

autofocus 되어있으면, :focus하면 된다.

<script>
	$(function(){
		$("div:contains('Hello')").css("font-size", "30px");
	});
</script>
</head>
<body>
	<p>p 태그</p>
	<h1>h1 태그</h1>
	<h3>h3 태그</h3>
	
	<input type="text" autofocus="autofocus"/><br>
	<input type="text"/><br>
	
	<div>Hello World</div>
	<div>Hello World</div>
	<div>Hi World</div>
	
	<div>
		<p>p 태그를 가지고 있는 div 태그</p>
	</div>
	<div>
		<div>div 태그를 가지고 있는 div 태그</div>
	</div>
</body>

해당 텍스트에 포함되어있는 것만 적용하려면 태그:contains('텍스트')

<script>
	$(function(){
		$("div:has(p)").css("font-style", "italic");
	});
</script>
</head>
<body>
	<p>p 태그</p>
	<h1>h1 태그</h1>
	<h3>h3 태그</h3>
	
	<input type="text" autofocus="autofocus"/><br>
	<input type="text"/><br>
	
	<div>Hello World</div>
	<div>Hello World</div>
	<div>Hi World</div>
	
	<div>
		<p>p 태그를 가지고 있는 div 태그</p>
	</div>
	<div>
		<div>div 태그를 가지고 있는 div 태그</div>
	</div>
</body>

특정 태그를 자식으로 가졌다면, 그 태그에만 적용하기 위해서 태그:has(태그)

오늘 이미지가 깨져서 이미지가 안올라가니까 좀 섭섭하지만 어쩔수 없지... 벨로그 에러가 심하네...??

profile
hanseungjune
필요하다면 공부하는 개발자, 한승준
이전 포스트

[DAY33]_개발일지: JQuery 설치

다음 포스트

[DAY35]_개발일지: JQuery Event + DOM

0개의 댓글