동위(Sideways) 메소드:
같은 레벨에 있는 요소들을 선택할 수 있는 메소드
-$("선택자").siblings()
선택된 요소와 같은 레벨에 있는 모든 요소들 선택
-$("선택자").siblings("제시선택자")
선택된 요소와 같은 레벨에 있는 모든 요소들 중 제시한 값과 일치하는 요소들만 선택
-$("선택자").next()|prev()
선택된 요소와 같은 레벨에 있는 모든 요소들 중 바로 다음|이전요소 하나만 선택
-$("선택자").nextAll()|prevAll()
선택된 요소와 같은 레벨에 있는 모든 요소들 중 다음|이전요소 모두 선택
-$("선택자").nextUntil("제시선택자")|prevUntil("제시선택자")
선택된 요소와 같은 레벨에 있는 요소의 다음|이전요소들 중 제시한 값의 전까지 선택
<div class="wrap">
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p2</p>
</div>
<script>
$(function() {
const style1 = {color: "orange", border: "2px solid orange"};
const style2 = {color: "blue", border: "2px solid blue"};
const style3 = {color: "green", border: "2px solid green"};
const style4 = {color: "red", backgroundColor: "aqua"};
const style5 = {color: "purple", fontSize: "3em"}; //여기선 font-size아님
$("h2").siblings().css(style1);
$("h2").siblings("p").css(style2);
$("h2").next().css(style3);
$("h2").nextAll().css(style4);
$("h2").nextUntil("p").css(style5);
$("h2").prev().css("background", "pink");
$("h2").prevAll().css("background", "lightyellow");
$("h2").prevUntil("p").css("border", "dotted");
})
</script>content 관련 메소드:
- html(["문구"]): innerHTML 속성과 비슷
선택된 요소의 content영역의 값을 리턴해주거나 또는 변경해주는 메소드
$("선택자").html(): 선택된 요소의 content값을 반환해줌(html태그까지 반환)
$("선택자").html("문구"): 선택된 요소의 content영역에 문구를 넣어줌
(문구 안에 html태그가 있으면 태그로 해석)
<h1 id="test1">
<a>네이버로</a>
</h1>
<h1 id="test2">
</h1>
<script>
$(function() {
const aa = $("#test1").html();
console.log(aa);
$("#test2").html(aa);
$("#test2").children().attr("href", "http://www.naver.com");
})
</script>- text(["문구"]) 메소드: innerText와 비슷
선택된 요소의 content영역의 값을 리턴해주거나 변경해주는 메소드
$("선택자").text(): 선택된 요소의 content영역의 값을 반환(html태그를 문자로 인식)
$("선택자").text("문구"): 선택된 요소의 content영역에 문구를 넣어(변경)줌(html태그를 문자로 넣음)
<h1 id="test3">
<a>구글로</a>
</h1>
<h1 id="test4">
</h1>
<script>
$(function() {
const aa = $("#test3").text();
console.log(aa);
$("#test4").text("<a>" + aa + "</a>");
})
</script>
<hr>
<div class="test">테스트</div>
<div class="test">테스트</div>
<div class="test">테스트</div>
<script>
$(function() {
$(".test").html("<h1>글씨 변경</h1>");
//자바스크립트에선 for문을 돌려야 적용됨
//선택된 요소들에 순차적으로 접근할 때마다 해당 funcrion실행
// 함수 실행 시 리턴값으로 문구 변경(콜백함수: 호출했을 때 리턴값이 바로 적용)
let count = 0;
$(".test").html(function() {
return "<h1>글씨변경"+ ++count +"</h1>";
})
//해당 function이 호출될 때마다
//첫번째 인자값으로 순차적으로 접근하는 요소의 인덱스 번호 전달
//두번째 인자값으로 순차적으로 접근하는 요소의 content 영역값 전달
$(".test").thml(function(index,elem){
return "<h1>글씨변경"+ index + "</h>";
})
// text() 동일하게 적용
})
</script>요소 생성 및 객체
요소 생성 및 제거
- 동적으로 요소 생성
- 문자열로 만드는 방법
let el1 = "
Creat Element By Text
"; - DOM 메소드로 만드는 방법(creatElement, creatTextNode)
let el2 = document.createElement("p");
let text = document.createTextNode("Creat Element By DOM");
el2.appendChild(text); - jQuery로 만드는 방법
let el3 = $("
Creat Element By jQuery
");
- 삽입 관련 메소드
선택된 요소를 기준으로 새로운 요소들을 추가시켜주는 메소드
★
$(A).append(B): A요소내에 맨 뒤에 B를 추가(자손/하위)
$(A).prepend(B): A요소내에 맨 앞에 B를 추가(자손/하위)
$(A).after(B): A요소 뒷부분에 B를 추가(동위)
$(A).before(B): A요소 앞부분에 B를 추가(동위)
---------------------------------------------------------------
$(B).appendTo(A): B를 A요소내에 맨 뒤에 추가(자손/하위)
$(B).prependTo(A): B를 A요소내에 맨 앞에 추가(자손/하위)
$(B).insertAfter(A): B를 A요소내에 뒷부분에 추가(자손/하위)
$(B).insertBefore(A): B를 A요소내에 앞부분에 추가(자손/하위)
<h1 id="test1">
<span>A1</span>
<span>A1</span>
</h1>
<h1 id="test2">
<span>A2</span>
<span>A2</span>
</h1>
<h1 id="test3">
<span>A3</span>
</h1>
<h1 id="test4">
<span>A4</span>
</h1>
<script>
$(function() {
//★part1
$("#test1").append("<span class='added'>B1</span>"); //자손 맨 뒤에 추가
$("#test2").prepend("<span class='added'>B2</span>"); //자손 맨 앞에 추가
$("#test3").before("<span class='added'>B3</span>"); //요소 앞에 추가
$("#test4").after("<span class='added'>B4</span>"); //요소 뒤에 추가
//part2: 잘 사용 안 함
$("<span class='added'>C1</span>").appendTo("#test1"); //요소내 맨 뒤에 추가
$("<span class='added'>C2</span>").prependTo("#test2"); //요소내 맨 앞에 추가
$("<span class='added'>C3</span>").insertBefore("#test3"); //요소내 앞에 추가
$("<span class='added'>C4</span>").insertAfter("#test4"); //요소내 뒤에 추가
})
</script>
- 요소객체 복제 메소드:
변수 = $("선택자").clone([true|false]): 선택된 요소를 복제해서 반환해주는 메소드
true|false(기본값): 복제할 요소에 걸려있는 이벤트까지 복사할 것인지 지정
<div id="clTest">
<div id="item1" class="item">
<span>안녕</span>
</div>
</div>
<button id="clone">복제</button>
<div id="clResult"></div>
<script>
$(function() {
//이벤트 함수
$(".item").hover(function() {
$(this).addClass("purple");
}, function() {
$(this).removeClass("purple");
});
//복제 버튼 클릭시 #itme1의 요소를 복사하여 #clResult에 넣기
$("#clone").click(function() {
const copy = $("#item1").clone(true);
$("#clResult").append(copy);
// 한줄로 표현 $("#clResult").append($("#item1").clone([true]));
// appendTo 표현 $("#item1").clone(true).appendTo("#clResult");
})
})
</script>- 요소 객체 제거 메소드:
$("선택자").empty(): 선택된 요소의 하위요소들을 제거해주는 메소드
$("선탣자").remove()|detach(): 선택된 요소를 제거 후 제거된 요소를 반환하는 메소드
-remove(): 제거한 요소의 이벤트는 가져오지 x
-datach(): 제거한 요소의 이벤트까지 가져옴
<div id="remvTest">
<div id="item2" class="item">
<span>안녕</span>
</div>
</div>
<button id="empty">empty</button>
<button id="remove">remove</button>
<button id="datach">detach</button>
<div id="remvResult"></div>
<script>
$(function() {
$("#empty").click(function() {
$("#item2").empty(); //하위요소 <span> 삭제
$("#remvTest").empty(); //하위요소 #item2 삭제
})
$("#remove").click(function() {
const el = $("#item2").remove();
$("#remvResult").append(el);
})
$("#detach").click(function() {
const el2 = $("#item2").detach();
$("#remvResult").append(el2);
})
})
</script>*총정리*
요소.css("스타일속성","값"):변경
요소.css("스타일속성"): 반환
요소.val("텍스트"): value값 변경
요소.val(): value값 반환
요소.html("텍스트"): 변경(html태그 인식)
요소.html(): 반환
요소.text("텍스트"): 변경(문자로 인식)
요소.text(): 반환
요소.attr("그외속성명", "값"): 속성 변경
요소.attr("그외속성명"): 속성값 반환
요소.이벤트(function() {실행내용;})
요소.addClass("클래스명"): 클래스속성 삽입
요소.removeClass("클래스명"): 클래스속성 제거
그 외 메소드:
each() 메소드:
배열의 모든 인덱스에 순차적으로 접근할 때 사용
객체가 가지고 있는 모든 속성에 순차적으로 접근할 때 사용
for in문과 유사하게 수행되는 메소드
1) $.each(객체|배열, function([매개변수..]) {
순차적으로 접근할 때마다 실행할 내용;
})
만약 객체를 제시했다면
첫번째 매개변수에는 순차적으로 접근할 때마다의 객체의 속성명(key)이 담김
두번째 매개변수에는 해당 속성값(value)이 담김
2) 객체|배열.each(function([매개변수..]) {
순차적으로 접근할 때마다 실행할 내용;
})
만약 배열을 제시했다면
첫번째 매개변수에는 순차적으로 접근할 때마다의 인덱스번호가 담김
두번째 매개변수에는 해당 인덱스의 값이 담김
<script>
$(function() {
const arr = ['정','보','교','육','원'];
for(let i in arr) {
console.log("인덱스: " + i + ", 값: "+ arr[i]);
}
console.log("--------------------------");
//each 방법1
$.each(arr, function(index, value) {
console.log("인덱스: " + index + ", 값: "+ value);
})
console.log("--------------------------");
//each 방법2
$(arr).each(function(index, value) {
console.log("인덱스: " + index + ", 값: "+ value);
})
console.log("--------------------------");
const student = {
name: "홍길동",
age: 20,
addr: "서울"
}
for(let key in student) {
console.log("속성명: " + key + "속성값: " + student[key]);
}
console.log("--------------------------");
//each로 하면
$.each(student, function(key, value) {
console.log("속성명: " + key + "속성값: " + value);
//백틱 표현: console.log(`속성명: ${key}, 속성값: ${value}`);
})
//-------------------응용 예시--------------------------
$("#btn").click(function() { //로드될 때말고 버튼 클릭하면 테이블 보이기
const student2 = [{name:"고애신", age:20, addr:"서울"}
,{name:"홍길동", age: 23, addr:"경기"}
,{name:"아무개", age: 25, addr: "인천"}]
let result="";
$.each(student2, function(index, obj) {
result += `<tr>
<td>${obj.name}</td>
<td>${obj.age}</td>
<td>${obj.addr}</td>
</tr>`;
})
console.log(result);
$("#area1 tbody").html(result);
})
})
</script>
<button id="btn">학생조회</button><br><br>
<table border="1" id="area1">
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>주소</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br>
<div id="area2">
<h1>item-1</h1>
<h1>item-2</h1>
<h1>item-3</h1>
<h1>item-4</h1>
<h1>item-5</h1>
</div>
<script>
$(function() {
$("#area2").children().each(function(index,elem) {
console.log(elem);
//elem.addClass("highlight-" + index); => 안 됨
// elem에 javascript방식으로 선택된 요소객체가 담겨있어서
//elem.className = "highlight-" + index; 이렇게 해야됨
//자바스크립트 => jQuery 변환 후 jQuery메소드 사용
$(elem).addClass("highlight-" + index);
//변수 선언 안 했다면 $(this).addClass("highlight" + index);
})
})
</script>is()메소드:
$("선택자").is("선택자")
선택된 요소가 내가 전달하고자 하는 값과 일치하는지 판단해 반환(t|f)
<h3 class="test">test1</h3>
<h3 >test2</h3>
<h3 class="test">test3</h3>
<h3 class="test">test4</h3>
<h3 >test5</h3>
<h3 class="test">test6</h3>
<script>
$(function() {
//이 문서상의 모든 h3요소에 순차적으로 접근하면 test클래스가 존재하면 배경색 바꾸기
$("h3").each(function() {
if($(this).is(".test")) {
$(this).css("backgroundColor","lightyellow");
}
})
})
</script>부트스트랩:
소스코드를 긁어와 간단하고 다양한 디자인으로 원하는 것을 구현할 수 있음
https://www.w3schools.com/ 에서 튜토리얼의 부트스트랩에 들어가서 버전을 선택하고
각각에 맞는 CSS 링크와 java script 스크립트를 복사 붙여넣기 해온다.
<title>종합 예제</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
tbody>tr:hover {
cursor: pointer;
}
</style>버전에 맞는 왼쪽 메뉴탭에서 table, form, button 등의 서식을 긁어와 수정 사용할 수 있다.
템플릿의 경우는 다운로드 받아 아예 소스코드를 drag and drop해서 코드창에 탭 창으로 넣을 수 있고 W3school 홈페이지 뿐만 아니라 서치하면 더 많은 템플릿을 다운받을 수 있는 홈페이지들이 있다.
0개의 댓글
