728x90
* 예제
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title> 이벤트 </title> <script src="js/jquery.js"></script> <script> $(function( ) { $(".btn1").click(function(){ //사용자가 [버튼1]을 클릭하면 <p>내용 1</p>의 글자를 빨간색으로 변경한다. $(".btn1").parent().next() .css({"color":"#f00"}); }); $(".btn2").on({ "mouseover focus": function() { //사용자가 [버튼2]에 마우스 포인터를 올리거나 포커스를 이동하면 <p>내용 2</p>의 글자를 초록색으로 변경한다. $(".btn2").parent().next() .css({"color":"#0f0"}); }, "mouseout blur": function() { //사용자가 [버튼2]에 마우스 포인터를 올리거나 포커스를 이동하면내용 <p>내용 2</p>의 글자를 검은색으로 변경한다. $(".btn2").parent().next() .css({"color":"#000"}); }, }); }); </script> </head> <body> <p> <button class="btn1">버튼1</button> </p> <p>내용1</p> <p> <button class="btn2">버튼2</button> </p> <p>내용2</p> </body> </html> |
'내마음대로만들어보자 > JS' 카테고리의 다른 글
| 이벤트 제거 - off() (0) | 2021.08.22 |
|---|---|
| 강제로 이벤트 발생시키기 - trigger() 메서드 (0) | 2021.08.22 |
| unwrap() / wrap() / wrapAll() / wrapInner() 메소드 (0) | 2021.08.21 |
| replaceAll() / replaceWith() 메서드 (0) | 2021.08.21 |
| clone() / empty() / remove() 메서드 (0) | 2021.08.21 |