메소드
- each : 배열 처리, 반복문 역할
$.each(배열, function(index,item){})
$(선택자).each(function(index,item){})
<script>
$(function(){
var brsite=[ //자바스크립트 배열(객체로 구성)
{name:'서울방송',link:'http://www.sbs.co.kr'},
{name:'한국방송',link:'http://www.kbs.co.kr'},
{name:'문화방송',link:'http://www.imbc.com'}
];
/*for(var i=0;i<brsite.length;i++){
var output="";
output+='<a href="'+brsite[i].link+'">';
output+='<h2>'+brsite[i].name+'</h2>';
output+='</a>';
document.body.innerHTML+=output;
}*/
$.each(brsite, function(index,item){
//인덱스별로 객체정보 전달 (for문 대체)
var output='';
output+='<a href="'+item.link+'">';
output+='<h2>'+item.name+'</h2>';
output+='</a>';
document.body.innerHTML+=output;
})
//$(선택자).each(function(index,item){})
});
</script>
</head>
<body>
<h1>방송사이트</h1>
</body>
※ 인라인블록 안에 블록 위치 X => html5부터 anchor 태그 안에는 블록태그 가능
- addClass : 클래스값 추가
<style>
.high_light{
background-color: yellow;
}
</style>
<script>
$(function(){
$('h1').addClass('high_light');
//h1 태그에 high_light 클래스 부여
});
/*
$('h1:even').addClass('high_light'); //짝수 h1
$('h1').eq(0).addClass('high_light'); //첫번째 h1
*/
</script>
</head>
<body>
<h1>제이쿼리 선택자</h1>
<h1 class="high_light">제이쿼리 메서드</h1>
<h1>제이쿼리 이벤트</h1>
<h1>제이쿼리 애니메이션</h1>
<h1>제이쿼리 실무응용</h1>
<h1>제이쿼리 플러그인</h1>
</body>
- removeClass : 클래스값 삭제
<style>
.high_light{
background-color: yellow;
}
</style>
<script>
$(function(){
$('h1').hover(function(){
$(this).addClass('high_light');
},function(){
$(this).removeClass('high_light');
});
});
</script>
</head>
<body>
<h1>제이쿼리 선택자</h1>
<h1>제이쿼리 메서드</h1>
<h1>제이쿼리 이벤트</h1>
<h1>제이쿼리 애니메이션</h1>
<h1>제이쿼리 실무응용</h1>
<h1>제이쿼리 플러그인</h1>
</body>
<style>
.item{
background-color: yellow;
}
.select{
border: 1px solid red;
}
</style>
<script>
$(function(){
$('h1').removeClass('select');
});
</script>
</head>
<body>
<h1 class="item">제이쿼리 선택자</h1>
<h1 class="item select">제이쿼리 메서드</h1>
<h1 class="item">제이쿼리 이벤트</h1>
<h1>제이쿼리 애니메이션</h1>
<h1 class="select">제이쿼리 실무응용</h1>
<h1>제이쿼리 플러그인</h1>
</body>
- 문제 : h1 별로 다른 배경색
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<style>
.high_light0{background-color: yellow;}
.high_light1{background-color: orange;}
.high_light2{background-color: red;}
.high_light3{background-color: green;}
.high_light4{background-color: blue;}
</style>
<script>
$(function(){
/* 내 답변
var highlight = [
{name: 'high_light0'} ,
{name: 'high_light1'} ,
{name: 'high_light2'} ,
{name: 'high_light3'} ,
{name: 'high_light4'}
];
$.each(highlight, function(index,item){
$('h1').eq(index).addClass(item.name);
})
*/
/*
$('h1:eq(0)').addClass('high_light0');
...
*/
/* 1
for(var i=0;i<5;i++){
$('h1:eq('+i+'')').addClass('high_light'+i);
}
*/
/* 2
$('h1').each(function(index){
$(this).addClass('high_light'+index);
})
*/
//var head = document.querySelectorAll('h1');
//head[0].style.color='red';
$('h1').addClass(function(index){ //배열 없을시 매개변수에서 item 제외해도 됨
//h1마다 인덱스 부여, 익명 함수 적용
return 'high_light'+index; //인덱스별 리턴
});
});
</script>
</head>
<body>
<h1>제이쿼리 선택자</h1>
<h1>제이쿼리 메서드</h1>
<h1>제이쿼리 이벤트</h1>
<h1>제이쿼리 애니메이션</h1>
<h1>제이쿼리 실무응용</h1>
</body>
|
cs |
- 문제 : h1별 다른 색상
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<script src="js/jquery-3.6.0.min.js"></script> <!--라이브러리-->
<script>
$(function(){
//var head=document.querySelectorAll('h1');
//for (var i=0;i<head.length;i++){
// head[i].style.color='red';
//}
var c=['yellow','orange','red','green','blue'];
$('h1').css('color',function(index){ //익명함수 통해 index 자동 생성
return c[index];
});
});
</script>
</head>
<body>
<h1>제이쿼리 선택자</h1>
<h1>제이쿼리 메서드</h1>
<h1>제이쿼리 이벤트</h1>
<h1>제이쿼리 애니메이션</h1>
<h1>제이쿼리 실무응용</h1>
</body>
|
cs |
- noConflict : 식별자 변경 -> 다른 라이브러리와 충돌 방지
- 변경 디폴트 식별자 = jQuery
<script src="js/jquery-3.6.0.min.js"></script> <!--라이브러리-->
<script>
$.noConflict(); //$가 아닌 jQuery를 식별자로
jQuery(function(){ //식별자 대신 jQuery 대입
jQuery('h1').css('color','red');
});
</script>
</head>
<body>
<h1>제이쿼리 선택자</h1>
<h1>제이쿼리 메서드</h1>
<h1>제이쿼리 이벤트</h1>
<h1>제이쿼리 애니메이션</h1>
<h1>제이쿼리 실무응용</h1>
</body>
- 새 식별자 선언
<script src="js/jquery-3.6.0.min.js"></script> <!--라이브러리-->
<script>
$.noConflict();
var J=jQuery;
J(function(){
J('h1').css('color','red');
});
</script>
</head>
<body>
<h1>제이쿼리 선택자</h1>
<h1>제이쿼리 메서드</h1>
<h1>제이쿼리 이벤트</h1>
<h1>제이쿼리 애니메이션</h1>
<h1>제이쿼리 실무응용</h1>
</body>
- filter
<script src="js/jquery-3.6.0.min.js"></script> <!--라이브러리-->
<script>
$(function(){
/*
//필터 선택자
$('h1:even').css({
color:'white',
backgroundColor:'orange',
border:'3px solid green'
});
*/
//필터 메소드
// $('h1').filter(':even').css({
// color:'white',
// backgroundColor:'orange',
// border:'3px solid green'
// });
//세부조건 위한 필터 메소드
$('h1').filter(function(index){
return index%3==0; //0,3번째 h1 선택
}).css({
color:'white',
backgroundColor:'orange',
border:'3px solid green'
});
});
</script>
</head>
<body>
<h1>제이쿼리 선택자</h1>
<h1>제이쿼리 메서드</h1>
<h1>제이쿼리 이벤트</h1>
<h1>제이쿼리 애니메이션</h1>
<h1>제이쿼리 실무응용</h1>
</body>
- 메소드 체인 => 필터 연쇄 적용
<script src="js/jquery-3.6.0.min.js"></script> <!--라이브러리-->
<title>제이쿼리 메소드</title>
<script>
$(function(){
// $('h1').css('background','yellow'); //전체
// $('h1:even').css('color','red'); //짝수
// $('h1:odd').css('color','blue'); //홀수
$('h1').css('background','yellow')
.filter(':even').css('color','red') //짝수
.filter(':odd').css('color','blue'); //필터 적용된 행 중 홀수 인덱스
});
</script>
</head>
<body>
<h1>제이쿼리 선택자</h1>
<h1>제이쿼리 메서드</h1>
<h1>제이쿼리 이벤트</h1>
<h1>제이쿼리 애니메이션</h1>
<h1>제이쿼리 실무응용</h1>
</body>
- end : 이전 선택 요소 반환
<script>
$(function(){
$('h1').css('background','yellow')
.filter(':even').css('color','red').end() //필터 적용범위 한 단계 전으로 되돌림
.filter(':odd').css('color','blue'); //홀수 선택
});
</script>
</head>
<body>
<h1>제이쿼리 선택자</h1>
<h1>제이쿼리 메서드</h1>
<h1>제이쿼리 이벤트</h1>
<h1>제이쿼리 애니메이션</h1>
<h1>제이쿼리 실무응용</h1>
</body>
- add : 태그 추가
<script>
$(function(){
$('h1').css('background','yellow').add('p')
.css('border','1px solid blue'); //h1, p에 모두 적용
});
</script>
</head>
<body>
<h1>html5</h1>
<p>홈페이지 제작 뼈대</p>
<h1>css3</h1>
<p>홈페이지 꾸미고 레이아웃</p>
<h1>javascript</h1>
<p>정적인 홈페이지를 동적으로 제작</p>
</body>
- css : 스타일 변경
$(선택자).css('opacity',0.8);
- attr : 속성(class, src, href, alt, ..) 변경
$(선택자).attr(속성 이름);
=> 속성값 가져옴
$(선택자).attr(속성 이름, 속성값);
=> 해당 속성값으로 변경됨
<body>
<img src="../images/Koala.jpg" alt="">
<img src="../images/Penguins.jpg" alt="">
<img src="../images/Lighthouse.jpg" alt="">
</body>
=>
1.
<script>
$(function(){
var src=$('img').attr('src'); //맨 앞 태그 속성값 변수에 전달
//alert(src);
$('img').attr('width',300); //width 값 변경, height는 비율에 따라 자동 조정
});
</script>
2.
<script>
$(function(){
//var src=$('img').attr('src');
//alert(src);
$('img').attr({
'width':300,
'height':100
});
});
</script>
3.
<script>
$(function(){
//var src=$('img').attr('src');
//alert(src);
$('img').attr({
width: function(index){ //인덱스별 함수 적용
return (index+1)*100;
},
height:100
});
});
</script>
※img : 속성, style 모두 적용 가능
- 문제 : 상자 열고 닫기
<script>
$(function(){
$('img').hover(function(){
$(this).attr('src','../images/box2.png');
},function(){
$(this).attr('src','../images/box1.png');
});
});
</script>
</head>
<body>
<img src="../images/box1.png" alt="">
</body>
- index : 인덱스 부여
hover, click 등의 이벤트는 인덱스 갖지 못함
=> index 메소드 사용해 index 받아옴
- 실행 오류
<script>
$(function(){
var color=['yellow','orange','green','red','gray','blue'];
$('h1').click(function(index){
$(this).css('background',color[index]); //실행 안 됨
});
});
</script>
</head>
<body>
<h1>제이쿼리 선택자</h1>
<h1>제이쿼리 메서드</h1>
<h1>제이쿼리 이벤트</h1>
<h1>제이쿼리 애니메이션</h1>
<h1>제이쿼리 실무응용</h1>
</body>
<script>
$(function(){
var color=['yellow','orange','green','red','gray','blue'];
var i;
$('h1').click(function(){
i=$(this).index(); //메소드로 index 받아옴
$(this).css('background',color[i]);
});
});
</script>
</head>
<body>
<h1>제이쿼리 선택자</h1>
<h1>제이쿼리 메서드</h1>
<h1>제이쿼리 이벤트</h1>
<h1>제이쿼리 애니메이션</h1>
<h1>제이쿼리 실무응용</h1>
</body>
<script>
$(function(){
$('h1').click(function(event){
if (event.shiftKey){ //쉬프트키 누른 상태에서 이벤트 실행
alert('잘가세요');
}else{
alert('안녕하세요');
}
});
});
</script>
</head>
<body>
<h1>제이쿼리 선택자</h1>
<h1>제이쿼리 메서드</h1>
<h1>제이쿼리 이벤트</h1>
<h1>제이쿼리 애니메이션</h1>
<h1>제이쿼리 실무응용</h1>
</body>
- 문제 : 호버하면 세 그림들 변형
=> 내답변
<script>
$(function(){
var from=["../images/box1.png",
"../images/lightbulb1.png","../images/우는사람.png"];
var to=["../images/box2.png",
"../images/lightbulb.png","../images/웃는사람.png"];
var i;
$('img').hover(function(index){
i=$(this).index();
$(this).attr('src',from[i])
},function(){
i=$(this).index();
$(this).attr('src',to[i])
})
});
</script>
</head>
<body>
<img src="../images/box1.png" alt="">
<img src="../images/lightbulb1.png" alt="">
<img src="../images/우는사람.png" alt="">
</body>
=> 예시 답변
<script>
$(function(){
//var from=["../images/box1.png",
//"../images/lightbulb1.png","../images/우는사람.png"];
var from;
var to=["../images/box2.png",
"../images/lightbulb.png","../images/웃는사람.png"];
var i;
$('img').hover(function(index){
i=$(this).index(); //img 인덱스 부여
from=$(this).attr('src'); //src 속성 바꾸기 전 이미지 src 변수에 담기
$(this).attr('src',to[i]) //src 속성 변경
},function(){
$(this).attr('src',from) //이전 src 담은 변수 활용
})
});
</script>
</head>
<body>
<img src="../images/box1.png" alt="">
<img src="../images/lightbulb1.png" alt="">
<img src="../images/우는사람.png" alt="">
</body>
'Programming > 국비학원' 카테고리의 다른 글
| 220713 - 제이쿼리 - 메소드(문서객체생성/이동, 이벤트 생성/제거) (0) | 2022.07.14 |
|---|---|
| 220712 - 제이쿼리 - 메소드(removeAttr, html, remove, empty), 메소드 형태 선택자(parent, parents, children, closest, next, nexAll, prev, prevAll, nextUntil, siblings, find), 문서 객체 생성 (0) | 2022.07.13 |
| 220708 - 자바스크립트 - DOM 제어 / 제이쿼리 (0) | 2022.07.11 |
| 220707 - 자바스크립트 - DOM, 이벤트 (0) | 2022.07.08 |
| 220706 - 자바스크립트 - DOM (0) | 2022.07.07 |