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'); jquery 위치 탐색 선택자 gt() n번째 요소 이후의 모든 요소 선택 $('li':gt(1)) 문서 내에서 두 번째 li 요소 이후의 모든 li 요소를 선택 $('li:gt(1)').addClass('selected'); jquery 퀴즈 구현하기, 정답 출력 html() text() html 작성 script 작성 var i = 0; function btn() { i+=1; if(i==1){ $('.btn_img').html("") } if(i==2){ $('.btn_img').html("") i = 0; } $('.btn_txt1').text($('#input1').val()); $('.btn_txt2').text("땡! 둘다 나옵니다."); } 자바스크립트로 무지개만들기, 배열값 css 속성으로 적용하기 jquery append nth-child() .css() for문 each() div .outer를 만들어 영역을 만들자. jquery연결후 color에 색상값을 담은 배열을 만들어 .outer 영역에 div코드를 append하고 동시에 css를 추가한다. jQuery 선택자, closest 조상요소중 가장 처음으로 일치하는 요소 요소의 가장 가까운 조상 요소 중에서 가장 먼저 나타나는 요소를 선택 $('h1').closest('span') jQuery 선택자, 형제 인접한 형제 요소 중 선택 요소 바로 다음에 나타나는 첫 번째 요소를 선택 $('h1+h2') 모든 요소의 형제 요소를 선택 $('p').siblings jQuery 선택자, 이전/다음 이전 요소 하나만 선택 $('h1').prev() 다음 요소 하나만 선택 $('h1').next() 이전 모든 요소를 선택 $('h1').prevAll() 다음 모든 요소를 선택 $('h1').nextAll() 요소사이의 모든 요소 선택 요소 바로 이전 요소부터 요소가 나타날 때까지의 모든 요소를 선택 $('h1').prevUtil('h2') 요소사이의 모든 요소 선택 요소 바로 다음의 요소부터 요소가 나타날 때까지의 모든 요소를 선택 $('h1').nextUntil('h2') jQuery 선택자, 부모 자식 parent, children 직계 부모 $('h1').parent() 모든 조상 $('h1').parents() 직계자식 span $(h1>span) $('h1').children() 전체 자식 span, 전체자식 $(h1 span) jQuery 선택자, $() 선택자, 다수 선택가능 id, class값으로 선택 및 태그를 추가해 조건을 추가할 수 있다. $('h1') $('h1, h2, h3') $('h1#id') $('#id') $('h1.class') $('.class') 이전 1 다음
