Jquery
Jquery 03/03
SangssI
2023. 3. 3. 14:18
ex01_Jquery.css.html : Jquery를 이용하여 CSS속성 변경하기
1.CSS
<style>
table { width: 200px; }
.selectClass {color: darkslategrey;
font-size: 20px;}
input { margin-left: 35px;
margin-top: 20px;}
tr { text-align: center;}
</style>2.Jquery
<script src="http://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$(function () {
$("tr:even").css("background","pink");
$("tr:odd").css("background","darkgoldenrod");
$("#btn1").click(function () {
/* 첫번째 tr태그에게 selectClass 라는 클래스명을 추가 */
$("tr:first").addClass("selectClass");
});
$("#btn2").click(function () {
/* 첫번째 tr태그에 붙여진 클래스명 을 제거 */
$("tr:first").removeClass("selectClass");
});
/* eq : ==의 엔티티코드의 형태 */
$("tr:eq(4)").css("font-size","30px");
/* lt(2): < 2 즉 2번보다 작은 순서의 전체 tr을 찾아라*/
/* gt(2): > 2 즉 2번보다 큰 순서의 전체 tr을 찾아라*/
$("tr:lt(2)").css("color","green");
});
</script>3.HTML
<body>
<table border="1">
<tr>
<td>one</td>
</tr>
<tr>
<td>two</td>
</tr>
<tr>
<td>three</td>
</tr>
<tr>
<td>four</td>
</tr>
<tr>
<td>five</td>
</tr>
</table>
<input type="button" id="btn1" value="버튼">
<input type="button" id="btn2" value="제거">
</body>ex02_Jquery.this.html : this를 이용한 Jquery 문법
1.Jquery
<script src="http://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$(function () {
$(".movie").css("border","2px solid red")
.css("margin","20px");
$(".movie").click( function () {
//this : 클릭을 발생시킨 태그
let msg = $(this).find("p").html();
alert(msg);
});
});
</script>2.HTML
<body>
<div>
<ul>
<li>
<div class="movie" id="movie1">
<p>귀멸의 칼날</p>
</div>
</li>
<li>
<div class="movie" id="movie2">
<p>스즈메의 문단속</p>
</div>
</li>
<li>
<div class="movie" id="movie3">
<p>아임히어로 더 파이널</p>
</div>
</li>
<li>
<div class="movie" id="movie4">
<p>대외비</p>
</div>
</li>
<li>
<div class="movie" id="movie5">
<p>더 퍼스트 슬램덩크</p>
</div>
</li>
</ul>
</div>
</body>ex03_Jquery.가상클래스.html : Jquery를 이용한 CSS가상클래스 접근하기
1.CSS
<style>
table { width: 200px; }
.selectClass {color: darkslategrey;
font-size: 20px;}
input { margin-left: 35px;
margin-top: 20px;}
tr { text-align: center;}
</style>2.Jquery
<script src="http://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$(function () {
$("tr:even").css("background","pink");
$("tr:odd").css("background","darkgoldenrod");
$("#btn1").click(function () {
/* 첫번째 tr태그에게 selectClass 라는 클래스명을 추가 */
$("tr:first").addClass("selectClass");
});
$("#btn2").click(function () {
/* 첫번째 tr태그에 붙여진 클래스명 을 제거 */
$("tr:first").removeClass("selectClass");
});
/* eq : ==의 엔티티코드의 형태 */
$("tr:eq(4)").css("font-size","30px");
/* lt(2): < 2 즉 2번보다 작은 순서의 전체 tr을 찾아라*/
/* gt(2): > 2 즉 2번보다 큰 순서의 전체 tr을 찾아라*/
$("tr:lt(2)").css("color","green");
});
</script>3.HTML
<body>
<table border="1">
<tr>
<td>one</td>
</tr>
<tr>
<td>two</td>
</tr>
<tr>
<td>three</td>
</tr>
<tr>
<td>four</td>
</tr>
<tr>
<td>five</td>
</tr>
</table>
<input type="button" id="btn1" value="버튼">
<input type="button" id="btn2" value="제거">
</body>