여러 가지 함수 사용 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<style type="text/css">
.aaa {
color:#F00;
}
.ccc {
padding:10px;
border:#000 2px solid;
background-color: red;
}
.q16_a {
text-decoration:underline;
color:#00F;
}
.q19_b{
text-decoration:overline;
color:#ff0;
}
#q20 {
background:#FFF;
width:100px;
height:100px;
}
</style>
</head>
<body>
<p id="q01">Hello JQuery</p>
<script type="text/javascript">
$(function () {
$("#q01").css('color', 'red');
});
</script>
<p id="q02">Hello JQuery</p>
<script type="text/javascript">
$(function () {
// $("#q02").css("color", "blue");
// $("#q02").css("background", "#ffff00");
$("#q02").css({ "color":"blue", "background":"#ffff00" });
});
</script>
<p id="q03"></p>
<script type="text/javascript">
$(function () {
$("#q03").text("JQuery");
});
</script>
<p id="q04">하이</p>
<script type="text/javascript">
$(function () {
$("#q04").html("<a href='#'>안녕하세요</a>");
});
</script>
<ul id="q05">
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
</ul>
<script type="text/javascript">
$(function () {
$("#q05").addClass("aaa");
});
</script>
<ul id="q06">
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
</ul>
<script type="text/javascript">
$(function () {
$("#q06 li").remove();
});
</script>
<p id="q07" style="color:red">hello world</p>
<p id="q08"></p>
<script type="text/javascript">
$(function () {
let color = $("#q07").css("color");
$("#q08").text(color);
});
</script>
<p id="q09">반드시</p>
<script type="text/javascript">
$(function () { //prepend 앞쪽에 추가
$("#q09").prepend("나는 성공한다");
});
</script>
<p id="q10">나는 성공한다. 내 이름은 </p>
<script type="text/javascript">
$(function () { // append 뒤쪽에 추가
$("#q10").append("윤필용");
});
</script>
<ul id="q11">
<li>커피</li>
</ul>
<script type="text/javascript">
$(function () {
$("#q11 li").before("<li>홍차</li>");
});
</script>
<ul id="q12">
<li>커피</li>
<li>카푸치노</li>
</ul>
<script type="text/javascript">
$(function () {
//$('#q12 li').after('<li>홍차</li>'); //이렇게 하면 커피뒤에도 추가가되고, 카푸치노 뒤에도 추가가 된다.
//.eq(-1).after : 같은게 없도록 추가
$("#q12 li").eq(-1).after("<li>홍차</li>");
});
</script>
<p id="q13">최선을 다해서</p>
<script type="text/javascript">
$(function () { // wrap: p태그를 div태그로 감싼다.
$("#q13").wrap("<div class='ccc'></div>");
});
</script>
<div class="ccc">
<p id="q14">최선을 다해서</p>
</div>
<script type="text/javascript">
$(function () { // unwrap: 감싼걸 벗긴다.
$("#q14").unwrap('div.ccc');
})
</script>
<p class="q15">가가가</p>
<p>나나나</p>
<p class="q15">다다다</p>
<p>라라라</p>
<p class="q15">마마마</p>
<script type="text/javascript">
$(function () {
$("p.q15").replaceWith('<p>xxx</p>');
});
</script>
<p class="q16">Ｑ16</p>
<script type="text/javascript">
$(function () {
//$('.q16').addClass('q16_a');
$("p.q16").attr("class", "q16_a");
});
</script>
<p class="q17">
<a href="#">aaa</a>
</p>
<p>
<a href="#">bbb</a>
</p>
<p class="q17">
<a href="#">ccc</a>
</p>
<p>
<a href="#">ddd</a>
</p>
<p class="q17">
<a href="#">eee</a>
</p>
<script type="text/javascript">
$(function () { // removeAttr 속성삭제
$("p.q17 a").removeAttr('href');
});
</script>
<p class="q18">
<a href="#">AAA</a>
</p>
<p>
<a href="#">BBB</a>
</p>
<p class="q18">
<a href="#">CCC</a>
</p>
<p>
<a href="#">DDD</a>
</p>
<p class="q18">
<a href="#">EEE</a>
</p>
<script type="text/javascript">
$(function () {
$("p.q18 a").attr("target", "_blank");
});
</script>
<p class="q19_a">q19</p>
<script type="text/javascript">
$(function () {
$(".q19_a").toggleClass("q19_b");
});
</script>
<p id="q20">q20</p>
<script type="text/javascript">
$(function () { // offset : 위치설정 x축, y축 좌표..
$("#q20").offset({ left:100, top:0 });
});
</script>
</body>
</html>
짤막한 설명..(힘들다)
prepend : 앞쪽에 추가
append : 뒤쪽에 추가
eq(-1).after : 같은게 없도록 추가
after : 선택된 요소 안의 모든 요소 뒤에 추가
wrap : 감싼다
unwrap : 감싼 걸 벗긴다.
removeAttr : 속성 삭제
offset : 위치 설정 x축, y축 좌표..
'IT > JavaScript' 카테고리의 다른 글
| [AJAX] Ajax에서 JSON 데이터 출력하기($.each() 함수 사용 예제) (5) | 2021.06.15 |
|---|---|
| [AJAX] Ajax의 정의, Ajax 기본 문법 (0) | 2021.06.15 |
| [jQuery] td elemant에 문자열을 치환하도록 하라./이름을 마우스 클릭하면 alert창에 이름이 출력되도록 하라 (0) | 2021.06.11 |
| [jQuery] 요소의 생성 및 삽입 append사용 / removeAttr 사용 예시 (0) | 2021.06.11 |
| [jQuery] 속성 값에 사진의 제목을 설정하고 이미지를 클릭하면 속성 값을 취득하여 출력하기 / 사용자 지정 태그 사용예시 (0) | 2021.06.11 |