-
[JQuery] DOMVScode/JQuery 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')는 // 리턴된 짝수번째들을 대상으로 홀수번째를 골라냄 });
.filter(':odd')는 리턴된 짝수번째들을 대상으로 홀수번째를 골라냄. 그래서 Header -2 만 해당됨 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의 앞에 추가
'VScode > JQuery' 카테고리의 다른 글
[JQuery] button, effect (0) 2022.09.09 [JQuery] event (0) 2022.09.09 [JQuery] 속성/필터선택자, 배열 (0) 2022.09.09 [JQuery] 인접관계선택자 (0) 2022.09.09 [JQuery] selector (0) 2022.09.09