본문으로 바로가기

jQuery

category Frontend/jQuery 2019. 2. 7. 09:43
반응형

※ 표 컬러 코드 = #b3f2df

span 회색배경 = <span style="background-color: #eee; border-radius: 3px; padding: 0 3px;">

li 흰색스타일 = <li style="list-style-type: circle; text-indent: 10px;">

코드 배경 = https://colorscripter.com/

인용구 = <blockquote>

jQuery 초기화


<!DOCTYPE html>
<html lang="ko">
<head>
    ... meta태그 설정 및 CSS 처리 ...
</head>
 
<body>
    ... HTML 태그 ...
    
    <!-- jQuery 참조 -->
    <!-- 실행시간의 이점 때문에 script 코드는 <body>태그 종료 직전 명시 -->
    <!-- 웹 브라우저의 캐시 기능을 활용하기 위해서 CDN방식으로 라이브러리 참조 -->
    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!-- 개발자 작성 영역 -->
    <script type="text"/javascript">
    /** 모든 곳에서 인식할 변수 및 함수 정의 영역 */
    // HTML파일에서 직접 크립트 구현
    // 외부 일로 작성 --> src 속성으로 참조
 
    /** jQuery 구현 부분 */
    $(function() {
        // 이 영역이 페이지 로딩이 완료된 후 실행된다.
        // body의 onload 이벤트 --> 프로그래밍 언어에서의 main() 의 역할.
    });
    </script>
</body>
</html>


HTML 요소 접근

HTML 요소를 jQuery 객체로 생성

var obj = $("CSS셀렉터");


  • 대상 요소를 지정할 수 있는 CSS셀렉터를 사용한다.
  • jQuery에서 사용한 CSS셀렉터가 반드시 <style> 태그에 정의되어 있어야 하는 것은 아니다.
  • 혼란을 피하기 위해 CSS에서는 class형식으로만 셀렉터를 구성하고,
  • jQuery에서는 가급적 id속성만으로 대상을 지정한다.
  • CSS : TAG나 ID속성을 사용한 셀렉터 지양. 자손, 자식 셀렉터의 구성도 가급적 class속성만으로 구성.
  • jQuery : 대부분의 경우 ID속성을 사용하지만 동시에 여러 개의 객체리르 제어해야 할 경우는 class속성도 사용.


HTML 요소 내의 내용 제어

html() 함수는 파라미터가 있을 경우 설정(setter), 파라미터가 없을 경우 리턴(getter)의 기능을 한다.

요소 안에 내용을 설정하기

$("#foo").html(설정할 내용);


요소 안의 내용을 가져오기

var content = $("#foo").html();


JSON 표기법

Javascript에서 사용되는 자료의 나열 방법으로 이름(key)와 값(value)의 쌍으로 구성된다.

이름(key)에는 따옴표 사용이 자유롭다.

기본 정의 방법

var my_height = 176;
var json = {
    name : 'JS학생',        // 문자열은 따옴표 사용
    age : 20,                // 숫자형이나 boolean은 따옴표 사용 안함
    height : my_height        // 다른 변수를 값으로 사용도 가능함
};
 
// 값에 접근하기
console.log(json.name);
console.log(json.age);
console.log(json.height);


배열데이터를 포함하는 경우

var lecture = {
    start : '2018-11-19',
    end : '2019-05-16',
    subject : ['html', 'css', 'javascript', 'android']
};
 
// 값에 접근하기
console.log(lecture.subject[0]); // html
 
// 반복문으로 값에 접근하기
for (var i=0; i<lecture.subject.length; i++) {
    console.log(lecture.subject[i]);
}


JSON 끼리의 중첩

다른 JSON을 포함할 수 있다.

var address = {
    postcode : '12345',
    header : '서울시 강남구 역삼동',
    footer : '123-45'
};
 
var member = {
    user_id : 'student',
    user_name : '학생',
    addr : address
}
 
// 값의 접근
console.log(member.addr.postcode);


축약해서 표현한 경우

