jQuery 기본 #1 (노트)
jQuery
HTML5 문서 내에서 스크립트 언어를 단순화하여 사용가능하도록 설계된 경량 프레임 워크(자바 스크립느로 만들어짐!)
jQuery -> 모바일 (jquery-1.6.2-min.js) / 일반 (jquery-1.6.2.js)
jQuery -> HTML5 / CSS3 / JavaScript / DOM
*DOM : Document Object Model
===============================
jQuery 사용방법
1. jquery-1.6.2.js 를 로드 :
1-1. 프로젝트 내부에 jquery-1.6.2.js 파일을 직접 로드
1-2. 해당사이트에서 로드
<script src="http://code.jquery.com/~~~.js></script>
**HTML5 기반일 경우!
<!DOCTYPE html>
<meta charset="UTF-8">
<script> </script>
-----------------------
HTML5 구성요소들
1.~~~.html -> 문서구조 및 기능
2.~~~.css -> 문서꾸미기
3.~~~.js -> 이벤트 및 간단한 연산 수행
===============================
라이브러리 사용방법
1. 프로젝트 내부에 넣어서 사용하는 방법
~~~.jar -> WebContent -> WEB-INF -> lib
~~~.js -> WebContent -> 폴더생성
2. 웹상에서 실시간 다운로드하여 사용하는 방법
(반드시 인터넷이 안정적인 곳에서만 사용해야함!)
~~~.jar -> Maven -> 실시간 다운로드
(Gradle)
~~~.js -> <script src=~~~></script>
-> CDN (Content Delivery Network)
===============================
<script>
$(document).ready(function() { // 페이지가 준비되었을 때
//내부에 코딩~~
});
</script>
여기에서~~~~~~~~~~~
********************
$ = jQuery 객체
jQuery() = $()
document = 웹 문서 (바디와 바디 사이)
ready = jQuery 내부의 함수
(function(){~~~}) = 함수 선언부
********************
$(document).ready(function() { ~~~~ });
$ : jQuery 객체 (function( window, undefined ){
var document = window.document
}
-----기본 코드가 된다-----
<script> // <script type="text/javascript">이부분은 HTML5에서는 사라지는 부분이다.
$(document).ready(function() { // 페이지가 준비되었을 때
//내부에 코딩~~
//일반 자바스크립트
//jQuery 내부 함수들...
test();
function msg(){
}
msg(); //이렇게 내부에서 함수 새로 작성하고 바로 사용해도 가능
});
// 따로 함수를 만들고 싶은 jQuery 외의 함수는 따로 선언 후 위의 내부에 넣어서 사용가능
function test(){
msg(); //이거는 위에 내부에서 생성된 애기 때문에 오류이다!!!!!
}
</script>
| JavaScript 와 jQuery | |
| JavaScript | jQuery |
| 사용시: <script> 내부에 코딩 </script> function init(){ ~~~ } <body onload="init()"> |
사용시: <script src="~~.js"></script> <script> $(document).ready(function() { 내부에 코딩~~ }); </script> |
| 클릭 시, function test(){ ~~~ } <button onclick="text()"> |
클릭 시, $('#btn').click(function(){ ~~~~~ } <button id="btn"> |
Selector : 선택자/선택기/실렉터/셀렉터
Outline 쪽 보면 자식요소 쉽게 확인할 수 있음!!
02.Selector.html 파일의 구성요소들
<html>
<head>
<meta>
<title>
<script>
<style>
<script>
<body>
<h3>
<ul>
<li> - <u>
<li>
<li>
<li>
<li> - <u>
정규표현식 실렉터
<a href="ul_문제해결시나리오_예시.pdf">닷넷코리아</a>
이런식으로 href가 pdf, 압축파일, mailto 등의 기능을 보유할수 있다.
테이블의 짝수번째 배경색 변경
tr / td 들도 각 순서대로 인덱스 값 0,1,2~~~ 으로 가진다
$(document).ready(function() {
$('tr:odd').addClass('redColor');
$('tr:even').addClass('blueColor');
});
특정 텍스트 검색
$(document).ready(function() {
// <시작태그>~~~</닫는태그> 사이의 글씨를 이용하여 요소선택
$('td:contains("o")').addClass('redColor'); //startwith, endwith, substring, contains 이런것들 있다.
});
메서드 체인
$(document).ready(function() {
//특정요소의 형제들 .siblings()
//특정요소의 부모 .parent()
//요소의 인덱스를 이용 .find('요소: eq(인덱스)')
//RedPlus 글씨를 갖는 요소의 형제들
$('td:contains("Red")') //<td>RedPlus</td>
.siblings() //<td>레드플러스</td> <td>닷넷</td>
.addClass('redColor')
.parent() //두번째 <tr>!!!!
.find('td:eq(0)') //<td>RedPlus</td>
.addClass('blueColor');
//이렇게 한줄씩 끊어서 사용해도 된다! 세미클론 위치만 확인 잘할 것!
});
DOM 요소 가져오기
//사람마다 함수 표현 방식이 다를수있으니 한번씩 알아둘것!!
// $(document).ready(function(){ ~~~ });
// $().ready(function(){ ~~~ }); //document 생략 가능!
$(function() { //추가로 더 생략도 가능!!
//특정 요소의 태그명을 추출 : 검색요소.get(0).tagName
var t = $('#dnk').get(0).tagName;
alert(t);
// name=값이 n3인 요소의 태그명
var n = $('input[name="n3"]').get(0).tagName;
alert(n);
});
bind() 메서드로 동적으로 이벤트 부여
$(document).ready(function() {
//bind() : 요소와 이벤트를 묶어주는 역할을 담당. 반대로 풀어주는건 unbind()
//요소.bind("이벤트명", 이벤트 발생시 호출되는 함수);
//요소.unbind("이벤트명");
// *click 이벤트는 대부분의 요소에 적용할 수 있다...
$('#btnClick').bind("click", function(){
alert("클릭됨!!!");
});
$('#btnClick').bind("mouseover", function(){
alert("요소위로 마우스커서가 올라감!");
$(this).addClass('red');
//이벤트 발생시 호출되는 함수내에서 $(this)는 이벤트를 발생시킨 요소 자기자신!!
});
$('#btnClick').bind("mouseout", function(){
alert("요소위로 마우스커서가 빠져나감!");
$(this).addClass('silver');
});
});
스타일 추가/제거
$(document).ready(function() {
//여러가지 이벤트를 bind()로 계속 묶어주는 방법
//스타일 클래스 적용 : addClass('스타일클래스명') / 반대 : removeClass('스타일클래스명')
$('#btnClick')
.bind("mouseover", function(){
$(this).addClass('yellowBorder');
})
.bind("mouseout", function(){
$(this).removeClass('yellowBorder');
});
});
this.id로 DOM 요소의 id 속성 가져오기
$(document).ready(function() {
$('.redColor').bind('click',function(){
// 1. 모든 요소의 스타일 제거 : removeClass()
$('#mainMenu .redColor').removeClass('redColor');
// 2. 이벤트를 발생시킨 요소에만 다시 스타일 추가 : addClass()
$(this).addClass('redColor');
});
});
bind() 중 click 이벤트는 click()메서드로 사용
$(document).ready(function() {
$('#mainMenu .redColor').click(function(){
if(this.id == "naver"){
location.href="http://www.naver.com";
}
else if(this.id == "daum"){
//location.href="http://www.daum.net";
window.open("http://www.daum.net", "창이름", "width= 700 height=700");
}
else{
location.href="http://www.google.com";
}
});
});
filter() 메서드를 사용해서 조건에 맞는 요소만 가져오기
<img src="" title="닷넷" alt=".net" />
title은 마우스 올렸을 때 나오는 내용,
alt는 사진을 못찾았을때 나오는 내용
$(document).ready(function() {
//filter() 함수는 걸러내는거 -> 종료하려면 반드시 end() 로 닫아주고 다시 filter()를 써서 걸러내야한다.
//filter('요소선택'), 종료 end()
//1. 모든 이미지에 redBorder 스타일 적용
//2. title="닷넷"인 요소만 five 적용
//3. alt="~~~va" 로 끝나는 요소의 스타일 제거
$('img').addClass('redBorder')
.filter('[title*="닷넷"]').addClass('five')
.end()
.filter('[alt$="va"]').removeClass('redBorder');
});
slice() 메서드로 지정된 개체만 가져오기 (subString 같은거)
$(document).ready(function() {
//size() 선택된 요소의 갯수
alert("현재 웹 문서에는 "+ $('input').size() + "개의 input 태그가 존재");
//slice(시작 인덱스, 직전 인덱스) //slice(시작 인덱스) 이렇게 하면 시작부터 끝까지 다 선택함
$('input').slice(1,3).addClass('red');
});
toggle() 메서드로 토글링
$(document).ready(function() {
//toggle(함수, 함수) : 두 가지 일을 반복하는 함수 (즉, on/off 기능)
/**
$('#btn').toggle(
function(){
$('#myLayer').addClass('hidden');
},
function(){
$('#myLayer').removeClass('hidden');
}
);
**/
$('#btn').toggle(f1,f2);
function f1(){
$('#myLayer').addClass('hidden');
}
function f2(){
$('#myLayer').removeClass('hidden');
}
});
toggleClass() 메서드로 CSS 클래스에 대한 토글링
$(document).ready(function() {
$('#btn').click(function(){
//toggleClass('스타일클래스') <=> addClass() / removeClass()기능을 하나로...
$('#myLayer').toggleClass('hidden');
});
});
hover()로 마우스오버와 아웃을 동시 처리
$(document).ready(function() {
//hover(함수, 함수)는 mouseover <=> mouseout 기능을 번갈아 가며사용...
$('table tr').slice(1).hover(over, out);
function over(){
$(this).addClass('hover');
}
function out(){
$(this).removeClass('hover');
}
});
one()메서드로 한번만 실행 (초기데이터 insert 하거나 하는경우를 위함)
$(document).ready(function() {
//bind() / click() 함수는 이벤트를 해제하기 전까지 계속 유지
//one('이벤트명', 함수) 는 처음 한번만 이벤트가 가능!!
$("#btn").one("click", eventOne);
function eventOne(){
alert("한번만 가능한 행동!");
}
});
폰트 늘리기 및 줄이기
$(document).ready(function() {
//css() 요소의 현재 스타일 속성들을 반환
//css("스타일속성명") 해당 속성값을 반환
//css("스타일속성명", 속성값) 해당 요소에 스타일 속성을 설정
$('div.button').click(function(){
//jQuery에서 요소의 내부 속성들을 변경 시키기 위해 변수를 선언할 경우에는
//var $변수명 과 같이 선언해야 한다!!
/**
var 변수명 = 요소;
변수명.자바스크립트 관련 함수들만 사용 가능
var $변수명 = 요소;
$변수명.제이쿼리 관련 함수들 사용가능
**/
var $region = $('div.region');
var currentSize = $region.css('fontSize'); //"16px"
var num = parseFloat(currentSize, 10); //"16px" -> 16
(자바함수!)
var unit = currentSize.slice(-2); //"16px" -> "px"
(자바함수!)
if(this.id=="goBig"){
num = num * 1.5; //1.5배 늘리기 => num *=1.5
}else{
num = num / 1.5; //1.5배 줄이기=> num /=1.5
}
$region.css('fontSize', num+unit); //num+unit -> 24+"px" -> "24px"
});
});
브라우저 버전 알아내는 방법
$(document).ready(function() {
alert("현재 웹 브라우저 버전은 " + jQuery.browser.version + "입니다");
});
콜백 : 매개변수로 함수를 전달
$(document).ready(function() {
//Callback : 이벤트가 발생한 후 자동 호출되는 개념
$('p:eq(1)')
.css("backgroundColor", "Yellow")
.click(function(){
alert("클릭!!"); //경고창이 나오면 그 이후 코드는 대기상태,
var $thisPara = $(this); // <- <p>두번째</p> 가 제이쿼리 객체로 저장..
$thisPara.next() //바로 다음 형제 : <p style="display: none;">세번째</p>
.slideDown('slow', function(){
$thisPara.slideUp('slow');
});
});
});