오늘 배운 자바
[JQuery] $(this)에 관하여 : selecter
주데브
2018. 4. 30. 14:53
**입문자를 위한 기초 설명1. console.log("내용");: 콘솔에 내용을 출력해주는 문장: 크롬에서 F12버튼을 눌러 개발자도구를 불러오면 Console 탭에서 확인 가능합니다.2. Selecter$("#btn").on("click", function(){});1) $("#btn") 은 id="btn" 키값을 통해 해당 태그를 select합니다.: <key> 태그는 $("key"): <id="key"> id는 $("#key") 또는 $("[id=key]"): <class="key"> class는 $(".key") 또는 $("[class=key]") 로 불러옵니다.: $("key") 괄호 안에 들어가는 호출키를 selecter 라고 합니다.2) on("handler" , function(){} ) ;: 이벤트 핸들러 영역입니다.: handler에는 동작이 들어갑니다. click, focus, load 등 '~했을때'와 같은 행동조건이 들어갑니다.: ex) "click"이 들어갔다면 click 했을 때, function()내의 문장을 실행합니다.<body><ul><li id="first" class="red">첫번째 아이템입니다.</li><li id="second" class="blue"><strong>두번째 아이템입니다.</strong></li><li id="third" class="del">세번째아이템입니다.</li><li><strong>네번째 아이템입니다.</strong></li></ul><input id="btn" type="button" VALUE="li 추가" /></body><script type="text/javascript">$("#btn").on("click",function(){console.log("버튼 클릭");$("ul").append("<li> 다섯번째입니다.</li>");$("ul").append("<li> 여섯번째입니다.</li>");$("ul").append("<li> 일곱번째입니다.</li>");});$("li").on("click",function(){console.log("li 클릭");var $this = $(this);console.log($this);});$("ul").on("click","li", function(){var $this = $(this);console.log($this);});</script>