🍫 jQuery가 뭐임?
- 웹에서 자바스크립트를 쉽게 활용할 수 있도록 단순화시킨 오픈소스 기반 자바스크립트 라이브러리
🍫 html에서 자바스크립트 링크하기
- *1
<body>태그 제일 하단에 링크하는 방법이 있고, *2<head>태그 제일 하단에 링크하는 방법도 있다.
// *1 의 경우 //
<body>
<!--body 콘텐츠-->
<script src='script/jquery-1.12.5.js'></script> // jquery 오픈소스 파일 링크
<script src='script/cutom.js'></script> // 로컬 script 폴더내에 내가 직접 작성하는 파일 링크
</body>// *2 의 경우 //
<head>
<!--head 콘텐츠-->
<script src='script/jquery-1.12.5.js'></script> // jquery 오픈소스 파일 링크
<script src='script/cutom.js'></script> // 로컬 script 폴더내에 내가 직접 작성하는 파일 링크
</head>- 해당 jquery 링크를
<body>에 하느냐<head>에 하느냐에 따라서
custom.js에 우리가 작성해야하는 jquery 구문 표현이 살짝 차이가 있다. (기능의 차이는 없음) - 이 부분은 웹을 로드했을 때 html을 읽어들이는 순서와 관련이 있다. 자세한 건 나중에 짚어보도록 하고 나는 비교적 간단한 표현방식인 *1의 경우를 사용할 것이다.
- 제일 중요한건 내가 작성하게 될
custom.js파일의 링크가
jquery 오픈소스링크보다 항상 아래에 있어야 한다는 것. (순서가 바뀌면 jquery 작동 안함)
🍫 jQuery 기본 규칙
script/custom.js
<script>
$('선택자').함수(function() {
실행구문;
})
</script>- 크게는 선택자, 함수, 실행구문 으로 구성
- 선택자 : tag, id, class 등과 같은 CSS 선택자들을 의미
- 함수 : 선택자에 대한 이벤트 (마우스 클릭 등)를 의미
- 실행구문 : 선택자에 함수(이벤트)가 일어났을 경우 실행되는 구문
🍫 jQuery 기초(but 많이 쓰이는) 함수
- 함수는 선택자에 이벤트를 전달하는 방식이다.
click: 선택자 마우스 클릭mouseenter: 선택자에 마우스 올리기 (hover)mouseleave: 선택자에서 마우스 떼기
script/custom.js
<script>
$('.show-btn').click(function() {
$('div').show();
})
html 내의 .show-btn 클래스를 가지고 있는 태그를 클릭했을 시
html 내의 div 태그를 나타나게 해라.
$('.btn').mouseenter(function() {
$('div').show();
})
html 내의 .btn 클래스를 가지고 있는 태그에 마우스를 올렸을 시
html 내의 div 태그를 나타나게 해라.
$('.btn').mouseleave(function() {
$('div').hide();
})
html 내의 .btn 클래스를 가지고 있는 태그에 마우스를 뗐을 시
html 내의 div 태그를 숨겨라.
</script>- 사실 함수엔 뭐가 있고 무슨 기능을 하는지 아는 것보다, jQuery 표현에 대해서 숙지하는 것이 더 중요한 듯 하다 :)
기획, 개발공부, 그 외 잡다한 여정 기록 (SEMI로)