본문 바로가기

COA Lab's jQuery

선택자 및 메서드 1

jq의 cdn 작성 위치와, cdn다운받는 곳 - code.jqeury.com
jq의 기본 구문 작성법 $(selector).method();
-------------------
기본선택자 5가지 이상 
- 요소(태그명), 아이디(#), 클래스(.), 종속( ), 자식(>), 이웃(+), 형제(~), 그룹(,), 모든(*)선택자

탐색선택자 5가지 이상(구조, 순서) li를 예로 들면,
- li:first-child
- li:last-child
- li:nth-child(n)
- li:nth-child(2n+1)
- li:nth-last-child(n)
...

제이쿼리 선택자(짝홀수, 2번째, 첫번째, 마지막li, 3번째 뒤에 있는 모든 li, 3번째 앞에 있는 모든 li)
- li:even
- li:odd
- li:eq(1)
- li:first
- li:last
- li:gt(2)
- li:lt(2)

기타선택자(부모, 자식, 포함요소)
- li:parent
- li:children
- li:has(요소)

속성선택자(id속성값이 main인 요소, id속성값에 main이 포함된 요소, id속성값이 in으로 끝나는요소, id속성값이 ni로 시작하는 요소-div를 예로들면)
- $('div[id="main"]')
- $('div[id*="main"]')
- $('div[id$="in"]')
- $('div[id^="ni"]')

------------------
노드값 변경하기

하위 텍스트 노드값 가져오거나 변경
- $(selector).text()
- $(selector).text('내용')

하위 요소 노드의 값 가져오거나 변경
- $(selector).html()
- $(selector).html('<></>')

------------------
요소의 속성 변경

선택자의 속성값 가져오기
- $(selector).attr("속성명")

선택자의 속성값 변경하기
- $(selector).attr("속성명", "값")

선택자의 속성값 제거하기
- $(selector).removeAttr("속성명")

------------------

요소의 스타일 변경

선택자의 스타일값 가져오기
- $(selector).css("속성명")

선택자의 스타일값 변경하기
- $(selector).css("속성명", "값")

선택자의 스타일 여러개 한꺼번에 변경
- $(selector).css({"속성명:""값", "속성명:""값"})

------------------
클래스 사용

클래스 추가
- $(selector).addClass()

클래스 제거
- $(selector).removeClass()

특정 클래스 있는지 찾기
- $(selector).hasClass()

클래스 추가제거 반복
- $(selector).toggleClass()

------------------
DOM객체 추가

앞에 추가
-- $(selector).append(<></>)

뒤에 추가
-- $(selector).prepend(<></>)

'COA Lab's jQuery' 카테고리의 다른 글

메서드2  (0) 2021.09.08
jQ 5 - each()  (0) 2021.03.10
jQ 4 - append 활용 : 배열객체, 이미지를 추가하기  (0) 2021.03.10
jQ 3 - method() 의 종류 1  (0) 2021.03.10
jQ 2 - 선택자의 종류  (0) 2021.03.10