jQuery_3. 선택자
엘리먼트 관련 선택자
후손선택자 예제
<h2>문단 안에 <a>링크</a>태그가 있다.
두번째 <span><a>링크</a></span>는 손자이다.
</h2>
// h2의 자식 a태그의 테두리 solid
$(h2>a).css("border","solid");
// h2의 후손 a태그의 배경색 yellow
$(h2 a).css("backgroundColor","yellow");
// h2의 손자 a태그의 글자색 red
$(h2>>a).css("color","red");
형제선택자 예제
<h3>꼬마버스 타요 가족</h3>
<p>타요</p>
<p>로기</p>
<p>라니</p>
<p>가니</p>
// h3 다음의 모든 형제의 배경색 변경, 길이지정, 가운데정렬
$("h3~p").css("backgroundColor","yellow")
.css("width", "300px")
.css("text-align","center");
// h3 다음의 첫번째 형제 글자 굵게, 크게
$("h3+p").css("font-weight","bold")
.css("font-size","1.5em");
속성관련 선택자
속성선택자 예제
<p>일반 문단입니다.</p>
<p title="툴팁으로 보입니다.">타이틀을 가지고 있는 문단입니다.</p>
<input type="text" title="회원번호">회원번호</input>
<input type="password" title="비밀번호">비밀번호</input>
// title 속성을 가진 p요소 배경색 변경
$("p[title]").css("backgroundColor", "purple");
// type 속성이 password인 요소 테두리 변경
$("[type=password]").css("border","red dashed 3px");
입력양식(form) 선택자
- 속성선택자를 간단히 함
Author And Source
이 문제에 관하여(jQuery_3. 선택자), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@oungoo/htmljQuery-core6저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)