JavaScript/jQuery (16) 썸네일형 리스트형 $.grep, 배열반환 $.grep() jQuery 라이브러리의 메소드 중 하나 배열을 필터링할 때 사용 $.grep(array, function(elementOfArray, indexInArray) [, invert]) array: 필터링할 배열 function: 필터링 함수, true시 요소를 포함, false시 요소제외 invert: 선택요소, true를 전달하면 필터링 함수의 결과를 반전시킴 예시로 배열의 요소를 순회하며 짝수만 추출해보자. var arr = [1, 2, 3, 4, 5]; var even = $.grep(arr, function(element, index) { return element % 2 === 0; }); console.log(even); // [2, 4] $.map, 배열을 순회하며 함수를 실행하고 새 배열에 추가한다. $.map jQuery에서 제공하는 함수 중 하나 배열을 순회하면서 지정된 함수를 실행해, 반환값을 새 배열에 추가한다. $.map(array, callback) array: 변환할 배열 callback: 각 요소에 대해 실행할 함수 var arr = [1, 2, 3]; var newArr = $.map(arr, function(val, index) { return val * val; }); console.log(newArr); // [1, 4, 9] html() text()의 차이, 무엇을 인식할것인가 html() text()의 차이 html는 코드를 인식하고, text는 인식하지 못한다. 예시코드 첨부 여러분, 제이쿼리는 아주 쉽습니다. html()로 출력 text()로 출력 $(function () { let str1_0 = $('#hey').html(); let str2_0 = $('#jquery').html(); let str3_0 = $('#easy').html(); $('.str1_0').html(str1_0); $('.str2_0').html(str2_0 + " "); $('.str3_0').html(str3_0); let str1_1 = $('#hey').text(); let str2_1 = $('#jquery').text(); let str3_1 = $('#easy').text(); $.. jquery 위치 탐색 선택자 :first first() first-of-type 첫번째부터 선택하기 $('li:first') 문서 내에서 첫 번째 li 요소를 선택 $('li:first').addClass('selected'); $('li').first() 문서 내에서 첫 번째 li 요소를 선택 $('li').first().addClass('selected'); $('li:first-of-type') 첫 번째로 나타나는 li 요소만 선택 $('li:first-of-type').addClass('selected'); jquery 위치 탐색 선택자 :last last() last-of-type 마지막부터 선택하기 $('li:last') 문서 내에서 마지막 li 요소를 선택 $('li:last').addClass('selected'); $('li').last() 문서 내에서 마지막 li 요소를 선택 $('li').last().addClass('selected'); $('li:last-of-type') 문서 내에서 li 요소 중 마지막 요소를 선택 $('li:last-of-type').addClass('selected'); $('li:last-of-type(2)') 문서 내에서 li 요소 중 마지막에서 두 번째 요소를 선택 $('li:last-of-type(2)').addClass('selected'); jquery 위치 탐색 선택자 nth-child() n번째, n의배수 요소 선택 $('li:nth-child(2)') 문서 내 모든 li 요소 중에서 2번째 자식 요소를 선택 $('li:nth-child(2)').addClass('selected'); $('li:nth-child(2n)') 문서 내 모든 li 요소 중에서 2의 배수요소를 선택 $('li:nth-child(2n)').addClass('selected'); jquery 위치 탐색 선택자 only-child() 유일한 요소 선택 $('li:only-child') 문서 내 모든 li 요소 중 형제 요소가 없는 유일한 자식 요소를 선택 $('li:only-child').addClass('selected'); *유일한 자식요소 아래처럼 형제가 없는 요소를 말한다. 첫 번째 요소 두 번째 요소 세 번째 요소 유일한 요소 jquery 위치 탐색 선택자 eq() index로 선택한다. $('li:eq(2)') 문서 내에서 세 번째 li 요소를 선택 $('li:eq(2)').addClass('selected'); $('li').eq(2): 문서 내에서 세 번째 li 요소를 선택 $('li').eq(2).addClass('selected'); 이전 1 2 다음
