DevSSOM

jQuery 선택자 본문

JavaScript/jQuery

jQuery 선택자

데브쏨 2021. 7. 14. 23:45
반응형

제이쿼리 선택자

제이쿼리 선택자는 CSS 선택자와 유사한 구조를 가지고 있음.

 

  • $("태그이름")
  • $("#아이디 속성값")
  • $(".클래스 속성값")

 

 - CSS 선택자

h1         // 태그에 접근할 때
#title     // id에 접근할 때
.article   // class에 접근할 때

- jQuery 선택자

$("h1")          // 태그에 접근할 때 
$("#title")      // id에 접근할 때
$(".article")    // class에 접근할 때

 

 

만약, 디자인을 입히고 싶다. 즉, CSS와 관련된 기능을 사용하고 싶다고 한다면, jQuery에서 제공하는 css메소드를 활용하면 됨. 

 

디자인은 .css('css 속성', 'css 속성값') 형태로 입력.

$("h1").css("color", "blue");

 

연습문제

function을 사용하여 공간을 만들고, h1 태그의 배경색은 초록색으로 설정, #background-blue 아이디의 배경색은 파란색으로 설정, .background-red 클래스의 배경색은 빨간색으로 설정한다면?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>제이쿼리 기초</title>
</head>
<body>

  <h1>Tag Selector</h1>
  <h2 id="background-blue">ID Selector</h2>
  <h3 class="background-red">Class Selector</h3>

  <script src="jquery-3.3.1.js"></script>
  <script src="index.js"></script>
  
</body>
</html>

>>>

$(function() {

  $("h1").css("background-color", "green");
  $("#background-blue").css("background-color", "blue");
  $(".background-red").css("background-color", "red");

});

 

728x90
반응형
저작자표시

'JavaScript > jQuery' 카테고리의 다른 글

jQuery 이벤트 - Fade 이벤트  (0) 2021.07.18
jQuery 이벤트 - Hide, Show, Toggle 이벤트  (0) 2021.07.17
jQuery 이벤트 - Mouse 이벤트  (0) 2021.07.15
jQuery 왜 쓸까?  (0) 2021.07.14
jQuery - this  (0) 2021.07.11
'JavaScript/jQuery' 관련 글 more
댓글