배열 붙이기 concat() 메서드

개발 및 관리/Javascript 2023. 10. 31. 22:38 posted by HighLighter
반응형

//11. 배열 붙이기 concat() 메서드
console.clear();
const myArr1 = [1, 2, 3, 4];
const myArr2 = [5, 6, 7, 8];

const myArr3 = myArr1.concat(myArr2);

console.log(myArr1);
console.log(myArr2);
console.log('---------------------------------------------------- concat() 배열');
console.log(myArr3); // 1, 2, 3, 4, 5, 6, 7, 8

//문자열
const str1 = "Hello";
const str2 = "World";
console.log('---------------------------------------------------- concat() 문자열');
console.log(str1.concat(', ', str2)); // Hello, World

반응형
반응형


//10. splice() 메서드
//배열의 기존 요소를 삭제하거나 교체하고자 할 때 --> 새로운 요소를 추가 --> 배열의 값을 변경.
//특징1 --> 원본을 수정.
//특징2 --> 잘라내고(삭제하고) 이어 붙이기 기능

//기본 사용법
//splice(______, ______, ______, ______);
//splice(start, count(del), 값(item), 값(item));

console.clear();
console.log('---------------------------------------------------- splice()');

//원본배열
const oriArt10 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log("원본 배열: "+oriArt10);

//10-1.
console.log('---------------------------------------------------- splice() 10-1');
const spliceAr1 = oriArt10.splice(5);
console.log(spliceAr1); // 6, 7, 8, 9, 10
console.log(oriArt10); // 1, 2, 3, 4, 5

//10-2.
console.log('---------------------------------------------------- slice() 10-2');
const sliceAr1 = oriArt10.slice(3);
console.log(sliceAr1); // 4, 5, 6, 7, 8, 9, 10
console.log( "원본 배열: " + oriArt10); // 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
console.log("원본 배열 길이: " + oriAr10.length); //7

//10-3.
const oriAr10 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log('---------------------------------------------------- slice() 10-3');
const spliceAr3 = oriAr10.splice(3, 2, 'a', 'b', 'c');
console.log(spliceAr3); // 4, 5
console.log("원본 배열: "+ oriAr10); // 1, 2, 3, a, b, c, 6, 7, 8, 9, 10
console.log("원본 배열 길이: "+ oriAr10.length); // 11

//10-4.
console.clear();
console.log('---------------------------------------------------- slice() 10-4');
const oriStrings = ['서울', '부산', '인천', '경기', '전라', '경상', '충청'];
console.log(oriStrings);

// 지정한 인덱스 포함해서 2개를 삭제하고 --> 새로운 '강원', '제주' 를 추가
const oriStrings1 = oriStrings.splice(2, 2, '강원', '제주');
console.log(oriStrings1); // 인천, 경기
console.log(oriStrings); // 서울, 부산, 강원, 제주, 전라, 경상, 충청

// 마이너스 지정
const oriStrings2 = oriStrings.splice(-2);
console.log(oriStrings2); // 경상, 충청
console.log(oriStrings); // 서울, 부산, 강원, 제주, 전라

//0 지정
const oriStrings3 = oriStrings.splice(3, 0, '진도');
console.log(oriStrings3); // [] --> 지정한 인덱스 자리에 삭제하는 것 없이 --> 새로운 요소 삽입
console.log(oriStrings); // '서울', '부산', '인천', '경기', '전라' --> '서울', '부산', '인천', '진도', '경기', '전라'





반응형

jQuery Quick API Reference

개발 및 관리/Javascript 2023. 2. 1. 16:50 posted by HighLighter
반응형
반응형
반응형
반응형

jQueyr DOM의 변경(DOM Manipulation)

개발 및 관리/Javascript 2022. 10. 24. 08:09 posted by HighLighter
반응형

jQueyr DOM의 변경(DOM Manipulation)
DOM 구조를 변경할 수 있는 jQuery 메서드들이다. 동적으로 문서구조를 변경할 수 있고, 특정 노드의 내,외부 삽입과 삭제도 가능하다. 

