on
[수업 42일차] 21.10.08 / 05_JavaScript_09_DOM(2) / 06_JQuery
[수업 42일차] 21.10.08 / 05_JavaScript_09_DOM(2) / 06_JQuery
09_DOM
Ex20
Insert title here 샘플 페이지(div, id=dample_page class=page) 헤더 영역(div, id=header) 콘텐트영역(id=content class=sample_content) JavaScript란?(div) 자바스크립트 Core(p,id=data_1) 자바스크립트 BOM(p,id=data_2) 자바스크립트 DOM(p,id=data_3) 을 배운다는 것 JavaScript에서 배울 내용(div,class=content_data) 1.JavaScript DOM(p) 2.JavaScript Ajax(p) JavaScript에서 배울 내용(div,class=content_data) 1.JavaScript DOM(p) 2.JavaScript Ajax(p) 푸터 영역(div, id=footer)
09_DOM
Ex21
Insert title here onload = function() { // 문서에서 태그 이름이 div인 노드를 찾아보자. // getElementsBytagName() 메서드를 이용하면 복구 개의 배열로 저장이 된다. let divs = document.getElementsByTagName("div"); alert("문서 내의 div 태그 갯수 >>> "+divs.length); for(let i=0; i 09_DOM Ex22 Insert title here onload = function() { let divs = document.getElementsByTagName("div"); // 찾은 노드 가운데 3번(2번쨰 인덱스) 노드를 찾아 보자. let div3 = divs[2]; let div3Child = div3.getElementsByTagName("div"); alert("div 태그의 자식 노드 갯수 >>> " + div3Child.length); for(let i=0; i 09_DOM Ex23 Insert title here // 문서에서 특정 클래스가 적용된 노드를 찾는 방법 onload = function() { let content = document.getElementsByClassName("content_data"); alert("content_data 요소 갯수 >>> " + content.length); for(let i=0; i 09_DOM Ex24 Insert title here // [문서] 문서에서 id="header"와 id="footer" 노드를 // 찾아서 테두리 선을 아래와 같이 적용하여 화면에 보여주세요. // id ="header" ==> 테두리선 : 3px solid red; // id ="footer" ==> 테두리선 : 3px solid blue; onload = function() { let header = document.getElementById("header"); let footer = document.getElementById("footer"); header.style.border = "3px solid red"; footer.style.border = "3px solid blue"; } 샘플 페이지(div, id=dample_page class=page) 헤더 영역(div, id=header) 콘텐트영역(id=content class=sample_content) JavaScript란?(div) 자바스크립트 Core(p,id=data_1) 자바스크립트 BOM(p,id=data_2) 자바스크립트 DOM(p,id=data_3) 을 배운다는 것 JavaScript에서 배울 내용(div,class=content_data) 1.JavaScript DOM(p) 2.JavaScript Ajax(p) JavaScript에서 배울 내용(div,class=content_data) 1.JavaScript DOM(p) 2.JavaScript Ajax(p) 푸터 영역(div, id=footer) 09_DOM Ex25 error 수정 Insert title here // 문서에서 자식 노드를 찾는 방법 onload = function() { let page = document.getElementById("sample_page"); let childNodes = page.childNodes; alert("#sample_page의 자식 노드 갯수 >>> "+ childNodes.length); for(let i=0; i 09_DOM Ex26 Insert title here // 문서에서 부모 노드를 찾기 onload = function() { //#header인 노드의 부모 노드를 찾아 보자. let header = document.getElementById("header"); //let parent = header.parentNode; header.parentNode.style.border = "3px solid blue"; //[문제] id = "data_1" 노드의 부모 노드를 찾아서 // 다음과 같이 스타일을 적용해 주세요 // 스타인 : 3px solid red let data = document.getElementById("data_1"); data.parentNode.style.border = "3px solid red"; } 샘플 페이지(div, id=dample_page class=page) 헤더 영역(div, id=header) 콘텐트영역(id=content class=sample_content) JavaScript란?(div) 자바스크립트 Core(p,id=data_1) 자바스크립트 BOM(p,id=data_2) 자바스크립트 DOM(p,id=data_3) 을 배운다는 것 JavaScript에서 배울 내용(div,class=content_data) 1.JavaScript DOM(p) 2.JavaScript Ajax(p) JavaScript에서 배울 내용(div,class=content_data) 1.JavaScript DOM(p) 2.JavaScript Ajax(p) 푸터 영역(div, id=footer) 09_DOM Ex27 형제 노드 : 헤더영역, 콘텐트 영역, 푸터영역 현재 : content 영역 이전 : 헤더 영역 ==> previousElementSibling 이후 : 푸터 영역 ==> nextElementSibling 09_DOM Ex28 태그를 만들고 나서 TextNode를 p태그의 자식으로 안쪽에 넣어줌추가내용 appendChild하면 맨 밑에 복사가 된다. Insert title here onload = function() { let page = document.getElementById("sample_page"); let first = page.firstChild; let p_element = document.createElement("p"); let textNode = document.createTextNode("추가내용1"); p_element.appendChild(textNode); p_element.style.border = "3px solid red"; page.insertBefore(p_element, first); // p_element 노드를 복사하는 방법 let p2_element = p_element.cloneNode(true); p2_element.firstChild.nodeValue = "추가내용2"; page.appendChild(p2_element); } 샘플 페이지(div, id=sample_page class=page) 헤더 영역(div, id=header) 콘텐트 영역(id=content class=sample_content) JavaScript란?(div) 자바스크립트 Core(p, id=data_1) 자바스크립트 BOM(p, id=data_2) 자바스크립트 DOM(p, id=data_3) 을 배운다는 것. JavaScript에서 배울 내용(div, class=content_data) 1. JavaScript DOM(p) 2. JavaScript Ajax(p) JavaScript에서 배울 내용(div, class=content_data) 1. JavaScript DOM(p) 2. JavaScript Ajax(p) 푸터 영역(div, id=footer) 09_DOM Ex29 Insert title here // 노드 이동시키기 onload = function() { // 이동시킬 노드를 우선 찾아보자. let header = document.getElementById("header"); // 이동 위치의 노드를 구해보자. let content = document.getElementById("content"); //header 노드를 content 노드의 자식 노드로 설정. content.appendChild(header); header.style.border = "3px solid blue"; } 샘플 페이지(div, id=dample_page class=page) 헤더 영역(div, id=header) 콘텐트영역(id=content class=sample_content) JavaScript란?(div) 자바스크립트 Core(p,id=data_1) 자바스크립트 BOM(p,id=data_2) 자바스크립트 DOM(p,id=data_3) 을 배운다는 것 JavaScript에서 배울 내용(div,class=content_data) 1.JavaScript DOM(p) 2.JavaScript Ajax(p) JavaScript에서 배울 내용(div,class=content_data) 1.JavaScript DOM(p) 2.JavaScript Ajax(p) 푸터 영역(div, id=footer) 06_JQuery Ex01 * 제이 쿼리 (JQuery)? - 자바 스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리. - 제이쿼리는 자바스크립트 DOM을 좀 더 쉽게 작업하기 위한 라이브러리 덩어리. - 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있음. - 제이쿼리는 모든 브라우저에서 동작라는 클라이언트 자바스크립트 라이브러리 * 제이쿼리 사용 이유 - 제이쿼리는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원이 됨. - 동적으로 HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단하게 적용 가능. - 생산성 있게 아주 짧고 간결하게 코딩이 가능하여 불필요한 소스를 줄여줄 수 있음. - 애니메이션 효과나 대화형 처리를 간단하게 적용할 수 있음. - 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현할 수 있음 - 다양한 플러그인과 참고할 수 있는 문서가 많이 존재함. - 오픈 라이센스를 적용하여 누구나 쉽고 자유롭게 이용할 수 있음 *제이 쿼리 사용 방법 - 제이 쿼리 라이브러리를 다운 받아서 사용하는 방법 - 인터넷을 이용하여 파일을 연동시켜 사용하는 CDN 방식을 이용하는 방법. (CDN : Content Delivery Network - 사용자가 요청한 컨텐츠를 사용자와 가장 가까운 곳에 위치한 서버에게 전달해 주는 방식) Insert title here // 자바스크립트를 이용하여 DOM을 조작해 보자. /* onload = function() { let h_elements = document.getElementsByTagName("h2"); alert("h2 태그의 갯수 >>> "+ h_elements.length); for(let i=0; i 06_JQuery Ex02 Insert title here $(document).ready(function() { $("h2").css("color","red") .css("border","1px solid blue") .css("background-color","yellow"); }); Header1 Header2 Header3 Header4 Header5 06_JQuery Ex03 Insert title here $(function(){ // 전체 선택자 : $("*") ==> 모든 요소(태그)를 선택함. $("*").css("border","1px solid blue"); }); 제이쿼리 직접 선택자 및 관계 선택자 직접 선택자 관계 선택자 06_JQuery Ex04 Insert title here $(function() { // 아이디 선택자 : $("#아이디이름") ==> id 속성에 지정된 값을 가진 요소를 선택함. $("#title").css("background-color","gray") .css("color","#fff"); }); 제이쿼리 직접 선택자 및 관계 선택자 직접 선택자 관계 선택자 06_JQuery Ex05 Insert title here $(function(){ // 클래스 선택자 : $(".클래스이름") ==> class 속성에 지정된 값을 가진 요소 선택. $(".content").css("background-color","blue") .css("color","#fff"); }); 제이쿼리 직접 선택자 및 관계 선택자 직접 선택자 관계 선택자 06_JQuery Ex06 Insert title here $(function(){ // 요소 선택자 : $("요소(태그)명") ==> 지정된 요소(태그)명과 일치하는 요소들만 $("h3").css("border","1px solid red") .css("color","totmto"); }); 제이쿼리 직접 선택자 및 관계 선택자 직접 선택자 관계 선택자 06_JQuery Ex07 Insert title here $(function(){ // 그룹 선택자: $("선택1, 선택2, ... 선택n") $("h1,h3").css("color","yellow") .css("background-color","red") }); 제이쿼리 직접 선택자 및 관계 선택자 직접 선택자 관계 선택자 from http://saltedcaramel.tistory.com/52 by ccl(A) rewrite - 2021-10-08 21:00:20