jQuery

오리세퀴·2024년 1월 30일

jquery

html

목록 보기

4/5

jQuery

전 세계에서 가장 많이 사용되는 JavaScript 라이브러리
HTML 요소 제어
=> HTML 요소를 손쉽게 획득하고 제어할 수 있다.
손쉬운 이벤트 처리
=> 단 한번의 이벤트 정의로 크로스 브라우징 해결
요소의 탐색과 생성
=> DOM 요소를 제어하기 위한 간결한 기능 제공
Ajax 통신처리
=> 페이지 이동이 없는 비동기 데이터 통신

jQuery 특징

크로스 브라우징
=> 한 번의 코딩으로 거의 모든 브라우저에게 적용된다.
간결한 문법
=> HTML 태그 (element)를 제어하거나 이벤트를 처리하는 부분 등 Javascript의 전반에 걸쳐서
구문이 짧아지기 때문에 개발 효율성이 높아진다.
익숙한 구문
=> CSS에서 사용하던 속성과 값을 그대로 Javascript 구문에 적용할 수 있어서
document 내장 객체가 제공하는 기능을 쉽게 사용할 수 있다.
다양한 플러그인
=> jQuery를 기반으로 하는 수많은 플러그인들이 무료로 배포되고 있기 때문에,
갤러리, 메뉴 등의 구현에 대한 작업이 많이 단축된다.

jQuery 개발 환경

jQuery 라이브러리

사이트 : https://www.jquery.com

jQuery 참조하기

① js 파일을 다운 받아서 사용

② http://code.jquery.com의 CDN 서비스를 사용

CDN
1. jQuery.com CDN : <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
2. 구글 CDN       : <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
3. MS CDN         : <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
4. CDNJS CDN      : <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
5. jsDelivr CDN   : <script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>

CDN(Contents Delivery Network) 이란?

지리, 물리적으로 떨어져 있는 사용자에게 컨텐츠를 더 빠르게 제공할 수 있는 기술
느린 응답속도 / 다운로딩 타임 을 극복하기 위한 기술

이런 느낌..!

<body>
    <h1 id="hello"></h1>
    <!-- ./jquery-3.7.1.min.js -->
    <script src="http://code.jQuery.com/jquery-3.7.1.min.js"></script> 
    <script>
        function hello(){
            var h1 = document.getElementById('hello');
            alert(h1.tagName)

            h1.innerHTML = 'Hello jQuery'
        }
        //javascript
        /*
        window.onload = function(){
            hello();   
        }
        */

        //jquery로 변환
        jQuery(hello);

    </script>
</body>

$()

그냥 이름이 $인 함수 그 자체이다. $ 함수를 호출하는 것이다.
jQuery 라이브러리 내부를 보면 window.jQuery = window.$ = jQuery 로 동일한 코드이다.

CSS 셀렉터

jQuery에서 제어할 대상에 접근하는 방법

jQuery는 제어할 요소를 획득하기 위해서 $() 함수안에 대상을 의미하는 CSS 셀렉터를 파라미터로 전달한다.
예) var mytag = $("h1"); // h1 태그 객체 획득하기
예) var mytag = $(".hello"); // "hello" 라는 class 속성값을 갖는 요소의 객체 획득하기
예) var mytag = $("#hello"); // "hello" 라는 id 속성값을 갖는 요소의 객체 획득하기

Javascript에서 event.keyCode 를 하면 각 키보드에 해당하는 고유번호를 알 수 있다.
이 메소드가 jQuery에서는 event.which 으로 사용하게 된다.
.keydown, .keyup - 대소문자 구별X (A도 a도 65라고 나온다)

Attribute

attr() / prop (많이쓰임)
jQuery 1.6버전 이전에는 attr() 만으로 가능하던 처리를 1.6 업데이트로 attr()과 prop() 으로 나뉘어졌다.
이전에는 attr() 하나로 많은 것을 처리하려다 보니 버그 및 문제가 발생하여 업데이트를 통해 불완전을 해소했다고 한다.

attr()

HTML에 작성된 속성값을 문자열로 받아온다

[형식]
var 변수명 = $("요소").attr("속성이름");$ ("요소").attr("속성이름", "값");

$("요소").attr({
"속성1이름": "값",
"속성2이름": "값",
"속성3이름": "값"
});

prop()

