Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

자바나라

[JQuery] $(this)에 관하여 : selecter 본문

오늘 배운 자바

[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>


저작자표시 비영리

'오늘 배운 자바' 카테고리의 다른 글

[JQuery] 자바스크립트 이벤트가 2회 중복 실행될 때  (0) 2018.07.17
[JSP]게시글 하나에 여러개 사진 리스트 출력  (0) 2018.07.09
Tomcat 포트 충돌시 해결 방법  (0) 2018.05.18
[JavaScript] 스크롤 맨 아래점 도달 시 글 불러오기  (1) 2018.05.03
[Mybatis] 방금 Insert한 row를 select 하고 싶을 때 : selectKey  (2) 2018.05.02
'오늘 배운 자바' Related Articles more
Comments