var member = {
    user_id : 'student',
    user_name : '학생',
    addr : {
        postcode : '12345',
        header : '서울시 강남구 역삼동',
        footer : '123-45'
    }
}


JSON이 배열에 들어가는 경우

var book1 = { subject : 'html입문', price : 32000 };
var book2 = { subject : 'CSS활용', price : 28000};
var book3 = { subject : 'jQuery실무', price : 47000};
var books = [ book1, book2, book3 ];


축약표현

var books = [
    {
        subject : 'html입문',
        price : 32000
    },
    {
        subject : 'CSS활용',
        price : 28000
    },
    {
        subject : 'jQuery실무',
        price : 47000
    }
];


JSON을 포함하는 배열이 다른 JSON에 들어가는 경우

var library = {
    name : '강남도서관',
    address : '서울시 강남구 ...',
    open : '오전 09시 00분',
    close : '오후 06시 00분',
    book_list : [
        { subject : 'html입문', price : 32000 },
        { subject : 'CSS활용', price : 28000 },
        { subject : 'jQuery실무', price : 47000 },
    ]
};


JSON에 포함된 함수

Javascript에서는 변수에 함수를 참조시킬 수 있다.

var hello = function() {
    ...
};


JSON은 key와 value의 쌍으로 이루어진 데이터 집함.(value=변수, 값)

var data = {
    foo : 123,
    bar : 456
};


즉, value에 function이 참조될 수 있다.

var data = {
    foo : 123,
    bar : function() {
        ...
        // 같은 json에 포함된 다른 변수나 함수에
        // 접근할 경우에는 this를 사용해야 
        console.log(this.foo);
    }
};


jQuery 이벤트 처리

  • 웹 브라우저가 HTML요소를 인식한 후에 처리되어야 하므로 jQuery의 load 처리 안에서 정의한다.
  • 이벤트는 함수 형태로 정의되어 있고, 해당 이벤트가 발생한 경우 호출될 함수를 콜백 파라미터로 전달한다.
  • 콜백함수에는 이벤트의 정보를 갖는 e 객체가 전달된다.
  • 필요한 경우 이 객체를 선언하고 활용할 수 있다.
  • e.preventDefault()는 링크의 href 속성이나 폼의 submit 등에 대해서 HTML 요소가 수행해야 하는 기본 동작을 차단하는 역할을 한다.
// jQuery의 load처리 안에서 정의
$(function() {
    $('#foo').이벤트이름(function( [e] ) {
        [e.preventDefault();]
    });
});


마우스 관련

이벤트

기능

click

요소를 클릭시에 동작한다.

 mouseenter

어떤 요소의 영역 안에 마우스 커서가 들어간 경우 호출된다.

 mouseleave

어떤 요소의 영역 안에 마우스 커서가 빠져나온 경우 호출된다.

dblclick

더블클릭

hover

mouseenter + mouseleave

키보드 관련

이벤트

기능

keydown

버튼을 누르고 있는 동안 지속적으로 발생한다.

keyup

버튼을 눌렀다가 땐 순간 발생한다.

한글을 지원하므로 대부분의 키 처리시 사용 권장

keypress

키보드를 눌렀다가 때는 동작을 1회로 처리한다.

한글인 경우 발생되지 않기 때문에 사용을 권장하지 않는다.

keyCode

  • 키보드에 부여된 일련번호
  • 키 이벤트 발생 시, 이벤트 객체를 통해 전달된다.
  • 이 값을 사용하여 특정 버튼이 눌러진 경우를 판별할 수 있다.
$(function() {
    $('#foo').keyup(function(e) {
        if(e.keyCode == 13) {
            ... 엔터키가 눌러진 경우의 처리 ...
        }
    });
});


요소의 크기 조회

width(), height() 함수의 사용

특정 요소의 크기

var w = $('#foo').width();
var h = $('#foo').height();


웹 페이지 전체의 크기

var w = $(document).width();
var h = $(document).height();


브라우저의 크기

var w = $(window).width();
var h = $(window).height();


스크롤바의 위치

var top = $(window).scrollTop();


