반응형
자손 선택자(>)와 후손 선택자( )
<div style="border:1px solid black">
<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>duv/ul의 후손이면서 li의 자손</h3>
</li>
</ul>
<h3>자손2</h3>
<h3 class="ch">자손3</h3>
</div>
<script>
$(function(){
$("div>h3").css("color", "lightblue");
$("div h3").css("backgroundColor", "violet");
$("li>h3").css("color", "red");
$("ul h3").css("color", "white");
$("ul>li>h3").css("color", "blue");
$("ul>.ch").css("backgroundColor", "lightyellow");
$("li.ch").css("color", "green");
});
</script>
속성 선택자
- 선택자[속성]: 특정한 속성을 가지고 있는 모든 요소를 선택한다.
- 선택자[속성=특정값]: 속성값이 특정값과 일치하는 모든 요소를 선택한다.
- 선택자[속성~=특정값]: 속성값에 특정값의 단어를 포함하는 요소를 선택한다.
- 선택자[속성^=특정값]: 속성값이 특정값으로 시작하는 요소를 선택한다.
- 선택자[속성$=특정값]: 속성값이 특정값으로 끝나는 요소를 선택한다.
- 선택자[속성*=특정값]: 속성값에 특정값을 포함하는 요소를 선택한다.
<input type="text"> <br>
<input type="number" class="test test1"> <br>
<input type="radio"><br>
<input type="checkbox"><br>
<input type="button" value="button" class="test2"><br>
<script>
$(function(){
$("input[class]").css("backgroundColor", "lightpink");
$("input[type=text]").css("backgroundColor", "lightyellow");
$("input[type=text]").val("변경");
// .val(): value 속성과 관련된 기능을 수행
$("input[type^=ra]").attr("checked", true);
$("input[type$=box]").attr("checked", true);
// .attr(): html의 속성(attribute)들과 관련된 기능을 수행
$("input[class*=est]").css("width", "100px");
$("input[class*=st2]").css("height", "100px");
$("input[class*=st2]").val("버튼");
// 연속으로 메소드 호출 가능 -> 메소드체이닝
$("input[type=button]").css("width", "50px").css("height", "50px").val("눌러");
});
</script>
입력 양식 선택자
: input 태그의 type 속성에 따라 선택할 수 있다.
텍스트 상자: <input type="text"> <br>
일반 버튼: <input type="button"> <br>
체크박스: <input type="checkbox"> <br>
라디오: <input type="radio"> <br>
비밀번호: <input type="password"> <br>
초기화버튼: <input type="reset"> <br>
제출버튼: <input type="submit"> <br>
<script>
$(function(){
/*
$(":text").css("backgroundColor", "orange");
$(":button").css({width:"200px", height:"200px"}).val("왕큰버튼");
// 스타일을 부여할 때 객체 형태로도 사용할 수 있다.
$(":checkbox").attr("checked", true);
$(":radio").attr("checked", true).css({width:"50px", height:"50px"});
// 초기화버튼
$(":reset").css({backgroundColor:"blue", color:"white", border:"none"});
// 제출버튼: 클릭 시 alert
$(":submit").click(function(){
alert("안녕");
// 비밀번호 입력란에 있는 값을 출력해서 알림 띄우기
alert($(":password").val());
// .val()는 매개변수 없이 호출하면 값을 가지고 온다.
});
*/
// mouseenter : 선택된 요소의 경계 내부로 마우스가 들어가는 순간 발생하는 이벤트
/*
$(":submit").mouseenter(function(){
$(this); // 현재 이벤트가 발생한 요소를 알 수 있다.
$(this).css("backgroundColor", "red");
$(this).addClass("redStyle");
// .addClass(): 해당 요소에 클래스를 추가하는 메소드
});
// moseout: 선택된 요소의 경계 밖으로 마우스가 나가는 순간 발생하는 이벤트
$(":submit").mouseout(function(){
$(this).css("backgroundColor", ""); // 빈 문자열: 기본 상태
$(this).removeClass("redStyle");
// removeClass(): 해당 요소의 클래스 제거 메소드
});
*/
// hover: mouseenter + mouseout
$(":submit").hover(function(){ // mouseenter
$(this).addClass("redStyle");
}, function(){ // mouseout
$(this).removeClass("redStyle");
});
});
</script>
상태 선택자
1. checked 선택자
: radio, checkbox - 체크된 입력 양식을 선택한다.
- input:checked
메뉴:
<input type="checkbox" name="menu" id="ramen">라면
<input type="checkbox" name="menu" id="chicken">치킨
<input type="checkbox" name="menu" id="pizza">피자
<input type="checkbox" name="menu" id="ddokbokki">떡볶이
<br>
<script>
$(function(){
// 버튼 클릭 시 현재 checked 상태인 요소를 선택해서 스타일 부여
// $("#btn").click(function(){
// $("input:checked").css({width:"50px", height:"50px"});
// });
// checkbox인 요소들에 change 이벤트 발생 시 실행
$(":checkbox").change(function(){
console.log($(this).prop("value") + ":" + $(this).prop("checked"));
// html 속성값을 다룰 땐 attr / javascript 속성값을 다룰 땐 prop
// attr로 작성하면 checked가 가져와지고, prop으로 작성하면 checked안에 있는 value가 가져와진다.
if($(this).prop("checked")){
$(this).css({width:"50px", height:"50px"});
} else {
$(this).css({width:"", height:""});
}
});
});
</script>
2. selected 선택자
: option 중 선택된 태그를 선택한다.
- option:selected
영화:
<select name="movie" id="movie">
<option value="harry">해리포터</option>
<option value="chaser">추격자</option>
<option value="dark">다크나이트</option>
<option value="witch">마녀2</option>
</select>
<button onclick="test();">확인</button>
<br>
선택한 영화: <label id="choice">선택안함</label>
<script>
function test(){
console.log($("option:selected").val()); // value값
console.log($("option:selected").html()); // innerHTML값
$("#choice").html($("option:selected").html());
// 라벨에 innerHTML = 현재 선택한 innerHTML 내용
// document.getElementById("choice").innerHTML
}
</script>
3. enabled/disabled 선택자
: 활성화/비활성화된 입력 양식을 선택한다.
- #아이디명>:enabled
- #아이디명>:disabled
- .클래스명>:enabled
- .클래스명>:disabled
<div id="wrap">
활성화 텍스트 상자: <input type="text"><br>
비활성화 텍스트 상자 : <input type="text" disabled> <br>
활성화 버튼 : <input type="button" value="활성화"> <br>
비활성화 버튼 : <input type="button" value="비활성화" disabled>
</div>
<script>
$(function(){
$("#wrap>:enabled").css("backgroundColor", "yellowgreen");
$("#wrap>:disabled").css("backgroundColor", "orange");
})
</script>반응형