이벤트처리

id -> #id          태그 -> 'tag'        class -> .cls

 

Tag 클릭이벤트 

	$("#ptag").click(function() {	// onclick과 동일
		alert("p click"); //p Tag 를 클릭하면 이벤트 발생
	});	

div 안 의 p안의 class

<p class="cls">div in p tag class cls</p>
    
$("div p.cls").click(function() {
		alert("div in p tag class cls click");
	});

 

 button 클릭이벤트1 

	$('button').click(function() {
		alert("button click")
	}); 

 

버튼클릭2 : 함수 생성없이 아래서 호출

	$("button").on("click", btnClick);
    
    
    function btnClick() {
	alert("btnClick");
}

 

cls를 클릭했을 때 배경색을 칠해라

$(".cls").click(function() {
 		//alert("cls click");
 		하나만 클릭해도 둘다 동시에
 		$('.cls').css("background", "#00ff00");
 		
 		클릭한 class만 색상변경 -> this
 		$(this).css("background", "#00ff00");
 	});

 

p태그를 클릭했을 때 사라지게 해라

 	$("p").click(function() {
 		//$("p").hide();
 		$(this).hide();
 	});

 

 

 

 

mouseover

	$("tr").mouseover(function() {//tr태그 위에 올라갔을 때 
		$(this).css('background', '#00ff00');
	});

mouseout

	$("tr").mouseout(function() {//tr태그 위에서 내려왔을때
		$(this).css('background', '#ffffff');
	});

 

 

 

 

focus (마우스 커서가 위치한 곳) focus가 들어왔을 때

 	$('input').focus(function () {
		$(this).css('background-color', '#00ff00');
	}); 

 

focus가 나갔을 때

	$('input').blur(function () {
		$(this).css('background-color', '#ffffff');
	}); 

 

 

 

마우스가 안쪽에 있을 때

	$(".test").mouseenter(function() {
		alert('test mouseenter');
	});

마우스가 떠났을 때

	$(".test").mouseleave(function() {
		alert('test mouseleave');
	});

 

 

 

 

.test를 클릭했을 때 mousedown

	$(".test").mousedown(function() {
		alert('test mousedown');
	});

----------------->mouseup

	$(".test").mouseup(function() {
		alert('test mouseup');
	});

 

 

 

 

button누르면 p태그 색상 변경 (setter)

	$('button').click(function() {//버튼을 누르면
		$('p').css('background', '#0000ff');
        }

----> getter css를 통해 해당 값을 취득

let color = $('p').css('background');

 

 

 

 

버튼을눌러 입력받은 문자열 getter

	$("#btn").click(function() {
		//입력받은 문자열 getter
		let value = $("#text").val();/* getter로 가져오는것 val */
       }

--------->문자열 setter

		$("#text").val("hi hello");

 

 

 

버튼눌러 태그 추가

		$('p').attr('id', 'ptagid');

------->태그지우기

$('p').removeClass('mycss');

 

 

 

 

 

버튼클릭하면 3초동안 천천히 없어짐

	$("#hideBtn").click(function() {
		$(".test").hide(3000);
	});

-------------> 천천히 나타남

	$("#showBtn").click(function() {
		$(".test").show(5000);
	});

------------>on/off

	$("#toggleBtn").click(function() {
		$(".test").toggle(1000);
	});

 

 

 

 

 

hide()

전체 hide

$('*').hide();

p 태그의 id = demo만 숨김

$('p#demo').hide();

p 태그의 class = cls만 숨김

$('p.cls').hide();

배열접근(name이 name인것)

$('p[name=name]').hide();

 

 

 

 

 

 

 

더블클릭

	$(".test").dblclick(function() {
		alert('test double click');
	});