반응형 기능

브라우저 크기에 반응하여 동작하는 함수를 정의하고 브라우저가 열린 직후와 창 크기가 변경될 때 동작하도록 호출한다.

function responsive() {
    // 현재 창의 넓이
    var w = $(window).width();
 
    if ( w >= ? ) {
        ... 반응형 기능 구현 ...
    }
}
 
$(function() {
    // 브라우저가 열린 직후
    responsive();
 
    $(window).resize(function() {
        // 창 크기가 변경될 경우
        responsive();
    });
});


인피니티 스크롤

// jQuery의 load처리 안에서 의
$(function() {
    $(window).scroll(function() {
        // iPhone $(window).scrollTop() + $(window).height() >= $(document).height()
        // $(window).scrollTop() + $(window).height() == $(document).height() -15
        // -15는 브라우저 하단 공간차지하는 부분 까지 계산한 것임
        if ( $(window).scrollTop() + $(window).height() == $(document).height() ) {
            ... 스크롤이 맨 밑에 도착한 경우의 처리 ...
        }
    });
});


요소의 판별

index() 함수

특정 요소가 부모 태그 안에서 갖는 인덱스번호를 리턴하는 함수 (0부터 시작함)

<div>
    <a href="#">...</a>
    <div id="hello"></div>
    <p class="memo"></p>
</div>
 
<script>
    // 부모 <div>를 기준으로 2번째 요소이므로 인덱스 1이 리턴된다.
    var idx = $('#hello').index();
</script>


$(this)

복수 요소에 대한 이벤트에 전달된 콜백함수 안에서 이벤트가 발생한 주체를 의미하는 객체

<button class='btn'>button1</button>
<button class='btn'>button2</button>
<button class='btn'>button3</button>
 
<script>
    // `btn`이라는 클래스를 갖는 모든 요소에 대해서 일괄적으로 적용되는 이벤트
    $('.btn').click(function() {
        // 버튼은 한번에 하나씩만 누를 수 있다.
        // 이 안에서 $(this)는 클릭된 주체를 의미한다.
    });
</script>


HTML 요소의 속성 제어

특정 요소에 적용되어 있는 속성값 조회하기

var foo = $('#bar').attr('속성이름');


특정 요소의 적용하기

개별적용

$('#bar').attr('속성이름', '값');


일괄적용 (json형태 사용)

$('#bar').attr({
        '속성이름' : '값',
        '속성이름' : '값',        
        '속성이름' : '값',
        ...
    });


속성이름에 공백이나 - 기호가 포함된 경우는 반드시 따옴표 적용.

그 외에는 따옴표 처리가 필수는 아님

data-* 속성

data-000 형태로 개발자가 필요에 따라 직접 정의하는 속성.

JAVASCRIPT에서 사용할 변수값을 숨겨놓기 위한 목적으로 사용한다.


<div id="foo" data-hello="안녕하세요" data-world="jQuery">
    ...
</div>


data 속성값 조회하기

var foo = $('#bar').data('hello');


data 속성값 적용 / 변경하기

$('#bar').data('hello', '반갑습니다');



HTML 요소의 CSS 속성 제어

특정 요소에 적용되어 있는 속성값 조회하기

var foo = $('#bar').css('속성이름');


특정 요소의 적용하기

개별적용

$('#bar').css('속성이름', '값');


일괄적용 (json 형태 사용)

$('#bar').css({
    속성이름 : '값',
    속성이름 : '값',
    속성이름 : '값'
    ...
    });


만약 css 속성이름에 "-"가 있을 경우 속성이름을 반드시 따옴표 처리해야 함.


HTML 요소의 CSS 클래스 제어

CSS 클래스 적용여부 검사

var foo = $('#bar').hasClass('클래스이름'); // true, false 


CSS 클래스 적용

$('#bar').addClass('클래스이름 클래스이름 ...');


CSS 클래스 삭제

$('#bar').removeClass('클래스이름 클래스이름 ...');


두 개 이상의 클래스를 삭제하고자 하는 경우 공백으로 구분.

