VScode/JQuery
[JQuery] DOM
hvoon
2022. 9. 9. 14:46
-DOM은 자바스크립트보다 제이쿼리에서 훨씬 활용도 높음
1. 기본 필터링 메서드
filter()
-$(selector).filter(selector);
-$(selector).filter(function(index){});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$('h3').filter(':even').css({backgroundColor:'black',
color:'white'});
// 선택자의 짝수 번째 css 변경
// $('h3:even').css({background:'black',color:'white'});
// 위와 같은 내용
});
$(function(){
$('h3').filter(function(index){return index%3==0}).css(
{backgroundColor:'blue',color:'white'});
// filter 내의 익명함수가 전체 index를 대상으로 하여
// 3으로 나눈 나머지가 0인 인덱스에만 true를 리턴해 줌.
// filter true가 리턴 된 인덱스에 대해서만
// 지정된 css를 적용함
// 인덱스 3과 4만 골라내고 싶으면
// 익명함수 안에 return index==3 ||index==4;
// filter 메서드의 괄호 안에는
// 적용될 인덱스를 저장할 키워드 또는
// 익명함수로 골라 넣을 수 있게 코딩하면 됨
});
</script>
</head>
<body>
<h3>Header - 0</h3>
<h3>Header - 1</h3>
<h3>Header - 2</h3>
<h3>Header - 3</h3>
<h3>Header - 4</h3>
<h3>Header - 5</h3>
</body>
</html>
2. 문서 객체 탐색 chaining과 종료
-chaining을 사용해 한 줄로 서로 다른 문서 객체에 스타일 적용 가능
-관련 셀렉터들로 필터링한 후 chaining과 filter를 사용함.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$('h3').css('background','orange').filter(':even').css(
'color','red');
// 전혀 관련없는 대상을 체이닝하지는 않음
// 잘못된 사용: $('h3').css('background','orange').$('h1').css();
// 문서 객체의 css 변경을 마친 경우 리턴되는 값이
// 다시 문서객체($('h3'))이므로 위와 같이 또 다른 탐색이나
// css 내용을 이어서 적용시킬 수 있음
// 필터링 된 선택자로 css를 변경한 후에 리턴된 선택자는
// 앞서 필터링한 결과를 그대로 유지함.
// 따라서 다른 채이닝을 이어서 사용하면
// 계속 필터링된 결과에 적용되게 됨
});
</script>
</head>
<body>
<h3>Header - 0</h3>
<h3>Header - 1</h3>
<h3>Header - 2</h3>
<h3>Header - 3</h3>
<h3>Header - 4</h3>
<h3>Header - 5</h3>
</body>
</html>
위의 체이닝 방식으로 실행하기 곤란한 상황일 때
*위 코드에서 script만 변경
1) 따로따로 지정
// 전체 배경 오렌지, 짝수 번째 글자색 흰색, 홀수 번째 글자색 빨강
$(function(){
$('h3').css('background','orange');
$('h3:even').css('color','white');
$('h3:odd').css('color','red');
});
2) 체이닝 이용
$(function(){
$('h3').css('background','orange').filter(':even').css('color',
'white').filter(':odd').css('color','red');
// $('h3').css('background','orange') 이 문장이 실행되면
// 리턴 문서객체가 $('h3')이지만
// .filter(':even').css('color','white') 여기까지 실행되어
// 리턴된 문서객체는 짝수번째의 h3들임.
// 따라서 마지막 필터링 .filter(':odd')는
// 리턴된 짝수번째들을 대상으로 홀수번째를 골라냄
});
3) end()
-문서 객체 선택을 필터링 이전 한 단계 뒤로 돌리는 함수
$(function(){
// end()를 이용하여 짝수번째 필터링을 제거 후
// 다시 홀수번째 필터링을 적용해야 의도한 필터링이 진행됨
$('h3').css('background','silver').filter(':even').css('color',
'red').end().filter(':odd').css('color','blue');
});
3. 문서 객체 추가 선택
-add(): 기존 문서 객체를 포함하여 추가로 문서 객체를 선택
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$('h1').css('background','gray').add('h2').css('color',
'red');
// h1에 배경 gray를 적용 후 h2도 추가해서
// 글자색 빨강으로 적용
// $('h1').css('background','gray');
// $('h1','h2').css('color','red');
});
</script>
</head>
<body>
<h1>Header - 0</h1>
<h2>Header - 1</h2>
<h1>Header - 2</h1>
<h2>Header - 3</h2>
<h1>Header - 4</h1>
</body>
</html>
4. 문서 객체의 특징 판별
-$(this).index(): 현재 객체의 인덱스값
-$(this).is(선택자): 종속선택자 같은 this 내부에서 선택자로 추가 필터링한 객체
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
// $('h1').each(function(index,item){})의 사용 방식에서
// this를 사용하면서 index 값이나 item 변수를
// fuction() 안에서 생략하여 사용이 가능함.
// 다만 이 경우 현재 this의 인덱스를 알아내려면
// 별도의 함수가 필요함
$('h1').each(function(){
if($(this).is('.select')){
$(this).css('color','red');
// $(this).innerHTML=$(this).index();
}
// this 객체에 class 속성으로 select 값이 존재한다면
// 제이쿼리 일반적 선택자로 표현한다면
// $('h1.select').css('color','red')
});
});
</script>
</head>
<body>
<h1 class="select">Header - 0</h1>
<h1>Header - 1</h1>
<h1 class="select">Header - 2</h1>
</body>
</html>
5. 문서 객체의 클래스 속성 추가
-addClass()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>addClass</title>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
// ex1. 매개변수에 문자열(클래스 이름) 입력
$(function(){$('h1').addClass('item_1');});
// 전체 h1 태그에 하나의 클래스 적용
// <h1>Header-0</h1>
// -> <h1 class="item_1">Header-0</h1>
// ex2. 매개변수에 클래스이름으로 된
// 문자열을 리턴하는 익명 함수 입력
$(function(){
$('h1').addClass(function(index){return 'item_'
+(index+1);});
});
// 각각의 h1에 다른 클래스 적용.
// 인덱스값(0,1,2)을 전달인수로 전달받은 익명함수의 리턴값
// ('item_1','item_2','item_3')이 addClass에 적용됨
// 익명함수의 위치가 addClass 메서드 안쪽에 위치하기 때문에
// 익명함수의 리턴값은 addClass에 적용될 class 이름들임
</script>
</head>
<body>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>Header-2</h1>
</body>
</html>
6. 문서 객체의 클래스 속성 제거
-removeClass()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$('h1').removeClass(
function(index){
if(index==0)
return 'item_'+(index+1);});
});
// 문자 연산으로 만들어진 클래스 이름으로 각 h1 태그의 클래스를 제거함
// $('h1').removeClass('item_1');
// -> 모든 h1에서 item_1이라는 클래스는 모두 삭제됨
// removeClass 메서드에 전달인수로
// function(index){return 'item_'+(index+1);}를 넣었다면
// 인덱스별로 문자연산에 의해 생성된
// 클래스이름('item_1','item_2','item_3')들을 해당 태그에서 삭제함
// 위 예제는 if문에 의해 h1의 0번째 인덱스에 적용된
// 클래스 값만 적용된 곳에서만 제거함
</script>
</head>
<body>
<h1 class='item_1'>Koala.jpg</h1>
<img src="images/Koala.jpg" width="150"/>
<h1 class='item_2'>Koala.jpg</h1>
<img src="images/Penguins.jpg" width="150"/>
<h1 class='item_3'>Koala.jpg</h1>
<img src="images/Tulips.jpg" width="150"/>
</body>
</html>
7. 문서 객체의 속성 검사
-attr()
-속성과 관련된 모든 기능 수행.
-값을 얻는 동작에 인덱스가 사용되지 않았다면 첫번째 문서객체(인덱스 0번)이 사용됨.
-검사라는 표현보다 조회하여 얻어내는 동작이 더 어울리는 표현임
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
var src=$('img').attr('src');
// img 태그에서 src 속성값을 추출하여 src 변수에 저장
var header1=document.createElement('h1');
// h1태그 생성
var textNode=document.createTextNode(src);
// 문자열 객체 생성
header1.appendChild(textNode);
// 태그에 문자열을 삽입
document.body.appendChild(header1);
// 태그를 body에 추가
var w=$('img').attr('width');
header1=document.createElement('h1');
textNode=document.createTextNode(w);
header1.appendChild(textNode);
document.body.appendChild(header1);
});
// 현재 예제는 each를 사용하지 않아서 맨위의 태그만 적용하고
// 한번만 출력함
</script>
</head>
<body>
<h1 class='item_1'>Koala.jpg</h1>
<img src="images/Koala.jpg" width="150"/>
<h1 class='item_2'>Koala.jpg</h1>
<img src="images/Penguins.jpg" width="150"/>
<h1 class='item_3'>Koala.jpg</h1>
<img src="images/Tulips.jpg" width="150"/>
</body>
</html>
8. 문서 객체의 속성 추가
-attr() 메서드 사용
1) $(selector).attr(name,value);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$('img').attr('width','300');
// 속성의 적용에 인덱스 적용이 안되어 있다면
// 모든 동일한 문서객체에 적용됨
// <img src=""> -> <img src="" width="300">
}); // img 태그 전체에 같은 속성 적용
</script>
</head>
<body>
<h1 class='item_1'>Koala.jpg</h1>
<img src="images/Koala.jpg" width="150"/>
<h1 class='item_2'>Koala.jpg</h1>
<img src="images/Penguins.jpg" width="150"/>
<h1 class='item_3'>Koala.jpg</h1>
<img src="images/Tulips.jpg" width="150"/>
</body>
</html>
*위 코드에서 script 내용만 변경
2) $(selector).attr(name,function(index){});
-익명함수를 이용한 개별 속성값의 추가
-언제든 익명함수를 이용해서 인덱스별로 다른 값이 필요할 땐, 필요한 위치에 index를 매개변수로 하는 익명함수를 구성해주면 됨. (인덱스별 다른 값이 필요한 곳에 그 값을 리턴해주는 익명함수 구성)
$(function(){
$('img').attr('width',function(index){return (index+1)*100;});
}); // 각 img마다 다른 속성값을 적용
3) $(selector).attr(object);
-익명함수이용 & 객체를 활용한 속성 추가
$(function(){
$('img').attr({'width':function(index){return (index+1)*100;},
'height':200});
});
// 함수를 이용하여 개별값으로 width 값을 추가하고,
// 일괄적으로 height 값을 추가함
4) removeAttr(name)
-문서 객체의 속성을 제거해주는 메서드
$(function(){
$('img').removeAttr('width');
});
// 100*200 200*200 300*300인 이미지에서 width를 제거.
// 모두 height 200인 이미지로 변환됨
// 가로세로 비율은 원본이미지 비율이 적용
5. 문서 객체의 스타일 검사
-css(): 스타일과 관련된 모든 기능을 수행
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
var color=$('h1:eq(1)').css('background-color');
var header1=document.createElement('h1');
var textNode=document.createTextNode(color);
header1.appendChild(textNode);
document.body.appendChild(header1);
});
</script>
</head>
<body>
<h1 class="item_1">Header-0</h1>
<h1 class="item_2">Header-1</h1>
<h1 class="item_3">Header-2</h1>
</body>
</html>
6. 문서 객체의 스타일 추가
1) $(selector).css(name,value);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$('h1').css('color','red');
});
</script>
</head>
<body>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>Header-2</h1>
</body>
</html>
2) $(selector).css(name,function(index){});
// .선택자로 선택한 문서 객체에 개별적으로 스타일 속성을 적용하고 싶을 때
// 사용하는 방법
$(function(){
var color=['red','green','blue'];
$('h1').css('color',function(index){return color[index]});
});
3) $(selector).css(object);
$(function(){
var color=['red','green','blue'];
$('h1').css(
{
'color':function(index){return color[index]},
'background':'yellow'
}
);
});
7. 문서 객체의 내부 검사
-기존 자바스크립트에서 문서 객체의 innerHTML 속성과 관련된 jQuery 메서드
1) html()
-문서 객체 내부의 글자와 관련된 모든 기능을 수행
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
var html=$('h1').html();
var header1=document.createElement('h1');
var textNode=document.createTextNode(html);
header1.appendChild(textNode);
document.body.appendChild(header1);
});
</script>
</head>
<body>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>Header-2</h1>
</body>
</html>
2) text()
-문서 객체 내부의 글자와 관련된 모든 기능을 수행
-선택자로 선택한 모든 문서 객체의 글자를 가져와 출력
$(function(){
var text=$('h1').text();
var header1=document.createElement('h1');
var textNode=document.createTextNode(text);
header1.appendChild(textNode);
document.body.appendChild(header1);
});
8. 문서 객체의 내부 추가
-$(selector).html(value); : HTML 태그를 인식해 문자열 삽입
-$(selector).text(value); : HTML 태그를 인식하지 않음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$('.useHtml').html('<h1>$().html()</h1>');
}); // 태그 인식
$(function(){
$('.useText').text('<h1>$().text()</h1>');
}); // 태그 미인식
</script>
</head>
<body>
<div class="useHtml"></div>
<div class="useHtml"></div>
<div class="useHtml"></div>
<div class="useText"></div>
<div class="useText"></div>
<div class="useText"></div>
</body>
</html>
-$(selector).html(function(index,html){});
-$(selector).text(function(index,html){});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$('h2').html(function(index,html){
return '#'+html+'#';
});
// 익명함수의 매개변수로 사용이 되는 html
// 또는 text는 현재 선택자태그가 갖고 있던 원래 내용임
$('h3').text(function(index,text){
return '#'+text+'#';
});
// 원래 내용에 #을 양옆에 붙여서 다시 원래 태그에 넣는 예
});
</script>
</head>
<body>
<h2>Header-0</h2>
<h2>Header-1</h2>
<h2>Header-2</h2>
<h3>Header-3</h3>
<h3>Header-4</h3>
<h3>Header-5</h3>
</body>
</html>
9. 문서 객체의 내부 제거
1) remove(): 특정 문서 객체를 제거
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$('h1').first().remove();
}); // h1 첫번째 태그 자체가 사라져서 안보이는 상태
</script>
</head>
<body>
<div style="border: 1px solid black; height:100px;">
<h1>Header-0</h1>
<h1>Header-1</h1>
</div>
</body>
</html>
2) empty(): 특정 문서 객체의 후손을 모두 제거
$(function(){
$('div').empty();
});
// div 태그 내의 모든 자식 구성요소를 제거 현재는 h1 태그들이 사라짐
// 자식 구성요소가 제거되어 div는 존재하지만
// 표시할 내용이 없어 안 나오는 것처럼 보이는 상태
10. 문서 객체의 생성
-document.createElement(), document.createTextNode() 얘네들은 자바스크립트에서 사용하던 문서 객체 생성함수
-제이쿼리에서 문서객체를 생성
-$(): 문서객체생성
-$() 함수의 매개변수에 HTML태그 자체를 문자열로 넣기만 하면 해당태그의 문서객체가 생성됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
// -생성한 문서 객체를 body 태그에 추가하는 방법
$(function(){
$('<h1></h1>').html('hello#1').appendTo('body');
});
// -$() 메서드의 내부에 HTML 태그를 바로 넣어 body 태그에 추가하는 방법
$(function(){
$('<h1>hello#2</h1>').appendTo('body');
});
// -텍스트 노드를 갖지 않는 문서 객체를 생성하는 법
$(function(){
$('<img/>').attr(
{src:'images/Koala.jpg',width:'200'}).appendTo('body');
});
$(function(){
$('<img/>').attr(
'src','images/Penguins.jpg').appendTo('body');
});
</script>
</head>
</html>
11. 문서 객체의 삽입
-$(a).appendTo(b): a를 b의 뒷부분(자식요소)에 추가
-$(a).prependTo(b): a를 b의 앞부분(자식요소)에 추가
-$(a).insertAfter(b): a를 b의 뒷(형제요소)에 추가
-$(a).insertBefore(b): a를 b의 앞(형제요소)에 추가
-$(a).append(b): b를 a의 뒷 부분에 추가
-$(a).prepend(b): b를 a의 앞 부분에 추가
-$(a).after(b): b를 a의 뒤에 추가
-$(a).before(b): b를 a의 앞에 추가