jQuery_3. 選択者
8972 ワード
要素の選択者について
子孫選択者の例
<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");
フォームセレクタの入力
<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");
フォームセレクタの入力
Reference
この問題について(jQuery_3. 選択者), 我々は、より多くの情報をここで見つけました https://velog.io/@oungoo/htmljQuery-core6テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol