220712 - 제이쿼리 - 메소드(removeAttr, html, remove, empty), 메소드 형태 선택자(parent, parents, children, closest, next, nexAll, prev, prevAll, nextUntil, siblings, find), 문서 객체 생성
- 문제 : switch on/off
1. 내 답변
<script>
$(function(){
var on=false;
var off;
$('img').click(function(){
on=!on;
if (on){
off=$(this).attr('src');
$(this).attr('src',"../images//light-switch.png");
}else{
$(this).attr('src',off);
}
});
});
</script>
=> 이미지 더하기
<style>
div{
width: 600px;
height: 700px;
border: 3px solid black;
text-align: center;
display: inline-block;
background-color: #000;
}
div img{
width: 600px;
opacity: 0;
}
.sw{
vertical-align: bottom;
}
</style>
<script>
$(function(){
var on=false;
var off;
$('img').click(function(){
on=!on;
if (on){
off=$(this).attr('src');
$(this).attr('src',"../images//light-switch.png");
$('div').css('backgroundColor','white');
$('div img').css('opacity',1);
}else{
$(this).attr('src',off);
$('div').css('backgroundColor','black');
$('div img').css('opacity',0);
}
});
});
</script>
</head>
<body>
<div>
<img src="../images/Penguins.jpg" alt="">
</div>
<img class="sw" src="../images//light-switch1.png" alt="">
</body>
- removeAttr : 속성 제거
<script>
$(function(){
$('img').click(function(){
$(this).removeAttr('width');
});
});
</script>
</head>
<body>
<img src="../images/Koala.jpg" alt="" width="200">
</body>
- 문제 : 전체 배경 노랑 / h1마다 다른 색
<script>
$(function(){
//var co=$('h1').css('color'); //속성값 변수에 담기 //rgb(0,0,0)
//$('h1').css('color','red'); //속성 변경
/* 내답변
$('h1').css('backgroundColor','yellow');
var c=['red','green','blue'];
$('h1').css('color',function(index){
return c[index];
})*/
var c=['orange','green','blue'];
$('h1').css({
color:function(index){
return c[index];
},
backgroundColor:'yellow'
});
});
</script>
</head>
<body>
<h1>제이쿼리 선택자</h1>
<h1>제이쿼리 메서드</h1>
<h1>제이쿼리 이벤트</h1>
<div id="box">
</div>
</body>
- html
$(선택자).html(); => 텍스트 가져옴
$(선택자).html(내용); => 선택자의 텍스트가 내용으로 변경
※ 속성 관련 메소드
$(선택자).css('속성');
$(선택자).css('속성','속성값');
$(선택자).attr('태그속성');
$(선택자).attr('태그속성','태그속성값');
<script>
$(function(){
$('h1').html('지금 배우는 중');
//$('#box').html('<h1>오늘은 화요일</h1>');
$('#box').text('<h1>오늘은 화요일</h1>'); //태그 인식 X
});
</script>
</head>
<body>
<h1>제이쿼리 선택자</h1>
<h1>제이쿼리 메서드</h1>
<h1>제이쿼리 이벤트</h1>
<div id="box">
</div>
</body>
- 문제 : h1별 답안 작성 (인덱스, 반복문)
<script>
var txt=['흐리고 덥습니다','화요일','37360명'];
var i;
$(function(){
/*
$('h1').click(function(){
i=$(this).index();
$(this).html(function(){
return txt[i];
});
});
*/
$('h1').click(function(){ //이벤트
i=$(this).index();
$(this).html(txt[i]);
});
});
</script>
</head>
<body>
<h1>오늘의 날씨는?</h1>
<h1>오늘은 무슨 요일?</h1>
<h1>오늘의 코로나 확진자 수는?</h1>
</body>
<script>
var txt=['흐리고 덥습니다','화요일','37360명'];
var i;
$(function(){
var divC=['선택자','메서드','이벤트'];
/*for (var i=0;i<divC.length;i++){
$('div').eq(i).html('<h1>제이쿼리 '+divC[i]+'</h1>');
}*/
$('div').html(function(index){
return '<h1>제이쿼리 '+divC[index]+'</h1>';
});
});
</script>
</head>
<body>
<h1>오늘의 날씨는?</h1>
<h1>오늘은 무슨 요일?</h1>
<h1>오늘의 코로나 확진자 수는?</h1>
<div></div>
<div></div>
<div></div>
- 문제 : 색상 누르면 차 색상 바뀌게 하기
<style>
#carColor{
width: 375px;
text-align: center;
}
#carColor>p{
display: inline-block;
width: 50px;
height: 50px;
margin: 10px;
cursor: pointer;
}
#carColor>p:nth-child(1){
background-color: greenyellow;
}
#carColor>p:nth-child(2){
background-color: purple;
}
#carColor>p:nth-child(3){
background-color: red;
}
</style>
<script>
$(function(){
var i;
var color = ['green','purple','red'];
$('#carColor>p').click(function(){
i=$(this).index();
$('#carColor>p').css('border','none');
$(this).css('border','3px solid black');
$('.myCar').attr('src','../images/car_'+color[i]+'.jpg'); //css아닌 attr
});
});
</script>
</head>
<body>
<img class="myCar" src="../images/car_green.jpg" alt="">
<div id="carColor">
<p></p>
<p></p>
<p></p>
</div>
</body>
- remove : 태그 제거
<script>
$(function(){
$('h1').first().remove();
});
</script>
</head>
<body>
<h1>나는 곧 제거됨</h1>
<h1>메서드</h1>
</body>
- empty : 해당 태그 내부 비움
<script>
$(function(){
$('#box').empty();
});
</script>
</head>
<body>
<div id="box">
<h1>나는 곧 제거됨</h1>
<h1>메서드</h1>
</div>
</body>
- 문제 : div 내부 h1 양쪽에 ** 추가
<script>
$(function(){
$('#box2>h1').html(function(index,html){ //문자
return '*'+html+'*';
});
});
</script>
</head>
<body>
<div id="box1">
<h1>나는 곧 제거됨</h1>
<h1>제이쿼리 메서드</h1>
</div>
<div id="box2">
<h1>나는 곧 제거됨</h1>
<h1>제이쿼리 메서드</h1>
</div>
</body>
메소드 형태 선택자
- parent : 직계 부모 요소 하나 선택
<ul>
<li><a></a></li>
<li><a></a></li>
</ul>
a=> 각각 li의 0번째 자식이므로 선택자 지정 시 인덱스 부여 어려움
=> parent 메소드 사용해서 li를 선택자 지정
=> 2번째 li > a 선택 가능
<script>
$(function(){
$('.list3').parent().css('border','2px solid black');
});
</script>
</head>
<body>
<div id="box1">
<h1>메서드 형태 선택자</h1>
<ul>
<li>리스트1</li>
<li>리스트2</li>
<li class="list3">리스트3</li>
<li>리스트4</li>
<li>리스트5</li>
</ul>
<p>나는 단락</p>
<section>
<h2>나는 섹션 제목</h2>
<p>나는 섹션 단락</p>
</section>
</div>
</body>
- parents : 부모(상위) 요소들 전체
- closest : 상위 요소들 중 가장 가까운 요소
- children : 모든 직계 자식 요소들
- next : 다음 형제
- nextAll : 다음 형제들 전체
- prev : 이전 형제
- prevAll : 이전 형제들 전체
- nextUntil : 지정한 요소들 사이에 있는 요소들
- siblings : 형제들 전체
문서 객체 형성
$('<태그이름>');
=> 태그 생성으로 인식함
<script>
$(function(){
$('<h2></h2>').html('가나다라').appendTo('body');
//h2 생성 -> body 끝에 위치
});
</script>
</head>
<body>
<h1>문서객체생성</h1>
<div id="festival">
<h1>여름 축제</h1>
</div>
</body>
<script>
$(function(){
$('<h2>남극펭귄</h2>').appendTo('#festival');
//h2 생성 -> festival 끝에 위치
$('<img>').attr({
src:'../images/Penguins.jpg',
width: 500
}).appendTo('#festival');
var content=['화요일','문서객체생성','홈페이지제작'];
for(var i=0;i<content.length;i++){
$('<p></p>').html(content[i]).appendTo('#festival');
}
});
</script>
</head>
<body>
<h1>문서객체생성</h1>
<div id="festival">
<h1>여름 축제</h1>
</div>
</body>