basic/spring

[spring 08] jQuery

못지(Motji) 2021. 8. 9. 17:30

jQuery

• John Resig이 자바스크립트를 이용하여 만든 라이브러리 언어

• 함수들의 집합

특징

1. 호환성 문제 해결 : DOM과 이벤트 객체 호환성이 덜어지는 단점이 있었다

2. 쉬운 이벤트 등록, 애니메이션 효과 구현

라이브러리 배치

📃 https://jquery.com/download/

1. 다운로드 (on/offline)

download ▹ Download the... ▹ 이상한 글씨의 페이지가 열리고 ▹ ctrl + s 페이지 저장 ▹ jquery-3.?.?.min.js 파일로 자동 저장된다 ▹ 저장된 파일을 resource 폴더에 배치 (WEB-INF 안에는 넣으면 안됨)

2. cdn 방식 (online)

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

선택자

∙ HTML 요소 선택해서 가져옴

∙ CSS 선택자와 마찬가지로 디자인 속성/이벤트 등록을 적용할때 사용가능

 

☑ 선택자 사용하기

∙ $() 안에 문자형데이터("")로 CSS 선택자 입력

∙ ${"선택자").css("스타일속성명", "값"); > 스타일 적용

∙ $("선택자").attr("스타일속성명", "값"); > 속성적용

Ex)

<p> </p>

$("p").attr("class", "test");

<p class="test"> </p>

 

☑ 문서객체 먼저 불러와 선택자 사용

∙ 문서가 준비가 되면 이함수를 실행해라

∙ jquery 문법

${document).ready(function(){
	// 이 안에 jquery javascropt ajax
});

