본문 바로가기

자바스크립트88

프로그래머스 1단계 - 콜라츠 추측 프로그래머스 1단계 - 콜라츠 추측 🍞 문제 설명 1937년 Collatz란 사람에 의해 제기된 이 추측은, 주어진 수가 1이 될 때까지 다음 작업을 반복하면, 모든 수를 1로 만들 수 있다는 추측입니다. 작업은 다음과 같습니다. 1-1. 입력된 수가 짝수라면 2로 나눕니다. 1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다. 2. 결과로 나온 수에 같은 작업을 1이 될 때까지 반복합니다. 예를 들어, 주어진 수가 6이라면 6 → 3 → 10 → 5 → 16 → 8 → 4 → 2 → 1 이 되어 총 8번 만에 1이 됩니다. 위 작업을 몇 번이나 반복해야 하는지 반환하는 함수, solution을 완성해 주세요. 단, 주어진 수가 1인 경우에는 0을, 작업을 500번 반복할 때까지 1이 되지 않는다면.. 2022. 11. 9.
프로그래머스 1단계 - 두 정수 사이의 합 프로그래머스 1단계 - 두 정수 사이의 합 🍞 문제 설명 두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요. 예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다. 🍞 제한 조건 a와 b가 같은 경우는 둘 중 아무 수나 리턴하세요. a와 b는 -10,000,000 이상 10,000,000 이하인 정수입니다. a와 b의 대소관계는 정해져있지 않습니다. 🍞 입출력 예 a b return 3 5 12 3 3 3 5 3 12 🍞 문제 풀이 a와 b의 값을 비교하여 작으면 answer에 다음 값을 더하고 크면 이전 값을 더하는 식으로 구하였습니다. function solution(a, b) { let answ.. 2022. 11. 8.
프로그래머스 1단계 - 정수 내림차순으로 배치하기 프로그래머스 1단계 - 정수 내림차순으로 배치하기 🍞 문제 설명 함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다. 🍞 제한 조건 n은 1이상 8000000000 이하인 자연수입니다. 🍞 입출력 예 n return 118372 873211 🍞 문제 풀이 알고 있는 메서드를 남발해보았습니다. function solution(n) { var answer = parseInt(n.toString().split('').sort().reverse().reduce((p,c) => p + c)); return answer; } 🍞 다른 이의 풀이 아주 깔끔하게 보이는 풀이입니다.. 2022. 11. 7.
프로그래머스 1단계 - 나머지가 1이 되는 수 찾기 프로그래머스 1단계 - 나머지가 1이 되는 수 찾기 🍞 문제 설명 자연수 n이 매개변수로 주어집니다. n을 x로 나눈 나머지가 1이 되도록 하는 가장 작은 자연수 x를 return 하도록 solution 함수를 완성해주세요. 답이 항상 존재함은 증명될 수 있습니다. 🍞 제한 조건 3 ≤ n ≤ 1,000,000 🍞 입출력 예 n result 10 3 12 11 입출력 예 #1 10을 3으로 나눈 나머지가 1이고, 3보다 작은 자연수 중에서 문제의 조건을 만족하는 수가 없으므로, 3을 return 해야 합니다. 입출력 예 #2 12를 11로 나눈 나머지가 1이고, 11보다 작은 자연수 중에서 문제의 조건을 만족하는 수가 없으므로, 11을 return 해야 합니다. 🍞 문제 풀이 반복문과 % 연산자를 사용하.. 2022. 11. 6.
프로그래머스 1단계 - x만큼 간격이 있는 n개의 숫자 프로그래머스 1단계 - x만큼 간격이 있는 n개의 숫자 🍞 문제 설명 함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요. 🍞 제한 조건 x는 -10000000 이상, 10000000 이하인 정수입니다. n은 1000 이하인 자연수입니다. 🍞 입출력 예 x n answer 2 5 [2,4,6,8,10] 4 3 [4,8,12] -4 2 [-4,-8] 🍞 문제 풀이 반복문과 push()를 사용하였습니다. function solution(x, n) { var answer = []; for(i=0; i (i + 1) * v) } 문제 풀어보기 2022. 11. 5.
프로그래머스 1단계 - 문자열을 정수로 바꾸기 프로그래머스 1단계 - 문자열을 정수로 바꾸기 🍞 문제 설명 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. 🍞 제한 조건 s의 길이는 1 이상 5이하입니다. s의 맨앞에는 부호(+, -)가 올 수 있습니다. s는 부호와 숫자로만 이루어져있습니다. s는 "0"으로 시작하지 않습니다. 🍞 입출력 예 예를들어 str이 "1234"이면 1234를 반환하고, "-1234"이면 -1234를 반환하면 됩니다. str은 부호(+,-)와 숫자로만 구성되어 있고, 잘못된 값이 입력되는 경우는 없습니다. 🍞 문제 풀이 정말 이게 끝인가? 싶어서 당황스러운 쉬운 문제입니다. function solution(s) { return answer = parseInt(s); } 🍞 다른 이의 풀이 s.. 2022. 11. 5.
프로그래머스 1단계 - 하샤드 수 프로그래머스 1단계 - 하샤드 수 🍞 문제 설명 양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해주세요. 🍞 제한 조건 x는 1 이상, 10000 이하인 정수입니다. 🍞 입출력 예 arr return 10 true 12 true 11 false 13 false 입출력 예 #1 10의 모든 자릿수의 합은 1입니다. 10은 1로 나누어 떨어지므로 10은 하샤드 수입니다. 입출력 예 #2 12의 모든 자릿수의 합은 3입니다. 12는 3으로 나누어 떨어지므로 12는 하샤드 수입니다. 입출력 예 .. 2022. 11. 3.
프로그래머스 1단계 - 문자열 내 p와 y의 개수 프로그래머스 1단계 - 문자열 내 p와 y의 개수 🍞 문제 설명 대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다. 🍞 제한 조건 문자열 s의 길이 : 50 이하의 자연수 문자열 s는 알파벳으로만 이루어져 있습니다. 🍞 입출력 예 s answer "pPoooyY" true "Pyy" false 입출력 예 #1 'p'의 개수 2개, 'y'의 .. 2022. 11. 2.
프로그래머스 1단계 - 자연수 뒤집어 배열로 만들기 프로그래머스 1단계 - 자연수 뒤집어 배열로 만들기 🍞 문제 설명 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. 🍞 제한 조건 n은 10,000,000,000이하인 자연수입니다. 🍞 입출력 예 n return 12345 [5,4,3,2,1] 🍞 문제 풀이 4번과 비슷하게… 문자로 바꾼 뒤 split로 쪼개 배열에 거꾸로 저장하고, 다시 숫자로 바꾸어 answer에 넣어주었습니다. function solution(n) { var answer = []; num = n.toString().split('').reverse(); for( x in num ){ answer.push(Number(num[x])); } con.. 2022. 11. 1.
프로그래머스 1단계 - 정수 제곱근 판별 프로그래머스 1단계 - 정수 제곱근 판별 🍞 문제 설명 임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요. 🍞 제한 조건 n은 1이상, 50000000000000 이하인 양의 정수입니다. 🍞 입출력 예 n return 121 144 3 -1 입출력 예 #1 121은 양의 정수 11의 제곱이므로, (11+1)를 제곱한 144를 리턴합니다. 입출력 예 #2 3은 양의 정수의 제곱이 아니므로, -1을 리턴합니다. 🍞 문제 풀이 Math.sqrt()로 제곱근을 구하고 isInteger로 정수 여부를 판단하여 answer에 적절한 값을 넣었습니.. 2022. 10. 31.
프로그래머스 1단계 - 자릿수 더하기 프로그래머스 1단계 - 자릿수 더하기 🍞 문제 설명 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. 🍞 제한 조건 N의 범위 : 100,000,000 이하의 자연수 🍞 입출력 예 N return 123 6 987 24 입출력 예 #1 문제의 예시와 같습니다. 입출력 예 #2 9 + 8 + 7 = 24이므로 24를 return 하면 됩니다. 🍞 문제 풀이 문자로 바꾼 뒤 split하고 다시 숫자로 바꾸어 더해주었습니다. 숫자도 split 할 수 있었으면 좋겠습니다… function solution(n) { let answer = 0; let num = n.toStr.. 2022. 10. 30.
프로그래머스 1단계 - 평균 구하기 프로그래머스 1단계 - 평균 구하기 🍞 문제 설명 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. 🍞 제한 조건 arr은 길이 1 이상, 100 이하인 배열입니다. arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. 🍞 입출력 예 arr return [1,2,3,4] 2.5 [5,5] 5 🍞 문제 풀이 reduce() 메서드를 이용해 배열 값의 합을 구하고 배열의 길이로 나누어 평균을 구했습니다. function solution(arr) { var answer = 0; answer = arr.reduce((p,c) => p+c) / arr.length; return answer; } 🍞 다른 이의 풀이 메서드 없이 반복문을 통해 값을 구할 .. 2022. 10. 29.
프로그래머스 1단계 - 약수의 합 프로그래머스 1단계 - 약수의 합 🍞 문제 설명 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. 🍞 제한 조건 n은 0 이상 3000이하인 정수입니다.. 🍞 입출력 예 num return 12 28 5 6 입출력 예 #1 12의 약수는 1, 2, 3, 4, 6, 12입니다. 이를 모두 더하면 28입니다. 입출력 예 #2 5의 약수는 1, 5입니다. 이를 모두 더하면 6입니다. 🍞 문제 풀이 for 문을 사용하여 반복하며 i의 값을 증가시키고, n의 약수인 경우 answer에 합해지도록 하였습니다.(16번 케이스 유의!) function solution(n) { var answer = 0; for( i=0; i 2022. 10. 28.
프로그래머스 1단계 - 짝수와 홀수 프로그래머스 1단계 - 짝수와 홀수 🍞 문제 설명 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요. 🍞 제한 조건 num은 int 범위의 정수입니다. 0은 짝수입니다. 🍞 입출력 예 num return 3 "Odd" 4 "Even" 🍞 문제 풀이 if 문을 사용하여 num을 2로 나눈 나머지 값을 총해 짝수와 홀수를 구분하였습니다. function solution(num) { var answer = ''; if(num%2 === 0){ answer = "Even"; } else { answer = "Odd"; } return answer; } 🍞 다른 이의 풀이 제 풀이와 비슷하지만, if문이 아닌 삼항연산자를 사용한 풀이입니다. .. 2022. 10. 27.
검색 효과 7 검색 이펙트 이번 검색 이펙트는 2분 동안 CSS 속성 검색하기 게임 효과입니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저, 속성에 대한 정보는 이전과 같이 cssProperty라는 배열 안에 객체로 만들어 저장하였습니다. name은 속성 이름의 키값, desc는 속성 설명의 키값입니다. input에 입력된 값을 value로 불러오고, 불러온 입력값을 cssPropertythr css의 이름과 비교합니다. 정답이 있는 경우 input에 입력된 값을 초기화하고 맞춘 정답을 리스트에 추가합니다. 시간이 끝나면 맞추지 못한 속성들을 오답 리스트에 추가하여 보여줍니다. const searchTime = document.querySelec.. 2022. 10. 20.
검색 효과 6 검색 이펙트 이번 검색 이펙트는 sort(), reverse()를 이용하여 정렬하기 효과입니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저, 속성에 대한 정보는 이전과 같이 cssProperty라는 배열 안에 객체로 만들어 저장하였습니다. name은 속성 이름의 키값, desc는 속성 설명의 키값입니다. 이번에는 추가적으로 num이라는 키값에 1~382의 숫자를 저장하여 순서를 정해주었습니다. 정렬 버튼을 누를 때마다 리스트에 sort(), reverse()를 이용해 각 버튼의 내용처럼 정렬되어 출력하도록 하였습니다. 랜덤정렬은 피셔에이츠 알고리즘을 이용하였습니다. const cssList = document.querySelecto.. 2022. 10. 20.
검색 효과 5 검색 이펙트 이번 검색 이펙트는 filter()를 이용하여 CSS 속성의 중요도를 보여주는 효과입니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저, 속성에 대한 정보는 이전과 같이 cssProperty라는 배열 안에 객체로 만들어 저장하였습니다. name은 속성 이름의 키값, desc는 속성 설명의 키값입니다. 이후 선택자를 통해 각 영역을 가리키는 변수를 만든 후, updateList() 함수를 통해 해당 부분에 텍스트를 출력합니다. 클릭 이벤트는 forEach()문을 이용하여 각 버튼을 누를 때마다 작동하도록 하였으며, 매개변수를 함수로 보냅니다. const searchList = document.querySelector(".s.. 2022. 9. 29.
검색 효과 4 검색 이펙트 페이지에 리스트를 만들고, 각각의 속성 명을 나타내는 리스트를 클릭하면, 해당 속성의 설명이 표시됩니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저, 속성에 대한 정보는 cssProperty라는 배열 안에 객체로 만들어 저장하였습니다. name은 속성 이름의 키값, desc는 속성 설명의 키값입니다. 이후 선택자를 통해 각 영역을 가리키는 변수를 만든 후, map() 과 innerHTML을 이용하여 설명을 출력합니다. 클릭 이벤트또는 검색어를 작성한 이벤트가 발생하면 findProperty라는 함수를 실행하며, findProperty 함수는 cssProperty에서 사용자가 클릭한 값을 찾아 비교한 뒤, 출력해야 할 설.. 2022. 9. 28.
배열 메서드2 배열 메서드 배열 메서드를 이용하여 배열의 정보를 다양한 방법으로 불러올 수 있습니다. > unshift() / shift() 메서드 unshift() 메서드는 배열 처음 요소에 추가, shift()메서드는 배열 처음 요소를 삭제합니다. const arrNum1 = [100, 200, 300, 400, 500]; const arrNumUnshift = arrNum1.unshift(600); document.querySelector(".sample04_N1").innerHTML = "1"; document.querySelector(".sample04_Q1").innerHTML = "[100, 200, 300, 400, 500]"; document.querySelector(".sample04_M1").inn.. 2022. 9. 27.
문자열 메서드 : startsWidth() / endsWidth() 문자열 메서드 : startsWidth() / endsWidth() > startsWidth() / endsWidth() 메서드 startWidth() 메서드는 시작하는 분자열에서 문자열을 검색하여 불린(true, false)으로 반환합니다. endsWidth() 메서드는 끝나는 문자열에서 문자열을 검색하여 불린(true, false)으로 반환합니다. "문자열".startsWidth(검색 문자열); "문자열".startsWidth(검색 문자열, 위치값); "문자열".endsWidth(검색 문자열); "문자열".endsWidth(검색 문자열, 시작 위치값); const str1 = "javascript reference"; const currentStr1 = str1.startsWith("javascrip.. 2022. 9. 27.
이벤트 메서드 알아보기 : mouseenter / mouseover 이벤트 메서드 mouseenter/mouseover 비교하기 이벤트 메서드인 addEventListener()의 이벤트로 사용되는 mouseenter와 mouseover는 요소 위에 마우스가 위치한 경우의 이벤트를 의미합니다. 두가지 이벤트의 특징을 알아보고 공톰점과 차이점을 비교해보도록 하겠습니다! > 이벤트 메서드 : addEventListener("mouseenter") mouseenter는 요소 위에 포인터가 위치해 있을 때의 이벤트를 의미합니다. mouseover와의 차이점은 mouseenter는 메서드가 적용된 요소 자신에게만 이벤트가 발생한다는 점입니다. > 이벤트 메서드 : addEventListener("mouseover") 요소 위에 포인터가 위치해 있을 때의 이벤트를 의미합니다. mo.. 2022. 9. 6.
jQuery 알아보기 : 스타일 관련 메서드 jQuery 스타일 관련 메서드 알아보기 제이쿼리의 메서드 중에서 스타일과 관련된 메서드들을 알아봅니다. 스타일 관련 메서드에는 css() 메서드가 있으며, width/height 관련 메서드와 위치 관련 메서드도 알아보겠습니다. > css() 메서드 css() 메서드는 요소의 css 속성을 취득, 생성, 변경할 수 있습니다. 실행 분류 형식 예시 예제 취득 $("요소").css("css 속성"); $("div").css("width"); 보러 가기 생성 $("요소").css("css 속성", "값"); $("div").css("color", "white").css("padding", "10px"); 변경 $("요소").css({기존 css 속성: "값", 바꿀 css 속성: "값"}); $("div").. 2022. 9. 3.
jQuery 알아보기 : 속성 관련 메서드 jQuery 속성 관련 메서드 알아보기 제이쿼리의 메서드 중에서 속성과 관련된 메서드 들을 알아봅니다. 속성 관련 메서드에는 attr(), prop() 메서드가 있습니다. > attr() 메서드 attr() 메서드는 html의 속성(attribute)에 관련된 메서드이며, 선택한 요소의 속성을 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 예시 예제 취득 $("요소").attr("속성"); $("a").attr("href"); 보러 가기 생성 $("요소").attr("속성","내용"); $("a").attr("href","#").attr("target","_blank"); 변경 $("요소").attr({기존 속성: "내용", 바꿀 속성: "내용"}); $("a").attr({a: "#", targe.. 2022. 9. 3.
jQuery 알아보기 : 클래스 관련 메서드 jQuery 클래스 관련 메서드 알아보기 제이쿼리의 메서드 중에서 클래스(Class)와 관련된 메서드 들을 알아봅니다. 클래스 관련 메서드에는 addClass(), removeClass(), toggleClass(), hasClass() 메서드가 있습니다. > addClass() 메서드 addClass() 메서드는 요소에 class 속성을 추가합니다. 실행 분류 형식 예시 예제 추가 $("요소").addClass("클래스명"); $("div").addClass("text"); 보러 가기 콜백 함수 $("요소").addClass(function(index, className) { return "class 속성"; ⇒ 각 '요소'에 class 속성을 추가합니다. }); ⇒ index는 각 '요소'의 inde.. 2022. 9. 3.
문자열 결합과 템플릿 문자열 문자열 : 문자열 결합 / 템플릿 문자열 문자열 결합과 템플릿 문자열에 대해 알아봅니다. 기본적인 문자열 결합 방법은 매우 간단합니다! > 템플릿 문자열과 결합 템플릿 문자열은 내장된 표현식을 허용하는 문자열입니다. 내장된 표현식을 허용한다는 것은 변수에 저장된 내용을 문자열에 작업할 수 있다는 뜻입니다. //01 const str1 = "자바스크립트"; const str2 = "제이쿼리"; document.querySelector(".sample01_N1").innerHTML = "1"; document.querySelector(".sample01_Q1").innerHTML = "자바스크립트, 제이쿼리"; document.querySelector(".sample01_M1").innerHTML = "문자.. 2022. 9. 1.
문자열 메서드 : split() 문자열 메서드 : split() 문자열 메서드를 활용하면 문자열에서 원하는 값을 추출할 수 있습니다. > split() 메서드 split() 메서드는 문자열에서 원하는 값을 추출하여 배열로 반환합니다. // "문자열".split(구분자); // "문자열".split(정규식 표현); // "문자열".split(구분자, 갯수); const str1 = "javascript reference"; const currentStr1 = str1.split(''); // ['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't', ' ', 'r', 'e', 'f', 'e', 'r', 'e', 'n', 'c', 'e'] const currentStr2 = str1.split(' '); /.. 2022. 9. 1.
문자열 메서드 : 대문자 / 소문자 / 공백 문자열 메서드 : 소문자/대문자/공백 문자열 메서드를 활용하면 문자를 소문자/대문자로 변환할 수 있으며, 문자 사이의 공백을 없앨 수도 있습니다. > toUpperCase()/ toLowerCase() 메서드 toUpperCase()는 문자열의 소문자를 대문자로, toLowerCase()는 대문자로 소문자로 바꿉니다. "문자열".charAt(숫자); const str1 = "javascript"; const curentStr1 = str1.toUpperCase(); document.querySelector(".sample02_N1").innerHTML = "1"; document.querySelector(".sample02_Q1").innerHTML = "javascript"; document.query.. 2022. 9. 1.
메서드 / 속성 알아보기 : 크기 또는 위치 위치 및 크기를 표현하는 속성 및 메서드 요소의 위치 및 크기를 표현하는 속성 및 메서드를 알아봅시다! 속성 / 메서드 설명 비고 element.clientWidth 요소의 가로값 마진/보더 미포함 element.clientHeight 요소의 높이값 마진/보더 미포함 element.clientTop 요소의 Y축값 부모 기준 element.clientLeft 요소의 X축값 부모 기준 element.offsetWidth 요소의 가로값 보더/패딩 포함 element.offsetHeight 요소의 높이값 보더/패딩 포함 element.offsetTop 요소의 Y축값 문서 기준 element.offsetLeft 요소의 X축값 문서 기준 element.getBoundingClientRect() top, left, .. 2022. 9. 1.
jQuery 알아보기 : 탐색 선택자 jQuery 탐색 선택자 알아보기 jQuery 탐색 선택자 분류 선택자 종류 설명 예제 기본 탐색 선택자 children() $("div").children() div 요소의 자식 요소를 선택합니다. 보러 가기 parent() $("p").parent() p 요소의 부모 요소를 선택합니다. parents() $("p").parents("div") p 요소의 부모 요소가 되는 모든 div 요소를 선택합니다. closest() $("p").closest("div") p 요소의 부모 요소가 되는 첫 번째 div 요소를 찾습니다. next() $("div.m").next() div.m 요소의 다음 요소를 선택합니다. nextAll() $("div.m").nextAll() div.m 요소의 다음 요소들을 모두 선.. 2022. 9. 1.
jQuery 알아보기 : 필터 선택자 jQuery 필터 선택자 알아보기 jQuery 필터 선택자 분류 선택자 종류 설명 예제 필터 선택자 :even $("tr:even") tr 요소 중 짝수 행만 선택합니다. 보러 가기 :odd $("tr:odd") tr 요소 중 홀수 행만 선택합니다. :first $("td:first") 첫 번째 td 요소를 선택합니다. :last $("td:last") 마지막 td 요소를 선택합니다. :header $(":header") 헤딩(h1~h6) 요소를 선택합니다. :eq() $("li:eq(0)") index가 0인 li 요소를 선택합니다. index는 0번이 첫 번째 요소입니다. :gt() $("li:gt(0)") index가 0보다 큰 li 요소들을 선택합니다. :lt() $("li:lt(2)") inde.. 2022. 9. 1.
728x90

HTML이 적힌 썸네일 이미지
CSS가 적힌 썸네일 이미지
JAVASCRIPT가 적힌 썸네일 이미지

JAVASCRIPT

자세히 보기