본문 바로가기
기초/웹 개발 왕초보 입문

2주차_서버와 통신하기 3

by Hyeon_E 2022. 11. 30.

jQuery indicator 심화

전체선택자("*"): 모든 요소를 선택

클래스 선택기(".class"): 주어진 클래스의 모든 요소를 선택

요소선택기("element"): 주어진 태그 이름을 가진 모든 요소를 선택

ID 선택자("#id"): 주어진 id 속성을 가진 단일 요소를 선택

다중 선택기("selector1, selector2, selectorN"): 지정된 모든 선택기의 결합된 결과를 선택

                                                                           즉 선택기가 하나라도 만족하면 해당되는 것

여러개의 선택기를 모두 만족하게 하는 indicator을 작성하고 싶다면

$("selector1selector2")로 이어쓰면 됨

 

class속성은 css을 태그에 적용할때 이름을 이용해서 사용(태그에 스타일을 지정할때 사용)

id는 태그에 고유한 값을 지정할때 사용

 

jQuery API Documentation Basic: https://api.jquery.com/category/selectors/basic-css-selectors/

 

Basic | jQuery API Documentation

Selects all elements with the given class. Selects all elements with the given tag name. Selects a single element with the given id attribute. Selects the combined results of all the specified selectors.

api.jquery.com


jQuery를 활용한 태그 조작 심화

bt2-2.html
0.00MB
<tr id="post-3" class="fastcampus" data-id="3">
<!-- <tr id="post-3" class="fastcampus"> -->

실제 id로 활용하고 싶은 값이 있는데 단순하게 3이라는 값도 필요할때 

태그가 어떤 데이터를 가져야 하는 순간에 사용하는 것이 데이터 속성값

데이터 속성값은 data로 시작하는 속성값을 의미함

let id = $(this).data("id");

data함수를 사용하면 뒤에 입력한 키 값(data-뒤에 입력한 값)에 해당하는 값 자체를 넘겨주게 됨

data함수는 text함수와 동일하게 값을 가져오고 싶다면 키 값을 넣고 할당하고 싶으면 할당하고 싶은 값을 넣어주면 됨

'기초 > 웹 개발 왕초보 입문' 카테고리의 다른 글

3주차_서버 만들기2  (0) 2022.12.19
3주차_서버 만들기  (0) 2022.11.30
2주차_서버와 통신하기 2  (0) 2022.11.30
2주차_서버와 통신하기  (0) 2022.11.28
1주차_화면만들기 3  (0) 2022.11.23

댓글