반응형
1. 텍스트 바꾸기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Finding elements with jQuery</title>
<style>
body {
font-family: Arial, sans-serif;
color:black;
}
p {
color: blue;
}
#main-heading {
color: purple;
}
.note {
background: yellow;
}
</style>
</head>
<body>
<h2 id ="sub-heading">안녕하세요?</h2>
<h1 id="main-heading">What is jQuery?</h1>
<p>jQuery is the most popular JavaScript library. It gives developers lots of useful functions so they can make their webpage interactive across multiple browsers.</p>
<p class="note">jQuery is an open source library with a big community of contributors.</p>
<h1>Why should you learn jQuery?</h1>
<p>If you learn jQuery, you'll be able to use it in your own webpages, understand other developer's webpages, and have a better understanding generally about how to use libraries.</p>
<p class="note">Note: jQuery functions use the DOM API (like <code>document.getElementById</code>). You should learn that first, if you haven't yet.</p>
<button>hello!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
// p태그 텍스트 변환
$("p").text("jQuery is the GREATEST!!!");
// id가 main-heading인 텍스트 변환
$("#main-heading").text("jQuery? More like YAY-QUERY!");
// class가 note인 텍스트 변환
$(".note").text("NOTE: jQuery has been known to cause EXTREME JOY!");
// button태그 클릭 시 p태그 텍스트 변환
$("button").click(function(){
$("p").text("버튼 눌러서 바뀜!");
});
// id가 sub-heading의 텍스트가 조건과 맞으면 앞, 아니면 뒤로 텍스트 변환
$("#sub-heading").text(function(i, oldText){
return oldText === '안녕하세요?' ? '안녕히 가세요.' : '바이바이~';
});
// 변수에 넣어서 텍스트 추가
var math = $("#math-heading");
math.text(math.text() +"...wow!");
</script>
</body>
</html>
2. 다른 요소 (.html, .css, .attr) 변경
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>"응용:애벌레에서 나비로" 프로젝트</title>
</head>
<body>
<h1>The Caterpillar</h1>
<p>This is a <strong>caterpillar</strong> in its natural habitat:</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Monarch_caterpillar_on_swan_plant_branchlet.jpg/640px-Monarch_caterpillar_on_swan_plant_branchlet.jpg" width="400">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
// h1의 text 변경
$("h1").text("butterfly");
// p의 html 변경
$("p").html("This is a <strong>butterfly.</strong>");
// img의 attribute src 주소 변경
$("img").attr("src","https://www.kasandbox.org/programming-images/animals/butterfly_monarch.png");
// p의 css 색 변경
$("p").css("color","green");
</script>
</body>
</html>
3. 요소 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>"응용: 생명체 합성" 프로젝트</title>
<style>
body {
font-family: sans-serif;
}
.result {
font-size: 20px;
font-weight: bold;
color: blue;
}
</style>
</head>
<body>
<h1>Creature Creator</h1>
<p>What happens when you combine these two animals?</p>
<img src="https://www.kasandbox.org/programming-images/animals/shark.png" height="150" alt="shark">
<img src="https://www.kasandbox.org/programming-images/animals/spider.png" height="150" alt="spider">
<p class="result">You get a sharkspider!</p>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
// p태그 생성하여 newP 변수에 넣기
var newP=$("<p>");
// newP에 들어갈 text 입력
newP.text("Animals two into one.");
// newP의 클래스명 정하기
newP.addClass("result");
// body에 newP 추가
$("body").append(newP);
</script>
</body>
</html>반응형
'Programming > JavaScript' 카테고리의 다른 글
| [JavaScript] Set 사용법 (0) | 2020.03.23 |
|---|---|
| [Node.js] Node.js 입력 받는 방법, 표준입출력 (0) | 2020.03.18 |
| [Node.js] Node.js로 서버 구축하기 (0) | 2019.12.22 |
| AJAX란 (0) | 2019.12.21 |
| [JavaScript] 자바스크립트와 웹 프론트엔드 파트4. Networking (0) | 2019.12.18 |
댓글