비전공자의 IoT 국비 교육 수강일지 Day_33

jQuery

HTML의 클라이언트 사이드 조작을 단순화하도록 설계된 자바스크립트 라이브러리

 

크로스 브라우징 => 모든 브라우저가 동일한 정보를 보여주는 통일성

 

 

$(선택자).동작함수()

$('#style').css('color','blue');

 

$() : 선택된 HTML 요소를 제이쿼리에서 이용할 수 있는 형태로 생성

=> 제이쿼리 객체

ex)$(HTML 태그 이름 or CSS 선택자)

 

 

제이쿼리 장점

1. 문서 객체 모델(DOM)에 쉽게 접근하여 조작할 수 있다.
2. 코드를 간결화하여 가독성과 개발 효율성이 증가한다.
3. 이벤트 연결을 쉽게 구현할 수 있다.
4. 다양한 브라우저에서 동작(크로스 브라우저)하며 모바일에서도 작동이 가능하다.
5. 시각적 효과를 쉽게 구현할 수 있다.
6. 이미 개발된 수많은 플러그인을 사용할 수 있다.

 

제이쿼리 사용 방법

1. CDN 호스트 사용
: 서버에 따로 jQuery 파일을 저장하지 않아도 사용할 수 있는 방법

2. 파일 다운받아 사용
: jQuery 파일을 서버에 저장해서 사용하는 방법

 

 

$(document).ready()

: HTML 문서가 모두 로드된 뒤에 코드가 실행되도록 설정

$(document).ready()(function() {

});

$(function (){

});

 

getter/setter 메서드

1. html( ) : 해당 요소의 HTML 콘텐츠를 반환하거나 설정
2. text( ) : 해당 요소의 텍스트 콘텐츠를 반환하거나 설정
3. val( ) : <form> 요소의 값을 반환하거나 설정
4. attr( ) : 해당 요소의 명시된 속성의 속성 값을 반환하거나 설정
5. css( ) : style 요소 추가

 

요소 추가(기존 요소의 내부에 추가)

1. append( ) : 선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가
2. prepend( ) : 선택된 요소의 첫 번째에 새로운 요소나 콘텐츠를 추가
3. appendTo( ) : 선택된 요소를 해당 요소의 마지막에 추가
4. prependTo( ) : 선택된 요소를 해당 요소의 첫번째에 추가

 

요소 추가(기존 요소의 외부에 추가)

1. before( ) : 선택한 요소의 바로 앞쪽에 새로운 요소나 콘텐츠를 추가
2. after( ) : 선택한 요소의 바로 뒤쪽에 새로운 요소나 콘텐츠를 추가
3. insertBefore( ) : 선택한 요소를 해당 요소의 앞쪽에 추가
4. insertAfter( ) : 선택한 요소를 해당 요소의 뒤쪽에 추가

 

요소 삭제

1. remove( ) : 선택한 요소를 dom 트리에서 삭제(연관된 데이터, 이벤트도 삭제)
2. detach( ) : 선택한 요소를 dom 트리에서 삭제(연관된 데이터, 이벤트 유지)
3. empty( ) : 선택한 요소의 자식 요소를 모두 삭제
4. unwrap( ) : 선택한 요소의 부모 요소를 삭제

 

실습 예제

코드

html

<button id='like'>좋아요</button><span>0</span>
<br>
<input type="text"><button class='writeCom'>댓글작성</button>
<br>
<div id="com">
<p>첫댓글<button class='removeCom'>삭제</button></p>
</div>​

javascript

 $("#like").on("click",function(){
    if($("span").text() == "0"){
        $("span").text("1");
        $("#like").text("좋아요 취소");
    }else{
        $("span").text("0");
        $("#like").text("좋아요");
    }
});

$(".writeCom").on("click",function(){
    let inputText = $("input[type=text]").val();
    $("#com").prepend("<p>"+inputText+"<button class='removeCom'>삭제</button></p>");
});

$(document).on("click", ".removeCom", function(){
    $(this).parent().remove();
});​

---

서버 페이지 > 서버페이지 데이터 전송방법

QueryString => URL을 통해서 데이터를 전송하는 방식

 

 

Cookie & Session

Client의 정보를 지속적으로 유지하기 위한 방법

Cookie : 사용자의 PC에 서버 페이지에서 공유할 데이터를 저장하는 기술

Cookie cook = new Cookie("NewCookie", "HeonchanKim"); //쿠키 생성
response.addCookie(cook); // 사용자에게 쿠키를 응답