|
문자 |
부합 |
\b |
단어의 경계 |
\d |
숫자(0~9) |
\s |
공백 하나 |
\w |
문자,숫자,밑줄 문자 |
. |
새 라인 문자를 제외한 모든 문자 |
[...] |
대괄호 안의 문자들 중 하나 |
{n} |
정확히 n번 |
{n,} |
n번 또는 그 이상 |
{n.m} |
n과 m사이 |
? |
0또는 여러 번 |
+ |
한 번 또는 그 이상 |
^ |
시작 |
& |
끝 |
콜백함수는 배열의 원소를 하나씩 파라미터 v로 받습니다. 콜백함수는 A에서 D사이의 문자로 시작하는 원소에 대해서만 true를 반환합니다.
$(function(){
var members = [ "John", "Steve", "Ben", "Damon", "Ian" ];
$(".allmem").html(members.join("<br />"));
members = $.grep(members, function(v){
var classify = v.match(/^[A-D]/); // A에서 D사이의 문자로 시작하는 원소
return classify;
});
$('.sorted').html(members.join("<br />"));
});
Result
Ben
Damon
문자로 구성된 배열과 숫자로 구성된 배열 정렬하기
sort()
sort() 메소드는 문자열을 알파벳순으로 정렬합니다. 이 메소드는 ASCII 값을 기반으롤 정렬하므로 이름이 일관되게 작성되어야 정렬이 제대로 수행됩니다. 즉, 대문자나 소문자 중 하나로 시작되어야지 섞여서는 안 됩니다.
$(function(){
var members = [ "John", "Steve", "Ben", "Damon", "Ian" ];
$('.allmem').html( members.join("<br />"));
members = members.sort();
$('.sorted').html(members.join("<br />"));
});
// Result
Members of my Group are
John
Steve
Ben
Damon
Ian
Members of my Group in sorted order
Ben
Damon
Ian
John
Steve
숫자 정렬
sort() 메소드는 ASCII 값을 기준으로 정렬하기 때문에 숫자 값에는 사용할 수 없습니다.
숫자 값을 제대로 정렬하려면 sort()에 비교함수를 제공해야 합니다.
비교함수를 정의하면 배열의 두 값이 비교함수에 전달되어 비교되는 과정이 배열의 모든 원소에 대해 반복적으로 수행됩니다. 비교함수에서는 두 값을 받아서 세 값 중 하나(0보다 작은 값, 0, 0보다 큰 값)를 반환합니다.
l 함수가 0보다 작은 값을 반환하면 두 번째 값이 첫 번째 값보다 큰 값이어서 정렬 순서에서 뒤로 밀립니다.
l 함수가 0보다 큰 값을 반환하면 첫 번째 값이 두 번째 값보다 큰 값이어서 정렬 순서에서 뒤로 밀립니다.
l 함수가 0을 반환하면 두 값이 같아서 정렬 순서를 변경할 필요가 없습니다.
내림 차순으로 정렬하려면 비교함수에서 반환값을 a-b에서 b-a로 변경해야 합니다.
$(function(){
var members = [ 45, 10, 3, 22, 7 ];
$('.allmem').html(members.join("<br />"));
members = members.sort(function(a,b){
return a-b;
});
$('.sorted').html(members.join("<br />"));
});
//Result
Members of my Group are
45
10
3
22
7
Members of my Group in sorted order
3
7
10
22
45
배열 나누기
jQuery에서 배열을 분리하는 데는 splice() 메소드를 사용합니다. 이 메소드는 두 개의 파라미터가 필요합니다. 첫 번째 파라미터로는 분리가 시작되는 위치를 전달하고, 두 번째 파라미터로는 분리할 개수를 전달합니다. 배열에서 두 파라미터로 명시된 범위가 추출, 반환되어 다른 변수에 저장됩니다. 정리하면 ( splice에 전달되는 두 파라미터로 정의되어 있는) 배열의 일부는 반환되고, 원래의 배열에는 나머지 부분만 남게 됩니다.
<h3>Original numerical array is </h3>
<p class="allnum"></p>
<h3> First piece of array </h3>
<p class="firstp"></p>
<h3> Second piece of array </h3>
<p class="secondp"></p>
<h3> remainder</h3>
<p class="remainder"></p>
$(function(){
var members = [ 45, 10, 3, 22, 7 ];
$('.allnum').html(members.join("<br />"));
memsecond = members.splice(0,3);
$('.firstp').html(memsecond.join("<br />"));
mem2 = members.splice(0,1);
$('.secondp').html(mem2.join());
$('.remainder').html(members.join());
});
//Result
Original numerical array is
45
10
3
22
7
First piece of array
45
10
3
Second piece of array
22
remainder
7
두 배열 합치기
concat() 메소드는 배열 객체의 메소드로, 앞 배열(합치고 싶은 배열)에 대해 concat() 메소드를 호출하면서 뒤 배열을 파라미터로 전달합니다. 반환되는 배열은 두 배열을 합친 배열이며 다음과 같이 또 다른 배열에 저장됩니다.
$(function(){
var mem1 = [ 45, 10, 3 ];
var mem2 = [ 22, 7 ];
$('.firstarr').html(mem1.join("<br />"));
$('.secondarr').html(mem2.join("<br />"));
members = mem1.concat(mem2);
$('.combinedarr').html(members.join("<br />"));
});
//Result
45
10
3
Second array is
22
7
Array after combination
45
10
3
22
7
숫자로 구성된 배열 문자열로 변환하고 부분 문자열 찾기
substr() 메소드를 적용하여 문자열의 일부를 추출
숫자로 구성된 배열을 문자열로 변환하고 substr() 메소드를 적용하여 문자열의 일부를 추출하고 싶어요.
$(function(){
var members = [ 45, 10, 3, 22, 7 ];
$('.origarr').html(members.join("<br />"));
var str = members.join(""); //문자열로 만든다.
$('.arrstring').text(str);
var substr = str.substr(0,3);
$('.partstring').text(substr);
});
//Result
Original array is
45
10
3
22
7
Array in form of string
45103227
Substring is
451
객체의 배열 만들기
특정 개체(엔티티), 항목, 사람, 객체 등에 대한 정보를 저장하는 객체로 된 배열을 만들고 싶어요. 우선은 세 학생에 대한 정보를 저장하고 싶어요. 각 학생 객체는 역할(role), 이름(name), 이메일 주소(email)의 세 속성을 가지고 있습니다.
each() 메소드를 사용하면 순회가 자동으로 이뤄지기 때문에 익숙해지면 편합니다.
for( var i=0; i<student.length; i++ ){
$('.listofstud').append( students[i].role + ""+ students[i].name+""+students[i].emailId);
}
List of students is
101
Ben
ben@gmail.com
102
Ian
ian@gmail.com
103
Caroline
carol@gmail.com
$(function(){
var students = [
{
"roll":101,
"name":"Ben",
"emailId":"ben@gmail.com"
},
{
"roll":102,
"name":"Ian",
"emailId":"ian@gmail.com"
},
{
"roll":103,
"name":"Caroline",
"emailId":"carol@gmail.com"
}
];
/* $.each( students, function( index, value ){
$('.listofstud').append(value.roll+"<br /> "+value.name+"<br /> "+value.emailId+"<br /><br /> ");
});*/
for( var i=0; i<students.length; i++ ){
$('.listofstud').append(students[i].roll+"<br />" + students[i].name+"<br />" + students[i].emailId+"<br /><br />");
}
});
$(document).ready(function() {
var students=[
{
"roll": 101,
"name": "Ben",
"emailId":"ben@gmail.com"
},
{
"roll": 102,
"name": "Ian",
"emailId":"ian@gmail.com"
},
{
"roll": 103,
"name": "Caroline",
"emailId":"carol@gmail.com"
}
];
$.each(students,function( index, value ){
$('table.listofstud').append("<tr><td>"+value.roll+"</td><td>"+value.name+
"</td><td>"+value.emailId+"</td></tr>");
});
});
객체의 배열 정렬하기
$(function(){
var students = [
{
"roll":101,
"name":"Ben",
"emailId":"ben@gmail.com"
},
{
"roll":102,
"name":"Ian",
"emailId":"ian@gmail.com"
},
{
"roll":103,
"name":"Caroline",
"emailId":"carol@gmail.com"
}
];
students = students.sort(function(a,b){
return b.roll - a.roll;
});
/* $.each(students, function(index, value){
$('.listofstud').append("<tr><td>" + value.roll + "</td><td>" +value.name+"</td></tr>");
});
*/
for( var i=0; i<students.length; i++ ){
$('.listofstud').append("<tr><td>"+students[i].roll+"</td><td>"+students[i].name+"</td></tr>" );
};
/* $.each( students, function( index, value ){
$('.listofstud').append(value.roll+"<br /> "+value.name+"<br /> "+value.emailId+"<br /><br /> ");
});
for( var i=0; i<students.length; i++ ){
$('.listofstud').append(students[i].roll+"<br />" + students[i].name+"<br />" + students[i].emailId+"<br /><br />");
}
*/
});
// Result
List of students is
103 Caroline
102 Ian
101 Ben
이벤트
버튼 모두에 클릭 이벤트 적용하기
bind()
메소드를 사용하여 버튼에 대한 클릭 이벤트를 jQuery 코드로 작성합니다.
$(function(){
$('.buttons').bind("click",function(){
alert("You have clicked the " +$(this).text()+ " button");
});
});
이벤트에 직접 연결하기
$(function(){
$('.buttons').click(function(){
alert("You have clicked the " +$(this).text()+ " button");
});
});
이벤트 객체의 target 속성 이용
자바스크립트는 이벤트 객체를 이벤트 함수에 전달하며, 이벤트 객체에는 이벤트에 대한 세부 내용이 담겨 있습니다. 그 중 하나인 target은 이벤트가 일어난 엘리먼트를 찾는 데 사용할 수 있습니다.
$(function(){
$('.buttons').click(function(e){
var $target = $(e.target);
if($target.is('.bold')){
alert('You have clicked the Bold button');
}
if($target.is('.italic')){
alert('You have clicked the Italic button');
}
});
});
-------------------------------------------------------------------------
이미지를 수평 또는 수직으로 표시하기
$(document).ready(function() {
var $pic = $('#images a');
$pic.hide();
var imgs = $pic.length;
var next;
for (i=0;i<imgs;i++){
next=$pic.eq(i);
next.css({'position': 'absolute','left':160*i});
next.show();
}
});
$(document).ready(function() {
var $pic = $('#images a');
$pic.hide();
var imgs = $pic.length;
var next;
for (i=0;i<imgs;i++){
next=$pic.eq(i);
next.css({'position': 'absolute','top':160*i});
next.show();
}
});
|