728x90
자바스크립트
(PT)Javascript와_Node.js_20강_jQuery 기본 메서드
text()와html()반드시 정리 매우중요
text( )는 안에있는거 읽어들이는것
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
//each() 배열
$("p").each(function(index, item){
///index는 [0][1][2].. 불러온것
console.log($(item).text());
//console.log($(this).text()); //item == this
if(index % 2 == 0) {
$(item).css("background", "#dfdfdf");
//$(this).css("background", "#dfdfdf"); //item == this
} else {
$(item).css("background", "#cccccc");
//$(this).css("background", "#cccccc"); //item == this
}
});
//html() / text()
console.log("htmlMethod : " + $("#htmlMethod").html());
$("#htmlMethod").html("<strong>new</strong> " + $("#textMethod").html());
console.log("textMethod : " + $("#textMethod").text());
$("#textMethod").text("new " + $("#textMethod").text());
//addClsss() 클래스 속성 추가
//removeClsss() 클래스 속성 제거
$("#addClass").addClass("addCla");
$(".addCla").css("background", "#ff0000");
$(".remCla").css("background", "#00ff00");
//$("#removeClass").removeClass("remCla");
//$(".remCla").removeClass("remCla");
$(".remCla").css("background", "#0000ff");
//attr() 속성 추가
//attr() 속성 검사 (2개이상인 경우 첫번째 객체 이용)
//removeAttr(속성) 속성 제거
$("#attrMethod img").attr("src", "img/logo.png");
console.log("#attrMethod img src : " + $("#attrMethod img").attr("src"));
$("#attrMethod img").removeAttr("src");
console.log("#attrMethod img src : " + $("#attrMethod img").attr("src"));
//css() 스타일 추가
//css() 스타일 검사
$("#cssMethod").css("width", "300px").css("height", "100px");
$("#cssMethod").css("background", "#ff0000");
console.log("cssMethod css width : " + $("#cssMethod").css("width"));
console.log("cssMethod css height : " + $("#cssMethod").css("height"));
console.log("cssMethod css background : " + $("#cssMethod").css("background"));
//remove() // 문서 객체 제거
//empty() // 문서 객체 내부 제거
$("#removeMthod").remove();
$("#emptyMthod").empty();
});
</script>
</head>
<body>
<p> Hello javascript! </p>
<p> Hello jQuery! </p>
<p> Hello node.js! </p>
<div id="htmlMethod"> html() 메서드 </div>
<div id="textMethod"> text() 메서드 </div>
<div id="addClass"> addClass() 메서드 </div>
<div id="removeClass" class="remCla"> removeClass() 메서드 </div>
<div id="attrMethod">
<img>
<br>
<img>
</div>
<div id="cssMethod"> CSS METHOD </div>
<div id="removeMthod"> Remove Object! </div>
<div id="emptyMthod"> Empty Object! </div>
</body>
</html>
(PT)Javascript와_Node.js_21강_jQuery 이벤트
얘 자체를 listner라고한다.
console.log(~~는 callback함수
//클릭할때마다 숫자가 올라가는 이벤트함수
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<!-- 이 부분 추가해야 오류없음 -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<style></style>
</head>
<body>
<script type="text/javascript">
$(function() {
$(".logo").click(function() {
console.log("logo image click!");
})
})
</script>
</head>
<body>
<div>
<img class="logo" src="logo.png">
</div>
</body>
</html>
event.preventDefault(); 하게되면 해당 동작을 중지시킨다. (그다음동작으로 넘어가지않게 방지)
이게 없으면 그다음동작으로 넘어가게된다.
<!DOCTYPE html>
<html>
<head>
<title> jQuery </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#loginForm").submit(function(event) {
if($("#uId").val() == "") {
alert("user id blank!!");
event.preventDefault();
} else if($("#uPw").val() == "") {
alert("user pw blank!!");
event.preventDefault();
} else {
alert("login ok!!");
}
});
});
</script>
</head>
<body>
<form id="loginForm" action="http://www.google.com">
USER ID : <input id="uId" type="text" name="uId"><br>
USER PW : <input id="uPw" type="password" name="upw"><br>
<input id="sbmBtn" type="submit" value="SUBMIT">
<input id="resBtn" type="reset" value="RESET">
</form>
</body>
</html>
//만약 이렇게 배열로 넣으면 폼이 여러개일때 사용하기 편하다.
$("#resBtn").click(function() {
alert("reset ok!")
$("#loginForm")[0].reset();
})
SPRING
게시판외우기 다음단계
페이징처리(밑에 1-..)나오게 하는것
emp list emp
==================================================
reply는 controller에서 전부 구현가능.근데 절대 그렇게 하면안됨
service단에서 mapper를 무조건!!!! 구현해야한다.(비지니스 로직)
@transactional--controller에서 구현하는게 아니라service단에서 무조건! 만들어야한다.
controller에선 반드시 하나만!
==================================================
mapper단에서 sql구현할때
원래 #{boardVO.bName}인데 boardVO를 생략한것이다.
만약 service단에서 mapper.reply(boardVO)말고 다른 객체도 사용했으면
(ex. mapper.reply(boardVO, noticeVO)이런식으로) sql에서 반드시 어떤 것을 썼는지 명시해줘야한다.
오늘의 문제
1.jquery-ui를 이용하여 아래를 구현하시오
728x90
'코딩 > 수업 정리' 카테고리의 다른 글
| 21.02.01 [049] Mon (0) | 2021.02.01 |
|---|---|
| 21.01.29 [048] Fri (0) | 2021.01.29 |
| 21.01.27 [046] Wed (0) | 2021.01.27 |
| 21.01.26 [045] Tue (0) | 2021.01.26 |
| 21.01.25 [044] Mon (0) | 2021.01.25 |
댓글