지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가한다
자바스크립트의 프로퍼티를 가져온다
주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript 입장에서의 속성(property)이라는 것이다
자바스크립트의 프로퍼티 값이 넘어오기 때문에 boolean, date, function 등도 가져올 수 있다

[형식]
.prop("속성이름") → 속성값을 가져온다
.prop("속성이름", "값") → 속성값을 추가한다

.hasAttribute(name) —> 속성의 존재 확인
.getAttribute(name) — 속성값을 가져온다
.setAttribute(name, value) — 속성값을 변경
.removeAttribute(name) — 속성값을 제거

$(function(){
            console.log('attr = ' + $('a').attr('href')); // # (값을 가져오는듯)
            console.log('attr = ' + $('a').prop('href')); // http://localhost:8081/jQuery/03_jQueryAttr/exam01.html# 

            var check = $('#check');
            console.log('check = ' + check); // [object Object]
            console.log('check = ' + check.prop('tagName')); // INPUT
            console.log('attr = ' + check.attr('checked')); //checked
            console.log('prop = ' + check.prop('checked')); // true

            var check2 = document.querySelector('#check');
            console.log('attr = ' + check2.getAttribute('checked')); // (원래) getAttribute -> attr (변형된거)
        });

CSS

스타일 지정
(1) 속성값 읽기
var 변수명 = $("요소").css("CSS 속성이름");

(2) 속성값 변경 및 추가하기
$("요소").css("속성이름", "값");

$("요소").css({
"속성1이름": "값",
"속성2이름": "값",
"속성3이름": "값"
});

클래스 속성 지정
(1) CSS 클래스의 적용 여부 알기
var 변수 = $("요소").hasClass("클래스이름");

(2) 클래스의 적용과 해제
$("요소").addClass("클래스이름");$ ("요소").removeClass("클래스이름");

(3) 클래스의 적용과 해제의 반복 처리

HTML 태그 요소의 CSS 클래스에 대한 적용과 해제를 자동 순환 반복
$("요소").toggleClass("클래스이름");

.not()

제이쿼리로 선택한 선택자(요소)들 중에서, 특정 선택자(요소)만을 제외하는 함수

this / $(this)
=> this는 자바스크립트이고 $(this) 제이쿼리 문법이다.
=> this의 경우 해당 이벤트가 발생한 요소를 표시해주고
$(this)는 이벤트가 발생하면 발생한 태그를 Object로 보여준다는게 다른점이다.
=> this와 같은 데이터를 갖기 위해서는 $(this)[0] 을 사용하면 된다.
this === $(this)[0]

slideUp(), slideDown(), slideToggle()은 반드시 태그에 width, height 속성을 주어야 한다
그렇지 않으면 toggle()와 똑같은 동작을 한다

slideUp(speed) : speed값을 지정해서 슬라이드업 효과를 줄 수 있다
speed : "slow" or "fast" or milliseconds(1/1000초)

애니메이션

모든 애니메이션 관련 함수들은 시간값 외에 두 번째 파라미터로 함수를 지정할 수 있다.
이 함수들에 애니메이션 처리가 종료된 후에 동작할 내용을 담는다.

예) show(time [, function() {......}])

animate() 함수를 사용한 CSS 속성의 애니메이션 처리

좀 더 다이나믹한 애니메이션을 구현할 수 있다.
animate() 함수는 수치값을 지정하는 CSS 속성들을 제어하여 애니메이션 효과를 만들어 낸다.
구조
animate(properties [, duration][, easing][, complete])

① properties

움직임을 만들어 낼수 있는 CSS 속성들. json 형식으로 기술된다.
② duration
애니메이션의 지속시간 설정
③ easing
움직임에 변화를 줄 수 있는 속성.
swing : 끝점에 가서 속도가 살짝 느려짐
linear : 균일한 속도 유지
④ complete
움직임이 멈춘 후 실행될 속성.
움직임이 완료된 다음 이 속성에 지정된 함수가 실행된다.

DOM

요소의 탐색과 생성

jQuery는 특정 HTML 요소에 대한 객체를 기준으로 그 주변 요소나 태그의 트리 구조를 탐색할 수 있다.
jQuery는 웹브라우저에 보여지는 HTML 태그 안에 HTML 요소를 생성하여 포함시키도록 하는 기능을 지원한다.

DOM (Document Object Model)

