this / $(this)
$('#sh > input').not(this).removeClass('btn');
=> this는 자바스크립트이고 $(this) 제이쿼리 문법이다.
=> this의 경우 해당 이벤트가 발생한 요소를 표시해주고
$(this)는 이벤트가 발생하면 발생한 태그를 Object로 보여준다는게 다른점이다.
=> this와 같은 데이터를 갖기 위해서는 $(this)[0] 을 사용하면 된다.
this === $(this)[0]
[결과]
① console.log(this); 결과
<input type="button" value="보이기" class="btn">
② console.log($(this)); 결과
▼ S.fn.init [input]
▶ 0: input.btn
length: 1
▶ [[Prototype]]: Object(0)
show/hide
exam02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.btn {
background: cyan;
}
</style>
</head>
<body>
<h1>show/hide</h1>
<div id="sh">
<input type="button" class="btn" value="보이기"/>
<input type="button" value="숨기기"/>
<input type="button" value="토글"/>
<div>
<img src="../image/1.jpg" width="500px" height="300px"/>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('div#sh > input:eq(0)').click(function(){
$('div#sh img').show(200); //여기서는 > 사용하면 안된다.
});
$('div#sh > input:eq(1)').click(function(){
$('div#sh img').hide(200);
});
$('div#sh > input:eq(2)').click(function(){
$('div#sh img').toggle(200);
});
});
</script>
</body>
</html>[문제] 클릭할 때마다 버튼의 색깔을 cyan으로 바꾸고, 나머지는 원래 색으로 바뀌게 한다.
- 방법1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.btn {
background: cyan;
}
</style>
</head>
<body>
<h1>show/hide</h1>
<div id="sh">
<input type="button" class="btn" value="보이기"/>
<input type="button" value="숨기기"/>
<input type="button" value="토글"/>
<div>
<img src="../image/1.jpg" width="500px" height="300px"/>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('div#sh > input:eq(0)').click(function(){
$('div#sh img').show(200); //여기서는 > 사용하면 안된다.
$(this).addClass('btn');
$('input:eq(1)').removeClass('btn');
$('input:eq(2)').removeClass('btn');
});
$('div#sh > input:eq(1)').click(function(){
$('div#sh img').hide(200);
$(this).addClass('btn');
$('input:eq(0)').removeClass('btn');
$('input:eq(2)').removeClass('btn');
});
$('div#sh > input:eq(2)').click(function(){
$('div#sh img').toggle(200);
$(this).addClass('btn');
$('input:eq(0)').removeClass('btn');
$('input:eq(1)').removeClass('btn');
});
});
</script>
</body>
</html>- 방법2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.btn {
background: cyan;
}
</style>
</head>
<body>
<h1>show/hide</h1>
<div id="sh">
<input type="button" class="btn" value="보이기"/>
<input type="button" value="숨기기"/>
<input type="button" value="토글"/>
<div>
<img src="../image/1.jpg" width="500px" height="300px"/>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('div#sh > input:eq(0)').click(function(){
$('div#sh img').show(200); //여기서는 > 사용하면 안된다.
});
$('div#sh > input:eq(1)').click(function(){
$('div#sh img').hide(200);
});
$('div#sh > input:eq(2)').click(function(){
$('div#sh img').toggle(200);
});
$('div#sh input').click(function(){
//클릭한 버튼에 class="btn" 속성을 추가
$(this).addClass('btn');
//클릭한 버튼을 제외한 모든 버튼에서 class="btn" 속성을 제거
$('div#sh input').not(this).removeClass('btn');
});
});
</script>
</body>
</html>요약
- $(this)는 클릭된 요소 하나만을 가리키므로, $(this).not(this)는 클릭된 요소만 포함하는 jQuery 객체에서 아무 것도 선택하지 않게 된다. 따라서 결과는 빈 jQuery 객체가 되어 의도한 대로 동작하지 않는다.
- 올바른 방식은 모든 버튼을 선택한 후 클릭된 버튼을 제외하는 것이다
- : $('div#sh input').not(this).removeClass('btn');.
fade
exam03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul {
width: 700px;
margin: auto;
list-style: none;
}
ul li {
float: left;
}
ul li img {
border: 0;
margin: 10px;
}
div#glayLayer {
display: none;
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: black;
/* filter: alpha(opacity=60); */
opacity: 0.60; /* 0.0 ~ 1.0, 값이 작을수록 더 투명하게 만든다. */
}
#overLayer {
display: none;
position: fixed;
top: 50%;
left: 50%;
margin-top: -244px; /* 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힌다. */
margin-left: -325px;
}
</style>
</head>
<body>
<div id="glayLayer"></div>
<div id="overLayer"></div>
<ul>
<li>
<a href="../image/photo1.jpg" class="modal">
<img src="../image/photo1_thum.jpg" alt="샹드리아" />
</a>
</li>
<li>
<a href="../image/photo2.jpg" class="modal">
<img src="../image/photo2_thum.jpg" alt="장미" />
</a>
</li>
<li>
<a href="../image/photo3.jpg" class="modal">
<img src="../image/photo3_thum.jpg" alt="바다" />
</a>
</li>
<li>
<a href="../image/photo4.jpg" class="modal">
<img src="../image/photo4_thum.jpg" alt="문" />
</a>
</li>
<li>
<a href="../image/photo5.jpg" class="modal">
<img src="../image/photo5_thum.jpg" alt="바다" />
</a>
</li>
<li>
<a href="../image/photo6.jpg" class="modal">
<img src="../image/photo6_thum.jpg" alt="꽃" />
</a>
</li>
<li>
<a href="../image/photo7.jpg" class="modal">
<img src="../image/photo7_thum.jpg" alt="하늘" />
</a>
</li>
<li>
<a href="../image/photo8.jpg" class="modal">
<img src="../image/photo8_thum.jpg" alt="건물" />
</a>
</li>
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('a.modal').click(function(){
$('#glayLayer').fadeIn(300);
$('#overLayer').fadeIn(300);
$('#overLayer').html('<img src="' + $(this).attr('href') + '">')
//$('#overLayer').html(`<img src="${$(this).attr('href')}">`);
return false;
});
$('#glayLayer').click(function(){
$(this).fadeOut(300);
$('#overLayer').fadeOut(300);
});
});
</script>
</body>
</html>- 모든 애니메이션 관련 함수들은 시간값 외에 두 번째 파라미터로 함수를 지정할 수 있다.
- 이 함수들에 애니메이션 처리가 종료된 후에 동작할 내용을 담는다.
예) show(time [, function() {......}]);
exan04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#thumb {
padding: 0;
margin: 0;
list-style: none;
width: 100px;
float: left;
}
#thumb li {
padding: 5px 10px;
}
#thumb img {
width: 80px;
height: 80px;
}
#view {
padding: 5px 0;
width: 360px;
height: 270px;
float: left;
}
#view img {
width: 100%;
height: 100%;
}
</style>
</head><body>
<ul id="thumb">
<li>
<a href="../image/1.jpg" class="item"><img src="../image/1.jpg"></a>
</li>
<li>
<a href="../image/2.jpg" class="item"><img src="../image/2.jpg"></a>
</li>
<li>
<a href="../image/3.jpg" class="item"><img src="../image/3.jpg"></a>
</li>
</ul>
<div id="view"><img src="../image/1.jpg" /></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('.item').click(function(){
let image = $(this).attr('href');
$('#view').hide(500, function(){
$('#view img').attr('src', image);
$(this).show(500);
}); //사라지고나서 뒤처리도 할 수 있다.
return false;
});
});
</script>
</body>
</html>
Animate
animate() 함수를 사용한 CSS 속성의 애니메이션 처리
- 좀 더 다이나믹한 애니메이션을 구현할 수 있다.
- animate() 함수는 수치값을 지정하는 CSS 속성들을 제어하여 애니메이션 효과를 만들어 낸다.
- 구조
animate(properties [, duration][, easing][, complete])
① properties
- 움직임을 만들어 낼수 있는 CSS 속성들. json 형식으로 기술된다.
② duration
- 애니메이션의 지속시간 설정
③ easing
- 움직임에 변화를 줄 수 있는 속성.
- swing : 끝점에 가서 속도가 살짝 느려짐
- linear : 균일한 속도 유지
④ complete
- 움직임이 멈춘 후 실행될 속성.
- 움직임이 완료된 다음 이 속성에 지정된 함수가 실행된다.
exam05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#box {
border: 1px solid blue;
background: #98bf21;
height: 100px;
width: 100px;
position: absolute; /* 부모 div 영역 밖으로 밀려 나간다 */
left: 0;
}
</style>
</head>
<body>
<h1>Animate</h1>
<button>Reset</button>
<button>Ani1</button>
<button>Ani2</button>
<button>Ani3</button>
<button>Ani4</button>
<div id="animation-area" style="border: 1px solid red;">
<div id="box"></div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('button:eq(0)').click(function(){
$('#animation-area').html('<div id="box"></div>');
});
//왼쪽으로부터 250px만큼 div 이동
$('button:eq(1)').click(function(){
$('#box').animate({
'left': '250px' //CSS는 JSON 형식으로 표현 (단위가 문자가 들어가면 ''을 쳐야한다.)
}, 1000, 'swing', function(){
alert('애니메이션 종료')
});
});
//왼쪽으로부터 250px 이동하고, 높이와 너비를 150px에 하기
$('button:eq(2)').click(function(){
$('#box').animate({ //JSON 형식의 CSS 속성을 여러 개 나열할 수 있다.
'left': '250px',
'width': '150px',
'height': '150px'
}); //CSS 속성을 제외한 나머지 파라메터들은 생략 가능
});
//왼쪽으로부터 50px씩 이동하면서, 높이와 너비를 50px씩 크게 하기
$('button:eq(3)').click(function(){
$('#box').animate({
'left': '+=50px',
'width': '+=50px',
'height': '+=50px'
}, 300);
});
//애니메이션 연속 호출
$('button:eq(4)').click(function(){
var div = $('#box');
//애니메이션을 연속적으로 사용하면,
//여러 개의 장면이 순차적으로 실행된다.
div.animate({ height: '300px' }, 1000);
div.animate({ width: '300px' }, 500);
div.animate({ height: '100px' }, 800);
div.animate({ width: '100px' }, 300);
});
});
</script>
</body>
</html>
Folder: 06_jQueryDOM
요소의 탐색과 생성
- jQuery는 특정 HTML 요소에 대한 객체를 기준으로 그 주변 요소나 태그의 트리 구조를 탐색할 수 있다.
HTML
HEAD BODY
META TITLE TABLE
- jQuery는 웹브라우저에 보여지는 HTML 태그 안에
HTML 요소를 생성하여 포함시키도록 하는 기능을 지원한다.
DOM (Document Object Model)
- DOM은 HTML과 XML 문서에 대한 구조적 정보를 제공하는 양식이다.
즉, DOM이 HTML과 XML 문서의 뼈대를 의미한다.
- DOM은 문서구조나 외양 및 내용을 바꿀 수 있도록 프로그램에서 접근할 수있는 방법을
제공하는 인터페이스를 말한다.
- DOM은 프로퍼티와 메소드를 가지는 객체와 노드의 트리형 구조로 표현되는데,
이 구조는 스크립트나 다른 언어에서 웹페이지에 접근할 때 필수적이다.
(1) DOM의 구성요소
① Element : (= HTML 태그) 하나의 태그 요소를 의미한다.
② Attribute : (= HTML 태그 속성) 하나의 Element에 속해 있는 속성들을 의미한다.
③ Node : 하나의 Element에서 시작되는 트리 구조,
하나의 노드 안에는 여러개의 노드가 포함되어 있을 수 있다.
(2) DOM 트리 구조
DOM 객체의 제어
- 다이나믹한 대화형 웹페이지 제작에서 DOM을 제어하는 것은 중요하다.
- jQuery의 기능들도 모두 DOM을 제어했기 때문에 가능한 것이다.
- jQuery가 제공하는 5개 함수를 통해, 하나의 요소를 기준으로 상대적으로 탐색할 수 있다.
① next() : 현재 요소를 기준으로 다음 요소를 리턴 한다.
② prev() : 현재 요소를 기준으로 이전 요소를 리턴 한다.
③ parent() : 현재 요소를 기준으로 상위 요소를 리턴 한다.
④ children() : 현재 요소를 기준으로 하위 요소를 배열로 리턴 한다.
⑤ eq(n) : 현재 요소를 기준으로 하위 요소 중 n번째 요소를 선택한다. n은 0부터 시작한다.
조상과 자손의 검색
(1) 직계 자손이나 항렬이 같은 친척 찾기
- next(), prev(), parent(), childrun(), eq(n) 함수들은 특정 요소와 인접해 있는 다른 요소들을
탐색한다. 즉 이 함수들은 HTML 태그의 Node를 타고 다니는 것과 같은 효과를 갖는다.
(2) 가까운 조상 찾기
- parents() : HTML 요소가 인접해 있지 않더라도, 현재 객체 요소의 상위 태그 중에서
파라미터로 전달된 셀렉터가 가리키는 가장 가까운 요소를 찾는다.
- 사용법
$("CSS셀렉터").parents("CSS셀렉터");
(3) 가까운 자식 찾기
- find() : HTML 요소가 인접해 있지 않더라도, 현재 객체 요소의 하위 태그 중에서
파라미터로 전달된 셀렉터가 가리키는 가장 가까운 요소를 검색한다.
- 사용법
$("CSS셀렉터").find("CSS셀렉터");
exam01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
border-collapse: collapse;
}
td {
width: 50px;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>1번</td>
<td>2번</td>
<td>3번</td>
</tr>
<tr>
<td>4번</td>
<td>5번</td>
<td>6번</td>
</tr>
<tr>
<td>7번</td>
<td>8번</td>
<td>9번</td>
</tr>
</table>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
//$('td:eq(4)').css('background', '#ff0000');
$('td').eq(4).css('background', '#ff0000');
});
</script>
</body>
</html>
$('td:eq(4)').next().css('background', '#00ff00'); $('td:eq(4)').prev().css('background', '#0000ff');
$('td:eq(4)').parent().css('color', '#ffffff');
$('td:eq(4)').parent().next().css('color', '#ff0000');
$('td:eq(4)').parent().prev().css('color', '#0000ff');
$('td:eq(4)').parent().next().children().css('text-decoration', 'underline');
$('td:eq(4)').parent().next().children().eq(1).css('font-weight', 'bold');
exam02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
width: 400px;
height: 300px;
padding-top: 20px;
background-size: 100% 100%;
}
ul {
padding: 10px 20px;
background-color: rgba(255, 255, 255, 0.6)
}
</style>
</head>
<body>
<div>
<ul>
<li class="item">
<a href="#">../image/1.jpg</a>
</li>
<li class="item">
<a href="#">../image/2.jpg</a>
</li>
<li class="item">
<a href="#">../image/3.jpg</a>
</li>
</ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html>
부모요소 선택 또는 찾는 방법
① parent()
② parents() - 선택한 요소의 상위(조상) 요소를 모두 선택한다.
parents("CSS셀렉터") - 선택자에 해당하는 상위 요소만을 선택할 수도 있다.
③ closest("CSS셀렉터")
- 자신을 포함한 상위 요소 중에서 전달받은 선택자에 해당하는 요소의 집합에서
가장 첫 번째 요소를 선택한다.
- .parents() 메소드와 비슷하지만, 해당 요소의 상위 요소뿐만 아니라
해당 요소 자신까지도 포함하여 탐색한다는 점이 다르다.
<script type="text/javascript">
$(function () {
$('.item a').click(function(){
let index = $(this).parent().index();
let image = ['../image/1.jpg', '../image/2.jpg', '../image/3.jpg'];
$(this).parents('div').css({
'background-image': 'url(' + image[index] + ')'
});
});
});
</script>
SubMenu
exam03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul.menu li {
float: left;
width: 179px;
height: 48px;
background: url("../image/btn.png");
}
ul.menu li a {
display: block;
width: 100%;
height: 100%;
line-height: 48px;
text-align: center;
font-weight: bold;
color: #CFDFB5;
text-decoration: none;
}
ul.menu li a:hover {
background: url("../image/btn_over.png");
}
ul.menu:after {
content: '';
display: block;
clear: both;
float: none;
}
</style>
</head>
<body>
<ul class="menu">
<li>
<a href="#">메뉴A</a>
<ul class="sub">
<li>
<a href="#">서브메뉴A</a>
</li>
<li>
<a href="#">서브메뉴A</a>
</li>
<li>
<a href="#">서브메뉴A</a>
</li>
</ul>
</li>
<li>
<a href="#">메뉴B</a>
<ul class="sub">
<li>
<a href="#">서브메뉴B</a>
</li>
<li>
<a href="#">서브메뉴B</a>
</li>
<li>
<a href="#">서브메뉴B</a>
</li>
</ul>
</li>
<li>
<a href="#">메뉴C</a>
<ul class="sub">
<li>
<a href="#">서브메뉴C</a>
</li>
<li>
<a href="#">서브메뉴C</a>
</li>
<li>
<a href="#">서브메뉴C</a>
</li>
</ul>
</li>
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html>
<script type="text/javascript">
$(function () {
//모든 서브메뉴 숨기기
$('.sub').hide();
});
</script>
<script type="text/javascript">
$(function () {
//모든 서브메뉴 숨기기
$('ul.menu > li > .sub').hide();
});
</script>이렇게 하면 누구라는게 콕 찝어서 적용된다.
$('ul.menu > li').hover(function(){
$(this).find('.sub').slideDown(300);
}, function(){
$(this).find('.sub').slideUp(300);
})
txt파일 보이기 숨기기
exam04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
background: #252422;
}
ul {
padding: 0;
margin: 50px auto;
list-style: none;
width: 800px;
}
.title {
padding: 0;
margin: 0;
}
.title > a {
display: block;
padding-top: 12px;
font-size: 14px;
text-indent: 12px;
text-decoration: none;
font-weight: bold;
color: white;
height: 23px;
background: url('../image/background.jpg');
}
.selected {
background: url('../image/background-selected.jpg') !important;
}
.content {
margin: 0;
background: #D4D0C8;
padding: 10px;
height: 200px;
overflow-y: auto;
}
</style>
</head>
<body>
<ul>
<li class="collapsible">
<h2 class="title"><a href="../txt/html5.txt">HTML5</a></h2>
<p class="content"></p>
</li>
<li class="collapsible">
<h2 class="title"><a href="../txt/jQuery.txt">jQuery</a></h2>
<p class="content"></p>
</li>
<li class="collapsible">
<h2 class="title"><a href="../txt/bootstrap.txt">bootstrap</a></h2>
<p class="content"></p>
</li>
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html>
<script type="text/javascript">
$(function () {
//첫 번째 항목이 펼쳐져 있도록 처리한다.
//탭의 내용은 첫 번째 항목 안의 <a>태그가 가리키는 txt 파일을 읽어와서 출력시킨다.
$('.collapsible:eq(0) .content').load($('.collapsible:eq(0) .title a').attr('href'));
//첫 번째 항목의 <a>에게 class="selected" 속성을 적용하여 준다.
//실행하면 첫 번째 항목이 오렌지색으로 바뀐다.
$('.collapsible:eq(0) a').addClass('selected');
//첫 번째 항목 이외의 나머지 항목들 안에 있는 class="content" 속성을 숨긴다.
$('.collapsible').not(':eq(0)').find('.content').hide();
});
</script>
<script type="text/javascript">
$(function () {
//첫 번째 항목이 펼쳐져 있도록 처리한다.
//탭의 내용은 첫 번째 항목 안의 <a>태그가 가리키는 txt 파일을 읽어와서 출력시킨다.
$('.collapsible:eq(0) .content').load($('.collapsible:eq(0) .title a').attr('href'));
//첫 번째 항목의 <a>에게 class="selected" 속성을 적용하여 준다.
//실행하면 첫 번째 항목이 오렌지색으로 바뀐다.
$('.collapsible:eq(0) a').addClass('selected');
//첫 번째 항목 이외의 나머지 항목들 안에 있는 class="content" 속성을 숨긴다.
$('.collapsible').not(':eq(0)').find('.content').hide();
$('.collapsible .title a').click(function(){
$(this).toggleClass('selected');
//클릭한 나 자신을 제외한 나머지 링크들은 class="selected" 속성을 무조건 삭제한다.
$('.collapsible .title a').not(this).removeClass('selected');
//펼칠 대상 검색
let target = $(this).parent().next();
//나머지 대상들을 검색
let other = $('.content').not(target);
target.slideToggle(300);
other.slideUp(300);
target.load($(this).attr('href'));
return false;
});
});
</script>
$().css('display')
=> display 속성은 요소를 어떻게 보여줄지를 결정한다
① none : 보이지 않음
② block
③ inline
④ inline-block
append
A.append(B) => A에 B를 추가한다.
B.appendTo(A) => B를 A에 추가한다.
exam05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" value="추가"/>
<input type="button" value="삭제"/>
<!-- 동적 요소 -->
<ul></ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
});
</script>
</body>
</html>
<script type="text/javascript">
$(function () {
let i=1;
$('input:eq(0)').click(function(){
let li1 = $('<li>').css('color', 'red').html('추가 항목' + (i++));//<li> 태그 생성
$('ul').append(li1);
});
});
</script>
한 번에 3개씩 추가된다.
<script type="text/javascript">
$(function () {
let i=1;
$('input:eq(0)').click(function(){
let li1 = $('<li>').css('color', 'red').html('추가 항목' + (i++));//<li> 태그 생성
let li2 = $('<li>').css('color', 'green').html('추가 항목' + (i++));//<li> 태그 생성
let li3 = $('<li>').css('color', 'blue').html('추가 항목' + (i++));//<li> 태그 생성
$('ul').append(li1);
$('ul').append(li2);
$(li3).appendTo('ul');
});
});
</script>
싹 지워준다.
$('input:eq(1)').click(function(){
$('ul').empty();
});
삭제되고나서 번호는 그대로인 것을 확인할 수 있다.
bind 함수
$("요소").bind("이벤트", function() {
... 이벤트 처리 ...
});
$("요소").bind( "이벤트1 이벤트2 이벤트3", function() { //이벤트 이름을 공백으로 구분하여 여러개 지정
... 이벤트 처리 ...
});
$("요소").bind({
"이벤트1" : function() { ... 이벤트 처리 ...},
"이벤트2" : function() { ... 이벤트 처리 ...},
"이벤트3" : function() { ... 이벤트 처리 ...}
});
exam06.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
color: #333;}
body {
padding: 20px 30px;}
#login fieldset {
width: 270px;
padding: 15px;
border: 1px solid #7BAEB5;
position: relative;
}
#login fieldset legend {
display: none;
}
#login label {
display: inline-block;
width: 80px;
font-size: 14px;
font-weight: bold;
padding-left: 10px;
margin-bottom: 10px;
}
#login input[type='text'], #login input[type='password'] {
border: 1px solid #ccc;
padding: 3px 10px;
width: 150px;
vertical-align: middle;
font-size: 12px;
line-height: 150%;
}
#login input[type='submit'] {
width: 270px;
height: 20px;
}
.active {
border: 1px solid #f00 !important;
background-color: #00ffff;
}
#login {
position: relative;
}
#login fieldset .loader {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
display: none;
}
#login .loader img {
position: absolute;
left: 50%;
top: 50%;
margin-left: -5px;
margin-top: -5px;
}
</style>
</head>
<body>
<form id="login">
<fieldset>
<legend>로그인</legend>
<div>
<label for="user_id">아이디</label>
<input type="text" name="user_id" id="user_id"/>
</div>
<div>
<label for="user_password">비밀번호</label>
<input type="password" name="user_password" id="user_password"/>
<div id="pwdDiv" style="color: red; font-size: 8pt; font-weight: bold;"></div>
</div>
<div>
<input type="submit" value="로그인" />
</div>
<div class="loader"><img src="../image/loader.gif" /></div>
</fieldset>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html>
<script type="text/javascript">
$(function () {
$('#user_id, #user_password').bind({
'focus': function(){
$(this).addClass('active');
},
'blur': function(){
$(this).removeClass('active');
}
});
});
</script>
$('#login').bind('submit', function(){
if(!$('#user_id').val()){
alert('아이디를 입력하세요');
$('#user_id').focus();
return false;
}
return false;
});
$('#login').bind('submit', function(){
if(!$('#user_id').val()){
//alert('아이디를 입력하세요');
$('#pwdDiv').text('아이디를 입력하세요')
$('#user_id').focus();
return false;
}
return false;
});
if($('#user_password').val() == ''){
$('#pwdDiv').text('비밀번호를 입력하세요');
$('#user_password').focus();
return false;
}
$('#login .loader').show();
return false;
//나중에 아이디와 비밀번호를 서버에 보내는 작업을 하면된다.
setTimeout(function(){
alert('안녕하세요 ' + $('#user_id').val() + '님');
$('#login .loader').hide();
}, 1000);
exam07.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="demo2">
<button>add</button>
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html>
클릭하면 안에 있는 text가 창에 뜬다.
<script type="text/javascript">
$(function () {
$('#demo2 li').bind('click', function(){
alert($(this).text());
});
});
</script>
- 방법1
$('#demo2 button').bind('click', function(){
let li2 = $('<li>').html('added');
$('ul').append(li2);
});- 방법2
$('#demo2 button').bind('click', function(){
//let li2 = $('<li>').html('added');
//$('ul').append(li2);
$('#demo2 ul').append('<li>added</li');
added를 누르면 alert 창이 떠서 내용을 가져오는 이벤트가 먹히지 않는다.
나중에 들어온 애들한테는 이벤트가 걸리지 않는다.
위에 코드는 주석걸고
$('#demo2 button').bind('click', function(){
$('#demo2 li').unbind('click');
$('#demo2 ul').append('<li>added</li>').find($('li')).click(function(){
alert($(this).text());
});
});
bind가 deprecated 되었으므로 비추천, bind를 대신해서 on으로 사용한다.
bind로 연결된 이벤트는 unbind()로 제거하고, on으로 연결된 이벤트는 off()로 제거한다.
on
bind는 deprecate 되고 on를 사용하라고 권장
$(선택자).on( events [,selector] [,data], handler( eventObject ) ) -- handler는 처리부라 생각하기
$(선택자).on(이벤트타입 [,자손선택자] [,데이터], 핸들러())
events : 공백으로 구분된 하나 이상의 이벤트 타입과 옵션인 네임스페이스.
selector : 이벤트가 발생할 요소들의 자손을 찾는 선택자.
선택자가 null 이거나 생략됐다면 이벤트는 선택된 요소에 한해서 반응한다.
data : 이벤트가 발생할 때 핸들러에 전달할 데이터
handler(eventObject) : 이벤트가 발생되면 실행될 기능.
false를 반환하는 함수라면 간단하게 false를 직접 인자로 하면 된다.
exam08.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="demo2">
<button>add</button>
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#demo2 button').on('click', function(){
$('#demo2 ul').append('<li>added</li');
});
/* $('#demo2 li').on('click', function(){
alert($(this).text());
}); */
//$(조상).on('이벤트', 후손, function(){});
//$('#demo2').on('click', 'li', function(){});
$(document).on('click', 'li', function(){
alert($(this).text());
});
});
</script>
</body>
</html>
'HTML CSS JS' 카테고리의 다른 글
| DAY 40 - jQueryAJax (2024.08.28) (3) | 2024.08.28 |
|---|---|
| DAY 39 - jQuery / jQueryAJax (2024.08.27) (0) | 2024.08.27 |
| DAY 37 - jQuery (2024.08.23) (0) | 2024.08.23 |
| DAY 36 - jQuery (2024.08.22) (0) | 2024.08.22 |
| DAY 35 - JS - 템플릿리터럴 / 연산자 / 화살표함수 / 시간 / onclick / history (2024.08.21) (0) | 2024.08.21 |
