<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery - 셀렉터</title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
<style>
body {
font-size: 17px;
font-family: Arial, Helvetica, sans-serif;
background: #f4f4f4;
line-height: 1.5em;
}
header {
background: #333;
color: white;
padding: 20px;
text-align: center;
border-bottom: 4px solid black;
margin-bottom: 10px;
}
#container {
width: 90%;
margin: auto;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>jQuery Dom 사용</h1>
</header>
<div>
<button id="btn1">버튼 1</button>
<p class="para1">첫번째 문장입니다.</p>
<p class="para2">두번째 문장입니다.</p>
<div id="myDiv"></div>
</div>
</html>
script
만약 p태그의 para1의 color와 background color을 바꾸자고 한다면
$("p.para1").css("color", "red");
$("p.para1").css("background", "yellowgreen");
이렇게 작성했을 것이다.
위의 두 줄을 한줄로 줄여서 아래와 같이 사용가능하다.
// css를 여러개 입력 시 객체형식으로 가능{키:'값',....}
$("p.para1").css({ color: "red", background: "yellowgreean" });
그리고 아예 css를 따로 만들어서 원하는 태그를 선택하여 클래스를 추가해 줄 수 있음.
예)
.myclass 추가
.myclass {
color: skyblue;
background-color: gray;
}
script
$("p.para2").addClass("myclass");
p태그의 para2에 myclass이름을 가진 클래스 추가
그리고 버튼을 눌러서 해당 클래스를 숨겼다가 다시 나타나게 할 수 있다. (toggle)
$("#btn1").on("click", function () {
$("p.para2").toggleClass("myclass");
});
버튼을 누르면 꺼지고 한번 더 누르면 켜짐
**태그 내 텍스트와 html 사용하기
$("#myDiv").text("글자만 넣기");
$("#myDiv").html("<div>첫번째</div> <div>두번째</div>");
리스트
<ul>
<li>리스트 아이템1</li>
<li>리스트 아이템2</li>
<li>리스트 아이템3</li>
<li>리스트 아이템4</li>
</ul> $("ul").append("<li>아이템추가append</li>"); //자식들 중 가장 아래에 추가
$("ul").prepend("<li>아이템추가prepend</li>"); //자식들 중 가장 위에 추가
순서를 정하는것도 가능함
//순서를 정함
$(".para1").appendTo(".para2"); // para1을 para2 아래로 보낸다.
//태그 제거
$("ul").empty(); //ul 안의 내용 제거
리스트 아이템 삭제 됨.
$("ul").detach(); //ul 태그까지 제거
empty()는 ul안의 li태그들만 삭제되는데, detach()를 사용하게되면 ul 태그까지 제거된다.
input 에 입력하고 enter를 클릭하면 list에 추가되는 코드 작성하기
input 태그를 ul태그 위에 작성 id="newItem"
<input type="text" id="newItem" />
<ul>
<li>리스트 아이템1</li>
<li>리스트 아이템2</li>
<li>리스트 아이템3</li>
<li>리스트 아이템4</li>
</ul>출력화면
script
$("#newItem").on("keyup", function (e) {
let code = e.which; //키 코드
if (code === 13 && e.target.value.length > 0) {
// 13은 enter를 뜻함, null이 아닌경우
$("ul").append("<li>" + e.target.value + "</li>"); // ul 자식들 중 가장 아래에 값 추가
e.target.value = ""; //리스트에 추가하고 input 값 공백으로 변경
}
});
'FRONTEND > 기타' 카테고리의 다른 글
| 로또 번호 가져오기 (0) | 2023.10.06 |
|---|---|
| jQuery 를 활용해 AJAX 사용 load() (0) | 2023.10.06 |
| jQuery - event (0) | 2023.10.05 |
| jQuery ? (1) | 2023.10.05 |
| id로 DB검색하여 결과 출력 (0) | 2023.10.04 |