개발관련/javascript&jquery

[html/css/javascript/jquery] 셀렉터(Selector) 활용법!

🐻곰이🐻 2020. 11. 25.

728x90

안녕하세요! 개발쉽게하자곰 입니다.

오늘은 셀렉터에 대해서 조금 알아볼까 해요 ㅎㅎ

저도 html 페이지 개발할떄 거의 셀렉터를 쓴다고해도 과언이 아닐정도로 실무에서도 유용하게 쓰고있습니다.

셀렉터란? 말그대로 선택자 역할을 하는데요.

우리가 평소에 자주볼수있는걸로 예시를 들자면

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>easy-developmentbear</title>
	<!-- 제이쿼리 -->
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script>
	$(function(){
		var aa = document.getElementById('abc').value;
		console.log(aa);
	});
	</script>
</head>

<body>
	<input type="text" name="abc" id="abc" value="aaaa">
</body>
</html>

결과 값

우리가 평소에 흔히볼수있는 document.getelementByid('아이디명').value 같은경우 또는 Byname 이렇게 자주 접할수있는데.

셀렉터를 쓰면 훨씬 간결하고 원하는 값을 찾아오기가 수월하다랄까???

셀렉터를 활욯해서 input의 value값을 알아보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>easy-developmentbear</title>
	<!-- 제이쿼리 -->
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script>
	$(function(){
		var aa = $("#abc").val();
		console.log(aa);
	});
	</script>
</head>

<body>
	<input type="text" name="abc" id="abc" value="aaaa">
</body>
</html>

셀렉터를 썼구요. 훨신 간결해졌죠??

결과출력

결과 값은 똑같아요. 보다 간결하게 DOM안에서 해당하는 태그 값이나 속성을 바꾸거나 주거나 할수있습니다.

셀렉터의 종류는 많습니다. 하지만 오늘은 제가 자주 사용하는 셀렉터들로 설명드리고자 합니다.

$("#id값")

$(".class값")

$("input[name='name값']")

예시)

이라는 태그의 value값을 알아올때.

$("#b")

$(".c")

$("input[name='a']")

라고 쓸수있습니다.

#은 해당하는 아이디를 가지고올때 사용하구요

.는 클래스를 가져올때 사용합니다.

[name='']은 name값으로 가져올때 사용합니다.

<span name="aaa">tttt</span>의 text값을 알아올려고 하면

$("span[name='aaa']").text();

이렇게 사용하면 text값을 가지고 올 수 있습니다.

저는 이중에서도 아이디값이랑 클래스값으로 선택자를 많이 사용합니다.

선택자를 사용하여 옵션을 줄수도있는데요.

addClass() 해당하는 선택자의 클래스를 입힌다

removeClass() 해당하는 선택자의 클래스를 지운다

text() 해당하는 선택자의 텍스트값을 가지고온다

val() 해당하는 선택자의 벨류값을 가지고온다.

val()같은경우 value값이 들어갈수있는 input태그에 써주어야합니다.

예시를 들어보겠습니다.

여기서 span의 value값이 지정이 되어있으니까 가지고 올 수 있을까요?

console.log($("span[name='aaa']").val()); 사용하여 출력을 하면 빈값으로 나옵니다.

input에만 사용한다라고 알고계시면 좋을것같아요.

셀렉터를 활용해서 속성을 주고 출력을 해볼게요.

속성은 어트리뷰트라고 하죠?? 셀렉터를 사용할땐 attr() 이라고 씁니다.

input 선택자의 onclick 이벤트를 주고싶다.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>easy-developmentbear</title>
	<!-- 제이쿼리 -->
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script>
	$(function(){
		$("#abc").attr("onclick", "get_msg(); return false;");
	});

	function get_msg()
	{
		alert("input타입 출력~");
	}
	</script>
</head>

<body>
	<input type="text" id="abc">
</body>
</html>

이렇게 onclick을 input 태그에 따로 선언안해주어도 셀렉터로 attr()해서 줄수있어요.

클릭하면

라고 alert 창이 뜨네요 ㅎㅎ

이런식으로 속성값을 바꾸는것도 실무에서 자주 사용한답니다.

name값 id값 class값 바꿀수있어요

$("선택자").attr("바꿀속성", "바꿀name값");

또 스타일도 줄수있답니다.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>easy-developmentbear</title>
	<!-- 제이쿼리 -->
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script>
	$(function(){
		$("#abc").css("color", "red");
	});
	</script>
</head>

<body>
	<span id="abc">인풋이양</span>
</body>
</html>

이렇게 해주시면 폰트색상도 바꿀수 있답니다 ㅎㅎ

이렇게 style도 줄수가 있으니 여러모로 활용하시면 좋을것같네요.

셀렉터 익숙해지면 많이 편하니 개발하실때 익혀두시면 충분히 도움 될 것 같습니다.

읽어주셔서 감사합니다. 궁금하신점은 언제든 댓글로 남겨주세요!

저작자표시 비영리 변경금지

'개발관련 > javascript&jquery' 카테고리의 다른 글

Counter.js 를 써서 티스토리 블로그 방문자 수 애니메이션 효과 넣기 (2)	2022.08.19
[Jquery/Javascript] 핸드폰번호 정규식 및 숫자만 입력되게 하는법 (0)	2022.08.02
[Jquery/Javascript] 체크박스 전체 선택과 전체 해제 구현하기 (0)	2022.08.02
Javascript & Jquery / "onblur" 속성으로 1000단위 콤마찍기! (0)	2020.11.24
[Javascript/Jquery] 제이쿼리로 천 단위 콤마 (1,000) 세자리마다 콤마찍기! (0)	2020.11.24
javascript/jquery 활용해서 간편 계산기 만들기! (0)	2020.11.24

[html/css/javascript/jquery] 셀렉터(Selector) 활용법!

'개발관련 > javascript&jquery' 카테고리의 다른 글

댓글

티스토리툴바