jQuery ~ 고급 편 ~
2565 단어 프로그래밍 공부 일기jQuery
프로그래밍 공부 일기
2020년 5월 31일 Progate Lv.80
jQuery 객체의 구조
jQuery 오브젝트는 배열과 같은 구조를 하고 있어, 셀렉터에 합치한 요소가 배열과 같이 들어가 있다. 인덱스 번호가 할당되었습니다.
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
$('li')
=>[
<li>HTML</li> //インデックス番号0
<li>CSS</li> //インデックス番号1
]
eq 메소드
jQuery 객체 중에서 eq의 인수의 숫자와 같은 인덱스 번호의 요소를 취득할 수 있다. 인덱스 번호는 0부터 시작합니다.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ul>
$('li')
안의 인덱스 번호가 2 인 jQuery 객체 (세 번째 li 요소)
$('li').eq(2).css('color','red');
index 메소드
특정 인덱스 번호를 얻을 수 있습니다.
<ul>
<li>HTML</li>
<li class="active">CSS</li>
<li>jQuery</li>
</ul>
$('li').index($('.active));
li 요소에서 .active 요소의 인덱스 번호(1)를 가져옵니다.
prev 및 next 메서드
prev 메소드는 jQuery 객체의 형제 요소(같은 계층의 요소) 중에서 1개 전의 요소를, next 메소드는 1개 뒤의 요소를 취득할 수 있다.
<ul>
<li>HTML</li>
<li id="center">CSS</li>
<li>jQuery</li>
</ul>
$('center').prev().css('color','red');
$('center').next().css('color','blue');
Reference
이 문제에 관하여(jQuery ~ 고급 편 ~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/mzmz__02/items/aa42e32070bd5e2e66f8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
$('li')
=>[
<li>HTML</li> //インデックス番号0
<li>CSS</li> //インデックス番号1
]
<ul>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ul>
$('li').eq(2).css('color','red');
<ul>
<li>HTML</li>
<li class="active">CSS</li>
<li>jQuery</li>
</ul>
$('li').index($('.active));
<ul>
<li>HTML</li>
<li id="center">CSS</li>
<li>jQuery</li>
</ul>
$('center').prev().css('color','red');
$('center').next().css('color','blue');
Reference
이 문제에 관하여(jQuery ~ 고급 편 ~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mzmz__02/items/aa42e32070bd5e2e66f8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)