CSS 클래스 적용/삭제 자동 반복

$('#bar').toggleClass('클래스이름 클래스이름 ...');


두 개 이상의 클래스를 처리하고자 하는 경우 공백으로 구분.

not()

  • 복수 요소를 지정하고 있는 jQuery 객체 중에서 특정 요소를 제외한 항목들을 지정하는 기능.

this와 함께 하용하는 경우

$('.btn').click(function() {
    // '.btn'중에서 클릭된 요소
    $(this)
    // '.btn'중에서 클릭되지 않은 나머지 요소()들
    $('.btn').not(this)
});


jQuery 객체를 사용하여 not() 함수 사용

'.btn' 중에서 id값이 '#hello'인 요소 제외

$('.btn').not($('#hello'))


'.btn' 중에서 3번째 요소만 제외

$('.btn').not($('.btn:nth-child(3)'))    // 1부터 카운트
$('.btn').not($('.btn:eq(2)'))           // 0부터 카운트


css 셀렉터를 사용하여 not() 함수 사용

'.btn' 중에서 id값이 '#hello'인 요소 제외

$('.btn').not('#hello')


'.btn' 중에서 3번째 요소만 제외

$('.btn').not('.btn:nth-child(3)')    // 1부터 카운트
$('.btn').not('.btn:eq(2)')           // 0부터 카운트


요소의 탐색

메서드 체인

하나의 jQuery 요소에 대하여 메서드를 연속적으로 호출하는 기법.

특별한 경우가 아닌 이상 jQuery()의 함수들은 객체 자신을 리턴한다.

$('#foo').attr(key, value)
         .css(key, value)
         .addClass(cls)
         .click(function() {});


주변 요소 탐색하기

함수

설명 

prev() 

이전 요소를 리턴한다. 

next() 

다음 요소를 리턴한다. 

parent() 

상위 요소를 리턴한다. 

children(0)

하위 요소를 리턴한다. 

eq(n) 

n번째 요소를 리턴한다. 

부모 요소 얻기

주어진 셀렉터를 갖는 가장 인접한 부모 요소를 리턴한다.

$('#foo').parents('셀렉터');


자식 요소 얻기

주어진 셀렉터를 갖는 가장 인접한 자식 요소를 리턴한다.

$('#foo').find('셀렉터');


요소의 동적 생성

<body> 태그 안에 명시된 태그 요소를 객체화 하는 경우

태그 이름을 $() 함수에 전달한다.

var obj = $('div');


<body> 태그 안에 명시되지 않은 태그 요소를 객체화 하는 경우

태그 이름을 <>로 감싸서 $() 함수에 전달한다.

var obj = $('<div>');


이렇게 생성된 요소들은 jQuery의 기능들을 적용할 수 있다.

var obj = $('<div>');
obj.attr('id', 'hello').css(...).addClass('item');


기존에 존재하는 요소를 복사하는 경우

var obj = $('#foo').clone();
obj.attr('id', 'hello');


모든 속성을 동일하게 복사하므로 id속성값 같은 경우(중복되면 안되니까)는

다른 값으로 변경해 줘야 한다.

동적으로 생성된 요소를 HTML 문서에 삽입하기

함수

설명 

A.html(B) 

A의 시작태그와 끝태그 사이의 내용을 B로 대체한다. 

A.append(B) 

A에 B를 추가한다. 기존의 내용을 유지하면서 맨 뒤에 추가한다. 

B.appendTo(A) 

B를 A에 추가한다. 기존의 내용을 유지하면서 맨 뒤에 추가한다. 

A.prepend(B) 

A에 B를 추가한다. 기존의 내용을 유지하면서 맨 앞에 추가한다.  

B.prependTo(A) 

B를 A에 추가한다. 기존의 내용을 유지하면서 맨 앞에 추가한다.  

A.insertBefore(B) 

A를 B의 직전에 삽입한다. 

 A.insertAfter(B) 

A를 B의 직후에 삽입한다. 

A.empty() 

A의 모든 내용을 비운다. 

