Jquery
jquery는 html의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리입니다.
html elements를 동적으로 구현하기에 적합한 스크립트
아래 jquery 라이브러리의 DOM 요소를 선택하는 방법과 문법에 대해서 알아보겠습니다.
jqeury 코드 추가하기
추가방법 1 :
위 주소에서 라이브러리 코드를 가져옵니다. 다운로드 또는 CDN방식으로 적용할경우 파일 주소를 가져와서 html head 영역에 추가해 줍니다.
<html>
<head>
<title>jquery</title>
<script src="<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>"></script>
</head>
</html>jquery는 DOM 요소를 조작하는 경우가 많으므로 아래와 같이 실행코드를 작성하기 전에 ready method를 사용하여 document가 모두 준비된 이후 로직을 작성합니다.
$(document).ready(function(){//document가 로드된 이후 동작
//실행코드
})이렇게 작성하지 않을 경우 스크립트가 먼저 실행될 경우 DOM 요소를 가져올 수 없습니다.
축약형
$(function(){
//실행코드
})
추가방법 2 :
body 영역 하단에 script 태그를 추가하여 작성할 경우 body내부의 요소들이 모두 로드된 이후 script를 호출하기 때문에 실해코드를 정상적으로 출력할 수 있습니다.
또 async를 사용하여 로드 시점에 따라 스크립트를 실행 시킬 수 있습니다.
async : 브라우저가 페이지를 파싱되는 동안에도 스크립트가 실행됨. (스트리밍 형태)
defer : 브라우저가 페이지의 파싱을 모두 끝내면 스크립트가 실행됨.
default : 브라우저가 페이지를 파싱하기 전에 스크립트를 가져와 바로 실행시킴.
CSS에서 자주 사용되는 셀렉터
|
명칭
|
서식
|
지정 대상
|
|
태그 셀렉터
|
$(“태그명”)
|
특정태그
|
|
ID 셀렉터
|
$(“#ID명”)
|
특정 ID를 속성으로 갖는 태그
|
|
클래스 셀렉터
|
$(“.클래스명”)
|
특정 클래스를 속성으로 갖는 태그
|
|
자손 셀렉터
|
$(“태그1 태그2”)
|
특정 태그의 안쪽에 있는 태그
|
|
유니버셜 셀렉터
|
$(“*”)
|
전체 태그
|
|
그룹 셀렉터
|
$(“설렉터1, 설렉터2”)
|
복수 태그
|
CSS2 설렉터
|
자식 셀렉터
|
$(“부모태그명 > 자식태그명”)
|
특정 태그의 바로 밑에 자식 태그
|
|
인접 셀렉터
|
$(“태그1+태그2”)
|
특정 태그의 다음 태그
|
|
first-child 유사 클래스
|
$(“태그:first-child”)
|
동일 태그 안의 첫 태그
|
CSS3 설렉터
|
간접 셀렉터
|
$(“태그1~태그2”)
|
특정 태그의 뒤에 나타나는 태그
|
|
부정유사 클래스
|
$(“태그1:not(태그2)”)
|
특정 태그 안에서 태그2를 제외한 태그
|
|
empty 클래스
|
$(“태그:empty”)
|
자식태그 혹은 문자열을 포함하지 않은 태그
|
|
nth-child 유사클래스
|
$(“태그:nth-child(번호)”)
|
특정 태그 안에서 지정한 번호의 태그
|
|
last-child 유사클래스
|
$(“태그:last-child”)
|
동일 태그 안의 가장 마지막 태그
|
|
only-child 유사클래스
|
$(“태그:only-child”)
|
특정 태그가 하나만 포함된 태그
|
CSS의 속성 셀렉터
|
[attribute]
|
$(“[속성명]”)
|
특정 속성을 가진 태그
|
|
[attribute = ”value”]
|
$(“[속성 = ’값’]”)
|
특정 속성이 지정한 값을 가진 태그
|
|
[attribute != “value”]
|
$(“[속성 != ’값’]”)
|
특정 속성이 지정한 값을 갖지 않은 태그
|
|
[attribute ^= “value”]
|
$(“[속성 ^= ’값’]”)
|
특정 속성이 지정한 값으로 시작되는 태그
|
|
[attribute $= “value”]
|
$(“[속성 $= ’값’]”)
|
특정 속정이 지정한 값으로 끝나는 태그
|
|
[attribute *= “value”]
|
$(“[속성 *= ’값’]”)
|
특정 속성이 지정한 값을 포함하고 있는 태그
|
|
[attributeFilter1] [attributeFiter2]
|
$(“[태그셀렉터1][태그셀렉터2]”)
|
복수 속성 셀렉터에 해당하는 태그
|
Jquery 독자 필터
|
first 필터
|
$(“태그: first”)
|
지정한 태그의 첫 태그
|
|
last 필터
|
$(“태그: last”)
|
저정한 태그의 마지막 태그
|
|
even 필터
|
$(“태그: even”)
|
지정한 태그의 짝수 번째 태그
|
|
odd 필터
|
$(“태그: odd”)
|
지정한 태그의 홀수 번째 태그
|
|
eq 필터
|
$(“태그: eq”)
|
지정한 번호의 태그( 번호는 0부터 시작)
|
|
gt 필터
|
$(“태그: gt”)
|
지정한 번호보다 뒤의 태그( 번호는 0부터 시작)
|
|
lt 필터
|
$(“태그: lt”)
|
지정한 번호보다 앞의 태그( 번호는 0부터 시작)
|
|
header 필터
|
$(“태그: header”)
|
h1~h6까지의 heading태그
|
|
contains 필터
|
$(“태그: contains”)
|
특정 문자열을 포함하고 있는 태그
|
|
has 필터
|
$(“태그: has”)
|
특정 태그가 포함하고 있는 태그
|
|
parent 필터
|
$(“태그: parent”)
|
자식태그 혹은 문자열을 포함하고 있는 태그
|
HTML/CSS를 조작하는 jQuery 명령어 정리
|
명령
|
의미
|
텍스트 변경과 가져오기
|
text(...)
|
텍스트를 변경한다.
|
|
text()
|
텍스트를 가져온다.
|
HTML 삽입
|
html(...)
|
html를 변경한다.
|
|
html()
|
html를 가져온다.
|
HTML 변경과 가져오기
|
prepend(...)
|
태그 안의 맨앞에 HTML을 삽입한다.
|
|
append(...)
|
태그 안의 맨뒤에 HTML을 삽입한다.
|
|
before(...)
|
태그 앞에 HTML을 삽입한다.
|
|
after(...)
|
태그 뒤에 HTML을 삽입한다.
|
HTML의 이동
|
prependTo(...)
|
다른 태그 안의 맨앞으로 이동한다.
|
|
appendTo(...)
|
다른 태그 안의 맨뒤로 이동한다.
|
|
insertBefore(...)
|
다른 태그의 앞으로 이동한다.
|
|
insertAfter(...)
|
다른 태그의 뒤로 이동한다.
|
다른 태그로 묶음
|
wrap(...)
|
태그를 다른 태그로 묶는다.
|
|
wrapAll(...)
|
태그 전체를 모아서 다른 태그로 묶는다.
|
|
wrapInner(...)
|
자식 태그/텍스트를 다른 태그로 묶는다.
|
태그 변경
|
replaceWith(...)
|
태그를 다른 태그로 변경한다.
|
태그 제거
|
remove()
|
태그를 제거한다.
|
속성값 변경과 가져오기
|
attr(... , ...)
|
지정한 속성값을 변경한다.
|
|
attr(...)
|
지정한 속성값을 가져온다.
|
|
removeAttr(...)
|
지정한 속성을 제거한다.
|
속성값 변경과 가져오기
|
addClass(...)
|
class 속성을 추가한다.
|
|
removeClass(...)
|
class 속성을 제거한다.
|
|
css(... , ...)
|
지정한 CSS 속성값을 설정한다.
|
|
css(...)
|
지정한 CSS 속성값을 가져온다.
|
'웹코딩 > jquery' 카테고리의 다른 글
| slick slider : 현재 슬라이드 확인 (0) | 2024.08.06 |
|---|