jQuery를 사용하면 아주 간편하게 HTML 요소를 선택하고, 그렇게 선택된 요소에 손쉽게 특정 동작을 설정할 수 있다.
$(선택자).동작함수();
달러($) 기호는 jQuery를 의미하고, jQuery에 접근할 수 있게 해주는 식별자이다.
선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정한다.
선택자에는 클래스, ID 도 들어갈 수 있다.
동작함수 정리 블로그
자주쓰는 함수
text() , html(), arrt(), val()
영화포스터 예제
소스코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <title>영화 포스터</title> <style> .container{ margin: 0 auto; width: 80%; display: flex; text-align: center; justify-content: center; } .movie-item{ padding: 10px; width: 300px; height: 500px; background-color: gray; border: 1px solid black; box-shadow: 0 0 3px 3px black; } </style> </head> <body> <h1>영화포스터</h1> <button onclick="getMovie()">영화 불러오기</button> <div class="container"> <div class="movie-item"> <div id="poster"> <img id="movie-poster" src="#" width="290px" height="300px" alt=""> </div> <div id="title"> 제목임시 </div> <div id="rating"> 평점임시 </div> </div> </div> <script> function getMovie(){ var movie = { poster: "https://t1.daumcdn.net/movie/99a4d42206a028764e86c5bff8cf0021db985223", title: "도굴", rating: 9.1 } $("#movie-poster").attr("src",movie.poster); $("#title").text(movie.title); $("#rating").text(movie.rating); console.log("버튼테스트"); } </script> </body> </html> | cs |
function 이 핵심 내용
'국비지원 Spring프레임워크 > JQuery' 카테고리의 다른 글
자바스크립트 백틱(backtick) (0) | 2020.11.10 |
---|