jQuery란 ?
클라이언트 측 HTML 스크립팅을 간소화하기 위해 고안된 크로스 플랫폼 자바스크립트 라이브러리
크로스 플랫폼 : 다양한 플랫폼에서 동작 가능함 사용방법
<head>태그 내에 제이쿼리를 선언한다
1. 인터넷에 연결되어 있을 때만 사용 가능 -> 비추 !
<script src="http://code.jquery.com/jquery-1.12.0.js"></script>
2. 소스 경로 내에 파일을 불러옴
<script src="../jquery-1.12.0.js"></script>기본 구조
<script type="text/javascript">
$(document).ready(
function(){
$(선택자).동작함수();
});
$(function() {
$(선택자).동작함수();
});
</script>$ 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자. $() 함수를 통해 생성된 요소를 제이쿼리 객체라고 한다.
선택자를 이용해 원하는 HTML 요소를 선택하고, 함수를 정의해 동작을 설정한다.
Document객체의 ready() 메소드를 이용해 문서가 모두 로드된 뒤 코드가 실행되도록 설정
선택자
$("span").css(~) : <span> 요소를 모두 선택
$("#test").val() : id가 test인 요소를 선택
$(".test").val() : class가 test인 요소를 선택
$("[name='test']") : name이 test인 요소를 선택
$("img[alt='flower']").val() : <img> 요소 중
alt 속성값이 "flower"인 요소
HTML에서 id class name 의 차이는 ?
- id : 하나의 요소만 지정 가능 / Selector 역할 가능
- class : 여러 요소 지정 자능 / Selector 역할 가능
- name : 여러 요소 지정 자능 / Selector 역할 불가능
이벤트
$(function() {
$("button").on({ // 모든 <button>요소에
mouseenter: function() { // mouseenter 이벤트를 설정
},
click: function() { // click 이벤트를 설정
},
mouseleave: function() { // mouseleave 이벤트를 설정
}
});
});
$(function() {
$("body").on({ // <body>요소에
click: function() { // click 이벤트가 발생했을 때
}
}, "#btn"); // id가 "btn"인 요소에
이벤트 핸들러를 등록함.
});.on() 메소드 : 특정 요소에 이벤트를 연결
