반응형
@find, @end
<body>
<ul id="list">
<li>java</li>
<li>database</li>
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
<li>jQuery</li>
<li>JSP</li>
</ul>
<button>click</button>
<div id="text"></div>
</body>
</html>
<script>
$(function(){
$("button").on("click",function(){
console.log($("#list").find("li").eq(1).html());
$("#list").find("li")
.eq(1).html("데이터" + "<br>" + "베이스")
.end()
.eq(2).html("index2 요소 변경")
})
});
</script>@width @height
<body>
<button id="btn">click</button>
<button id="btn2">decline</button>
<div id="box" style="width: 300px; height: 300px; background-color: aquamarine">
</div>
<div id="text"></div>
</body>
</html>
<script>
// 아이디가 box 인 div 태그의 너비, 높이 가져와서 출력하기
$(function(){
$("#btn").on("click",function(){
let width = $("#box").width();
let height = $("#box").height();
$("#text").html("너비 : " + width + ", 높이 : " + height);
})
});
// decline 버튼을 누르면 박스 크기가 계속 줄어들도록
$(function(){
$("#btn2").on("click",function(){
let wid = $("#box").width() / 2;
let hei = $("#box").height() / 2;
// 방법1
$("#box").css("width",wid);
$("#box").css("height",hei);
// 방법2 + 메소드 체이닝
// $("#box").width(wid/2).height(hei/2);
})
});
</script>@attr
<body>
<div><button id="btn">click</button></div>
<img src="../images/egg.jpg" style="width: 300px; height: 150px;">
<!-- <img src="../images/chick.png" style="width: 300px; height: 150px;"> -->
</body>
</html>
<script>
// 버튼 클릭하면 이미지 바꾸기
$(function(){
$("button").on("click",function(){
// img 주소 가져오기 getter
let src = $("img").attr("src");
console.log(src);
// img 주소 변경 setter
$("img").attr("src","../images/chick.png");
})
});
</script>
<body>
<ul id="list">
<li>java</li>
<li>database</li>
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
<li>jQuery</li>
<li>JSP</li>
</ul>
<button id="btn">click</button>
<button id="btn2">click2</button>
<div id="text"></div>
</body>
</html>
<script>
// append : add text 문구 뒤에 추가
$(function(){
$("button").on("click",function(){
$("#list").append("<li>add text</li>");
})
});
// prepend : 모든 li 요소 앞에 안녕 이란 문구 추가
$(function(){
$("button").on("click",function(){
$("li").prepend("안녕 ");
})
});
// 버튼 누르면 비활성화 시키기
$(function(){
$("#btn").on("click",function(){
$("#btn").attr("disabled","disabled");
})
});
// 버튼2를 누르면, '비활성화 되어 있는" 버튼1를 활성화 시키기
$(function(){
$("#btn2").on("click",function(){
$("#btn").removeAttr("disabled");
})
});반응형
'Java Script > JQuery' 카테고리의 다른 글
| [JQuery] each, toggleClass #0418수업 #4교시 (0) | 2023.04.18 |
|---|---|
| [JQuery] 부모자식 요소 #0418수업 #4교시 (0) | 2023.04.18 |
| [JQuery] 복사, 대체 #0418수업 #3교시 (0) | 2023.04.18 |
| [JQuery] 기본문법 #0414 수업 #3교시 (0) | 2023.04.14 |
| [JQuery] $function(){} 기본문법 #0414 수업 #2교시 (0) | 2023.04.14 |