메소드 기능
DOM Insertion, Inside
append() 선택 노드 내부의 맨 뒤에 자식 노드를 새로 추가한다.
appendTo(target) 새로운 노드를 target에 해당하는 노드 내부의 마지막에 추가한다.
prepend() 선택 노드 내부의 맨 앞에 자식 노드를 새로 추가한다.
prependTo(target) 새로운 노드를 target에 해당하는 노드 내부의 첫 번째로 추가한다.
html() 노드 내부의 HTML을 읽고 쓸 수 있다.
text() 노드의 텍스트를 읽고 쓸 수 있다.
DOM Insertion, Outside
after() 선택된 노드 뒤에 새로운 노드를 추가한다.(형제관계)
before() 선택된 노드 앞에 새로운 노드를 추가한다.(형제관계)
insertAfter(target) 작성된 jQuery 객체를 타깃 뒤에 삽입한다.(형제관계)
insertBefore(target) 작성된 jQuery 객체를 타깃 앞에 삽입한다.(형제관계)
DOM Insertion, Around
wrap() 선택된 집합을 각각의 매개 변수로 넘긴 HTML 구조로 감싼다.
wrapAll() 선택된 집합의 전체 외곽을 매개 변수로 넘긴 HTML 구조로 감싼다.
wrapInner() 선택된 집합의 내부에 매개 변수로 넘김 HTML 구조로 감싼다.
DOM Removal
detach() DOM에서 조건에 일치되는 노드들을 제거한다.(, 메모리에는 남아 있기 때문에 다시 사용할 수 있다.)
empty() DOM에서 조건과 일치하는 노드들의 자식 노드들을 제거한다.
remove() DOM에서 조건과 일치하는 노드들을 제거한다.
unwrap() wrap()의 반대로, 선택된 집합을 감싸고 있는 HTML을 제거한다.
DOM Replacement
repalceAll() 조건에 맞는 노드들을 target 노드들로 대체한다.
replaceWith() 조건에 맞는 노드들을 매개 변수로 넘긴 새로운 HTML로 대체한다.
-
clone() 선택한 노드와 똑같은 노드를 복사한다.
 
반응형
반응형

jQuery 필터링 : 선택된 집합에서 다시 조건에 맞는 jQuery 집합을 선택

메서드 설명
eq() 인덱스 번호에 해당하는 노드를 찾는다. index 0은 첫 번째 노드 의미
filter() 선택된 노드 집합에서 선택자를 추가하거나 함수를 사용하여 원하는 결과를 추출할 수 있다.
first() 선택된 노드 집합에서 첫 번째 자식 노드를 찾는다.
has() 선택된 요소들이 자신의 자식 요소에서 주어진 선택자가 있는지를 확인하여 범위를 축소한다.
is() 매개 변수로 selector, element, jQuery를 입력하여 입력한 객체가 있으면 true를 반환한다.
last() 선택된 노드 집합에서 마지막 자식 노드를 찾는다.
map() 대상이 되는 노드 집합을 변경한다.
not() 조건에 맞지 않는 것들만 찾아서 선택한다.
slice() 선택된 집합을 조건의 범위로 재선택해준다. 배열의 slice()와 같은 기능
 
jQuery 필터링 : 선택된 집합에서 다시 조건에 맞는 jQuery 집합을 선택

