3/22(월)FrontEnd/jQuery(2)
2. 기본 선택자
2) 태그 선택자
표현법 : $("태그").css("color","blue);
<script>
$(document).ready(function(){
// 순수 자바스크립트 방식 --> document.getElementsByTagName("태그명") => 배열
var p = document.getElementsByTagName("p"); // [p, p, ...] 배열
// p.style.color = "red"; 안 먹힘, 배열에 style 요소 없음
for(var i=0; i<p.length; i++){
p[i].style.color = "red";
}
// jQuery 방식 --> $("태그명")
$("h5").css("color", "blue");
// 여러 종류의 태그들을 동시에 선택하는 것도 가능
$("p, h5, #id1").css("backgroundColor", "yellow");
})
</script>
3) 클래스 선택자
: 특정한 클래스 속성을 가진 요소들 선택하고자 할 때 사용
표현법 : $("클래스").css("color","blue);
<h1 class="item">Class1</h1>
<h1 class="item select">Class2</h1>
<h1 class="item select">Class3</h1>
<script>
$(document).ready(function(){
// 순수 자바스크립트 방식 --> document.getElementsByClassName("클래스명")
var items = document.getElementsByClassName("item"); // [h1, h1, h1 ...]
for(var i=0; i<items.length; i++){
items[i].style.color = "orange"; // 스타일 바꾸기
items[i].onclick = function(){ // 클릭 이벤트 만들기
console.log("클릭됨");
}
}
$(".select").css("backgroundColor", "pink");
$(".select").click(function(){
alert("클릭됨!");
})
// .click() 메소드 : 클릭이벤트와 관련된 기능 수행
// 자바스크립트방식의 이벤트연결
// 선택된요소.onclick(on이벤트) = funciton(){ }; 함수대입해야함
// jQuery 방식의 이벤트연결
// 선택된요소.이벤트명(function(){ });
})
</script>
3. 기타 선택자
1) 자손 선택자(>)와 후손선택자( )
<div style = "border : 1px solid lightgray"> 조상
<ul>
<li>div의 후손이면서 ul의 자손1</li>
<li>div의 후손이면서 ul의 자손2</li>
<li class="ch">div의 후손이면서 ul의 자손3</li>
<li class="ch">div의 후손이면서 ul의 자손4</li>
<li>
<h3>div/ul의 후손이면서 li의 자손</h3>
</li>
</ul>
<h3>자손2</h3>
<h3 class="ch">자손3</h3>
</div>
<script>
$(document).ready(function(){
$("div>h3").css("color","violet");
$("div h3").css("backgroundColor","lightblue");
//$("ul h3")
//$("li>h3")
$("div>ul h3").css("color","red"); // div의 ul의 후손이면서 h3요소 선택
$("ul>.ch").css("backgroundColor", "yellow"); // ul의 자손인 클래스가 ch인 요소 선택
// 또는
$("li.ch").css("color","pink"); // li요소 중 클래스가 ch인 요소선택
})
</script>
2) 속성 선택자
- 선택자[속성] : 특정 속성을 가지고 있는 모든 요소 선택
- 선택자[속성=속성값] : 속성 안의 값이 특정값과 "일치"하는 모든 요소 선택
- 선택자[속성~=속성값] : 속성안의 값에 특정값을 "단어로써 포함"하는 모든 요소 선택
- 선택자[속성*=속성값] : 속성안의 값에 특정값을 "포함"하는 모든 요소 선택
- 선택자[속성^=속성값] : 속성안의 값이 특정값으로 "시작"하는 모든 요소 선택
- 선택자[속성$=속성값] : 속성안의 값이 특정값으로 "끝"나는 모든 요소 선택
Author And Source
이 문제에 관하여(3/22(월)FrontEnd/jQuery(2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@alsrnr45/322월FrontEndjQuery2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)