셀렉터(선택자)
javascript 개념이 부족하단 생각에 개인공부를 시작하게 되면서
첫번째로 내가 구현해본 js 기능은 선택자 기능이었다.
셀렉터를 이용하는 예시로는 table로 공부해보았다.
1. table td중 특정 부분만 바꾸고 싶다면?(javascript ver.)
(1) table 마크업
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0">
<title>jquery</title>
<style type="text/css"></style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<table class="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>(2) css 세팅(자유롭게 하면 된다)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 0px solid silver;
outline: none;
}
table {
width: 500px;
border: 1px solid #000;
margin: 3rem auto;
text-align: center;
}
td {
padding: 2rem;
border: 1px solid #000;
}(3) JS 세팅
window.onload = function() {
document.getElementsByTagName('td')[0].style.background="red";
document.getElementsByTagName('td')[1].style.background="red";
document.getElementsByTagName('td')[5].style.background="red";
document.getElementsByTagName('td')[7].style.background="red";
document.getElementsByTagName('td')[8].style.background="red";
}결과물(codepen-vanilla js ver)
https://codepen.io/huhyj97/pen/oNGbVOX
사실 아직도 왜 바닐라자바스크립트로 구현하는게 장점인지는 체감을 하지 못해서 모르겠지만.. 어쨌든 제이쿼리를 사용하면 코드가 확 줄어들어서 제이쿼리 선택자로도 한번 코드를 구현해보았다!
2. table td 특정 부분 바꾸기(jquery ver.)
(1)~(2) html,css 1번과 동일
(3) jquery 세팅
이 부분은 같은 팀원분께 받은 블로그 링크를 통해 해결했다.
출처: 갱짱.study 블로그
https://gangzzang.tistory.com/entry/%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%ACjQuery-%EC%84%A0%ED%83%9D%EC%9E%90
이 중에서도 함수 필터 선택자를 이용해서 해결했는데,
함수 필터 선택자 형태 몇가지를 써보려고 한다.
| 선택자 형태 | 설명 |
|---|---|
| 요소:contains(문자열) | 특정 문자열을 포함하는 문서 객체를 선택 |
| 요소:eq(n) | n번째에 위치하는 문서 객체를 선택 |
| 요소:gt(n) | n번째 초과에 위치하는 문서 객체를 선택 |
| 요소:has(h1) | h1태그가 있는 문서 객체를 선택 |
| 요소:lt(n) | n번째 미만에 위치하는 문서 객체를 선택 |
| 요소:not(선택자) | 선택자와 일치하지 않는 문서 객체를 선택 |
| 요소:nth-child(3n+1) | 3n+1번째에 위치하는 문서 객체를 선택 |
$( document ).ready( function() {
$(".table tr td:lt(2)").css("background","red")
$(".table tr td:eq(5)").css("background","red")
$(".table tr td:gt(6)").css("background","red")
} );결과물(codepen-jquery ver)
https://codepen.io/huhyj97/pen/ZEXQdXo
n번째 미만의 객체를 선택하는 lt와 n번째 객체를 선택하는 eq, n번째 초과의 객체를 선택하는 gt를 이용하여 vanilla js로 구현한 코드보다 코드가 줄게 되었다. 사실 어떤게 정답인지, 어떤게 효율적인지는 주위에 알려줄 사람이 없어(....ㅠ) 나도 잘 모르겠지만 이렇게 코드를 직접 내 손으로 짜보는 시도를 해봤다는 걸로도 재밌다. 이렇게 간단한 코드부터 시작해서 흥미를 쌓아가면 어느새 많이 발전돼있는 나를 발견할 수 있기를 바라며!!
어쩌다 개발자가 된(될) 인문대생