요소의 숨김, 표시 처리

함수

설명 

show([time, [function]]) 

요소를 표시한다. 

hide([time, [function]])

요소를 숨긴다. 

toggle([time, [function]]) 

요소의 숨김과 표시를 자동 반복한다. 

fadeIn([time, [function]]) 

페이드 효과를 적용하여 요소를 표시한다. 

fadeOut([time, [function]]) 

페이드 효과를 적용하여 요소를 숨긴다. 

fadeToggle([time, [function]]) 

페이드 효과를 적용하여 요소의 숨김과 표시를 자동 반복한다. 

slideDown([time, [function]])

요소를 아래로 펼쳐서 표시한다. 

slideUp([time, [function]]) 

요소를 위로 접어서 요소를 숨긴다. 

slideToggle([time, [function]]) 

요소를 위, 아래로 접고 펼치는 효과를 사용하여 숨김과 표시를 자동 반복 한다. 
  • 시간값은 1/1000초 단위로 지정한다.
  • 두 번째 파라미터인 콜백함수는 처리가 완료된 후 호출된다.

동적으로 생성된 요소에 대한 이벤트 적용

기존의 이벤트 처리는 생성한 객체에 적용한다는 개념이지만,

동적 요소에 대한 이벤트 처리는 앞으로 생성될 객체에 적용할 이벤트를

미리 준비해 둔다는 개념이다.

$(document).on("click", "#hello", function(e) {
    e.preventDefault();
    ...
});


주의 : 동적 생성 요소가 <form>인 경우에은 e 객체를 사용해서는 안된다.

HTML 요소의 위치 변경

append(), prepend(), insertBefore(), insertAfter() 함수 등을 동적 요소가 아닌

기존에 존재하는 HTML 요소끼리 사용하면 서로 위치를 바꿀 수 있다.

<div id="foo"></div>
<div id="bar"></div>
 
<script>
// #foo의 위치가 #bar 다음으로 이동하게 된다.
$("#foo").insertAfter("#bar");
</script>


입력 요소 값 가져오기

값 설정하기

$("셀렉터").val("내용");


값 읽어오기

text, select(드롭다운)

var input = $("셀렉터").val();


드롭다운요소의 경우 사용하지 않는 <option> 태그라 하더라도 value 속성값을 부여해야 한다.

<select name="foo">
    <option value="">--- 선택하세요 ---</option>
    <option value="bar">item 1</option>
</select>


라디오 버튼의 경우

  • 셀렉터가 여러개를 의미하는 경우이므로 그 중에서 선택된 항목만 지정하는 셀렉터를 사용해야 한다.
  • 라디오는 하나만 선택 가능하므로 가져온 결과 자체는 단일 값이다.
var input = $("셀렉터:checked").val();


체크박스의 경우

  • checked 가상클래스를 통해 가져온 대상이 배열 상태가 되므로 이를 반복문으로 처리해야 한다.
  • 배열의 요소는 선택된 체크박스들에 대한 HTMl 태그가 된다.
  • 그러므로 각 HTMl 태그를 다시 jQuery 객체로 변환하여 사용해야 한다.
var input = $("셀렉터:checked");
 
for (var i=0; i<input.length; i++) {
    // 배열에 포함된 원소(HTML태그)를 jQuery 객체로 변환
    var tmp = $(input[i]);
    ...
}


포커스 강제 지정

$("셀렉터").focus();


입력 요소 제어

$.each() 함수

  • 배열을 탐색하는 jQuery 기능.
var data = ["hello", "world"];
 
// 배열을 탐색하면서 원소의 수 만큼 콜백함수가 호출된다.
$.each(data, function(index, item) {
    // index는 순차적으로 0, 1
    // item은 순차적으로 "hello", "world"
});


  • 배열의 원소가 HTML 객체인 경우 jQuery 객체로 변환하여 사용해야 한다. ex) 체크박스
var data = ["<input type='checkbox'/>", "<input type='checkbox'/>"];
 