$(function(){
	// 이 안에 작성
};
  1. 기본선택자
    ∙ 전체 : ${"*")
    ∙ 아이디 : $("#아이디값")
    ∙ 클래스 : $(".클래스값")
    ∙ 태그 : $("태그명")
    ∙ 그룹 : $("요소선택, 요서선택, ...") Ex) $("#abc, h2")
    ∙ 종속선택자 : $("태그명#아이디값") / $("태그명.클래스명") Ex) $("p#abc") $("p.abc")

  2. 인접 관계 선택자
    ∙ 부모 : $("요소선택").parent(); / .parents(); 상위요소 모두(~html)
    ∙ 하위 : $("기준요소 하위요소")
    ∙ 자식(내 바로 밑에 자식만) : $("기준요소 > 자식요소") / $("요소선택).children(); / $("요소선택").children("자식요소");
    ∙ 형/동생 : 같은 레벨에 있는 형 $("요소선택").prev() / 같은 레벨에 있는 동생 $("요소선택").next()
    ∙ 전체 형/동생 : $("요소선택").prevAll(); / $("요소선택").nextAll();
    ∙ 전체형제 : $("요소선택").siblings()
    ∙ 가장 가까운 상위 : $("요소선택").closest("요소선택") : 선택요소 기준으로 가장가까운 상위요소
    <body>
	<div id="wrap">		-- a
    	<div id="innerwrap">	-- b
            <h1>제목 1</h1>	-- d
            <h2>제목 2</h2>	-- e
            <p>내용 1</p>	-- f
            <p>내용 2</p>
            <p>내용 3</p>
    	</div>
	</div>
</body>​
$("h2").next().css("color", "red");
    * 선택자로 선택할때
    id > class > 태그명이 유일한지 > 근접한곳에 부모중에 id속성을 가지고 있는 것을 찾아보기

  3. 체이닝 기법
    $("요소선택").css("속성명", "값").css("속성명", "값").css(...);

  4. 객체로 속성 전달
    $("요소선택").css({"속성명":"값", "속성명":"값"});

  5. 속성 탐색자
    ∙ 선택한 요소를 기준으로 일치하는 속성의 포함 여부를 따져 요소를 선택
    $("요소선택[속성명]") Ex) $("li[class]") -> <li class="abc">
    $("요소선택[속성^=값]") Ex) $("li[class^=a]") 속성의 값이 a로 시작하는 것들
    $("요소선택[속성$=값]") Ex) $("li[class^=c]")
    $("요소선택[속성*=값]") Ex) $("li[class^=b]") 속성값에 b가 포함되어 있는것들
    $(":type속성값") $(":text") <input type="text">
    $("요소선택:visible | hidden") $("li:hidden)

  6. 컨텐츠 탐색 선택자
    ∙ $("요소선택:contains(텍스트)" $("li:contains('내용2')") <li>안녕 내용2</li>
    ∙ $("요소선택:has(요소명)") $("li:has('span')")
    ∙ $("요소선택:not(요소명)")
    ∙ $("요소선택").find("요소선택")

  7. 유요한 메소드
    ☑ is()
    ∙ $("요소선택").is(": checked | selected | visible | hidden | animated"); > true/ false로 리턴
    ☑ get() : 선택자와 get(0)을 적용하면 자바스크립트 DOM방식의 스타일 사용가능 (자주 사용하지는 않음)
    ∙ $("요소선택").get(0).style.color="#f00";

  8. 속성 조작 메소드 📌
    $("요소선택").html(); : html 하위요소를 문자열로 return
    $("요소선택").html("새요소"); html의 하위요소를 새요소로 덮어쓰기

    $("요소선택").text() <p class="abc">hello</p> > hello 가져옴
    $("요소선택").text("새텍스트"); 원래 text 지우고 새텍스트가 들어감

    $("요소선택").attr(속성명); abc를 가져옴
    $("요소선택").attr("속성명", "새값");
    $("요소선택").removeAttr("속성명"); : 속성명 지우기

    $("요소선택").css("속성명") 값 리턴받기
    $("요소선택").css("속성명", "새값"); 새값으로 수정 

    $("요소선택").addClass("class값");
    $("요소선택").removeClass("class값");
    $("요소선택").toggleClass("class값"); 있으면 삭제, 없으면 추가
    $("요소선택").hasClass("class값"); true/false

    $("요소선택").val(); form요소의 value속성값 가져오기 📌
    ▸<input class="iii" type="text" value="hello">
    $("요소선택").val("새값"); 새값으로 수정

  9. 수치 조작 메소드
    $("요소선택").height();
    .width();
    .position.left; 선택 요소 기준 왼쪽에서부터 얼마나 들어갔는지 값가져오기
    .position.top;
    .offset().left; / .offset().top 문서기준
    $(window).scrollLeft();
    $(window).scrollTop(); 너비값 리턴

  10. 객체 편집 메소드
    .before("새요소"); 선택요소 이전에 새요소 추가
    .after("새요소"); 뒤에추가
    .append("새요소"); 선택한 요소내 마지막 위치에 새요소 추가
    .prepend("새요소") 선택한 요소내 앞 위치에 새요소 추가
    .clone(true | false); false(기본값) > 요소만 복제 / true > 이벤트처리까지 복제
    .empty(); 선택한 요소의 하위요소 삭제
    .remove(); 선택한 요소 삭제
    .replaceWith("새요소") 선택한 요소를 새요소로 바꿈
    "새요소".replaceAll("구요소")
    .unwrap(); 선택한 요소의 부모요소를 삭제
    .wrap("새요소") 선택한 요소를 새요소로 감싸기
    .wrapAll("새요소") 선택한 요소를 한꺼번에 감싸기

  11. 배열 관련 메소드
    each() / $.each()
    매개변수 1 = 인덱스, 매개변수2 = 요소
    $("요소선택").each(function(매개변수1, 매개변수2){...코드...});
    $.each($("요소선택") , function(매개변수1, 매개변수2){...코드...});

    $("요소선택").each(function(){ $(this) });
    $.each($("요소선택") , function(){ $(this) });

  12. 이벤트 등록
    이벤트 : 사이트에서 사용자가 취하는 모든 행위
    이벤트 핸들러 : 이벤트가 발생했을때 실행되는 코드
    이벤트 등록메소드 : 특정 동작이 일어났을때의 코드를 실행시키는 일을 하는 명령어 : .click()
    이벤트 대상 : 이벶트를 일으키는 대상체 $("#btn")
    $("#btn").click(function(){
	alert("버튼 클릭");
});​
  13. 이벤트 등록 방식
    ☑ 단독 이벤트 등록
    $("대상").이벤트등록메소드(function(){	.click(fuction(){});
	// js 코드;
});​
$("대상").on("이번트종류", function(){	.on("click", function(){});
	// js 코드;
});​
    ☑ 그룹 이벤트 등록
    $("대상").on("이벤트종류 이벤트종류 ..", function(){ // js 코드; });
    // type(1)
$("대상").on("이벤트종류 이벤트종류 ..", function(){
	// js 코드;
});

// type(2)
$("대상").on({
	"이벤트종류 이벤트종류 .." : function(){//js코드},
	"이벤트종류 이벤트종류 .." : function(){//js코드},
	...    
}});​
  14. 이벤트제거
    $("이벤트대상").off("제거할 이벤트 종류");​
  15. 로딩 이벤트 메소드
    ☑ ready() : 요청한 HTML 문서객체의 로딩이 끝나면 이벤트 발생
    $(document).ready(function(){});
    $(document).on("ready", function(){});
    ☑ load() : 외부에 연동된 소스(iframe, img, video)의 로딩이 끝나면 이벤트 발생
    $(window).load(function(){ ... });
    ☑ error() : 이벤트 대상요소에서 오류가 발생하면 이벤트 발생
    .error(function(){ ... });
  16. 마우스 이벤트
    click()
    dbclick()
    * <a> <form> 태그 클릭 이벤트 적용시 기본 이벤트 차단하기
    $("a 또는 form").이벤트메소드(function(){
	// 코드 작성...
	return false;
});

$("a 또는 form").이벤트메소드(function(e){
	e.preventDefault();
    // 코드 작성...
});​​

    mouseover() 요소에 마우스 올렸을때
    mouseout() 요소에 올렸다가 빠져나갈때
    hover() 올렸을때 나갔을때 둘다
    mouseenter() 요소의 영역 안에 들어갔을때
    mouseleave() 요소의 영역을 벗어났을때
    mousemove() 마우스 움직였을때
    mousedown() 마우스 버튼을 눌렀을때
    mouseup() 마우스 버튼을 뗐을때
    scroll() 마우스 휠 스크롤 했을때

  17. 포커스 이벤트
    focus()
    blur()

  18. data()
    HTML 요소안에 데이터를 저장하고 읽는 역할을 하는 함수
    <a data-clk="svn">
    ☑ 값 읽기
    $("a").data("clk") > "svn"리턴
    ☑ 저장
    $("p").data("key", "value");
    <p data-key="value">
    <span data-name="pika" data-address="서초구" data-member="{'name':'피카츄'}"
    ☑ 삭제
    $("p").removeData("key");
    <div data-nm-ui="rolling">
    $("div").data("nmUi")

  19. change() : 어떤 요소의 변경사항이 있을때

  20. 키보드 관련
    keydown() 키 눌렀을때
    keypress() 키 누르고 있을때
    keyup() 키 뗐을때

  21. 효과 메소드
    hide()
    fadeOut()
    slideUp() 위로가면서 사라지는
    show()
    fadeIn()
    slideDown() 내려오면서 천천히 보이는거
    toggle() 반대로 바꿔주는거
    fadeToggle() 천천히 뜨는거, 천천히 없어지는거
    slideToggle() 토글방식으로 슬라이드
    fadeTo() 뒤에 비치는거