DOM은 HTML과 XML 문서에 대한 구조적 정보를 제공하는 양식이다.
즉, DOM이 HTML과 XML 문서의 뼈대를 의미한다.
DOM은 문서구조나 외양 및 내용을 바꿀 수 있도록 프로그램에서 접근할 수있는 방법을
제공하는 인터페이스를 말한다.
DOM은 프로퍼티와 메소드를 가지는 객체와 노드의 트리형 구조로 표현되는데,
이 구조는 스크립트나 다른 언어에서 웹페이지에 접근할 때 필수적이다.

(1) DOM의 구성요소
① Element : (= HTML 태그) 하나의 태그 요소를 의미한다.
② Attribute : (= HTML 태그 속성) 하나의 Element에 속해 있는 속성들을 의미한다.
③ Node : 하나의 Element에서 시작되는 트리 구조,
하나의 노드 안에는 여러개의 노드가 포함되어 있을 수 있다.

(2) DOM 트리 구조

DOM 객체의 제어

다이나믹한 대화형 웹페이지 제작에서 DOM을 제어하는 것은 중요하다.
jQuery의 기능들도 모두 DOM을 제어했기 때문에 가능한 것이다.
jQuery가 제공하는 5개 함수를 통해, 하나의 요소를 기준으로 상대적으로 탐색할 수 있다.
① next() : 현재 요소를 기준으로 다음 요소를 리턴 한다.
② prev() : 현재 요소를 기준으로 이전 요소를 리턴 한다.
③ parent() : 현재 요소를 기준으로 상위 요소를 리턴 한다.
④ childrun() : 현재 요소를 기준으로 하위 요소를 배열로 리턴 한다.
⑤ eq(n) : 현재 요소를 기준으로 하위 요소 중 n번째 요소를 선택한다. n은 0부터 시작한다.

조상과 자손의 검색
(1) 직계 자손이나 항렬이 같은 친척 찾기

next(), prev(), parent(), childrun(), eq(n) 함수들은 특정 요소와 인접해 있는 다른 요소들을
탐색한다. 즉 이 함수들은 HTML 태그의 Node를 타고 다니는 것과 같은 효과를 갖는다.

(2) 가까운 조상 찾기

parents() : HTML 요소가 인접해 있지 않더라도, 현재 객체 요소의 상위 태그 중에서
파라미터로 전달된 셀렉터가 가리키는 가장 가까운 요소를 찾는다.
사용법
$("CSS셀렉터").parents("CSS셀렉터");

(3) 가까운 자식 찾기

find() : HTML 요소가 인접해 있지 않더라도, 현재 객체 요소의 하위 태그 중에서
파라미터로 전달된 셀렉터가 가리키는 가장 가까운 요소를 검색한다.
사용법
$("CSS셀렉터").find("CSS셀렉터");

on() 함수

비동적
$("요소").on("이벤트", function() {
... 이벤트 처리 ...
});
동적

앞으로 동적으로 추가할 요소에 대한 이벤트를 미리 정의해 놓는 기능이다.
새로 추가될 요소에 대한 이벤트이기 때문에 이 이벤트가 정의되는 시점에서는 대상이
존재하지 않기 때문에, 이 이벤트는 document 객체에 설정해야 한다.

$(document).on( "이벤트", "셀렉터", function() {
... 이벤트 처리 ...
});

 $(document).on('click','.delete_btn', function()

load()

읽어오고자 하는 대상의 내용이 단순한 text나 html 태그를 표현하며
읽어온 내용을 특정 요소에 출력하는 것만을 목적으로 할 경우 load() 함수를 사용해 코드를 축약할 수 있다.

$("CSS셀렉터").load(
"읽어올 대상의 URL"
[, function() { ...읽기에 성공한 후 실행될 함수...}]
);

$('#category2').load('../text/category-data.html ' + target, function(){
                    $(this).show();
                });
            });

예) "readme.html" 파일의 전체 내용 중에서 "#my"라는 id값을 갖는 요소만을 읽어올 경우
$("출력할 대상의 셀렉터").load("readme.html #my");

오리세퀴

공부하기위한메모장

이전 포스트

javascript

다음 포스트

jQuery

html

jQuery

jQuery 특징

jQuery 개발 환경

$()

CSS 셀렉터

Attribute

CSS

애니메이션

DOM

on() 함수

load()

javascript

JSP

0개의 댓글