$('div#main p').first() // id가 main인 <div> 태그의 첫번재 <p> 태그 선택
$('div#main p').last() // id가 main인 <div> 태그의 마지막 <p> 태그 선택
$('div#main p').eq(1) // id가 main인 <div> 태그의 두 번째 <p> 태그를 선택한다. 인덱스는 0부터 시작
$('div').filter(".middle") // <div>태그 중에서 클래스 속성 값이 middle인 것을 선택
$('div).not('.middle') // <div>태그 중에서 클래스 속성 값이 middle이 아닌 것을 선택
$('li').has('ul') // <li>태그 자손 중에 <ul>태그가 있는 <li>태그 선택

*** Selectors의 :first vs Traversing의 first()
=> 선택된 집합에서 첫번째 노드를 반환하는 것에는 차이가 없다. 다만 Selector의 :first보다 Travesing의 first()가 더 최신 버전이기 때문에 
필터링하는 속도가 빠르고 여러 가지 메서드를 연속해서 나열할 수 있는 메서드 체인 방식의 표기에 더 적합한다.
=> 전체 div 노드에 click 이벤트를 설정하고 첫번재 div노드의 배경색을 변경하는 코드를 작성하면 다음과 같은 차이가 있다.

// Selector의 :first
$("div").click(fn);
$("div:first").css("background-color", "red");

// Traversing의 first()
$("div").click(fn).first().css("background-color", "red");

=> 이러한 이유로 보통 Traversing의 메서드 사용을 더 추천한다고 한다.

http://api.jquery.com/category/traversing/filtering
 

Filtering | jQuery API Documentation

Reduce the set of matched elements to the one at the specified index. Reduce the set of matched elements to the even ones in the set, numbered from zero. Reduce the set of matched elements to those that match the selector or pass the function’s test. Red

api.jquery.com

 

 

반응형

jQuery 트리 구조 탐색

개발 및 관리/Javascript 2022. 10. 23. 20:22 posted by HighLighter
반응형

트리 구조 탐색(Tree Traversal) : DOM Tree 구조를 기반으로 찾아가는 방식

메서드 설명
children() 선택한 노드의 모든 자식 노드를 선택
find() 선택한 노드의 자손 노드 중 조건에 맞는 노드를 선택
next() 선택한 노드의 다음 노드를 선택
nextAll() 선택한 노드의 다음 모든 노드를 선택
parent() 선택한 노드의 부모 노드를 선택
parents() 선택한 노드의 모든 부모 노드를 선택
prev() 선택한 노드의 이전 노드를 선택
prevAll() 선택한 노드의 모든 이전 노드를 선택
closest() 선택한 노드를 포함하면서 가장 가까운 상위 노드를 선택
nextUntil() 다음에 위치한 노드를 조건에 맞을 때까지 찾는다.
parentsUntil() 조건이 참이 될 때까지 부모 노드를 찾는다.
prevUntil() 이전에 위치한 노드를 조건에 맞을 때까지 찾는다.
siblings() 형제 노드들을 모두 찾는다.
 
*활용도가 빈도가 높은 트리 구조 탐색

$('div#container').children('p') // div#container 태그의 자식 태그들 중에서 <p> 태그를 모두 선택한다. 자손 레벨에서 찾지 않고 자식 레벨에서만 찾는다.
$('div#container').find('p') // div#container 태그의 자손 태그들 중에서 <p> 태그를 모두 찾아 선택. children()과 find()의 차이점은 자식까지 찾느냐, 자손까지 찾느냐이다.
$('p#part1').prev() // id값이 part1인 <p> 태그의 바로 앞에 위치한 노드를 선택. 매개 변수로 찾고 싶은 노드를 전달 할 수 있음.
$('p#part1').next() // id값이 part1인 <p> 태그의 바로 다음에 위치한 노드를 선택. 매개 변수로 찾고 싶은 노드를 전달 할 수 있음.
$('p#part1').siblings() // id값이 part1인 <p> 태그의 형제 노드 선택. 매개 변수로 찾고 싶은 노드를 전달 할 수 있음.
$('p#part1').parent() // id값이 part1인 <p> 태그의 부모 노드 선택
반응형

jQuery 폼 선택자

개발 및 관리/Javascript 2022. 10. 23. 20:01 posted by HighLighter
반응형

폼 선택자(Forms)

form선택자는 form의 형태 및 상태를 사용하여 선택하는 선택자이다.

1. 입력 양식 지정

:input 모든 입력 양식
:file 파일 업로드 입력 양식
:hidden 숨겨진 입력 양식
:image 이미지 입력 양식
:password 암호 입력 양식
:radio 라디오 버튼 입력 양식
:reset 리셋 입력 양식
:submit 데이터 보내기 입력 양식
:text 텍스트 박스

 

2. 입력 양식의 현재 상태를 통해 지정

:enabled 사용할 수 있는 모든 노드
:disabled 사용할 수 없는 모든 노드
:checked 체크된 모든 노드
:selected 선택된 모든 노드
 
반응형
반응형

***계층(Hierarchy) 선택자

*선택자
ancestor descendant : 조상(ancestor)에 속한 자손(descendant)을 찾는 선택으로, 하위의 자손 태그가 몇 단계 아래의 계층에 있느냐와 상관없이 모두 선택한다.
parent > child : parent에 속해 있는 <child> 태그를 선택한다.
prev + next : 현재 선택된 <prev> 태그를 기준으로 바로 뒤에 오는 첫 번째 형제 태그를 선택한다.
prev ~ siblings : 현재 선택된 <prev> 태그를 기준으로 바로 뒤부터 형제 태그를 모두 선택한다.

$("div#container li") // id속성이 #container인 <div> 태그의 자손 태그 중 <li> 태그를 모두 선택
$("div > p") //<div> 태그의 자식 태그 중(자손 태그는 포함하지 않음) <p> 태그를 선택
$("#first + li") //id속성이 first인 노드를 찾은 후, 바로 그 다음 형제(li) 노드를 선택
$("#second ~ li") // id속성이 second인 노드를 선택한 것을 기준으로 다움에 오는 형제들을 모두 선택. 단, 찾을 li 태그는 모두 같은 부모를 갖고 있는 형제 관계인 것만 찾는다. siblings라는 이름에서 알 수있 듯이, 복수 형재를 선택한다.

반응형

'개발 및 관리 > Javascript' 카테고리의 다른 글

jQuery 트리 구조 탐색  (0) 2022.10.23
jQuery 폼 선택자  (0) 2022.10.23
jQuery 문서 준비 이벤트, 따옴표  (0) 2022.10.23
jQuery 호출 및 표기방법  (0) 2022.10.23
jQuery 명령어 잘 정리된 사이트  (0) 2022.10.22
반응형

***문서 준비 이벤트
jQuery에서 문서 준비 이벤트는 웹 브라우저가 HTML의 DOM을 모두 로드할 때를 알려주는 이벤트로, <head> 태그에 jQuery 코드를 
삽입할 경우에는 문서 준비 이벤트를 반드시 사용해야 한다.

***문서 준비 이벤트를 사용해야 하는 경우
<head> 태그에 jQuery 코드를 넣을 때에는 문서 준비 이벤트가 필요하다. 문서 준비 이벤트는 ready이다. HTML을 동적으로 조작하기 위해서는
HTML 문서를 모두 로딩해야만 그 다음에 동작을 가하는 jQuery나 Javascript 코드가 정상적으로 작동된다.
jQuery에는 ready 이벤트와 똑같은 효과를 나타내는 것이 있는데, jQuery() 함수에는 매개 변수로 직접 함수를 넘겨주면 이 함수는 DOM이 
모두 로딩되고 난 후에 실행된다. 아래의 3가지 코드는 동일한 의미를 갖는다.

jQuery(document).ready( function() { code } );

= jQuery( function() { code } )

= $( function() { code } )

***문서 준비 event를 사용하지 않는 경우
<body> 문서의 맨 마지막 </body> 전에 jQuery 코드나Javascript 코드를 삽입하면 된다.
왜냐하면 필요한 모든 HTML이 모두 로딩되었고, 그 다음에 동작하는 jQuery 코드가 작동되면서 ready 이벤트가 필요 없어졌기 때문이다.

<body>
<script>
// 이 부분은 document ready event가 필요 없다.
</script>
</body>

***따옴표
jQuery에서는 $() 함수 안에 따옴표를 사용하여 요소를 감싸는데, 이때 따옴표는 쌍따옴표와 홑따옴표 구별 없이 사용된다.
여기서 주의 할 점은 쌍따옴표는 쌍따옴표로, 홑따옴표는 홑따옴표로 끝나야 한다.

반응형

'개발 및 관리 > Javascript' 카테고리의 다른 글

jQuery 폼 선택자  (0) 2022.10.23
jQuery기초 계층(Hierarchy) 선택자  (0) 2022.10.23
jQuery 호출 및 표기방법  (0) 2022.10.23
jQuery 명령어 잘 정리된 사이트  (0) 2022.10.22
jQuery 3가지 호출방법  (0) 2022.10.22