입력 양식 필터 선택자1 input의 type속성에 따라 문서 객체를 선택(속성 선택자랑 같은 기능이지만 사용법이 간단함)
메서드
기능
$(‘요소:button’)
input 태그 중 type 속성이 button인 문서 객체와 button 태그를 선택
$(‘요소:checkbox’)
input 태그 중 type 속성이 check인 문서 객체를 선택
$(‘요소:file’)
input 태그 중 type 속성이 file인 문서 객체를 선택
$(‘요소:image’)
input 태그 중 type 속성이 image인 문서 객체를 선택
$(‘요소:password’)
input 태그 중 type 속성이 password인 문서 객체를 선택
$(‘요소:radio’)
input 태그 중 type 속성이 radio인 문서 객체를 선택
$(‘요소:reset’)
input 태그 중 type 속성이 reset인 문서 객체를 선택
$(‘요소:submit’)
input 태그 중 type 속성이 submit인 문서 객체를 선택
$(‘요소:text’)
input 태그 중 type 속성이 text인 문서 객체를 선택
입력 양식 필터 선택자2
메서드
기능
$(‘요소:checked’)
체크되어 있는 입력 양식을 선택
$(‘요소:disabled’)
비활성화된 입력 양식을 선택
$(‘요소:enabled’)
활성화된 입력 양식을 선택
$(‘요소:focus’)
초점이 맞추어져 있는 입력 양식을 선택
$(‘요소:input’)
모든 입력 양식을 선택(input, textarea, select, button)
$(‘요소:selected’)
option 객체 중 선택된 태그를 선택 //사실상 option:selected
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<script> $(document).ready(function () { setTimeout(function () { var value = $("select > option:selected").val(); alert(value); // B!! 출력 }, 5000); //5초 후 함수 실행 }); </script> <body> <select> <option>A!!</option> <option>B!!</option> //선택되었을 때 <option>C!!</option> </select> </body>
var xml = "<friends><friend><name>김우식</name><pr>father</pr></friend>"; xml += "<friend><name>한재연</name><pr>mom</pr></friend>"; xml += "<friend><name>김유림</name><pr>sister</pr></friend></friends>";
//문자열을 XML 문서 객체로 변경 var xmlDoc = $.parseXML(xml);
<body> <imgsrc="1.jpg" />...<imgsrc="6.jpg" /> </body> <script> //body에 있던 객체들 중 맨 앞 객체를 body 맨 뒤로 $("img").first().appendTo("body"); //예쁜 슬라이드를 만들려면 width, height 통일하고 setInterval로 특정 시간마다 $("img").first().appendTo("body"); </script>
문서 객체 복제
메서드
기능
clone()
문서 객체를 복제
문서 객체 삽입 메서드에서 A에 해당하는 객체가 이미 본문에 존재하는 객체라면 문서 객체 이동이 되는 것이고 이는 [Ctrl]+[X]나 마찬가지 이 경우, 기존 객체의 삭제를 원치 않는다면 기존객체.문서객체삽입메서드() 대신 기존객체.clone().문서객체삽입메서드() (기존객체를 복사하고 복사본을 삽입하기 때문에 기존객체 보존가능)
이벤트
기본 이벤트 연결
메서드
기능
on()
이벤트 연결
2가지 형태로 사용 가능
매개변수 = 이벤트 이름, 이벤트 리스너
1 2 3 4 5 6 7
$(selector).on(eventName, function (event) {}); $("h1").on("click", function () { $(this).html(function (index, html) { //이벤트 리스너안에서 this 키워드는 이벤트가 발생한 객체 return html + "+"; }); });
매개변수 = 객체(한번에 여러 이벤트 연결 가능)
1 2 3 4 5 6 7 8 9
$(selector).on(object); $("h1").on({ mouseenter: function() { $(this).addClass("reverse"); }, //클래스에 CSS를 지정해놓으면 mouseleave: function() { \$(this).removeClass("reverse"); } //이벤트에 효과를 줄 수 있음 });
$(selector).hover( function (event) {}, function (event) {} ); $("h1").hover({ //mouseenter 효과 function() { $(this).addClass("reverse"); }, //mouseleave 효과 function() { $(this).removeClass("reverse"); }, });
이벤트 연결 제거
메서드
기능
off()
이벤트 제거
3가지 형태로 사용 가능
$(selector).off() //객체와 관련된 모든 이벤트 제거
$(selector).off(eventName) //객체의 특정 이벤트와 관련된 모든 이벤트 제거
$(selector).off(eventName, function) //객체의 특정 이벤트 리스너 제거
일회성 이벤트 리스너
1 2 3 4
$("h1").on("click", function () { $(this).html("Clicked, Listener disappeared"); $(this).off(); });
일회성 이벤트 리스너
메서드
기능
one()
이벤트를 한번만 연결
on()과 사용법이 같고, 이벤트가 한번만 연결됨
매개변수 context
jQuery에는 매개변수가 사실 두 개이다. $(selector, context)
selector : 선택자
context : selector가 적용하는 범위를 한정, 일반적으로 이벤트와 함께 사용
EX : 클릭된 div의 h1 내용을 출력
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<div><h1>first</h1></div> <div><h1>second</h1></div> <div><h1>third</h1></div> <script> $("div").click(function () { var print = $("h1", this).text(); alert(print); }); // => 그냥 $('h1').text() 하면 firstsecondthird 출력 //find() 메서드를 활용해도 같은 결과를 낼 수 있다 $("div").click(function () { var print = $(this).find("h1").text(); alert(print); }); </script>
이벤트 객체
이벤트 발생 객체와는 다른 것으로, function(event)에서 매개변수로 쓰인 event를 의미함
javascript의 이벤트 객체는 웹브라우저마다 사용법 및 속성이 다르나, jQuery의 이벤트 객체는 이들을 모두 정형화 해놓음. jQuery 공홈에서 확인 가능
속성
기능
event.pageX
브라우저의 화면을 기준으로 한 마우스의 X 좌표 위치 //canvas 태그와 연계하여 쓰임
-> +1, +2 를 한번에 return false;로 적을 수 있음 -> (주의) javascript에서 return false;는 기본 이벤트만 제거한다는 점에서 다름
이벤트 연결 범위 한정
on() 메서드에는 사실 eventName, eventListener 외 여러가지 매개변수가 있다. 그 중에 selector 매개변수는 이벤트의 범위를 한정시킨다 : delegate방식
EX : selector 매개변수 사용X
1 2 3 4 5 6 7 8
<divid="wrap"><h1>원본</h1></div> <script> $("h1").on("click", function () { var length = $("h1").length; //h1 객체의 개수 var targetHTML = $(this).html(); //"원본" 가져옴 $("#wrap").append("<h1>" + length + "-" + targetHTML + "</h1>"); }); </script>
-> “원본” 클릭시마다 1-원본, 2-원본, … 등 h1태그가 하나씩 새로이 생성됨 -> 다만, 숫자가 붙은 h1태그들은 h1태그지만 클릭해도 새로운 HEADER를 생성하지 못함 -> 처음의 on()메서드가 그 당시 존재하는 태그에만 이벤트를 연결했기 때문임 -> 그래서 상위 태그에 이벤트를 연결해두고 ‘h1 태그를 클릭했을때’를 검출해야함
EX : selector 매개변수 사용
1 2 3 4 5 6
$("#wrap").on("click", "h1", function () { //이벤트를 상위 태그에 연결함 var length = $("h1").length; //h1 객체의 개수 var targetHTML = $(this).html(); //this = 클릭된 h1태그 $("#wrap").append("<h1>" + length + "-" + targetHTML + "</h1>"); });
-> “원본” 클릭시마다 1-원본, 2-원본, … 등 h1태그가 하나씩 새로이 생성됨 -> 신생 h1태그 클릭 시 “n-n-,,,-n-원본”의 새로운 h1태그가 생성됨
상위 개념이 애매한 태그는 document 객체에 이벤트를 연결해도 됨
1
$(document).on("click", "h1", function () {});
delegate 방식으로 연결한 on() 메서드의 이벤트 리스너 삭제
1
$('#wrap').off('click', 'h1'); //마찬가지로 상위 태그 차원에서 삭제
마우스 이벤트
메서드
기능
click
마우스를 클릭할 때 발생
dbclick
마우스를 더블 클릭할 때 발생
mousedown
마우스 버튼을 누를 때 발생
mouseup
마우스 버튼을 뗄 때 발생
mouseenter
마우스가 요소의 경계 외부에서 내부로 이동할 때 발생
mouseleave
마우스가 요소의 경계 내부에서 외부로 이동할 때 발생
mousemove
마우스를 움직일 때 발생
mouseout
마우스가 요소를 벗어날 때 발생
mouseover
마우스가 요소 안에 들어올때 발생
mouseover 이벤트와 mouseenter 이벤트의 차이 (mouseover는 거의 안 쓰이고 mouseenter가 많이 쓰임)
+ 멘틀 + 외핵 + 내핵 + 외핵 + 멘틀 +
mouseover : 멘틀->외핵, 내핵->외핵, …등 //외내부 순서 상관없이 특정 요소 안에 들어올 때
mouseenter : 멘틀->외핵, 외핵->내핵 //외부에서 내부로 이동할 때 발생
키보드 이벤트
메서드
기능
keydown
키보드 누를 때 발생
keypress
글자가 입력될 때 발생
keyup
키보드를 뗄 때 발생
글자수 세기 소스
textarea태그에 keyup이벤트를 연결
한글은 keypress이벤트를 지원하지 않아서 keyup을 써야함
이 방법은 다만 계속 누르고 있는 경우에는 쓸 수 없음
1 2 3 4 5 6 7 8 9 10 11
<h1>150</h1> <textarea></textarea> <script> $("textarea").keyup(function () { var inputLength = $(this).val().length; var remain = 150 - inputLength; $("h1").html(remain); }); //키보드 누를 때 이벤트 발생 순서 //키보드 누름 -> "keydown" -> 글자가 입력됨 -> "keypress" -> 키보드에서 손을 뗌 -> "keyup" </script>
윈도우 이벤트
윈도우 이벤트는 윈도우 객체 뿐 아니라 window객체와 document객체 이외에 img 태그 등이 사용할 수 있는 이벤트
메서드
기능
ready
문서 객체가 준비 완료되면 발생
load
문서 객체를 불러들일 때 발생
unload
문서 객체를 닫을 때 발생
resize
문서 객체의 크기를 변화시킬 때 발생
scroll
문서 객체를 스크롤할 때 발생
error
에러가 있을 때 발생
무한 스크롤 예제 소스
1 2 3 4 5 6 7 8 9 10 11 12
$(window).scroll(function() { //한번만 굴려도 스크롤 이벤트 발생 var scrollHeight = $(window).scrollTop() + $(window).height(); //지금까지 스크롤한 길이 + 보이는 화면의 높이 var documentHeight = \$(document).height(); //문서 전체의 높이
if (scrollHeight == documentHeight) { //문서 전체의 끝이 보인다면 for (var i = 0; i < 10; i++) { \$("<h1>INFINITY STONE</h1>").appendTo("body"); } } });
입력 양식 이벤트
메서드
기능
change
입력 양식의 내용을 변경할 때 발생
focus
입력 양식의 초점을 맞추면 발생
focusin
입력 양식에 초점이 맞추어지기 바로 전에 발생
focusout
입력 양식에 초점이 사라지기 바로 전에 발생
blur
입력 양식에 초점이 사라지면 발생
select
입력 양식을 선택할 때 발생(type=text 인 input태그 및 textarea태그 제외)
