-
Jquery[제이쿼리] 이벤트[event]메서드 mouseover,click 배우기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 7. 22:51
안녕하세요~ 주니주니 입니다.
오늘은 제이쿼리[jquery]로 이벤트[event]메서드 mouseover,click을 배워보겠습니다.
위화면처럼 셋팅해주세요~
짠 실행 화면입니다. 이제 여기까지는 쉽죠?
===============================
$('h1').mouseover(function(){
===============================
'h1'태그의 대상으로 mouseover <==마우스가 올라갔을경우
===============================
$(this).html(function(i,s){
===============================
this <== 간단하게 말하면 현재 이벤트[event]가 발생한 대상 즉 <h1>태그가 되겠죠
function(i,s) <== i값은 <h1>태그의 배열번호 즉 <body>태그의 기준으로 순서대로
<body>
<h1>head-0</h1>
<h1>head-1</h1>
<h1>head-2</h1>
</body>
┌───────── ┐
│head-0 = 의 i값은 0│
│head-1 = 의 i값은 1│
│head-2 = 의 i값은 2│
└───────── ┘
function(i,s) <== s값은 <h1>태그의 배열번호에 해당하는 값
예) <h1>태그의 i값이 1인값의 s값은 ="head-1" 입니다.
================================
return s+"+";
================================
위에서 s값이 ="head-1" 인경우
head-1에다가 +값을 붙여준다는 뜻입니다.
이제 실행을 해볼까요실행 처음에는 아무 변화를 못느껴요! 하지만
마우스를 올려보면?이렇게 문자뒤에 +표가 붙는걸 확인 할수있답니다.
그럼 마구마구 올려볼께요.마우스를 올리는 만큼 이렇게 뒤에 +표시가 붙는답니다.
===============================
$('h2').click(function(){
===============================
'h2'태그의 대상으로 click<==마우스로 클릭할경우
===============================
] $(this).html(function(i,s){
return s+"*";
===============================
이부분은 위에부분이랑 똑같아요 아 +대신에 뒤에다가 *추가해준답니다.마우스를 올리거나 클릭을 안했기때문에 그대로입니다 하지만!
클릭을하면 *가 1개식 뒤에 추가되는모습입니다.
마무리로 마우스로 올리고 클릭하고 해봤서요 ㅎㅎ
오늘은 제이쿼리[jquery]로 이벤트[event]메서드 mouseover,click 배워봤습니다.
그럼 다음에 또만나요~'자바스크립트[JavaScript] > 제이쿼리[Jquery]' 카테고리의 다른 글
Jquery[제이쿼리] 이벤트[event]메서드 keyup 글자수 제한기능 (0) 2016.11.09 Jquery[제이쿼리] 이벤트[event]메서드 mouseover,mouseout이미지변경 (0) 2016.11.08 Jquery[제이쿼리] 앞부분 추가[prepend] 뒤부분 추가[append] 하기 (0) 2016.11.06 Jquery[제이쿼리] HTML/TEXT 변경하기 (0) 2016.11.05 Jquery[제이쿼리] 이미지[img] 변경하기 (0) 2016.11.03
