기타/jQuery (18) 썸네일형 리스트형 [jQuery]제이쿼리 get post 메소드 오늘은 제이쿼리 get, post 메서드를 사용해 보도록 하겠습니다. 1.get메서드 addget get으로 요청을 보내면 받아온 데이터를 p태그에 append 해주는 코드입니다. app.get('/get', function(req,res){ res.send('get'); }) 'get' 데이터를 보냅니다. 2.post메서드 addpost post로 {name : 'balmostory'}를 보냅니다. 그리고 받아온 데이터를 p태그에 apped 해줍니다. app.post('/post', function(req,res){ res.send(`hi ${req.body.name}`) }) 넘어온 데이터에 hi를 추가해 보내줍니다. [jQuery] 제이쿼리 ajax 예제 오늘은 제이쿼리를 이용해 ajax 통신을 진행해 보도록 하겠습니다. ajax는 요청을 보내고 응답을 받을 때 페이지 전체가 갱신되는 것을 바뀌는 부분만 갱신해 줘 비효율을 줄여주는 라이브러리입니다. 1.html 코드. appendtime id가 bTn인 버튼을 누르면 localhost:3000/ajax에 요청을 보내고 받은 데이터를 이용해 id가 time인 태그에 코드를 추가합니다. 2.node js서버 코드. const express = require('express'); const app = express(); app.get('/ajax', function(req,res){ let now = new Date(); res.send(now); }) app.listen(3000, () => { consol.. [jQuery] 제이쿼리 이벤트 발생 click, bind, on 사용법 제이쿼리로 이벤트를 발생시키는 방법에 대해 알아보도록 하겠습니다. 1.click 사용법. $("선택자").click(function(event) { 선택자 눌렀을 때 발생할 이벤트 }); 2.bind 사용법. $("선택자").bind("click", function(event) { 클릭했을 때 발생시킬 이벤트 }); 3.on 사용법. $("선택자").on("click", function(event) { 클릭했을 때 발생할 이벤트 }); $("상위 선택자").on({click: function(event) { 클릭했을 때 발생할 이벤트 }}, "하위 선택자"); $("상위 선택자").on("click", "하위 선택자", function(event) { 클릭했을 때 발생할 이벤트 }); 4.예시. button [jQuery] 제이쿼리 요소 너비 높이 구하기 width(), height() 메소드 제이쿼리로 요소 너비와 높이를 구하는 방법에 대해 알아보도록 하겠습니다. 1. 문법 $().weight() $().height() weight()는 너비를 height()는 높이를 구하는 함수입니다. 2. 예시 balmostory [jQuery] 제이쿼리 첫번째, 마지막 요소 스타일 추가하기 by first(), last() 제이쿼리로 첫 번째, 마지막 요소를 탐색하는 방법에 대해 알아보도록 하겠습니다. 1. 첫 번째 마지막 요소 선택하기. first(), last() 함수를 사용해 선택할 수 있습니다. 1 2 3 4 결과를 보면 첫 번째 요소인 class a와 마지막 요소인 d가 선택된 것을 확인할 수 있습니다. 2.css 스타일 추가하기. 1 2 3 4 [jQuery] 제이쿼리 형제 선택자 by siblings(), next() 제이쿼리를 통해 형제 요소를 찾는 방법에 대해 알아보도록 하겠습니다. 1.siblings() 형제 요소 모두 선택하는 함수입니다. 1 2 3 4 2.next() 바로 옆에 있는 형제만 탐색자로 하는 함수입니다. 1 2 3 4 [jQuery] 제이쿼리 부모요소 찾기 by parent(), parents() 제이쿼리의 부모요소를 찾는 방법을 알아보도록 하겠습니다. 1.parent(). 바로 위의 부모 태그를 찾습니다. 1 2 /div> 2.parents(). 위에 있는 태그들을 모두 가져옵니다. 1 2 [jQuery] 제이쿼리 clone()으로 요소 복사 오늘은 제이쿼리에서 요소를 복사하는 방법에 대해 알아보도록 하겠습니다. clone() 함수를 사용하면 쉽게 할 수 있습니다. 1. 문법. $(복사 대상).clone() 2. 예제. 1 class가 b인 요소를 복사해 class가 a인 태그에 추가하는 코드입니다. 만약 clone을 사용하지 않고 appendTo를 해주면 1 아래와 같은 결과가 나옵니다. b태그가 옮겨지는 개념이기 때문에 1이 하나만 나옵니다. 기존에 있던 것을 다른 곳에도 추가하고 싶을 때는 clone()을 사용해 복사본을 만든 후 추가해야 합니다. 이전 1 2 3 다음
