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 |