a 태그 클릭했을 때 div으로 감싸고 border라는 클래스를 추가해서 스타일을 입힌다.
a 태그 클릭 이벤트를 막기 위해서 preventDefaul()사용
return false; 를 사용해도 같은 효과 작용
return false;를 하게 되면 stopPropagation()도 같이 작용된다
stopPropatation() : 이벤트를 더 이상 전달하지 않는다.
preventDefault() : 이벤트의 기본 처리를 금지한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/jquery-2.2.2.min.js"></script>
<style type="text/css">
.border {
border: 5px double #0af;
}
a {
text-decoration: none;
color: #000;
}
</style>
<script type="text/javascript">
$(function() {
$("#link").click(function(e) {
var div = "<div></div>";
$(this).wrap(div).parent().addClass("border");
e.preventDefault();
});
});
</script>
<title>Insert title here</title>
</head>
<body>
<a id="link" href="#">LINK</a>
</body>
</html>
'JQUERY > Basic' 카테고리의 다른 글
| ajax를 이용한 서블릿에 요청, 응답 받기 (1) | 2016.03.31 |
|---|---|
| Jquery 이벤트 (0) | 2016.03.29 |
