도담도담

jQuery 기본 #1 (노트) 본문

IT 공부/KH 정보교육원

jQuery 기본 #1 (노트)

Zinisang 2021. 6. 2. 18:08

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');
});
});
});

 

'IT 공부 > KH 정보교육원' 카테고리의 다른 글

세미프로젝트 css 설정 및 디테일 내용  (0) 2021.06.04
jQuery 기본 #2 (참고)  (0) 2021.06.03
index 페이지(시작페이지), main 페이지 작성  (0) 2021.06.01
개념정리 노트  (0) 2021.06.01
Collection이란?  (0) 2021.05.31
'IT 공부/KH 정보교육원' Related Articles more
Comments