1. content영역관련메소드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>content영역관련메소드</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<h1>content 영역관련 메소드</h1>
<h3>************ html('문구') : innerHTML 속성과 관련된 메소드</h3>
<p>
선택된 요소의 content영역(여는태그와 닫는태그 사이)을 리턴해주거나
또는 변경해주는 메소드 <br>
- $('선택자').html() : 선택된 요소의 content영역의 값을 반환해줌 <br>
- $('선택자').html('문구') : 선택된 요소의 content영역의 값을 해당 문구로 바꿔줌 <br>
=> 이 때 HTML태그를 인식 O
</p>
<h1 id="test1">
<a>네이버로</a>
</h1>
<h1 id="test2" style="border : 1px solid black">
</h1>
<script>
$(function(){
// 자바스크립트 방식
// let tmp = document.getElementById('test1').innerHTML;
// console.log(tmp);
// href속성 추가(속성값으로는 http://www.naver.com)
// let arr = document.getElementsByTagName('a');
// console.log(arr[0]);
// arr[0].href = 'http://www.naver.com';
// document.getElementById('test2').innerHTML = document.getElementById('test1').innerHTML;
// 제이쿼리 방식
let tmp = $('#test1').html();
console.log(tmp);
$('#test2').html(tmp);
// href속성 추가
$('#test2').children().attr('href', 'http://www.naver.com');
})
</script>
<hr>
<h3>* text('문구') : innerText속성과 관련된 메소드</h3>
<p>
선택된 요소의 content영역의 텍스트만 리턴해주거나 변경해주는 메소드 <br>
- $('선택자').text() : 선택된 요소의 content영역을 반환해줌 <br>
- $('선택자').text('문구') : 선택된 요소의 content내용을 문구로 변경해줌 <br>
=> 이 때, HTML태그를 인식X
</p>
<h1 id="test3">
<a>구글로</a>
</h1>
<h1 id="test4">
</h1>
<script>
$(function(){
// 자바스크립트
// document.getElementById('test3').innerText;
jQuery
$('#test4').text($('#test3').text());
})
</script>
</body>
</html>
2. 요소생성및제거
<!DOCTYPE html>
<html lang="en">
<head>
<title>요소생성및제거</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
.added{
color : skyblue;
}
.item{
background-color : lightpink;
width : 100px;
height : 100px;
margin : 5px;
border : 2px dotted plum;
line-height : 100px;
text-align : center;
}
.yellowgreen{
background-color : yellowgreen;
}
</style>
</head>
<body>
<h1>요소 생성 및 제거</h1>
<h1>* 동적으로 요소 생성</h1>
<button id="btn1">요소 생성</button>
<div id="area1">
</div>
<script>
$(function(){
$('#btn1').click(function(){
// <p> ~~~ </p>
// 자바스크립트 방식으로 만든다면??
// 1. 문자열로 만드는 방법
var el1 = '<p>Create Element By Text</p>';
// document.getElementById('area1').innerHTML = el1;
// 2. DOM 객체를 이용하는 방법
// 1단계 : createElement
// 2단계 : createTextNode
// 3단계 : appendChild
var el2 = document.createElement('p'); //<p></p>
var text = document.createTextNode('Create Element By DOM'); // Create Element By DOM
el2.appendChild(text); // <p>Create Element By DOM</p>
// document.getElementById('arae1').appendChild(el2);
// 3. jQuery 방식
// Create Element By jQuery
console.log($('<p></p>').text('Create Element By jQuery'));
var $el3 = $('<p></p>').text('Create Element By jQuery');
$('#area1').append($el3);
$('#area1').append(el2);
$('#area1').append(el1);
$('#area1').append(el1, el2, $el3);
});
});
</script>
<hr>
<h3>* 추가 관련 메소드 par1</h3>
<p>
선택된 요소를 기준으로 새롭게 생성된 요소를 추가해주는 메소드 <br><br>
$(A).append(B) : A요소 내부에 뒷부분에 B를 추가(자식/하위) <br>
$(A).prepend(B) : A요소 내부에 앞부분에 B를 추가(자식/하위) <br>
$(A).before(B) : A요소 앞부분에 B를 추가(동위) <br>
$(A).after(B) : A요소 뒷부분에 B를 추가(동위) <br>
</p>
<h3>* 추가 관련 메소드 par2</h3>
<p>
$(B).appendTo(A) : B를 A요소 내부에 뒷부분에 추가(자식/하위) <br>
$(B).prependTo(A) : B를 A요소 내부에 앞부분에 추가(자식/하위) <br>
$(B).insertBefore(A) : B를 A요소 앞부분에 추가(동위) <br>
$(B).inertAfter(A) : B를 A요소 뒷부분에 추가(동위)
</p>
<!-- A == h1 -->
<!-- <span class='added'>B</span> -->
<h1 id="test1">A
<span>1</span>
<!-- <span class='added'>B</span> -->
</h1>
<h1 id="test2">A
<!-- <span class='added>B</span>' -->
<span>1</span>
</h1>
<!-- <span class='added'>B</span> -->
<h1 id="test3">A
<span>1</span>
</h1>
<h1 id="test4">A
<span>1</span>
</h1>
<!-- <span clasee='added'>B</span> -->
<script>
$(function(){
// $('#test1').append('<span class="added">B</span>'); // A 1 B
// $('#test2').prepend('<span class="added">B</span>'); // BA 1
// $('#test3').before('<span class="added">B</span>'); // B A 1
// $('#test4').after('<span class="added">B</span>'); // A 1 B
$('<span class="added">B</span>').appendTo('#test1'); // A 1 B
$('<span class="added">B<span>').prependTo('#test2'); // BA 1
$('<span class="added">B</span>').insertBefore('#test3'); // B A 1
$('<span class="added">B</span>').insertAfter('#test4'); // A 1 B
});
</script>
<hr>
<h3>* 요소 객체 복제 메소드</h3>
<p>
var 변수 = $('선택자').clone(true / false) : 선택된 요소 객체를 복제해서 반환해주는 메소드 <br>
=> true / false : 해당 선택된 요소에 걸려있는 이벤트까지 복사할건지 말건지 지정(생략 시 false)
</p>
<button id="clone">복제</button>
<div id="clone-test">
<!-- 복제할 요소 -->
<div id="item1" class="item">
<span>날 복제해라</span>
</div>
</div>
<!-- 복제할 요소를 붙여넣을 공간 -->
<div id="clone-result">
</div>
<script>
$(function(){
// 복제할 요소에 hover 이벤트
/*
$('#item1').hover(function(){
$('#item1').addClass('yellowgreen');
}, function(){
$('#item1').removeClass('yellowgreen');
});
*/
// 이렇게 하면 id가 item1인 값에만 이벤트 hover가 적용!
// => clone복제한 복제본에는 적용이 안됨
// window.event.target
// e.target
// this
$('#item1').hover(function(){
$(this).addClass('yellowgreen');
}, function(){
$(this).removeClass('yellowgreen');
});
// 복제버튼 클릭 시 해당 요소를 복사해서 clone-result에 붙여넣기!
$('#clone').click(function(){
var $copy = $('#item1').clone(true); // false이면 hover가 적용이 안됨
$('#clone-result').append($copy);
});
});
</script>
<hr>
<h3>* 요소객체 제거 및 잘라내기 메소드</h3>
<p>
$('선택자').empty() : 선택된 요소의 모든 후손요소들을 제거시켜주는 메소드 <br>
var 변수 = $('선택자').remove() / detach() : 해당요소 잘라내기 <br>
</p>
<button id="empty">empty</button>
<button id="remove">remove</button>
<button id="detach">detach</button>
<div id="remove-test" style="border : 3px solid red; width : 110px; height : 110px">
<!-- 제거할 요소 -->
<div id="item2" class="item">
<span>날 제거해라</span>
</div>
</div>
<!-- 붙여넣기를 할 공간 -->
<div id="remove-result" style="border : 3px solid red; width : 100px; height : 100px">
</div>
<br>
<script>
$(function(){
// empty
$('#empty').click(function(){
$('#remove-test').empty(); // id가 remove-test인 div요소의 모든 후손요소가 날아감
});
// mouseenter
$('#item2').mouseenter(function(){
$(this).addClass('yellowgreen');
});
// remove => 이벤트속성이 적용되지 않음
$('#remove').click(function(){
let $el = $('#item2').remove(); // remove() == 제거 == 제거한요소를 반환해줌
$('#remove-result').append($el); // 이벤트는 사라져있음
});
// detach
$('#detach').click(function(){
let $el = $('#item2').detach(); // 이벤트를 들고감
$('#remove-result').append($el);
});
})
</script>
<hr>
<div class="test">테스트</div> <!-- <h1>0</h1> -->
<div class="test">테스트</div> <!-- <h1>1</h1> -->
<div class="test">테스트</div> <!-- <h1>2</h1> -->
<div class="test">테스트</div> <!-- <h1>3</h1> -->
<script>
$(function(){
// 순수 자바스크립트 방식으로
/*
const test = document.getElementsByClassName('test');
for(let i in test){ // let i = 0; i < test.length; i++
test[i].innerHTML = '<h1>' + i + '</h1>'
};
*/
// jQuery
console.log($('.test'));
// console.log($('#item1')); // 하나라도 length가 1인 배열임!!!
// 쉬운방법(어려운건 다음에)
let count = 0;
$('.test').html(function(){ // 콜백함수1 : 반환값을 인자값으로 줌
return '<h1>' + count++ + '</h1>';
});
})
</script>
</body>
</html>
3. 추가적인메소드
<!DOCTYPE html>
<html lang="en">
<head>
<title>추가적인메소드</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
.highlight-0{
background-color: red;
}
.highlight-1{
background-color: orangered;
}
.highlight-2{
background-color: orange;
}
.highlight-3{
background-color: yellow;
}
.highlight-4{
background-color: yellowgreen;
}
</style>
</head>
<body>
<h1>그 외의...</h1>
<h3>* each 메소드</h3>
<p>
배열의 모든 인덱스에 순차적으로 접근하고자 할 때 <br>
객체가 가지고 있는 모든 속성에 순차적으로 접근하고자 할 때 <br>
사용할 수 있는 for in문과 유사하게 수행되는 메소드
</p>
<pre>
[ 표현법 ]
1)
$.each(객체/배열, function(매개변수1, 매개변수2){
순차적으로 접근해서 수행할 내용;
});
2)
배열.each(function(매개변수1, 매개변수2){
순차적으로 접근해서 수행할 내용;
});
==> 매개변수1, 매개변수2 생략가능
==> 순차적으로 객체/배열의 속성이나 인덱스에 접근할 때마다 function()이 수행
========================================================================
case 1) 객체일 경우
매개변수 1 : 순차적으로 접근한 객체의 속성명(Property)
매개변수 2 : 해당 속성 값(Value)
case 2) 배열일 경우
매개변수 1 : 순차적으로 접근한 배열의 인덱스(index)
매개변수 2 : 해당 속성 값(Value)
</pre>
<div id="area1">
</div>
<script>
$(function(){
// 배열을 제시하는 경우
var arr = ['우육면', '샤브샤브', '샌드위치', '멸치국수'];
// 일반적인 for문
/*
for(let i = 0; i < arr.length; i++){
console.log(arr[i]);
};
*/
// for in문
/*
for(let index in arr){
console.log('인덱스 : ' + index + ', 값 : ' + arr[index]);
};
*/
// each메소드 - 1번표현법
/*
$.each(arr, function(index, value){
console.log('인덱스 : ' + index + ', 값 : ' + value);
});
*/
// each메소드 - 2번표현법
/*
arr.each(function(index, value){
console.log('인덱스 : ' + index + ', 값 : ' + value);
});
// each메소드는 jQuery메소드! 배열을 jQuery배열로 바꿔줘야함
*/
/*
$(arr).each(function(index, value){
console.log('인덱스 : ' + index + ', 값 : ' + value);
});
*/
// 객체를 제시했을 경우
var national = {
'한국' : '서울',
'일본' : '도쿄',
'프랑스' : '파리',
};
// 일반적인 for문 => 사용할 수 없음(객체는 인덱스가 없다!!)
// for in문
for(let key in national){
console.log('속성명 : ' + key + ', 값 : ' + national[key]);
};
// each메소드 - 1번표현법 => 객체의 경우 1번 표현법만 쓰인다.
//$.each(national, function(key, value){
/*
$.each(national, (key, value) => {
console.log('속성명 : ' + key + ', 값 : ' + value);
});
*/
// 객체 배열을 제시할 경우
let links = [{name : '네이버', link : 'http://www.naver.com'},
{name : '구글', link : 'http://www.google.com'},
{name : '다음', link : 'http://www.daum.net'}];
// <a href='link속성의 값'>name속성의 값</a>
console.log(links[0].name);
console.log(links[1].name);
var el = '<a href="' +links[0].link + '">' + links[0].name + '</a><br>';
console.log(el);
let output = '';
$.each(links, function(index, item){
// console.log(item);
output += '<a hreg="' + item.link + '">' + item.name + '</a><br>';
});
$('#area1').html(output);
$('#btn').click(function(){
console.log(123);
// DB로부터 데이터를 조회함!!(가정)
const members = [{name : '홍길동', age : 15, address : '한양'},
{name : '김길동', age : 20, address : '부산'},
{name : '황길동', age : 30, address : '대전'}];
let result = '';
$.each(members, function(index, obj){
// console.log(obj);
result += '<tr><td>' + obj.name + '</td><td>' + obj.age + '</td><td>' + obj.address + '</td></tr>';
});
// console.log(result);
// $('#areaT > tbody').html(result); 내가한거
$('#areaT tbody').append(result); // 쌤꺼
});
});
</script>
<br><br><br>
<hr>
<table border="1" id="areaT">
<thead>
<tr>
<td>이름</td>
<td>나이</td>
<td>주소</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br><br><br>
<button id="btn">날 눌러줘~</button>
<hr>
<br><br><br>
<!-- 보편적으로 each메소드를 사용하는 경우 : 선택된 여러개의 요소에 순차적으로 접근해야 할 때 -->
<div id="wrap">
<h1>item-1</h1>
<h1>item-2</h1>
<h1>item-3</h1>
<h1>item-4</h1>
<h1>item-5</h1>
</div>
<script>
$(function(){
// [h1, h1, h1, h1, h1]
//console.log($('#wrap').children());
$('#wrap').children().each(function(index, value){
// console.log(value);
// value.addClass('highlight-' + index);
// addClass() 는 제이쿼리 객체에 사용가능한 제이쿼리 메소드
// value 요소 객체 == 자바스크립트 방식의 요소 객체
// 해결방법 1) $()로 감싸줌
// $(value).addClass('highlight-' + index);
// 해결방법 2) 요소객체.속성명 =
// value.className = 'highlight-' + index;
// 해결방법 3) $(this) => 순차적으로 접근하는 해당 요소 객체
$(this).addClass('highlight-' + index);
})
})
</script>
<br>
<!-- jQuery방식으로 자바스크립트 방식의 요소 객체 바꾸기! -->
<div id="test">안녕하세요</div>
<script>
$(function(){
// 자바스크립트
const div = document.getElementById('test');
// div.style.backgroundColor = 'pink';
// 해경방법 => $()
$(div).css('background', 'pink');
});
$(document).ready(function(){
});
</script>
<hr>
<h3>* is 메소드</h3>
<p>
$('선택자').is('선택자') <br>
선택된 요소를 기준으로 인자값으로 전달한 값과 일치하는지 아닌지 판단해서
그에 해당하는 결과를 true(일치) / false(불일치)로 판단
</p>
<h3 class="text">text1</h3>
<h3>text2</h3>
<h3 class="text">text3</h3>
<h3 class="text">text4</h3>
<h3>text5</h3>
<h3 class="text">text6</h3>
<h3>text7</h3>
<script>
$(function(){
$('h3').each(function(){
// 현재 순차적으로 접근하는 h3요소가 text클래스를 가지고 있는가 아닌가
if($(this).is('.text')){
$(this).css('background', 'skyblue');
}
else{
$(this).css('background', 'lime');
}
});
});
</script>
</body>
</html>
4. 응용예시
<!DOCTYPE html>
<html lang="en">
<head>
<title>응용예시</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<!-- 부트트랩 가져오기 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
tbody > tr:hover{
cursor : pointer;
background-color: lightblue;
color: white;
}
</style>
</head>
<body>
<h2>게시글 목록</h2>
<br>
<table class="table table-striped"> <!-- 테이블 속성 가져오기-->
<thead>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>조회수</th>
<th>좋아요</th>
</thead>
<tbody>
<tr>
<td>엄청난 보약!!! ❤</td>
<td>1297주지성곰신김포</td>
<td>2023.09.04.</td>
<td>203</td>
<td>11</td>
</tr>
<tr>
<td>상견례</td>
<td>1277상견례</td>
<td>2023.09.03</td>
<td>179</td>
<td>55</td>
</tr>
<tr>
<td>교번 알면 당장 우편 보낼 수 있나요?</td>
<td>1297김희건곰신도봉</td>
<td>2023.09.02.</td>
<td>143</td>
<td>2</td>
</tr>
<tr>
<td>귀여운 통신보약 꾸나</td>
<td>1297김희건곰신도봉</td>
<td>2023.09.02.</td>
<td>186</td>
<td>6</td>
</tr>
<tr>
<td>마지막 휴가 기록</td>
<td>1281수한곰신6여61대</td>
<td>2023.09.01</td>
<td>424</td>
<td>34</td>
</tr>
</tbody>
</table>
<br>
<br>
선택된 게시글 정보 :
<label id="l1">제목</label> /
<label id="l2">작성자</label> /
<label id="l3">작성일</label> /
<label id="l4">조회수</label> /
<label id="l5">좋아요</label>
<script>
$(function(){
$('tbody>tr').click(function(){
// console.log(1);
/*
console.log(this);
console.log($(this).children().eq(0).text());
console.log($(this).children().eq(1).text());
console.log($(this).children().eq(2).text());
console.log($(this).children().eq(3).text());
console.log($(this).children().eq(4).text());
// 현재 선택된 요소의 자식들 중에서
// 전부 다 innerText속성값이 필요함
$('#l1').text($(this).children().eq(0).text());
$('#l2').text($(this).children().eq(1).text());
$('#l3').text($(this).children().eq(2).text());
$('#l4').text($(this).children().eq(3).text());
$('#l5').text($(this).children().eq(4).text());
*/
$(this).children().each(function(index, value){
$('#l' + (index + 1)).text($(value).text());
});
});
})
</script>
<br><br><br>
<!-- 버튼 가져오기 -->
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>
<!-- 꼭 버튼일 필요도 없음 -->
<a class="btn btn-light text-dark">로그인</a>
<!-- 폼 태그 예시 -->
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" placeholder="Enter password" id="pwd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> 날 기억해줘
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<!-- 모달 -->
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#chchchchchange">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="chchchchchange">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">로그인</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>'FrontEnd > JQuery' 카테고리의 다른 글
| #46. jQuery(이벤트, 안중요한거1~2), W.A.S(apache tomcat) 시작 (0) | 2023.09.05 |
|---|---|
| #44. jQuery 기본선택자, 추가적인선택자, 필터링관련선택자, 탐색(순회)메소드_조상, 자식, 동위 (1) | 2023.09.01 |