1_2주차에 배운 내용입니다.
document.getElementById("element").style.display = "none";
같은 길고 복잡한 코드를 $('#element').hide();
단순하고 직관적으로 사용할 수 있음.<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("바꾸고 싶은 텍스트");" -> 텍스트 바꾸기
<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) // 서버에서 준 결과를 이용해서 나머지 코드를 작성 } })
$(document).ready(function(){ //페이지 로딩 완료 후 실행하고자 하는 코드 });
를 사용한다.참고자료