인스턴스의 기본 개념
$ 인스턴스는 페이지의 요소를 캡슐화합니다. 기존 요소를 선택하는 데 사용되는 것 외에도 새로운 요소를 직접 생성하고 조작할 수 있습니다. 이 장에서는 새로운 요소를 만들고 $ 인스턴스에 대한 몇 가지 작업을 소개합니다.
새로운 요소 만들기
$로 인스턴스를 통해 새로운 요소를 직접 생성하고 조작할 수 있습니다.
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js@4.5.26/dist/ofa.min.js"></script>
<script>
const $ele = $('<div style="color:red">I am text</div>');
$('body').push($ele);
</script>
위의 예에서 $('<div style="color:red">I am text</div>')를 사용하여 새 div 요소를 생성하고 body에 추가했습니다.
하위 요소 가져오기
$로 얻은 인스턴스는 DOM 요소처럼 children 속성을 가지지 않습니다. 그러나 우리는 배열 인덱스를 사용하여 인스턴스의 직접적인 자식 요소에 액세스할 수 있습니다.
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js@4.5.26/dist/ofa.min.js"></script>
<div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
<script>
const $div = $('div');
console.log($div[0]); // Output: <p>First Paragraph</p>
console.log($div[1]); // Output: <p>Second Paragraph</p>
console.log($div.length); // Output: 2
</script>
이전 예제에서는 'div' 요소를 얻고 인덱스를 사용하여 첫 번째와 두 번째 'p' 요소에 접근했습니다. 동시에, 우리는 '$div.length'를 사용하여 하위 요소의 수를 얻었습니다.
작업자 요소
$를 통해 우리는 배열의 메서드를 직접 사용하여 하위 요소를 조작할 수도 있습니다. 예를 들면 push와 pop입니다.
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js@4.5.26/dist/ofa.min.js"></script>
<div>
<p>First Paragraph</p>
</div>
<script>
const $paragraphs = $('p');
// 새 div 요소를 자식으로 추가합니다.
const $newDiv = $('<div>New Div</div>');
$paragraphs.push($newDiv);
setTimeout(()=>{
// 마지막 하위 요소 삭제
$paragraphs.pop();
console.log($paragraphs);
},1000)
</script>
위의 예에서 우리는 모든 p 요소의 $ 인스턴스를 얻었고 push 메소드를 사용하여 새로운 div 요소를 자식 요소로 추가했으며, 그 후에는 pop 메소드를 사용하여 마지막 자식 요소를 제거했습니다.
위의 예에서, 당신은 $ 인스턴스의 몇 가지 기본 조작, 새 요소 생성 및 하위 요소에 대한 액세스 및 조작을 이해할 수 있습니다. $ 인스턴스는 페이지의 요소를 조작하기 위한 간편한 방법을 제공합니다.