🥕 spring을 공부하며 jQuery & Selector에 대해 정리해볼 것이다! 모두가 백엔드 개발자가 되는 그 날까지..화이팅…✨
📌 jQuery
존 레식이 자바스크립트를 이용해 만든 라이브러리 언어. 함수들의 집합
#1 호환성 문제 해결
-> jQuery 에서 이를 해결하게됨.
#2 쉬운 애니메이션 효과 구현
1) 라이브리 연동
offline : 다운받아서 resource 폴더에 넣기
online : CDN
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>📌 선택자 : Selector
selector는 HTML 요소 선택해서 가져옴
# 선택자 사용
$("") 안에 문자형데이터로 CSS 선택자 입력.
$("선택자").css("스타일속성명", "값"); --> 스타일 적용
$("선택자").attr("속성명", "값"); --> 속성 적용
1) jquery 기본 구조
#1. ready() 함수 : 문서객체가 준비되면...
<script>
$(document).ready(function(){
// jquery 작성
});
</script>
#2. 즉시함수로 : 문서객체가 준비되면...
<script>
$(function(){
// jquery 작성
});
</script>🌳 기본선택자
1) 직접 선택자
전체 : * ex) $("*")
아이디 : #아이디값
클래스 : .클래스값
태그 : 태그명
그룹 : 선택자,선택자,....
종속 : 태그명#아이디값 태그명.클래스값
2) 인접 관계 선택자
부모 : $("선택자").parent(); .parents() 부모들 -> html까지
하위요소 : $("기준요소선택자 요소선택자") #wrap h1
자식 : $("선택자 > 자식선택자")
$("선택자").children("자식선택자");
형 : $("선택자").prev(); .prevAll() 형들
동생 : $("선택자").next(); .nextAll() 동생들
전체형제 : $("선택자").siblings();
가장가까운상위 : $("선택자").closest("선택자");
🌳 체이닝 기법
$(“선택자”).css(“속성명”, “값”).css(“속성명”, “값”).css()…
🌳 배열 관련 메서드
1) each() / $.each()
선택한 요소들의 배열에 저장된 요소를 순서대로 하나씩 선택하면서 인덱스 정보를 가져옴
$("선택자").each(function(매개변수1, 매개변수2){ // 실행코드; });
$.each($("선택자"), function(매개변수1, 매개변수2){ //실행코드; });
매개변수1 = 인덱스, 매개변수2 = 요소대입
$("선택자").each(function(){ $(this) });
$.each($("선택자"), function(){ $(this) });
$(this) = 배열에 저장된 요소가 대입.
2) $.map()
배열에 저장된 데이터 수만큼 메서드 반복, 리턴은 메서드에서 반환되는 데이터가
새 배열에 저장되 그 배열을 리턴함.
$.map(Array, function(매개변수1, 매개변수2){
......
return 데이터;
});
매개변수1 = 데이터
매개변수2 = 인덱스 🌳 속성 탐색자
🌱선택한 요소를 기준으로, 일치하는 속성의 포함여부를 따져 요소를 선택
- 1) $(“선택자[속성명]”) : 선택한 요소에 지정한 속성이 있는 요소만 선택 $(“h1[class]”)
- 2) $(“선택자[속성명=값]”) : 선택한 요소에 속성명=값이 맞는 요소
- 3) $(“선택자[속성명^=값]”) : 해당 속성에 값으로 시작하는 요소 선택
- 4) $(“선택자[속성명$=값]”) : 해당 속성에 값으로 끝나는 요소 선택
- 5) $(“선택자[속성명*=값]”) : 해당 속성에 값을 포함하는 요소 선택
- 6) $(“:type속성값”) : input 태그의 type 속성값이 일치하는 요소만 선택 $(“:radio”)
- 7) $(“선택자:visible/hidden”) : 선택 요소가 visible / hidden 상태인것
- 8) $(“선택자:selected”) : selected 상태인 요소 선택
- 9) $(“선택자:checked”) : 체크된 상태인 요소 선택
🌳 유용한 메서드
is() : 선택한 요소의 상태가 지정한 속성과 일치하면 true, 아니면 false
$("선택자").is(":checked");
get() : 선택자에 get(0)을 적용하면 자바스크립트 DOM방식 스타일에 사용가능
$("선택자").get(0).style.color="#fff";
has() : 선택요소중 지정요소를 포함하는 것만 선택
$("li").has("span") : li중 span을 포함하는 li
not() : 선택 요소중 not으로 지정한것 제외하고
$("li").not(":first");
find() : 선택 요소중 특정 요소를 한번 더 찾기
$("li").find("strong");🌳 속성 조작 메서드
1) $("선택자").html() : 선택요소의 하위 요소를 가져와 문자열로 리턴
.html("새요소") : 선택요소의 하위요소를 모두 지우고 새요소로 바꿔줌.
2) $("선택자").text() : 선택요소의 텍스트만 가져옴
.text("새텍스트") : 새 텍스트로 바꾸기
3) $("선택자").attr("속성명") : 해당 속성값 리턴
.attr("속성명", "새값") : 속성의 값 변경 $("a#test").attr("href", "https://naver.com");
.attr({"속성명":"값", "속성명":"값", ...});
4) $("선택자").removeAttr("속성") : 선택한 속성 삭제
5) $("선택자").css("속성명") : 속성값 리턴
.css("속성명","새값") : 속성값으로 지정
6) $("선택자").addClass("class값") : class값 추가
$("선택자").removeClass("class값") : class값 삭제
$("선택자").toggleClass("class값") : class값이 있으면 삭제, 없으면 추가
$("선택자").hasClass("class값") : class값이 있으면 true, 없으면 false 리턴
7) $("선택자").val() : input태그에서 주로 사용. value 속성값 리턴
.val("새값") : value값 새값으로 적용 🌳 수치 조작 메서드
height() : 높이값 리턴 (안쪽 여백과 선두께 제외)
height(새값) : 높이값 수정
width() : 너비값 리턴
width(새값) : 너비값 수정
innerHeight() / innerWidth() : 안쪽 여백 포함 높이값/너비값 리턴, 매개변수주면 수정
outerHeight() / outerWidth() : 선두께와 안쪽 여백 포함 높이값/너비값 리턴, 매개변수 주면 수정
position() : 요소의 포지션 위치값 (선택한 기준요소로부터의 상대값)
.position().left; (x)
.position().top; (y)
offset() : 문서기준으로 수평/수직 떨어져있는 값
.offset().left; .offset().top;
scrollLeft() : 수평 스크롤 이동한 값 $(window).scrollLeft();
scrollTop() : 수직 스크롤 이동한 값 🌳 객체 편집 메서드
🌱 요소를 복제, 새요소 생성, 의도한 위치에 삽입, 삭제
1) $("선택자").before("새요소"); : 선택 요소 이전 위치에 새요소 추가
2) .after("새요소") : 선택 요소 뒤에 새요소 추가
3) .append("새요소") : 선택 요소 안에 마지막 위치에 새요소 추가
4) .prepend("새요소") : 선택 요소 안에 앞 위치에 새요소 추가
5) .clone() : 요소 복제, 매개변수 true = 이벤트까지 복제, false = 요소만 복제
6) .empty() : 선택 요소의 모든 하위 요소 삭제
7) .remove() : 선택 요소 삭제
8) .replaceAll() : 선택한 요소를 새요소로 바꿈
9) .unwrap() : 선택한 요소의 부모 요소를 삭제
10).wrap("새요소") : 선택한 요소를 새요소로 감싸기
11) .wrapInner("새요소") : 선택한 요소의 모든 하위요소를 새요소로 감싸기 🌳 이벤트 등록 메서드
✔이벤트 : 사용자가 브라우저에서 취하는 모든 행위
✔이벤트 핸들러 : 이벤트 발생시 실행되는 코드
function() { ... }
✔이벤트 등록메서드 : 특정 동작이 일어났을때 저장된 핸들러를 실행시키는 일을함
.click(function(){...}) : 클릭 이벤트 등록메서드
1) 단독 이벤트 등록 방식
$("이벤트 대상 선택").이벤트 등록 메서드(function(){ // js 코드... });
$("이벤트 대상 선택").on("이벤트종류", function(){ // js 코드... });
2) 그룹 이벤트 등록 방식 : 2개 이상의 동작에 대한 이벤트를 등록 on()
# type1
$("이벤트 대상 선택").on("이벤트종류1 이벤트종류2...", function(){ //js 코드... });
# type2
$("이벤트 대상 선택").on({
"이벤트 종류":function(){},
"이벤트 종류":function(){},
"이벤트종류 이벤트종류" : function() {},
....
});
3) 이벤트 제거 메서드
$("이벤트 대상").off("제거할 이벤트 종류");
4) 로딩 이벤트 메서드
사용자가 브라우저에서 HTML문서를 요청, HTML 문서의 로딩이 완료되면 이벤트 핸들러 실행
#1. ready() : 요청한 HTML 문서객체의 로딩이 끝나면 이벤트 발생
#2. load() : 외부에 연동된 소스(img,video...)의 로딩이 끝나면 이벤트 발생 시킴
#3. error() : 이벤트 대상요소에서 오류가 발생하면 이벤트 발생 🌳 마우스 이벤트
마우스를 이용해 취하는 모든 행위
1) click()
2) dbclick()
3) <a>, <form> 태그에 클릭 이벤트 적용시 기본 이벤트 차단
<a> -> 클릭 -> 링크로 이동
<form> <submit> -> 클릭 -> action에 등록된 주소로 이동
# 차단법
#1. return false 이용
$("a또는form").이벤트메서드(function(){
js코드...
return false;
});
#2. preventDefault() 메서드 이용
$("a또는form").이벤트메서드(function(e){ // e = 이벤트 발생시킨 객체
e.preventDefault();
js코드...
});
4) mouseover()
5) mouseout()
6) hover()
7) mouseenter()
8) mouseleave()
9) mousemove()
10) mousedown()
11) mouseup()
12) scroll()🌳 포커스 이벤트
포커스 : 마우스로 <a> 또는 <input> 태그를 클릭하거나 tab키를 누르면 생성됨.
키보드 이벤트
1) focus() mouseover
2) blur() mouseout
3) focusin()
4) focusout()🌳 data()
🌱 HTML 요소에 데이터를 저장하고 읽는 역할을 하는 함수.
🌱쉽게 적용가능, HTML 요소에 data를 저장하기때문에, js에 data저장을 위한 변수 설정이 필요없어짐. -> 간결
1) 저장
$("선택자").data("key", "value");
key = 문자열
value = object
* HTML5 에서는 data-* 형식으로 미리 데이터를 저장할 수 있다.
< .... data-key="value" >
2) 읽기
$("선택자").data("key"); -> value 리턴
3) 삭제
$("선택자").removeData("key"); 🌳 change()
🌱선택한 폼 요소의 값을 새값으로 바꾸고, 포커스가 다른 요소로 이동하면 이벤트 발생
.change(function(){});
.on("change", function(){}); 🌳 키보드 이벤트
keydown()
keypress()
keyup()🌳 이벤트 발생한 요소 추적
🌱이벤트를 발생시킨 요소의 정보를 구하는 방법
$(this)
이벤트 핸들러에서 $(this)를 사용하면 이벤트가 발생한 요소를 선택하여 추적가능 🌳 효과 Effect 메서드
* 없어지는
hide()
fadeOut()
slideUp()
* 보여지는애들
show()
fadeIn()
slideDown()
toggle()
fadeToggle()
slideToggle()
위효과메서드(소요시간, 가속도, 콜백함수);
fadeTo(소요시간, 투명도, 콜백함수);
- 소요시간 : slow, normal, fast / 1000(1초), 500(0.5초)
- 가속도 : swing, linear
- 콜백함수 : 효과가 끝난 후 실행할 함수(생략가능)
- 투명도 : 0 ~ 1사이 (1에 가까울수록 선명)