반응형
jQuery
jQuery는 자바스크립트 라이브러리이기 때문에 js파일 형태로 존재한다. html에서 jQuery를 사용하기 위해서는 jQuery 다운받은 후 <script>태그를 사용하여 참조한다고 알려주어야 jQuery의 문법을 html에서 이해할 수 있다.
<head>
<script src="파일주소/jQuery파일명.js"></script>
</head>jQuery를 이용하지 않고 자바스크립트만 이용해도 충분히 가능하다. jQuery는 문법같은것을 간소화 시켜 개발자를 편하게 해주는 도구일 뿐이다.
//javascript 문법
window.onload = function(){}
//jQuery 문법
$(document).ready(function(){})
//jQuery 문법 간소화
$(function(){})3개의 코드 모두 같은 내용으로 똑같이 실행된다. 현재 문서가 브라우저에 로딩시 무명함수를 호출한다.
// jQuery 기본 문법
$("선택자").함수() // *, tag, #id, .class가 선택자에 들어간다.
// 함수는 왼쪽부터 오른쪽으로
$('선택자').함수1().함수2() // 함수를 여러개를 실행시킬 수 있다.jQuery에는 다양한 내장 함수들이 존재한다. jQuery에서는 함수를 어떻게 호출하는지 알아보겠다.
// 함수 호출
$.함수()
$.trim(string)
// trim 함수는 string의 처음과 끝의 공백을 제거해준다.
$("#btn").click( function(){
data_chk();
})
// id가 btn인 버튼을 클릭했을때 함수가 호출된다.(버튼같은것에만 click함수를 쓸 수 있다.)
$('h2').html('<i> Hello jQuery </i>');
// html() : innerHTML이랑 유사한 기능을 한다. html 문서로 파싱된다.
$('h3').text('<i> Hello jQuery </i>');
// h3 태그안에 text 삽입한다. (html로 파싱되지 않아 <i>태그가 그대로 노출)특정 선택자에 tag와 문자열을 추가 할수도 있다.'
$("선택자").append(tag);
$(tag).appendTo("선택자");
// 두가지 모두 같은 기능을 제공한다.
var h1 = "<h1> Hello, jQuery1 </h1>";
var h2 = "<h2> Hello, jQuery2 </h2>";
// 태그나 문자열을 변수에 담고 append(변수)를 한다.
$("body").append(h1, h2);
//body태그 안에 h1, h2가 가지고있는 문자열이나 태그가 추가된다.동일한 선택자가 다수일때 첫번째 선택자를 선택하고 싶을때 쓰는 함수는 first()
$("img").first();
// img 태그가 다수일때 첫번째 한개만 선택하고 싶을때jQuery에서도 html 태그에서 인라인 방식이나 css처럼 선택자에게 속성과 값을 정해줄 수 있습니다. 간단한 스타일 표현이라면 css와 같은 다른언어가 필요하지 않고 jQuery에서 해결할 수도 있습니다.
// 동적 이미지 : $('선택자').attr('속성','값').attr('속성', '값')
$('img').attr('src', '../images/img03.jpg').attr('width', '300px');
// 이미지를 넣고 크기를 조절할 수 있다.
$('a').attr('href', 'http://www.naver.com').attr('target', '_blank');
// a태그를 이용하여 링크를 걸수도 있다.특정한 선택자에 여러 이벤트를 넣고싶다면 bind() 라는 함수를 이용해야 한다.
$('img').bind({ // bind() : 여러 이벤트를 묶어주는 역할
// 이벤트 핸들러 : 이벤트 발생 시 처리하는 함수(무명함수로 주로 쓴다.)
mouseover : function(){ // 마우스가 대상에 올라갔을때
$('img').attr('src', '../images/but2.gif');
}, // 다음 이벤트는 ,를 써서 구분한다.
mouseout : function(){ // 마우스가 대상에서 벗어났을때
$('img').attr('src', '../images/but1.gif');
},
click : function(){ // 버튼 클릭 시
alert('이미지 버튼 클릭 ~~');
}
});change()
change() 메소드는 해당되는 요소의 value에 변화가 생길경우 등록된 콜백함수를 동작시킨다.
$('#sel').change(function(sel_ele){
console.log(sel_ele);
var tagVal = $(sel_ele.target).val(); // sel_ele -> select.option
$('#img').attr('src', tagVal); // tagVal은 변수기 때문에 ""하지 않는다
}).change(); // 재귀호출(자신의 함수를 호출하는 기법)jQuery를 이용하는 이유중 ajax의 이용도 큰 부분을 차지한다.
$.ajax({
url : '서버 url or file', // ,를 찍으면 계속하겠다란 의미
dataType : 'html', // file type
success : function(data){
// data : 서버에서 수신받은 데이터 (자료를 저장하는 매개변수)
$('선택자').html(data); // data -> html로 파싱
}
}); // ajax end// $.each() : 객체의 원소를 처리하는 함수
$.each(obj, function(index, item){
실행문;
});
// each()는 객체의 원소만큼 반복함 자체 for문반응형
'TIL' 카테고리의 다른 글
| [TIL] 200824 JAVA. HashMap의 getOrDefault() (0) | 2020.08.24 |
|---|---|
| [TIL] 200730 spring boot에서 mongodb 사용하기 (0) | 2020.07.31 |
| 200122 HTML5, CSS3 추가된 것들 (0) | 2020.01.22 |
| 200121 Date(), RegExp, Ajax (0) | 2020.01.21 |
| 200120 DOM, event, object (0) | 2020.01.20 |