jQuery에서 가끔씩 this라는 것을 보게 됩니다.
번역을 해도 this는 '이 것'이라는 뜻이여서 더욱 모호하게하는 this에 대해 알아보겠습니다.
jquery에서 this는 자기 자신을 가리킵니다.
하나하나 입력해야 할 요소를 this라는 키워드만으로 번거로움을 해소할 수 있으며, 코드의 가독성을 증가시켜줍니다.
예제를 통해 알아보겠습니다.
<script>
$(document).ready(function(){
$("p").click(function(){
var $this = $(this);
$this.css("background-color", "gray");
});
});
</script>
<body>
<p>김밥 떡볶이 순대 튀김</p>
<p>햄버거 감자튀김 콜라</p>
<p>치킨 맥주 소주 콜라</p>
</body>
body의 p태그에 적힌 글들을 클릭하면 배경색이 회색으로 변하도록 만들었습니다.
만약 this를 쓰지 않는다면 script에서 p태그 한 줄 한 줄을 모두 처리해야하는 번거로움이 있습니다.
하지만 p태그를 모두 묶어서 this로 설정한다면 코드를 간결하고 가독성 좋게 만들 수 있다는 장점이 있습니다.
아래는 출력결과입니다. (↓모두 클릭하지 않았을 때↓)
↓첫번째를 클릭했을 때↓
↓두번째를 클릭했을 때↓
↓세번째를 클릭했을 때↓
'코딩 > jQuery' 카테고리의 다른 글
| jQuery fadeIn, fadeOut, fadeToggle (0) | 2020.07.01 |
|---|---|
| jQuery setInterval, clearInterval (0) | 2020.06.30 |
| JavaScript 실행순서 (0) | 2020.06.30 |
| jQuery hover() (0) | 2020.06.29 |
| jQuery 선택자(Selector)- id, class (0) | 2020.06.26 |
최근댓글