| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- 커밋메세지수정
- 참조키
- docker명령어
- querydsl
- 외부키
- 2 > /dev/null
- 네이티브쿼리
- 테스트
- 메세지수정
- subquery
- 메소드명
- Query
- 검색
- 컨테이너실행
- MySQL
- application.yml
- foreignkey
- ㅔㄴ션
- AuthenticationEntryPoint
- 적용우선순위
- 테스트메소드
- EC2
- appspec.yml
- 서브쿼리
- 예약
- WeNews
- 포트
- appspec
- 추후정리
- ubuntu
- Today
- Total
제뉴어리의 모든것
jQuery란 무엇인가? 본문
안녕하세요. S Writer입니다. 오늘은 jQuery에 대해서 알아볼텐데요. jQuery(제이쿼리)는 웹 사이트를 제작할 때 자주 사용되는 기능들을 쉽게 사용할 수 있도록 모아놓은 자바스크립트 라이브러리를 말합니다. 복잡한 상호작용을 하는 자바스크립트를 쉽게 추가할수 있도록 해주면서 다양한 웹 브라우저에서 동작하도록 만들어줍니다. jQuery사용방법은 아래와 같습니다.
1) CDN호스트를 통해 jQuery를 불러오는방법
- 인터넷이 연결된 곳이라면 언제 어디서든지 사용할 수 있습니다. 단 인터넷 연결이 끊길시 사용할 수 없습니다.
script src에 바로 입력하면 됩니다.
<script src="http://code.jquery.com/jquery-1.12.0.js"></script>
http://jquery.com/download/ 에서 가져올 수 있습니다.(꼭 앞에 'http://'붙이셔야합니다.)
2) 파일을 다운로드받아 사용하는 방법
정확한 경로 설정이 필요하며 파일이 무조건 존재해야합니다.
jquery-1.12.0.js
<script src="/js/jquery-1.12.0.js"></script>
파일을 직접불러오기때문에, 경로를 지정해주어 불러옵니다. 경로설정에서 방법이 있는데 크게 상대경로와 절대경로가 존재합니다. 경로설정방법은 여기선 생략하도록 하겠습니다.
3. jQuery 기본구조
<sript src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
});
</script>
자바스크립트와 소스가 조금 다르다는 것을 느낄 수가 있습니다. 자바스크립트보단 간편해졌습니다. 코딩시 언제나 주의할점은 }, ) 괄호꼭 닫으셔야합니다. 안닫으시면 에러나요! 먼저 위와같이 <head>안에 제이쿼리 선언을 해야합니다.
제이쿼리 실행은 $(".클래스명") $("#아이디명") 와 같은 선택자(셀렉터)를 이용하여 접근합니다. 선택자종류가 무수히 많습니다. 선택자관련해선 추후 포스팅 하도록 하겠습니다.
간단하게 아래와같이 한번 볼까요?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-1.12.0.js"</script>
<script type="text/javascript">
$(document).ready(
function(){
$(".bt").click(function(){alert("jquery");
});
});
</script>
</head>
<body>
<div class="bt">jQuery맛보기 Click!</div>
</body>
</html>
<head>태그안에 jquery를 불러오고 스크립트를 코딩합니다. 위 소스는 alert 경고창 띄우는 코드인데요. bt라는 클래스를 클릭할 때 alert이벤트창을 띄우는 소스입니다. 위의 'jQuery 맛보기 Click!'을 클릭했을 때 특정 이벤트를 구현하려면 .click();을 이용하면 됩니다.
<script type="text/javascript">
$(document).ready(
function(){
$(".bt").click(function(){"구현내용");
});
});
</script>위와 같이 .click(); 안에 function(){}을 선언하고 function(){}안에 구현할 이벤트내용을 넣으면, 클릭했을 때 function(){}안의 내용을 실행시킬 수가 있습니다.
'jquery' 카테고리의 다른 글
| jquery id 하위 태그 가져오기 (0) | 2021.03.25 |
|---|---|
| javascript/jquery에서 id, name, class 값 가져오기 (유용) (0) | 2021.03.18 |
| 업로드할 이미지 파일 미리보기 (0) | 2021.03.18 |
| 동적으로 태그를 생성하고 버튼 클릭시 input 태그 생성 전송 (유용) (0) | 2021.03.18 |
| 버튼 click 이벤트 발생시 동적으로 input 값 생성하여 submit (0) | 2021.03.18 |