쌩초짜도 할수있는 jQuery [객체 지정]

저번에는 jQuery 라이브러리를 가져오는걸 했습니다. 뭐 솔직히 특별히 한건 없는거같아요ㅠ
이번엔 이전 자바스크립트에서 했던것처럼 간단한 값 가져오기 및 수정, 삭제를 해보겠습니다.

일단 어떤것을 수정하거나 삭제하려면 그것을 가져와야 합니다.
자바스크립트에선 document.getElementById 나 비슷한 기타 다른방법으로 객체를 가져왔습니다.
그리고 사용하기 편하게 변수에 담아서 이용했습니다.
그러나 jQuery는 다는방법으로 객체를 가져옵니다.
$(" ")를 사용하여 객체를 가져옵니다. 예를들어보겠습니다.

이런 코드가 있다고 가정했을때, span 객체를 가져오는방법은 두가지입니다.
$("span") 또는 $("#tester1") 이 있습니다.
$("span")는 객체의 태그명으로 가져온것이고, $("#tester1")는 객체의 id로 가져온것입니다.
그런데 그 아래 div를 보니 id가 없습니다. 그럼 div는 태그명으로밖에 가져오지 못할까요?? 아닙니다!
class명이 정의되어있기때문에 class명으로도 가져올 수 있습니다.
$(".tester2") 이렇게 하면 div 객체를 가져올수 있습니다.
이번엔 div안에 input태그를 볼까요?? input태그는 id나 class가 없네요. 하지만 $("input") 로 가져올수 있습니다.
그러나! 만약 input태그가 하나 더 생기면 어떻게 될까요??

이러한 경우가 발생했을 경우, $("input")를 사용하면 tester3과 tester4 모두 같은 영향을 받게됩니다.
위에서 사용했던 span의 객체를 선택할때도 $("span")을 사용하였지만 그레도 span은 id를 갖고있기때문에 괜찮습니다.
그럼 이러한경우엔 어떻게 해야 할까요?? 

jQuery는 css와 매우 비슷합니다. id를 사용하여 선택할때는 앞에 '#', class를 갖고 선택할때는 '.' 을사용하는것 역시 비슷하죠.
그리고 css처럼 특정 객체를 선책한 후에 그 하위객체를 따라 내려가서 선택할수도 잇습니다.
div의 하위에 있는 input를 선택하고싶으면 $("div > input") 이렇게 해주시면 div 하위의 input가 선택됩니다.
물론 $("div > input") 대신에 $(".tester2 > input")로 하셔도 됩니다. 오히려 후자가 전자에 비해서 훨씬 구체적이므로 더욱 확실하게 선택 이이 가능할것입니다. 전자의 경우는 또다른 div가 있고 그 div안에도 input가 있으면 역시 같은 영향을 받기 때문에 되도록이면 id 또는 class를 사용하시는것을 추천합니다.

<script type="text/javascript">
$(document).ready(function(){
$('div > input').remove();
});
</script>

위 코드를 수정해보면서 변화를 확인해보시기 바랍니다.