반응형
_06_부모형제자식태그선택
- 06_01_자식선택1.html
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>노드 생성-jQuey메서드 html(), text()의 차이점-2</title><style>body {font-size: 35px;}ul, li {border: 3px solid gray;margin: 20px;}ul {padding: 20px;list-style: none;}</style><script>$(document).ready(function(){/*this 를 통해 여러개중 자기를 찾을수있다.*/
$("#menu li").click(function(){var $item = $(this);$item.text("클릭됨");});});</script></head><body><ul id="menu"><li>메뉴1</li><li>메뉴2</li><li>메뉴3</li><li>메뉴4</li><li>메뉴5</li></ul></body></html>
- 06_02_자식선택2.html
- each for문과 같다.
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>노드 다루기-each()</title><script>$(document).ready(function(){// each 는 반복문과 같다. index , item 으로 인덱스 값에 접근할수있다.
//순차적으로 노드를 접근하여 그 인덱스와 HTMLLiElement를 출력하고 있다.//jQuery객체.textContent를 하게 되면 해당한는 값을 출력을 할 수 있다.$(".container li").each(function(index, item){console.log("index값 : " + index + ", " + item.textContent + "<br/>");document.write();});});</script></head><body><ul class="container"><li>이민자</li><li>오춘식</li><li>박수용</li><li>안상민</li></ul></body></html>
- 06_02_자식중클래스.html
-
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery를 활용한 스타일 값 설정하기-1</title><style>body {font-size: 20px;font-family: "고딕";}.menu {padding: 10px;list-style: none;border: 2px solid black;}.menu li {border: 1px solid blue;margin: 10px;}li.select {background-color: red;}</style><script>$(document).ready(function(){var $item = $(".menu li.select");$("#start").click(function(){var fontSize = parseInt($item.css("fontSize"));$item.css("fontSize", fontSize + 1);});});</script></head><body><button id="start">실행</button><ul class="menu"><li>메뉴1</li><li>메뉴2</li><li class="select">메뉴3</li><li>메뉴4</li><li>메뉴5</li></ul></body></html>
- 06_03_자식으로추가.html
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>노드 생성-생성된 노드 확인 및 자바스크립트 코드로 추가하기</title><style>body {font-size: 35px;font-family: "맑은 고딕";}ul, li {border: 3px solid gray;margin: 30px;list-style: none;}ul {padding: 30px;}</style><script>var count = 1;$(document).ready(function(){$("#btnAdd").click(function(){count+= 1;//신규노드를 만들고 있다.var li = document.createElement("li");var menu = document.getElementById("menu");var liText = document.createTextNode("메뉴" + count);//Text노드를 li노드에게 추가li.appendChild(liText);//menu선택자노드에게 li노드를 추가menu.appendChild(li);
});
});</script></head><body><button id="btnAdd">추가하기</button><ul id="menu"><li>메뉴1</li></ul></body></html>
- 06_04_자식첫번째찾기.html
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>노드 생성-jQuey로 추가하기(prepend(), prependTo())</title><style>body {font-size: 30px;font-family: "맑은 고딕";}ul, li {border: 1px solid gray;margin: 30px;}ul {padding: 30px;list-style: none;}</style><script>$(document).ready(function(){var cnt = 2;$("#btnAdd").click(function(){cnt++;var $li = $("<li>메뉴" + cnt + "</li>");$li.insertBefore("#menu li:first");});});</script></head><body><button id="btnAdd">추가하기</button><ul id="menu"><li>메뉴1</li><li>메뉴2</li></ul></body></html>
- 06_05_자식마지막찾기.html
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>노드 다루기-특정 노드의 자식 노드 중에서 마지막 자식 노드 찾는 방법들</title><style>body {font-size: 15px;font-family: "굴림";}div, p, ul, li {border: 1px solid gray;margin: 10px;}ul {padding: 10px;}</style><script>$(document).ready(function(){var $menu = $("#menu");$menu.children(":last").css("border", "5px solid #f00");$menu.children().last().css("border", "5px solid #f00");});</script></head><body><ul id="menu"><li>메뉴0</li><li>메뉴1</li><li>메뉴2</li><li>메뉴3</li><li>메뉴4</li><li>메뉴5</li></ul></body></html>
- 06_06_자식홀수만찾기.html
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>홀수짝수</title><style>body {font-size: 15px;font-family: "맑은 고딕";}ul, li {border: 3px solid gray;margin: 10px;padding: 10px;list-style: none;}</style><script>$(document).ready(function(){
//모든 자식 중 인덱스가 홀수번째 노드만 삭제하기$("#removeOdd").click(function(){$("#menu li:odd").remove();});
$("#removeEven").click(function(){$("#menu li:even").remove();});
});</script></head><body><button id="removeOdd">홀수자식 삭제하기</button><button id="removeEven">짝수자식 삭제하기</button><ul id="menu"><li>메뉴0</li><li>메뉴1</li><li>메뉴2</li><li>메뉴3</li><li>메뉴4</li><li>메뉴5</li></ul></body></html>
- 06_07_인덱스찾기.html
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>노드 다루기-특정노드를 찾아서 인덱스값을 출력하기(index())</title><style>body {font-size: 30px;}div, p, ul, li {border: 1px solid gray;margin: 30px;}ul {padding: 20px;list-style: none;}</style><script>$(document).ready(function(){$("ul.menu1 li").click(function(){//클릭한 객체가 몇 번째 인덱스인지 값을 출력하는 코드이다.alert($(this).index());});});</script></head><body><div id="content"><h2>menu1</h2><ul class="menu1"><li class="item">item1</li><li class="item">item2</li><li class="item">item3</li><li class="item">item4</li></ul>
<h2>menu2</h2><ul class="menu2"><li class="item">item1</li><li class="item">item2</li><li class="item">item3</li><li class="item">item4</li></ul></div>
</body></html>
- 06_08_인덱스찾기응용.html
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>노드 다루기-index()주의점</title><style>body {font-size: 15px;font-family: "굴림";}div, p, ul, li {border: 1px solid gray;margin: 10px;}ul {padding: 10px;}li.select {background-color: #ccc;}</style><script>$(document).ready(function(){/*아래와 같은경우는 ul li 안의 a이므로 사실상 하나이다.*/var $aList = $("ul li a");$("ul li a").click(function(){// alert($(this).index()); // 이렇게 찾으면 0만 나온다.alert($aList.index(this)); // 이렇게 찾아야한다.});});</script></head><body><ul><li><a href="#">메뉴1</a></li><li><a href="#">메뉴2</a></li><li><a href="#">메뉴3</a></li><li><a href="#">메뉴4</a></li><li><a href="#">메뉴5</a></li></ul></body></html>
- 06_12_반복문.html
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>반복문으로 출력하기</title><style>body {font-size: 15px;font-family: "굴림";}div, p, ul, li {border: 1px solid gray;margin: 10px;padding: 10px;list-style: none;}</style><script>$(document).ready(function(){//li객체들을 찾아서 배열로 리턴을 받는다.var $liList = $("ul li");$("#print").click(function(){$liList.each(function(index){console.log($liList.get(index));});});});</script></head><body><button id="print">반복문으로 출력하기</button><ul id="menu"><li>메뉴0</li><li>메뉴1</li><li>메뉴2</li><li>메뉴3</li><li>메뉴4</li><li>메뉴5</li></ul></body></html>
- 06_13_반복문2.html
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery를 활용한 스타일 값 설정하기-2</title><style>body {font-size: 20px;font-family: "고딕";}#menu {padding: 10px;list-style: none;border: 2px solid black;}</style><script>$(document).ready(function(){$("#fontSize").click(function(){//기본 폰트 사이즈를 16으로 설정var size = 16;//each()로 li개수 만큼 루프 돌기$("#menu li").each(function(i){$(this).css({fontSize : size});//폰트사이즈가 10씩 증가가 됨size += 10;});});});</script></head><body><button id="fontSize">실행</button><ul id="menu"><li>메뉴0</li><li>메뉴1</li><li>메뉴2</li><li>메뉴3</li><li>메뉴4</li><li>메뉴5</li></ul></body></html>
- 06_14_반복문_비교.html
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>노드 다루기-for문</title><style>body {font-size: 15px;font-family: "굴림";}div, p, ul, li {border: 1px solid gray;margin: 10px;}ul {padding: 10px;}</style><script>$(document).ready(function(){var $liList = $("#menu li");$("#index").click(function(){for(var i=0; i<$liList.length; i++){var $li = $liList.eq(2);$li.css("border", "4px solid #f00");}});});</script></head><body><button id="index">실행</button><ul id="menu"><li>메뉴0</li><li>메뉴1</li><li>메뉴2</li><li>메뉴3</li><li>메뉴4</li><li>메뉴5</li></ul></body></html>
- 06_15_키워드찾기.html
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>속성으로 노드찾기</title><style>body {font-size: 15px;font-family: "굴림";}div, p, ul, li {border: 1px solid gray;margin: 10px;padding: 10px;list-style: none;}</style><script>//속성 옵션// $("E[A]") : 속성 A를 포함한 모든 E노드를 찾기// $("E[A=V]") : 속성 A의 값이 V인 모든 E노드를 찾기// $("E[A^=V]") : 속성 A의 값이 V로 시작하는 모든 E노드를 찾기// $("E[A$=V]") : 속성 A의 값이 V로 끝나는 모든 E노드를 찾기// $("E[A*=V]") : 속성 A의 값이 V를 포함하고 있는 모든 E노드를 찾기
$(document).ready(function(){
$("[class^=m]").css("border","1px solid red");
$("[class$=d]").css("border","2px solid blue");});</script></head><body><ul class="menu"><li class="child">메뉴1</li><li class="child">메뉴2</li></ul></body></html>
- 06_16_부모.html
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>노드 다루기-부모,조상 노드 찾는 방법</title><style>body {font-size: 15px;font-family: "굴림";}div, p, ul, li {border: 1px solid gray;margin: 10px;list-style: none;padding: 10px;}
</style><script>$(document).ready(function(){var $menu = $("#menu");//아래 코드는 부모 노드를 구하는 코드$menu.parent().css("border", "2px solid blue");
//아래 코드는 특정 조상 노드를 구하는 코드$menu.parent().parent().css("border", "2px solid red");});</script></head><body><div><ul id="menu"><li>메뉴0</li><li>메뉴1</li><li>메뉴2</li>
</ul>
</div></body></html>
반응형
'코딩 > 8-JQuery' 카테고리의 다른 글
| 제이쿼리 홈페이지 유아이 사용법 (0) | 2025.06.18 |
|---|---|
| _03_속성변경 , _04_이벤트 , _05_요소추가삭제 (0) | 2025.06.18 |
| JQuery => 00_기초문법, _01_태그선택, _02_내용변경 (1) | 2025.06.18 |