2020년 12월 14일
업데이트:
content 관련 메소드
HTML() 메소드
<h3>html() 메소드</h3>
<pre>
선택된 요소의 content 영역에 작성될 내용을 설정하거나
content 영역의 내용을 얻어오는 메소드.
(Javascript의 innerHTML과 같은 기능)
setter : 작성된 html 태그를 실제 태그로 인식함.
getter : 해당 요소의 content에 작성된 내용을 얻어옴. (태그도 포함함.)
</pre>
<h1 id="test1"><a href="https://www.naver.com">네이버로 이동</a></h1>
<h1 id="test2"></h1>
<script>
$(document).ready(function() {
// id가 test1인 요소 내용을 태그 포함하여 얻어오기
var content1 = $("#test1").html();
console.log("content1 : " + content1);
// id가 test2인 요소에 content1을 삽입.
// (html 태그는 태그로 인식하도록 하기)
// $("#test2").html(contetn1);
var tmp = "<a href='https://www.google.com'>구글로 이동</a>";
$("#test2").html(tmp);
});
</script>
TEXT() 메소드
<h3>text() 메소드</h3>
<pre>
선택된 요소의 content 영역에 작성될 내용을 설정하거나
content 영역의 내용을 얻어오는 메소드.
(Javascript의 innerText과 같은 기능)
setter : 작성된 html 태그를 실제 태그로 인식하지 않음(글자로만 취급).
getter : 해당 요소의 content에 작성된 내용을 얻어옴. (태그 무시.)
-> 태그는 삭제되고 내용만 얻어와짐
</pre>
<h1 id="test3"><a href="https://www.naver.com">네이버로 이동</a></h1>
<h1 id="test4"></h1>
<script>
$(function(){
var content2 = $("#test3").text();
console.log("content2 : " + content2);
$("#test4").text("<a href='https://www.naver.com'>네이버로 이동</a>");
});
</script>
매개변수로 함수 전달하기
<h3>html(), text() 매개변수로 함수 전달하기</h3>
<pre>
jQuery 메소드 중 html(), text(), val()는 매개변수로 함수를 전달할 수 있다.
함수의 형태는
function(index, html){}의 형식을 가지고 있음.
$("선택자").html(function(index, html){});
index : 현재 접근중인 요소의 인덱스를 반환
html : html()로 인해 변경되기 전의 content 값
</pre>
<div class="testClass1">테스트 1</div>
<div class="testClass1">테스트 2</div>
<div class="testClass1">테스트 3</div>
<script>
$(document).ready(function(){
$(".testClass1").html(function(index, html){
var str = "<h3>현재 인덱스 : " + index + ", 변경 전 content : "
+ html + "</h3>";
return str;
})
});
</script>
객체 생성 및 제거
<style>
.item {
width: 100px;
height: 100px;
display: inline-block;
margin: 5px 5px 0px 0;
text-align: center;
line-height: 100px;
background: yellowgreen;
}
.item span {
font-size: 24px;
font-weight: bold;
color: white;
}
.lime {
background-color: lime;
}
.added {
color: orangered;
}
.box {
width: 100px;
height: 100px;
padding: 5px 10px 15px 10px;
margin: 10px;
}
#remove-test {
border: 2px solid red;
}
#result {
border: 2px dashed blue;
}
</style>
객체 생성 방법
<h3>객체 생성 방법</h3>
<div id="area1"></div>
<script>
$(document).ready(function () {
// 1) HTML 태그 작성 방법으로 객체 생성 방법
var obj1 = "<h4>Create text with HTML</h4>";
// 2) DOM 객체를 이용한 객체 생성 방법
var obj2 = document.createElement("h4");
// Create text with DOM
var textNode = document.createTextNode("Create text with DOM");
obj2.appendChild(textNode);
// 3) jQuery 방식의 객체 생성 방법
var obj3 = $("<h4>").text("Create text with jQuery");
// $("<h4>") == document.createElement("h4");
$("#area1").append(obj1, obj2, obj3);
$("#area1").append(obj1, obj2, obj3);
// html 태그를 직접 작성한 문자열을 이용해서
// 객체를 추가한 경우 여러번 재사용이 가능하지만
// DOM, jQuery 방식으로 생성된 객체는
// 한번 삽입되면 재사용이 불가능함.
// (여러 번 삽입 시 마지막 삽입에만 적용된다)
});
</script>
객체 삽입 메소드
<h3>객체 삽입 메소드 - 1</h3>
<pre>
선택자 요소(A)를 기준으로 삽입 메소드 매개변수에
생성된 요소(B) 또는 함수의 리턴값을 추가
$(A).append(B) : A요소 내 뒷부분에 B를 추가(자식)
$(A).prepend(B) : A요소 내 앞부분에 B를 추가(자식)
$(A).after(B) : A의 요소 뒷부분에 B를 추가(형제)
$(A).before(B) : A의 요소 앞부분에 B를 추가(형제)
</pre>
<h1 id="test1"><span>A</span></h1>
<h1 id="test2"><span>A</span></h1>
<h1 id="test3"><span>A</span></h1>
<hr>
<h1 id="test4"><span>A</span></h1>
<script>
$(document).ready(function () {
//window.setInterval을 이용해서 1초마다 새로운 객체 삽입
var index = 0;
var arr = ["B", "C", "D", "E"];
var interval1 = window.setInterval(function(){
// var el = $("<span>").addClass("added").text(arr[index++]);
// <span class="added">B</span>
var el = '<span class="added">'+ arr[index++] +'</span>';
$("#test1").append(el);
$("#test2").prepend(el);
$("#test3").after(el);
$("#test4").before(el);
// E까지 출력된 후 interval 멈추기
// -> window.clearInterval
if(index > 3){ // 배열 내용을 모두 출력했을 때
window.clearInterval(interval1);
//interval1 변수에 있는 setInterval을 없앰.
}
}, 1000);
});
</script>
<!-------------------------------------------------------------------------------------------->
<hr>
<h3>객체 삽입 메소드 - 2</h3>
<pre>
생성된 요소(B)를 매개변수로 지정한 선택자(A) 요소에 추가
(part1의 메소드와 선택자, 생성구문의 순서가 반대)
$(B).appendTo(A) : B를 A의 요소 내 뒷부분에 추가(자식)
$(B).prependTo(A) : B를 A의 요소 내 앞부분에 추가(자식)
$(B).insertAfter(A) : B를 A의 요소 뒤에 추가(형제)
$(B).insertBefore(A) : B를 A의 요소 앞에 추가(형제)
</pre>
<h1 id="test5"><span>A</span></h1>
<h1 id="test6"><span>A</span></h1>
<h1 id="test7"><span>A</span></h1>
<hr>
<h1 id="test8"><span>A</span></h1>
<script>
$(document).ready(function () {
// #test5 ~ #test8까지
/// appendTo(), prependTo(), insertAfter(), insertBefore()
// 위 메소드를 이용하여
// #test5 ~ #test8까지 1초마다 span 태그에 B, C, D, E를 작성하여
// 객체 추가하기
var index2 =0;
var arr2 = ["B","C","D","E"];
var interval2 = setInterval(function(){
var el = "<span class='added'>" + arr2[index2++]+ "</span>" ;
$(el).appendTo($("#test5"));
$(el).prependTo($("#test6"));
$(el).insertAfter($("#test7"));
$(el).insertBefore($("#test8"));
if(index2 > arr2.length-1){ // 배열 내용을 모두 출력했을 때
window.clearInterval(interval2);
//interval1 변수에 있는 setInterval을 없앰.
}
},1000);
});
</script>
객체 복제 메소드
<h3>객체 복제 메소드</h3>
<p>
clone([true|flase]) : html요소를 복사하는 메소드<br>
매개변수로 이벤트 복사여부를 지정(기본값 : false)
</p>
<button id="clone">clone</button>
<div id="clone-test">
<div id="item1" class="item"><span>안녕?</span></div>
</div>
<script>
$(function(){
$("#item1").hover(function(){
// 마우스가 들어왔을 때
// 마우스가 들어온 요소에 lime 클래스 추가
$(this).addClass("lime");
}, function(){
// 마우스가 떠났을 때
$(this).removeClass("lime");
})
});
// id가 clone인 버튼이 클릭되었을 때
$("#clone").click(function(){
// id가 item1인 요소를 이벤트까지 복제하여
// id가 clone-test인 요소의 마지막 자식으로 추가하기
$("#item1").clone(true).appendTo($("#clone-test"));
// ("#item1").clone(true) : 복제된 요소
});
</script>
객체 제거 메소드
<h3>객체 제거 메소드</h3>
<p>
empty() : 모든 자식요소를 제거<br>
remove() : DOM요소 잘라내기. 연관된 이벤트도 모두 삭제<br>
detach() : DOM요소 잘라내기. 연관된 이벤트 모두 보관함.
<!-- detach : 떼다, 파견하다 -->
</p>
<button id="empty">empty</button>
<button id="remove">remove</button>
<button id="detach">detach</button><br>
<div id="remove-test" class="box">
<div id="item2" class="item"><span>안녕</span></div>
</div>
<div id="result" class="box"></div>
<script>
// ready() 함수 : 페이지 로딩 완료 후 수행
// id가 item2인 요소에
// 마우스가 들어갔을 때 lime 클래스 추가
// 마우스가 나갔을 때 lime 클래스 제거하는 이벤트 핸들러 추가
$("#item2").hover(function(){
$(this).addClass("lime");
}, function(){
$(this).removeClass("lime");
});
// empty 이벤트 핸들러
$("#empty").click(function(){
// id가 remove-test인 요소의 지식 요속들을 모두 제거
$("#remove-test").empty();
});
// remove 이벤트 핸들러
$("#remove").click(function() {
var el = $("#item2").remove();
console.log(el);
$("#result").append(el);
});
// detach 이벤트 핸들러
$("#detach").click(function() {
var el = $("#item2").detach();
console.log(el);
$("#result").append(el);
});
</script>
jQuery 메소드
each() 메소드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>11_jQuery메소드</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
.highlight_0 {background:red;}
.highlight_1 {background:orange;}
.highlight_2 {background:yellow;}
.highlight_3 {background:green;}
.highlight_4 {background:blue;}
</style>
</head>
<body>
<h1>each() 메소드</h1>
<pre>
객체, 배열을 순차 접근하는 for in, for of와 비슷한 메소드로
객체나 배열의 요소를 순차적으로 접근하면서 index도 알려주는 메소드
[작성법]
1) $.each(object, function(index, item){});
object : 객체 또는 배열
index : 현재 접근중인 배열의 인덱스 또는 객체의 key 값
item : 현재 접근중인 배열의 요소 또는 객체의 value 값
2) $("선택자").each(function(index, item){});
$("선택자") : 여러 요소를 배열로 반환
</pre>
<div id="area1"></div>
<script>
$(document).ready(function() {
// 객체배열 생성
var arr = [{name : "네이버", link : "https://www.naver.com"},
{name : "구글", link : "https://www.google.com"},
{name : "w3school", link : "https://www.w3schools.com"}];
$.each(arr, function(index, item){
// console.log(index);
// console.log(item);
// a태그 생성
var str = index + "번째 : " + item.name + "로 이동";
var el = $("<a>").text(str).attr("href", item.link);
// .attr("속성명", "속성값");
// -> 해당 요소에 특정 속성 추가
$("#area1").append(el);
$("#area1").append($("<br>")); // 개행
});
});
</script>
<hr>
<div id="wrap">
<h1>item-0</h1>
<h1>item-1</h1>
<h1>item-2</h1>
<h1>item-3</h1>
<h1>item-4</h1>
</div>
<script>
$(function(){
// id가 wrap인 요소의 자식 중 h1 태그 선택
// $("#wrap").children("h1");
$("#wrap > h1").each(function(index, item){
$(item).addClass("highlight_" + index);
// item : 현재 접근중인 배열 요소
// 현재 배열 요소 : #wrapㅇ의 자식 중 h1 태그
// $(item) : h1 태그 하나 선택
// index : 현재 접근 중인 배열 요소의 인덱스(0~4)
});
});
</script>
</body>
</html>
이벤트
이벤트 관련 속성
<h3>이벤트 관련 속성</h3>
<p>이벤트핸들러의 매개변수로 event객체를 전달함.
인라인 이벤트 모델 방식으로 이벤트 설정 시 매개변수 키워드는 event로 고정.</p>
<button onclick="test1(event);">실행확인</button>
<script>
function test1(e){
console.log(e);
console.log(e.target);
}
</script>
이벤트 연결 on() / 해제 off()
<h3>이벤트 연결 on() / 해제 off()</h3>
<p>
요소 객체에 이벤트 발생 시 연결될 이벤트 핸들러를 지정하는 메소드이다.<br>
$('선택자').bind() : 현재 존재하는 문서 객체만 이벤트 연결<br>
$('선택자').unbind() : bind()로 연결된 이벤트 제거 <br>
</p>
<h4>
bind(), unbind() 메소드는 jquery3.0부터 deprecated로 설정되어<br>
대신 on(), off() 메소드를 사용함.<br><br>
$('선택자').on("이벤트명", "이벤트 핸들러") : bind()대신에 on()으로 대체됨<br>
$('선택자').off() : on()으로 연결된 이벤트 제거
</h4>
<h1 id="test1">마우스를 올려보세요</h1>
<button id="btn1">이벤트 제거</button>
<script>
$("#test1").on("mouseenter", function(event){
// mouseenter : 마우스가 들어왔을 때라는 이벤트
// event : 발생한 이벤트에 대한 정보가 담겨있는 객체
// event.target : 이벤트가 발생한 요소 (==this)
// console.log(event.target);
console.log(this);
$(event.target).css("backgroundColor", "pink").text("마우스 들어옴");
$(this).css("cursor", "pointer");
});
// mouseleave : 마우스가 요소를 떠났을 때
$("#test1").on({"mouseleave":function(event){
$(event.target).css("backgroundColor", "yellow").text("마우스 나감");
}, "click": function(){
alert("마우스 클릭됨.");
}});
// #btn 클릭 시 #test1 이벤트 모두 제거
$("#btn1").on("click", function(event){
$("#test1").off("mouseenter")
.off("mouseleave").off("click").text("이벤트 제거됨.")
.css("backgroundColor", "red")
.css("color", "white");
});
</script>
$(‘선택자’).on( events , selector , handler )
<h3>$('선택자').on( events , selector , handler )</h3>
<pre>
선택자를 기준으로 매개변수로 전달된 selector에 지정한 event 발생 시
해당 handler를 동적 적용시켜 이벤트 처리를 할 수 있음.
** 페이지 로딩 후 스크립트 코드로 인해 동적으로 추가된 요소는
일반적인 방법으로 이벤트 지정이 불가능함.
이 때 아래 이벤트 연결 방법을 사용하면됨.
$(document).on( events , selector , handler );
-> 정적이든, 동적이든 문서내에 작성된 요소 중
selector에 해당하는 요소에 events가 발생하는 경우
handler를 수행하라는 의미
</pre>
<div id="wrap">
<h2>클릭 시 h2 태그요소 추가</h2>
</div>
<script>
var count = 0;
//$("#wrap > h2").on("click", function(event){
$(document).on("click", "#wrap > h2", function(){
// 동적 추가 요소에 이벤트 부여
var h2 = "<h2>클릭으로 인해 추가됨-" + (count++) + "</h2>";
$(event.target).after(h2);
});
</script>
one() 메소드
<h3>one() 메소드</h3>
<p>이벤트에 대한 동작을 딱 한 번만 연결할 때 사용</p>
<button id="test4">클릭하세요</button>
<script>
$("#test4").one("click", function () {
alert("처음이자 마지막 이벤트 발생");
$(this).css("background-color", "red")
.text("클릭 불가")
.prop("disabled", true);
});
</script>
연습문제_1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제_1</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.area{
display: inline-block;
width: 100px;
}
.box{
width: 100%;
height: 100px;
border : 1px solid black;
text-align: center;
line-height: 100px;
cursor : pointer;
transition-duration: 0.5s;
}
.input-box{
width: 100%;
margin: auto;
}
</style>
</head>
<body>
<div class="area">
<div class="box"></div>
<input type="text" class="input-box">
</div>
<div class="area">
<div class="box"></div>
<input type="text" class="input-box">
</div>
<div class="area">
<div class="box"></div>
<input type="text" class="input-box">
</div>
<div class="area">
<div class="box"></div>
<input type="text" class="input-box">
</div>
<div class="area">
<div class="box"></div>
<input type="text" class="input-box">
</div>
<script>
// box 클래스 요소를 클릭했을 때
// box 클래스 요소의 배경색을
// 클릭된 box 바로 다음에 작성된 input 태그의 값으로 변경
$(".box").click(function(){
var boxColor = $(this).css("backgroundColor"); // getter 방법
// .css("backgroundColor") : 해당 요소의 스타일 중 배경색을 얻어옴
console.log(boxColor);
var inputColor = $(this).next().val();
// this : 이벤트가 발생한 요소
// $(this) : 이벤트가 발생한 요소를 선택
// .next() : 다음 형제 요소 선택
// .val() : input 태그에 작성된 값을 얻어옴
console.log(inputColor);
if(boxColor == "rgba(0, 0, 0, 0)") {
// 배경색이 지정되지 않았다면
$(this).css("backgroundColor", inputColor); // setter 방법
// $(this) : 이벤트가 발생한 요소 선택
// css("backgroundColor", inputColor)
// : 해당 요소의 스타일 중 배경색을 inputColor로 변경
} else {
// 배경색이 지정되어 있다면
$(this).css("backgroundColor", "rgba(0, 0, 0, 0)");
}
});
// input 태그에 색상명이 작성되는 경우
// 작성된 글자색으로 input 태그의 color 변경
$(".input-box").keyup(function() {
// input-box 클래스를 가진 요소에서
// 키보드가 올라오는 이벤트가 발생했을 때
$(this).css("color", $(this).val());
// $(this).val() : 이벤트가 발생한 요소의 값을 얻어옴
// css("color", $(this).val()
// : 이벤트가 발생한 요소의 값을 얻어와
// 해당 요소의 글자색을 얻어온 값으로 변경
});
</script>
</body>
</html>
연습문제_2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제_2</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
#wrap {
width: 202px;
height: 50px;
background-color: pink;
}
.added {
font-size: 35px;
font-weight: bold;
}
</style>
</head>
<body>
<button type="button" id="start">시작</button>
<button type="button" id="stop">정지</button>
<div id="wrap"></div>
<script>
$("#start").one("click", function () {
$(this).prop("disabled", true);
});
var timer; // setInterval을 저장하기 위한 변수
var count = 0;
$("#start").on("click", function () {
// wrap에 있는 모든 요소 제거
$("#wrap").empty();
// count = 0;
var timer = setInterval(function () {
var el = "<span class='added'>" + (count++) + "</span>";
if (count <= 10) {
$("#wrap").append(el);
} else {
// #wrap의 자식 요소(span 태그들) 모두 제거
$("#wrap").empty();
count = 0;
}
}, 100);
$("#stop").on("click", function () {
// 수행중인 setInterval (timer)을 멈춤
clearInterval(timer);
count = 0;
});
});
</script>
</body>
</html>
공유하기
Twitter Google+ LinkedIn
댓글남기기