jQuery Quiz - Attribute

아래 한 번 풀어 보세요..

지문1


<style type="text/css">
.view{ background-color: red;font-size:12px; color: white; }
</style>
<body>
<p id="p1">p1 element </p>
<p id="p2">p2 element </p>
<p id="p3" class="view">p3 element </p>
<p id="p4">p4 element </p>
<p id="p5">p5 element </p>
<div id="toggle">
<p>p1 element </p>
<p>p2 element </p>
<p>p3 element </p>
<p>p4 element </p>
<p>p5 element </p>
</div>
<input type="text" value="text element value!" />
<div id="message1" ></div>
<div id="message2" ></div>
</body>

문제 1

아래 예제는 지문1 에서 페이지가 로드 될대 id="p1"인 Element에 "view" class 을 지정하는 예제 이다.
???에 들어갈 코드를 채우시오


$(document).ready( function() {
	???
});

정답 :

$("#p1").attr("class","view");

문제 2

아래 예제는 지문1 에서 페이지가 로드 될대 id="p2"인 Element에 "view" class 을 추가 하는 예제 이다.
???에 들어갈 코드를 채우시오


$(document).ready( function() {
	???
});

정답 :

$("#p2").addClass("class");

문제 3

아래 예제는 지문1 에서 페이지가 로드 될대 id="p3"인 Element에 "class=view" Attribute 을 삭제하는 예제 이다.
???에 들어갈 코드를 채우시오


$(document).ready( function() {
	???
});

정답 :

$("#p3").removeAttr("class");

문제 4

아래 예제는 지문1 에서 페이지가 로드 될대 id="p2"인 Element에 "class=view" Attribute 을 추가한후 실제 추가가 되었는지 확인 하는 코드이다.
???에 들어갈 코드를 채우시오


$(document).ready( function() {
	$("#p2").addClass("class");
	if(???){
		alert('추가되었습니다.')
	}else{
		alert('추가되지 않았습니다.')
	}
});

정답 :

$("#p2").hasClass("view")

문제 5

아래 예제는 지문1 에서 페이지가 로드 될대 id="p3"인 Element에 "view" class 을 삭제하는 예제 이다.
???에 들어갈 코드를 채우시오


$(document).ready( function() {
	???	
});

정답 :

$("#p3").removeClass("view");

문제 6

아래 예제는 지문1 에서 페이지가 로드 될대 input type="text" Element의 value를 "change Value"로 바꾸는 예제이다.
???에 들어갈 코드를 채우시오


$(document).ready( function() {
	???	
});

정답:

$("input[type='text']").val("change value!");

문제 7

아래 예제는 지문1 에서 id="toggle" 인 Element의 자식 element 중에서P 태그 Element 가 click 될대 "view" class가 토글 되는 코드 이다.
???에 들어갈 코드를 채우시오


$(document).ready( function() {
	???
});

정답 :

	$("#toggle > p").click(function(){
		$(this).toggleClass("view");
	});

문제 8

아래 예제는 지문1 에서 페이지가 로드 될대 id="toggle" 인 Element의 자식 element 중에 짝수 번째 P 태그 Element 에 "view" class를 토글하는 코드이다
???에 들어갈 코드를 채우시오


$(document).ready( function() {
	???
});

정답 :

	$("#toggle > p:odd").each(function(){
		$(this).toggleClass("view");
	});

문제 9

아래 예제는 지문1 에서 페이지가 로드 될대 input type="text" Element의 value를 "change Value"로 바꾸고 style="cursor:pointer;" 를 지정하는 예제이다.
???에 들어갈 코드를 채우시오


$(document).ready( function() {
	???	
});

정답 :

$("input[type='text']").val("change value!").css({'cusor':'pointer'});

문서에 대하여

최초작성자 : 허용운
최초작성일 : 2010년 1월 6일
이 문서는 오라클클럽 위키에서 정리한 문서 입니다.
이 문서를 다른 블로그나 홈페이지에 퍼가실 경우에는 출처를 꼭 밝혀 주시면 고맙겠습니다.~^^