Everything has an expiration date
[JQuery 개념 복습] (ing...) 본문
[jQuery 기본 함수]
① jQuery()
② jQuery(document).ready()
③ $()
④ $(document).ready()
→ 페이지가 요청되었을 때, 클라이언트가 아무런 이벤트를 발생시키지 않아도 자동으로 동작한다.
[jQuery 선택자를 통한 객체 가져오기]
`$("선택자")`
$("선택자")
① $("#선택자") → id 선택
② $(".선택자") → class 선택
③ $("h1") → Element 선택
[jQuery 클릭 이벤트 처리]
$("선택자").click( function() { } );
ⓐ <h1> 엘리먼트가 클릭되었을 때 특정 동작 수행하도록 하기
$("h1").click( function() { } );
ⓑ 클릭된 객체의 내용(HTML) 경고창(alert)에 띄우기
$("h1").click(function()
{
alert( $(this).html() );
});
[jQuery 이벤트 처리 - 『on』] - 이벤트가 발생할 때마다
$("선택자").on("이벤트", 기능·동작·행위)
→ 『$("h1").on("click", function() { } );』
(* example)
$("h1").on("click", function()
{
alert("h1 객체 클릭");
});
[jQuery 이벤트 처리 - 『one』] - 이벤트가 처음 발생했을 때 한 번만
$("선택자").one("이벤트", 기능·동작·행위)
→ 『$("h1").one("click", function() { } );』
[jQuery 클릭된 객체의 내용(HTML) 뒤에 특수문자 붙이기]
[방식 1]
$("h1").click(function()
{
alert( $(this).html( $(this).html() + "◎" );
});
[방식 2]
$("h1").on("click", function()
{
$(this).html(function(index, html)
{
return html + "◎";
});
});
[jQuery 여러 이벤트에 대한 여러 기능 동작시키기]
$("선택자").on({이벤트:기능, 이벤트:기능, ....});
$("h1").on(
{
이벤트:function() { }, 이벤트:function() { }
});
[jQuery 마우스에 대한 이벤트 처리]
mouseenter | 마우스 진입 이벤트 |
mouseleave | 마우스 이탈 이벤트 |
hover | mouseenter와 mouseleave 가 합쳐져 있는 형태의 이벤트. |
mousemove | 마우스가 요소에서 움직이는 이벤트 |
mouseout | 마우스가 요소에서 떠나는 이벤트 |
mouseup | 마우스를 눌렀다가 뗐을 때의 이벤트 |
[jQuery 클래스 추가·제거 이벤트 처리]
ⓐ `$("선택자").addClass("클래스명")` : 클래스 추가
ⓑ `$("선택자").removeClass("클래스명")` : 클래스 제거
[jQuery "h1" 객체에 마우스 진입시 "item" 클래스 추가]
$("h1").mouseenter(function()
{
$(this).addClass("item");
});
[jQuery hover 이벤트를 이용한 마우스 진입·이탈 이벤트 처리]
hover 이벤트가 발생했을 때, 총 두 개의 기능(function())이 동작하도록 구성.
『$("h1").hover( function() { }, function() { });』
$("h1").hover(function()
{
$(this).addClass("item");
}, function()
{
$(this).removeClass("item");
});
[jQuery 클릭된 <div> 객체 내부의 <h1>과 <p> 태그 선택하기]
$("div").click(function()
{
alert( $("h1", this).text() );
// div 내부의 h1 태그 텍스트를 출력한다.
alert( $("p", this).text() );
// div 내부의 p 태그 텍스트를 출력한다.
});
[jQuery 이벤트 강제 발생시키기 : trigger(트리거)]
$("선택자").click( function() { } );
(*example) <input> 태그의 type="button"인 객체가 클릭 됐을 때
<h1> 태그의 첫 번째 객체와 마지막 객체에
강제 클릭 이벤트 발생시키기.
// h1 객체를 클릭했을 때, h1객체의 html 끝에 "Ⅹ" 문자를 추가한다.
$("h1").click(function()
{
$(this).html(function(index, html)
{
return html + "Ⅹ";
});
});
// <input> 태그의 type="button"인 객체가 클릭 됐을 때
// 강제로 h1 태그의 첫 번째 객체와, 마지막 객체가 클릭되는 이벤트를
// 발생시킨다.
$("input[type=button]").click(function()
{
$("h1").first().click();
$("h1").last().click();
});
[jQuery 키보드 관련 이벤트]
① keydown : 키보드가 내려가기 시작했을 때.
② keypress : 키보드가 끝까지 다 눌려졌을 때 (접점에 닿았을 때)
③ keyup : 눌렸던 키보드에서 손을 떼어, 키가 위로 올라갔을 때
[jQuery textarea에 키보드로 내용을 입력할 때 이벤트 처리]
$("textarea").keydown(function() { });
$("textarea").keypress(function() { });
$("textarea").keyup(function() { });
[jQuery 입력 컨트롤(textarea)에 입력된 값을 경고창을 통해 확인하기]
ⓐ keydown 이벤트가 발생했을 때, 입력 값 확인하기 Ⅹ
$("textarea").keydown(function()
{
alert( $(this).text() );
alert( $(this).html() );
});
→ 입력 값을 확인할 수 없다. 『""』
ⓑ keypress 이벤트가 발생했을 때, 입력 값 확인하기 Ⅹ
$("textarea").keypress(function()
{
alert( $(this).text() );
alert( $(this).html() );
});
→ 입력 값을 확인할 수는 있으나, 한 박자 느리게 확인 된다.
▶ 실제 입력 : "ㄱ" → "ㅏ" → "ㅈ" → "ㅣ"
▶ alert 결과 : "" → "ㄱ" → "ㅏ" → "ㅈ"
keydown으로 구성했을 경우, 내가 입력하기 이전의 값을 가져온다.
키보드 입력 한 사이클이 끝난 다음에 입력 값을 가져와야 하기 때문에
keyup 이벤트가 발생했을 때 입력 값을 가져와야 제대로 된 입력값을
가져와 주는 것이다.
ⓒ keyup 이벤트가 발생했을 때 입력 값 확인하기 ◎
$("textarea").keypress(function()
{
alert( $(this).text() );
alert( $(this).html() );
});
→ 모든 입력 값이 제대로 가져와지는 것을 확인할 수 있다.
키보드 입력 이벤트 한 사이클이 지난 후에 입력 값을 가져오므로
한 번의 입력에 대한 문자를 제대로 가져와 주는 것을 확인할 수 있다.
[jQuery 키보드 입력에 대한 글자 수 측정하기]
$("textarea").keyup(function()
{
// "textarea" 객체에 적힌 모든 글자들(val())의 길이를 저장.
var len = $(this).val().length;
// 만약, 입력 가능한 글자 수를 30자로 제한했을 때
// 현재의 입력 글자 수에 대한 나머지 작성 가능 글자 수를 저장.
var remain = 30 - len;
});