Class02(css 선택자)
2022. 06. 09. 수업내용 정리 #2/2
CSS 선택자
-
요소의 선택
제이쿼리를 사용하면 손쉽게 HTML 요소를 선택하여, 선택된 요소에 특정 동작을 설정할 수 있습니다.
제이쿼리에서는 요소를 선택하기 위해 대부분의 CSS 선택자뿐만 아니라 몇몇 비표준 선택자까지 제공하고 있습니다.
-
CSS 선택자를 이용한 선택
제이쿼리에서는 CSS 선택자를 사용하여 HTML 요소를 선택할 수 있습니다.
태그 이름을 사용하여 같은 태그 이름을 가지는 HTML 요소를 모두 선택할 수 있습니다.
이것은 자바스크립트의 getElementsByTagName() 메소드와 같은 동작을 합니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>jQuery Element Selection</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script> $(function() { $("p").on("click", function() { // <p>요소를 모두 선택함. $("span").css("fontSize", "28px"); // <span>요소를 모두 선택함. }); }); </script> </head> <body> <h1>HTML 태그 선택자</h1> <p>이제부터 <span>제이쿼리</span>를 다 같이 공부해보죠!!<br> 마우스로 글씨를 클릭해보세요!!</p> </body> </html>웹페이지 화면 ▼
/image-20220611215422546.png)
★ $() 함수에 전달되는 인수는 반드시 따옴표(““)를 사용한 문자열 형태로 전달되어야 합니다.
아이디(id)를 사용하여 특정 HTML 요소를 선택할 수도 있습니다.
이것은 자바스크립트의 getElementsById() 메소드와 같은 동작을 합니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>jQuery Element Selection</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script> $(function() { $("p").on("click", function() { $("#jq").css("border", "2px solid orange"); // 아이디가 "jq"인 요소를 선택함. }); }); </script> </head> <body> <h1>아이디 선택자</h1> <p id="jq">이제부터 제이쿼리를 다 같이 공부해보죠!!</p> <p>마우스로 글씨를 클릭해보세요!!</p> </body> </html>웹페이지 화면 ▼
/image-20220611215604426.png)
클래스(class)를 사용하여 같은 클래스에 속하는 HTML 요소를 모두 선택할 수 있습니다.
이것은 자바스크립트의 getElementsByClassName() 메소드와 같은 동작을 합니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>jQuery Element Selection</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script> $(function() { $("p").on("click", function() { $("#jq").css("border", "2px solid orange"); // 아이디가 "jq"인 요소를 선택함. }); }); </script> </head> <body> <h1>아이디 선택자</h1> <p id="jq">이제부터 제이쿼리를 다 같이 공부해보죠!!</p> <p>마우스로 글씨를 클릭해보세요!!</p> </body> </html>웹페이지 화면 ▼
/image-20220611215743073.png)
속성(attribute)을 사용하여 속성이 조건에 맞는 특정 HTML 요소를 선택할 수 있습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>jQuery Element Selection</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script> $(function() { $("button").on("click", function() { // <img>요소 중에서 alt 속성값이 "flower"인 요소를 모두 선택함. $("img[alt='flower']").attr("src", "/examples/images/img_monalisa.png"); }); }); </script> </head> <body> <h1>속성 선택자</h1> <img src="/examples/images/img_flower.png" alt="flower"><br> <button>속성을 바꾸죠!!</button> </body> </html>웹페이지 화면 ▼
/image-20220611215851661.png)
‘속성을 바꾸죠!!’ 버튼 클릭 후 ▼
/image-20220611215958605.png)
댓글남기기