728x90
반응형
제이쿼리
제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리
동적 html 데이터 삽입
| .append() | 선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가 |
| .prepend() | 선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가 |
| .appendTo() | 선택된 요소를 해당 요소의 마지막에 추가 |
| .prependTo() | 선택된 요소를 해당 요소의 첫번째에 추가 |
.append() 메소드
<!DOCTYPE html>
<html lang="ko">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<title>jQuery .append() </title>
<script>
$(function() {
$("button").on("click", function() {
$("#list").append("<li>새로 추가된 아이템</li>");
});
});
</script>
</head>
<body>
<h1>.append() 메소드</h1>
<ol id="list">
<li>첫 번째 아이템</li>
<li>두 번째 아이템</li>
</ol>
<button>아이템 추가</button>
</body>
</html>더보기
👉 실행 결과
.append() 메소드
1. 첫 번째 아이템
2. 두 번째 아이템
[아이템 추가] ✔[button]클릭시 → 3. 새로 추가된 아이템, 4. 새로 추가된 아이템 ... 순으로 계속 추가됨
.appendTo() 메소드
<!DOCTYPE html>
<html lang="ko">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<title>jQuery .appendTo() </title>
<script>
$(function() {
$("button").on("click", function() {
$("<span>jQuery입니다.</span>").appendTo("p");
});
});
</script>
</head>
<body>
<h1>.appendTo() 메소드</h1>
<p>안녕하세요.</p>
<button>아이템 추가</button>
</body>
</html>더보기
👉 실행 결과
.appendTo() 메소드
안녕하세요.
[아이템 추가]
✔[button]클릭시 → 안녕하세요. 바로 뒤로"jQuery입니다." 추가(안녕하세요.jQuery입니다.jQuery입니다.jQuery입니다.jQuery입니다.)
제이쿼리 셀렉터
| Selector | 설명 |
| :first | 첫 번째로 일치하는 요소를 가져옴 |
| :last | 마지막으로 일치하는 요소를 가져옴 |
| :even | 짝수번째 요소를 모두 가져옴 |
| :odd | 홀수번째 요소를 모두 가져옴 |
| :eq(index) | 인자로 전달된 index에 해당하는 요소를 모두 가져옴 |
| :gt(index) | 인자로 전달된 index 보다 큰 index를 가진 요소를 모두 가져옴 |
| :lt(index) | 인자로 전달된 index 보다 작은 index를 가진 요소를 모두 가져옴 |
| :has(selector) | 인자로 전달된 selector 요소를 하나 이상 포함하고 있는 요소를 가져옴 |
| :not(selector) | 인자로 전달된 selector와 일치하지 않는 모든 요소를 가져옴 |
반응형
'면접 준비 > 코딩테스트' 카테고리의 다른 글
| 더하기 사이클(백준 1110 파이썬) (0) | 2021.01.20 |
|---|---|
| palindrome (0) | 2021.01.19 |
| 자바의 메모리 구조 영역 (0) | 2020.12.16 |
| 추상클래스와 인터페이스 (0) | 2020.12.15 |
| GET과 POST의 비교 및 차이 (0) | 2020.12.14 |