반응형
$(’li’)
<body>에 있는 요소들 중에서 <li>요소에 접근
$(’<li>’)
<body>에 <li>요소를 새로 생성
여러개의 선택자 선택하기
$(’#e_sdate, #e_edate, #e_date_dang, .class, #id, input, span’)
each() 함수 → for in 반복문과 같음
let dan = 7;
for(let i=1; i<=9; i++) {
// $("li") <body>에 있는 요소들 중에서 <li>요소에 접근
// $("<li>") <body>에 새로운 <li>요소를 생성
$("<li>").text(dan + " * " + i + " = " + (dan*i)).appendTo('#displayList')
}
//'li' 요소들의 text 출력
$('li').each(function(){
let result = $(this).text()
alert(result)
})
⭐익명 함수(()⇒{})는 this 키워드를 사용할 수 없다!
→ this키워드 대신 이벤트 발생객체의 currentTarget 속성을 이용해야함
// 선언적함수 사용
$("button").click(function(){
let idx = $(this).index()
let color = $(this).css('background-color')
let txt = $(this).text()
}
// 익명함수 사용
$("button").click((e)=>{
let idx = $(e.currentTarget).index()
let color = $(e.currentTarget).css('background-color')
let txt = $(e.currentTarget).text()
}
append() 함수
- 현재 대상의 엘리먼트의 자식 앨리먼트들의 맨끝에 새로운 엘리먼트를 추가함
- 적용되거나, 적용받는 엘리먼트가 닫는 태그가 없을시 자동으로 닫는태그가 생성됨
부모태그에 자식태그 적용하는 방법
- 부모.append(자식)
- 자식.appendTo(부모)
let $table = $("<table border='1'></table>")
let $tr1 = $('<tr><td>사과</td><td>바나나</td></tr>')
let $tr2 = $('<tr>')
let $td1 = $('<td>수박</td>')
let $td2 = $('<td>').text('메론')
alert($table)
// $tr2변수에 $td1, $td2를 마지막에 자식으로 추가
$tr2.append($td1).prepend($td2) //메론, 수박 순으로 추가됨
// $table변수에 자식으로 추가
$table.prepend($tr1, $tr2)
// $table변수에 자식으로 추가
$table.prepend($table)
<table border="1">
<tr>
<td>사과</td>
<td>바나나</td>
</tr>
<tr>
<td>메론</td> <!-- </td> 자동생성 -->
<td>수박</td>
</tr> <!-- </tr> 자동생성 -->
</table>
요소 탐색
<table border="1">
<tbody>
<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>
</tbody>
</table>
A요소들.eq(인덱스 번호) : A요소들 중 인덱스번호로 요소 선택
A요소.prev() : 선택된 A요소의 이전요소 선택
A요소.next() : 선택된 A요소의 다음요소 선택
A요소.parent() : A요소의 부모요소 선택
A요소.child() : A요소의 하위요소들 선택
// DOM (Document Object Model) 구조에서 원하는 요소까지 이동하고 찾아가는 것
$('td').eq(2).css('background', 'red')
.prev().css('background', 'yellow') //이전요소
.parent() //첫번째 tr
.next() //두번째 tr
.children() //두번째 자손 td -> 4, 5, 6
.eq(1).css('background', 'blue') //5
class 추가하기
$(선택자).addClass('클래스명') → 해당 요소에 클래스 추가
$(선택자).removeClass('클래스명') → 해당 요소에 클래스 삭제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>10_addClass.html</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosanskr.css"/>
<script src="jquery-3.6.4.min.js"></script>
<style>
/* 기본 틀 */
#box {
width:620px;
height:465px;
border:1px solid #9e9e9e;
margin:-233.5px 0 0 -310px;
left:50%;
top:50%;
position: fixed;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
overflow: hidden;
}
/* button의 기본 상태 */
#startBtn {
width:620px;
height:465px;
position: absolute;
font:700 100px "Noto Sans KR",sans-serif;
background-color: pink;
color: white;
border: 0;
cursor: pointer;
/*button에 추가된 class를 제거할 경우 동작 : 화면 왼쪽에서 나타남*/
left: 0;
/*button에 추가된 class를 제거할 경우 동작 : 부드럽게*/
transition: .4s ease;
}
/* 기본 CSS 3 */
#startBtn:hover {
background: skyblue; /*마우스 호버시 배경컬러 바뀜*/
}
/* 기본 CSS 4 */
img {
/*투명 상태로 존재함*/
opacity: 0;
/*button에 추가된 class를 제거할 경우 동작 : img크기 0%로 축소됨*/
transform: scale(0);
transition: .4s ease;
}
/* 4) 클래스가 추가되며 만들어진 CSS */
#box.open #startBtn {
left: -100%; /*버튼 화면 왼쪽으로 사라짐*/
transition: .4s ease;
}
/* 5) 클래스가 추가되며 만들어진 CSS */
#box.open img {
opacity: 1; /*불투명*/
transform: scale(1); /*이미지 사이즈 100%로 확장됨*/
transition: .4s ease;
}
</style>
</head>
<body>
<div id="box">
<button id="startBtn">스타트!</button>
<img src="../images/friends.jpg" alt="KAKAO FRIENDS">
</div>
<script>
$('#startBtn').click(function(){
$('#box').addClass('open') //버튼 클릭시 클래스 생성
})
$('img').click(function(){
$('#box').removeClass('open') //이미지 클릭시 클래스 제거
})
</script>
</body>
</html>반응형
'Front-End > JavaScript' 카테고리의 다른 글
| AJAX(1) (0) | 2023.03.31 |
|---|---|
| jQuery(1) (0) | 2023.03.29 |
| jQuery 예습 (0) | 2023.03.28 |
댓글