1. 배열을 사용하여 리스트로 표현하기
$(document).ready(function(){
var memlist = $("#list");
var members = ["John","Steve","Ben","Damon","Ian"];
$.each(members.function(index,value){
memelist.append($("<li>" + value + "</li>"));
})
});
========================================================
<body>
<p></p>
<ul>
<li>John</li>
<li>Steve</li>
<li>BenJohn</li>
<li>Damon</li>
<li>Ian</li>
</ul>
</body>
========================================================
$('p').text(members.join(",")); >> TEXT Join (a.b.c.d......)
$('p').html(members.join("<br/>")); >> Html 표현
========================================================
each() 메소드를 사용하여 각원소(이름)을 빼내어 OL 엘리먼트에 추가
>> 일련번호가 붙은 이름이 표시
========================================================
var names = $("li").get();
모든 Li 엘리먼트의 내용을 get()메소드로 빼내어 Names 배열에 저장
names.length : 배열의 개수
========================================================
2. 배열내의 원소 조작하기
2-1. 대문자로의 변환
>> members = $.map(member.function( n, i ){ return(i + 1 + "." + n.toUpperCase());});
2-2. 순서있는 List 사용 (ol)
<ol id="list"></ol>
## map(array, callback) 메소드
>> 배열의 각원소를 순회하면서 각 원소들에 대해 콜백함수를 호출
>> Length 속성이 있는 구조가 배열과 비슷한 다른 객체에도 사용가능
>> 파라미터 : n ( 배열의 원소), i (배열원소의 위치)
3. 배열중 원하는 값만 표시하기
grep( array, callback, boolean )
>> array : 메소드에 전달되는 배열, 필터링을 수행할 대상 배열
>> callback : 필터링을 수행할 함수 , 필터링된 배열의 구성요소가 될값 반환 (배열의원소, 위치값)
>> boolean : 보통 생략, Default > False, True > 반대값 (조건과 맞지 않는 값)
$.grep(member, function(v) { return v.length>4}); >> 문자길이 4보다 큰값
$.grep(member, function(v) { return v.length>4}, true); >> 문자길이 4보다 작거나 같은값
$.grep(member, function(v) { return v.match(/^[A-D]/)}); >> A ~ D 사이 문자로 시작하는 값
$.grep(member, function(v) { return v.match(/[n]$/)}); >> n 문자로 끝나는 값 ($는 정규식의 끝을 표시)
>> return v.match(/[e].+/) : 문자 e 가 한번이상 나오는 값
>> return v.match(/\b.{5}\b/) : 문자가 정확히 5개인 값
4. 문자로 구성된 배열과 숫자로 구성된 배열 정렬
----------------------------------------------------------------------
# Sort() >> ASCII 값을 기반으로 정렬이 된다 / 대문자 & 소문자중 하나로 시작되어야...
var members = ["John","Steve","Ben","Damon","Ian"];
members = members.sort();
>> Ben, Damon, Ian, John, Steve
----------------------------------------------------------------------
숫자로 사용되어서는 안됨 // 45, 10, 3, 22, 7 >> ( 10, 22, 3, 45, 7)
# 숫자로 정렬시는 Sort() 함수에 비교 함수를 제공해야....
비교함수를 정의시 배열의 두값이 비교함수에 전달 >> 배열의 모든 원소에 반복적으로 수행됨
비교함수는 두 값을 받아서 세값중 하나 (0보다 작은값, 0, 0보다큰값)를 반환
@ 함수가 0 보다 작은값을 반환하면 두번째 값이 첫번째 값보다 큰값이어서 순서가 뒤로 밀림.
@ 함수가 0 보다 큰값을 반환하면 첫번째값이 두번째 값보다 큰값이어서 순서가 뒤로 밀림.
@ 함수가 0을 반환하면 두값이 같아서 정렬순서 변경 안함.
members = members.sort( function(a, b){
return a-b;
});
>> 내림 차순 정렬시 비교함수 Return 값을 a-b 를 b-a로 변경해야....
----------------------------------------------------------------------
5. 배열 나누기
$(document).ready(function(){
var members = [45, 10, 3, 22, 7];
$('p.allnum').html(members.join("<br/>"));
memsecond = member.splice( 0, 3 );
$('p.firstp').html(memsecond.join("<br/>"));
$('p.secondp').html(members.join("<br/>"));
});
# subarray = mainarray.splice( m, n );
subarray 는 mainarray의 m 번째 부터 n 개의 원소를 나타내는 배열
>> mainarray 는 m 번째 부터 n 개의 원소를 제거하고 남은 부분이 됨
6. 두배열 합치기
# combinedarray = array1.concat( array2 );
concat() 메소드 : 배열객체의 메소드로 앞배열 (array1) 의 메소드 호출하면서 뒤배열(array2) 을 파라미터로 전달을 함.
var mem1 = [45, 10, 3];
var mem2 = [22, 7];
members = mem1.concat( mem2 );
7. 숫자로 구성된 배열을 문자열로 변환하고 부분 문자열 찾기
var members = [45, 10, 3, 22, 7];
var str = members.join("");
var substr = str.substr( 0, 3 );
str >> 45103227
substr >> 451
8. 객체의 배열 만들기
var students = [
{"role":101,"name":"Ben","emailid": "ben@gmail.com"},
{"role":102,"name":"Ian","emailid": "ian@gmail.com"},
{"role":103,"name":"Caroline","emailid": "carol@gmail.com"}
];
$.each(students.function ( index, value )){
$('p.listofstud').append( value.role + "" + value.name + "" + value.emailid);
});
----------------------------------------------------------------------------------
# For 루프의 사용
for( var i=0:i<students.length:i++){
$('p.listofstud').append( students[i].role + "" + students[i].name + "" + students[i].emailid);
});
----------------------------------------------------------------------------------
# 테이블 표현이 더 좋을 듯
$('table.listofstud').append( "<tr><td>" + value.role + "</td><td>" + value.name + "</td><td>" + value.emailid + "</td></tr>");
9. 객체의 배열 정렬하기
>> 동일 배열값으로 Role 기준으로 정리시...
students = students.sort( function(a, b){
return a.role-b.role;
});
$.each(students.function ( index, value )){
$('table.listofstud').append( "<tr><td>" + value.role + "</td><td>" + value.name + "</td><td>" + value.emailid + "</td></tr>");
});
>> 동일 배열값으로 Name 기준으로 정리시...
students = students.sort( function(a, b){
if(a.name < b.name){ return -1 };
if(a.name > b.name){ return 1 };
return 0;
});
===================================================================================
* 정규식 활용
\b (단어의 경계) // \d (숫자 0~9) // \s (공백 하나) // \w (문자, 숫자, 밑줄 문자) //
. (새 라인 문자를 제외한 모든문자) // [...] (대괄호 안의 문자들 중 하나) // [n] (정확히 n 번) //
[n,] (n 번 또는 그이상) // [n, m] (n ~ m 사이) // ? (0 또는 여러번) // + (한번또는 그이상)
[^] ( 시작 ) // [$] ( 끝 ) //
===================================================================================
'# JQuery' 카테고리의 다른 글
| 폼 유효성을 확인하는 방법 (0) | 2015.08.29 |
|---|---|
| 이벤트 처리 2 (0) | 2015.08.23 |
| 이벤트 처리 1 (0) | 2015.08.23 |
| JQuery....... Start (0) | 2010.11.16 |
