jQuery 기본2

Suji Park·2022년 5월 20일
0
post-thumbnail

jQuery()

$()로 축약해서 사용 가능

달러($)기호jQuery를 의미하고, jQuery에 접근할 수 있게 해주는 식별자

$()안에는 선택하고 싶은 것이 들어간다. 이걸 선택자라고 부름.
선택자(Selector)는 선택을 해주는 요소이고, HTML에서 태그, 클래스, id같은 것을말함.

jQuery 함수의 기본 형식

$(선택자).동작함수();

가장 많이 사용되는 선택자
1. .클래스이름
2. #아이디이름
3. 태그

$("태그명").동작함수()
$(".클래스명").동작함수()
$("#id명").동작함수()

달러($)표시 안에 태그명만 그냥 쓰면 태그를 가리키게 되고, .클래스, 그리고 # id를 가리킴.

$( ".csstest" )

class이름이 csstest인 애들을 선택

div 태그

$(  "div"  )

아무것도 없이 이름만 쓰면 그 이름인 태그를 불러오는 것
(지금은 모든 div태그를 선택)

$( "div > div" )
$( "div div" )

1번처럼 사용했다면 div태그 바로 아래 자식 중에 div태그인 애를 모두 선택
2번처럼 사용했다면 div태그의 자식인 div뿐만 아니라 자식의 자식, 후손 중 div태그를 모두 선택

 
<html>
 <head>
 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  
 </head>
 
 <body>
  <div>
   <h1>dd</h1>
  </div>
  
  <div>
   <span> 
    빠이
    <div>안녕</div>
   </span>
  </div>
 </body>
</html>

안녕이 들어간 div를 선택하기 위해서는 $( "div div" )을 사용

딱 하나를 지정하고 싶다면?

$( "div > span > div" )

div태그자식중span을선택하고그span의자식중div를선택

(".nodiv")no라는클래스아래자식들중모든div태그선택( ".no div" ) ☞ no 라는 클래스 아래 자식들 중 모든 div 태그 선택( "#yes > div ) ☞ yes 라는 아이디를 가진 태그 바로 아래 자식 중 div 태그 선택
클래스 아래 자식들 중 태그선택, 아이디아래 자식 선택 등의 작업 가능

복습:
7.jQuery에서 div 태그에 "myclass"라는 클래스를 추가하는 코드는 무엇인가요?
$("div").addClass("myclass");

profile
천방지축😛 얼레벌레🙄 빙글빙글🙃 돌아가는 수지의 코드~🎵

0개의 댓글