WIL(1_2)

SG Jang·2022년 6월 16일
0

WIL

목록 보기
2/5
post-thumbnail

1_2주차에 배운 내용입니다.


1. JQuery

  • JQuery란? HTML의 요소들을 조작하는 Javascript 코드를 미리 작성해둔 라이브러리
  • 기존의 document.getElementById("element").style.display = "none";같은 길고 복잡한 코드를 $('#element').hide(); 단순하고 직관적으로 사용할 수 있음.
  • 미리 작성된 Javascript코드를 가져오는 법
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>를 html head태그 내에 삽입(jQuery 시작하기)

    간단하게 문법정리

    • css에서 선택자로 class를 쓴다면, jquery에서는 id를 선택자로 사용함.
    • "$('#url').val();" -> id 값이 url인 곳을 가리키고, val()로 값을 가져온다. val내부에 값을 입력하면 val내부의 값으로 입력.
    • "$('#post-box').hide();, $('#post-box').show();" -> id가 post-box인 곳을 숨기거나 보여지게 만들기.
    • "let temp_html = <button>나는 추가될 버튼이다!</button>;
      $('#cards-box').append(temp_html);" -> HTML요소를 temp_html로 정의하고, id가 cards-box인 곳에 추가한다.
    • "$('names-q3').empty()" -> names-q3의 내부 태그를 모두 비운다.
    • "$("#아이디값").attr("src", 이미지URL);" -> 이미지 바꾸기
    • "$("#아이디값").text("바꾸고 싶은 텍스트");" -> 텍스트 바꾸기

2. Ajax

  • Ajax는 jQuery를 임포트한 페이지에서만 동작 가능하다. -> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 1번(jQuery)에서도 나왔던 코드
  • 기본골격
    $.ajax({
    	type: "GET", // GET 방식으로 요청한다.
    	url: "여기에URL을입력",
    	data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
    	success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    		console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
    	}
    })

3. JS

  • 페이지 로딩 완료 후 실행하고자 한다면, script태그에서 $(document).ready(function(){ //페이지 로딩 완료 후 실행하고자 하는 코드 });를 사용한다.

참고자료

0개의 댓글