※ 문서객체조작
- 조작관련메서드 : 요소에 값을 지정하거나, 특정 요소의 값을 읽어오거나, 동적으로 요소 자체를 생성, 삭제, 복사, 제거하는 기능 들
▶ $( )
▷ $(html태그) - 문서 객체를 생성한다
- 인자로 html 태그를 지정한 경우에는 동적으로 그 요소를 생성함
$("<span>(클릭)</span>").appendTo("b");= > (클릭)라는 태그 문자열을 동적으로 생성한 뒤, 그를 모든 b 태그의 뒤에 덧붙임
▷ $('선택자') - 문서 객체를 선택한다
- 인자로 선택자를 지정한 경우에는 일치되는 모든 요소를 찾음
$("#linkText")= > #linkText라는 선택자에 일치하는 요소들을 검
html() / text()
- 요소의 내용을 다루는 메소드
▶ html()
- 사잇값 + 태그까지 가져옴 : 이는 요소의 innerHTML 값과 동일
- $(selector).html(value); : 셋팅하라는말
$('#div1').html(result);
$('#div1').html(<br>result<br>);= > result
- 태그 포함해서 () 안에 값 넣을 경우 태그가 적용된 문자열이 나온다
$('#sp1').html('<u>html 로 값 넣기</u>');= > html 로 값 넣기
▷ 일치된 요소가 여러 개인 경우
- 일치된 요소들 중 첫 번째 요소의 html 만을 반환
▷ $(selector).html(function(index){});
- each 를 대신하는 기능 : idx 를 매개변수로 넣으면 each() 처럼 사용할 수 있다
$('div').html(function(idx){
return "<p>문단 -" + idx + "</p>";
});return : idx
=> idx 가 return 되어 다시 매개변수로 들어가는것의 반복이 이루어지기때문에
each() 문을 사용한것과 동일한 결과를 볼 수 있다
▷ $(selector).html(function(idx,html){});
- each 를 대신하는 기능2 : each()대신 메서드의 매개변수로 function 을 넣기
$('h2').html(function(idx,html){
return "[" + html + "]";
});retrun : html
=> h2에서 태그사이의 값을 가져와서 리턴 => 리턴한값이 다음 값의 매개변수로 들어감
▶ text()
- 사잇값만가져옴
- $(selector).text(value); : 값넣기
- $(selector).text(function(index, text){});
$('#div1').text(result);
$('#div1').text(<br>result<br>);<div id="div1"> result </div>= ><br>result<br>
- 태그 포함해서 () 안에 값 넣을 경우 태그가 그대로 출력된다
$('span:eq(1)').text('<u>text 로 값 넣기</u>');= > <u>text 로 값 넣기</u>
▷ 일치된 요소가 여러 개인 경우
- 일치된 모든 대상의 텍스트를 결합해서 반환
요소를 추가하는 메소드
▶ append()
- 매개변수로 들어온 content 를 개채 "내부" 뒤쪽에 덧붙이는 메서드
- 만약 B태그.appen(val) 로 사용한다면,
B태그 내부 뒤쪽에 덧붙이는 것이기 때문에 B태그 val 로 표현된다
var h1 ='<h1>제목1</h1>';
$('#p1').append(h1);
▽ append 전 p태그
<p id="p1">p 태그입니다1.</p>▽ h1 을 아이디p1 에 append 후
= > p 태그 안쪽에 ! h1 태그가 잘 붙은것을 볼 수 있다
▷ each() 대신에 매개변수로 function 이 들어가 있는 append 를 사용할 수 있다
var arr=[
{name:'홍길동',id:'hong'},
{name:'김길동',id:'kim'},
{name:'이길동',id:'lee'}
];$('div').append(function(idx){
var obj = arr[idx];
var str = obj.name + "- <b>" + obj.id+"</b>";
return str; // 리턴된 값이 다시 function 으로 들어감
});▽ 이걸 each() 로
$("div").each(function(idx, item) {
var obj = arr[idx];
$(this).append(obj.name + " - <b>" + obj.id + "</b>");
});
▶ appendTo()
- append와는 덧붙이기의 대상이 반대
append : 매개변수로 들어온 content 를 개채 내부 뒤쪽에 덧붙이는 메서드
appendTo : 매개변수로 들어온 content 내부뒤쪽에 덧붙이는 메서드
- 선택자에 의해 일치된 대상 모두에게 덧붙여짐
- 복사해서 '붙여지는' 자리의 요소는 자라지고, 새로 붙여지고
'복사되는' 원본개채는 복사되면서 제거됨
$('<h></h1>').html('안녕').appendTo('#div1');- $(html태그) - 문서 객체를 생성한다
=> h태그를 생성해서 이 태그 사이에 '안녕'을 넣고 이걸 #div1 태그 사이에 덧붙여라
▷ 이미지 붙이기
$('<img>').attr('src','../image/dog.jpg').appendTo('#div3');
$('<img>', {src:'../images/snow.jpg',
width :100,
border:1
}).appendTo('#div4');
}); // 이렇게 세세하게 속성 지정해서 붙일 수도 있음=> img 태그를 생성해서 / src 속성을 추가하고 속성의 값을 ..jpg 로한다 / 이를 #div3 태그 내부 뒤쪽에 덧붙인다
▷ appendTo() 와 setInterval
setInterval(function(){//일치된 요소가 본문에 존재하면, 제거한 후 붙인다
$('img').first().appendTo('div');//첫번째거를 잘라내서 계속 뒤에 붙이니까 우리눈에는 이미지가 돌아가는것처럼 보임
},1000);
});<body>
<div>
<img src="../images/dog.jpg" />
<img src="../images/magnum1.jpg"/>
<img src="../images/snow.jpg" />
</div>
</body>appendTo() 는 요소가 본문에 존재하면, 제거한 후 붙인다는 특징이있다.
body 에는 img태그가 존재하므로 지정된 img:first 는 계속 잘라내기 되어
appendTo('div') 가 된다.
=> 1초마다 첫번째거를 잘라내서 계속 뒤에 붙이니까 우리눈에는 이미지가 돌아가는것처럼 보임
▶ prepend() / prependTo()
- append와 동일하지만, 요소를 뒤에 덧붙이는 것이 아 니라 앞에 덧붙임
▶ after()
- 일치된 요소 외부 뒤에 content를 삽입함
- 요소 내부가 아닌 외부에 삽입된다는 것을 제외하면 append와 동일
▶ before()
- 일치된 요소 외부 앞에 content를 삽입
- 요소 내부가 아닌 외부에 삽입된다는 것을 제외하면 prepend와 동일
삭제용 메서드와 복사용 메서드
▶ empty()
- 자식제거
$('#div1').empty();=> #div1의 자식들이 제거됨
▶ remove()
$('h2').first().remove();- h2:first - 첫번째 h2태그
- $('h2').first() - h2태그의 첫번째 자식
=> 따라서 h2의 첫번째 자식이 remove 됨
▶ clone()
- 일치된 요소를 복사하고, 그를 선택함
▶ clone(bool)
- 이벤트 처리기를 포함하여 DOM 요소를 복사하고 그를 선택함
$(document).ready(function(){
$('.annotation').each(function(idx, item){
$(this).after("<sup>"+(idx+1)+"</sup>");
});
$('button').click(function(){ // #nextBtn 이벤트
alert($(this).text()); //eventHandler에서 this :이벤트가발생한객체
$(this).remove();
});
var $prev=$("#prevBtn").clone(); // #prevBtn 요소를 복사
var $next=$("#nextBtn").clone(true); //#nextBtn 요소를 복사하고, 이벤트까지 복사
});$('#bottomDiv').prepend($prev);
$('#bottomDiv').append($next);▽
#bottomDiv 앞에 붙여진 복사본 prev 버튼은 겉모습만 동일하지만
#bottomDiv 뒤에 붙여진 복사본 next 버튼은 겉모습도 동일하고 이벤트까지 걸려있다
※ css 관련메서드
▶ css( name )
- 매치되는 첫번째 요소의 스타일 속성을 반환한다.
var color = $(this).css("color");
▶ css( name, value )
- 매치된 모든 요소에 대해 단일 스타일 속성을 설정한다
$(this).css('color', 'yellow');
예제 1 )
$('#img1').addClass('winter').css('width', '200');- addClass : 매치된 요소들의 각 집합에 지정된 CSS 클래스를 추가한다.
=> img1에 winter cssClass 를 넣고 width 200 을 추가해라
<img id="img1" src="../image/magnum2.jpg" class="winter" style="width: 200px;">△ 추가됨
예제 2 )
$('button:eq(0)').click(function() {
$('#img1').toggleClass('summer');
});
$('button:eq(0)').click(function() {
$('#img1').toggleClass('winter');
});- toggleClass( class ) : 지정된 클래스가 적용되지 않았다면 적용하고, 이미 적용되어 있다면 제거한다.
▶ css( properties )
- 매치된 모든 요소들의 스타일 속성에 키/값 객체를 설정한다.
- 여러 CSS 속성을 한번에 설정할 수 있는 오버로드 메서드
$(this).css(
{ 'color':'yellow','font-weight':'bold'}
);$(document).ready(function() {
$('span').css({
background : 'pink',
color : 'blue',
"font-weight" : 'bold'
});
※ Attribute 관련 메서드
▶ attr( name )
- 매치된 첫 번째 요소의 특정 어트리뷰트에 접근하여 값을 가져온다
- 만일, 지정된 어트리뷰트 명이 존재하지 않는 다면 undefined가 반환된다
- attribute 어트리뷰트 : title, alt, src, href, width, style 등
$( 'div' ).attr( 'class' );=> div 요소의 class 속성의 값을 가져옴
console.log($('a').attr('href'));=> a태그의 href 속성을 가져와서 console 에 찍어라 ▽ 찍힘
▶ attr( name, value )
- 선택한 요소에 속성을 추가함
$( 'h1' ).attr( 'title', 'Hello' );=> h1 요소에 title 속성을 추가하고 속성의 값은 Hello로 함
예제 1 ) img:first 에 마우스 올리면 다른 이미지 출력되도록
$('img:first').mouseover(function(){
$(this).attr('src','../images/magnum2.jpg');
});
$('img:first').mouseout(function(){
$(this).attr('src','../images/magnum1.jpg');
});
▶ attr( properties )
$("#photos img").attr({
border: "1px",
height : "100"
});$('#photos img').attr({
border:'3px',
height:'100'
}).attr('title', function(idx){
return (idx+1) +"번째 이미지"
});
attr 응용
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
#showImage{ display:none;border:1px solid gray;width:300px;height:300px; }
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#product img').hover(function(){//마우스를 특정 엘리먼트 위에 올리면 발생하게되는 이벤트
$('#showImage').show();
var imgSrc=$(this).attr('src'); //=>../images/herb1.JPG
// 순수 파일명만 얻기 => herb1.JPG
imgSrc=imgSrc.substr(imgSrc.lastIndexOf("/")+1);
$('#showImage img').attr('src','../images/big/' + imgSrc);
}, function(){
$('#showImage').hide();
});
});
</script>
</head>
<body>
<div id="product">
<img src="../images/herb1.JPG" />
<img src="../images/herb2.JPG" />
<div id="showImage">
<img />
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('#photos img').attr({
border:'3px',
height:'100'
}).attr('title', function(idx){
return (idx+1) +"번째 이미지"
});
$('#photos img').attr('width',function(idx){
return (idx+1)*100;
});
});
</script>
</head>
<body>
<div id="photos">
<img src="../images/dog.jpg" />
<img src="../images/magnum1.jpg" />
<img src="../images/snow.jpg" />
<img src="../images/wood.JPG" />
<img src="../images/magnum2.jpg" />
</div>
</body>
</html>'jquery' 카테고리의 다른 글
| [JQeury] Ajax (0) | 2022.06.20 |
|---|---|
| [jquery] 문제를 통한 jquery 이벤트 및 메서드 사용예제 (0) | 2022.05.07 |
| [jquery] 탐색메서드, 이벤트, 효과 (0) | 2022.05.07 |
| [jquery] 선택자 / each() (0) | 2022.04.26 |