// 배열을 탐색하면서 원소의 수 만큼 콜백함수가 호출된다.
$.each(data, function(index, item) {
    // $(item) 형태로 객체를 생성하여 처리 가능.
});


  • 원래의 목적은 객체를 탐색하는 기능.
var data = {name: "hello", userid: "world", age: 20};
 
$.each(data, function(index, item) {
    console.log(index + " >> " + item);
});
 


입력요소 관련 submit 이외의 이벤트

포커스가 들어온 경우

$("셀렉터").focus(function( [e] ) {
    ...
});


포커스가 빠져나간 경우

$("셀렉터").blur(function( [e] ) {
    ...
});


상태가 변경된 경우

change 이벤트는 주로 라디오, 체크박스, 드롭다운에 대하여 활용도가 높다.

$("셀렉터").change(function( [e] ) {
    ...
});


텍스트를 입력하는 요소일 경우

  • 내용이 변경되고 포커스가 빠져 나올 때 이벤트가 발생한다.

체크박스나 라디오 버튼의 경우

  • 선택 상태가 변경된 즉시 발생한다.

드롭다운의 경우

  • 선택 상태가 변경된 즉시 발생한다.

프로퍼티 설정

  • HTML 태그에서 값을 갖지 않는 속성 : property
  • 값을 갖는 속성 : attribute

프로퍼티의 적용 여부 조회

특정 프로퍼티의 적용 여부를 boolean 값으로 조회한다.

(checked, disabled, selected 등)

var is = $("셀렉터").prop("프로퍼티 이름");


ex) 체크박스의 checked 속성이 적용되어 있는지 여부 확인

<input type="checkbox" class="foo" disabled />



// 속성이 적용되어 있으므로 true
var ok = $(".foo").prop("disabled");


프로퍼티의 설정 / 해제

prop 함수에 두 번째 파라미터로 boolean 값을 전달하면 프로퍼티를 강제로 설정하거나 해제할 수 있다.

$(".foo").prop("disabled", true|false);


정규표현식

  • 문자열의 형식을 검사하기 위한 정형화된 식.
  • 모든 프로그래밍 언어에서 공통적으로 사용한다.

Javascript에서 정규표현식 사용

var regex = /정규표현식/;
if (!regex.test("검사할 문자열")) {
    // ... 정규표현석에 부합하지 않을 우의 처리 ...
}



주요 정규표현식

숫자 모양에 대한 형식 검사

/^[0-9]*$/


영문으로만 구성되었는지에 대한 형식 검사

/^[a-zA-Z]*$/


한글로만 구성되었는지에 대한 형식 검사

/^[ㄱ-ㅎ가-힣]*$/


영문과 숫자로만 구성되었는지에 대한 형식 검사

/^[a-zA-Z0-9]*$/


한글과 숫자로만 구성되었는지에 대한 형식 검사

/^[ㄱ-ㅎ가-힣0-9]*$/


이메일 형식인지에 대한 검사. 아이디@도메인의 형식을 충족해야 한다.

/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i


'-'없이 핸드폰번호인지에 대한 형식검사.

/^01(?:0|1|[6-9])(?:\d{3}|\d{4})\d{4}$/


'-'없이 전화번호인지에 대한 형식검사. 각 부분에 대한 자리수도 충족시켜야 한다.

/^\d{2,3}\d{3,4}\d{4}$/


'-'없이 주민번호에 대한 글자수 및 뒷자리 첫글자가 1~4의 범위에 있는지에 대한 검사

/^\d{6}[1-4]\d{6}



반응형
저작자표시 비영리 변경금지

'Frontend > jQuery' 카테고리의 다른 글

input 실시간 감지  (0) 2019.06.23
CKEDITOR 포커스, 내용길이, 내용초기화, 사이즈조절  (0) 2019.03.06
하루 전 날짜 계산  (0) 2019.02.20
클립보드에 복사하기  (0) 2019.02.20
html & remove 차이점  (0) 2019.02.11
댓글 , 엮인글
Jeffrey Oh's Notepad
블로그 이미지 Jeffrey Oh 님의 블로그
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바