jQUERY는 태그의 css를 제어할 수 있는 함수를 제공
addClass :css class를 설정
removeClass : css class를 제거
toggleClass :지정된 클래스가 없으면 설정하고 있으면 제거
jQuery 효과
hide: 선택된 태그를 사라지게 함
show : 선택된 태그를 나타나게 함
toggle:사라지거나 나타나는 상태를 전환
실습1
function addClass(){
$("#a1").addClass("active");
}
function removeClass(){
$("#a1").removeClass("active");
}
function toggleClass(){
$("#a1).toggleClass("active");
}
</script>
<style>
.active{
background-color : black;
color :whtie;
}
</style>
추가하기를 누르면 설정한 css추가
제거하기 누르면 제거
toggle은 두 기능을 한 버튼에 적용
css:css속성을 가져오거나 설정
<script>
function getCss(){
//배경색 값 가져오기
var v1=$("#a1").css("background-color");
//글자색 가져오기
$("a1").css("color");
//불러온 값 나타내기
$("#result").append("background-color :"+v1"<br>");
$("#result").append("color:" +v2"+"<br>");
}
function secCss(){
$("#a1").css("background-color","blue");'
$("#a1").css("color","yellow");'
}
</script>
<style>
#a1{
background-color:black;
color :white;
}
</style>
다음과 같이 설정한 cssf를 적용시켜 줄수도있고,읽어올수도 있음
css설정하는것 기존에 했던 방법과 같다.
```
j query는 선택자를 통해 태그를 선택한 후 선택된 태그를 기준으로 다른 태그들을 탐색 할 수 있다.
태그 탐색은 html문서를 탐색할 경우
사용하지만 xml문서를 탐색하는 용도로 사용하기도 한다.
부모태그 탐색
parent: 선택된 태그의 부모 태그를 선택
parents: 선택된 태그의 모든 부모 태그를 선택
parents(선택자2): 선택된 태그의 모든 부모 태그 중 선택자2에 해당하는 태그들이 선택
<script>
<style>
div{
border:2px solid black;
padding : 10px
}
</style>
</head>
<body>
<div>div tag1
<div class="c1">div tag2
<div class="c2">div tag3
<div id="a4">div tag 4</div>
</div>
</div>
</div>
</body>
자식태그 탐색
children : 선택된 태그의 자식 태그들을 선택
children(선택자2):선택된 태그의 자식 태그들 중 선택자2에 해당하는 태그들이 선택
find(선택자2) : 선택된 태그의 하위 태그들 중 선택자 2에 해당하는 태그들이 선택
<script>
$(function(){
//a1 기준으로
$("#a1").children().css("border-color","red");
$"(#a1").childern(".c1).css(:border-width", "4px");
$("#a1").find(".c3").find(".c3").css("border-style","dashed");
});
</script>
<style>
div{
border :2px solid black;
padding :10px
}
</style>
</head>
<body>
<div id="a1">
div
<div class="c1">
div 1
<div class="c3">
div 1-2
</div>
</div>
<div class="c2">
div 2
<div>
div 2-2
</div>
</div>
</div>
</body>
children"#a1인 div 기준으로 자식인 div1,2빨간색 적용
children(선택자)#a1인 div 기준으로 자식 중 c1클래스 div 굵기 적용
find " #a1인 div 기준으로 자식중
c3클래스 div1-2를 찾아 dashed 적용
같은 계층의 태그 선택
silbing :선택된 태그와 같은 계층의 모든 태그들이 선택
silbings2(선택자2): 선택된 태그와 같은 계층의 모든 태그 중 선택자 2에 해당하는 태그들이 선택
<script>
$<function(){
$("#a1").siblings().css("border-color", "red")
$("#a1").siblings(".c2").css("border-style","dotted");
});
</script>
<style>
div {
border :2px solid black;
padding :10px;
}
</style>
</head>
<body>
<div class="c1">div 1</div>
<div class="c2">div 2</div>
<div id="a1">div 3</div>
<div class="c1">div 4(/div>
<div class="c2">div 5</div>
</body>
같은계층의 태그 선택
next선택된 태그 다음 태그가 선택
nextALL: 선택된 태그의 다음 태그들이 모두 선택
nextUntil(선택자2): 선택된 태그 다음 태그들 중 선택자 2까지의 모든 태그들이 선택.
<script>
$(function()P
$("#a1").next().css("border-color","red");
$("#a1").nextAll().css("border-style","dotted");
$("#a1").nextUntil("#a2").css("border-width","4px");
});
</script>
<style>
div{
border : 2px solid black;
padding : 10px;
margin-bottom:10px;
</style>
</head>
<body>
<div>div 1</div>
<div id="a1">div 2</div>
<div>div 3</div>
<div>div 4</div>
<div id="a2">div 5</div>
</body>
jQUERY 효과
HIDE: 선택된 태그들이 사라지게 함
SHOW : 선택된 태그를 나타나게함
TOGGLE:사라지거나 나타나는 상태를 전환
<sciprt>
function div_hide(){
$("#a1").hide();
}
function div_show(){
$("#a1").show();
}
function div_toggle(){
$("#a1").toggle();
}
</script>
학습소감
학습한 내용 중 어려웠던 점 또는 해결못한것
많은 코드를 작성하다보니복잡해져서 헷갈리었다.
학습소감
많은 양의 학습을 하다디보니 받아들이는데 시간이 걸렸다.
많이 연습해야겠다.
열심히 배우자