Javascript, jQuery
(jQuery) 제이쿼리 기초 및 class,id,name으로 제어하기
가독성 0%
2017. 9. 10. 00:02
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 id="title"></h1>
<h1 id="title2"></h1>
<h1 class="strapline2"></h1>
<input type="text" id="title3" name="title3" />
<p></p>
<ul>
<li>목차: <span class="span1">가</span></li>
<li>목차: <span id="span2">나</span></li>
</ul>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//$은 jQuery의 모든 기능을 담고있는 jQuery의 최상위 객체입니다.
jQuery(function titleSet($) {
/*
기본방식
var title = document.getElementById("title");
title.innerHTML("jQuery 기초");
*/
//jQuery방식
var title = $("#title");
title.html("jQuery 기초");
});
//$객체는 jQuery()함수를 대신할 수도 있습니다.
//아이디 이름으로 제어하기
$(function() {
$("#title2").html("id 접근");
});
//클래스 이름으로 제어하기
$(function() {
$(".strapline2").html("CLSS 접근");
});
//name 이름으로 제어하기
$(function() {
$("input[name=title3]").val("NAME 접근");
});
//특정 태그 일괄 제어하기
$(function() {
$("p").html("태그 일괄 처리");
});
//특정 요소 제어하기
$(function() {
$("ul .span1").css("color", "#ff0000");
$("ul #span2").css("color", "#00ff00");
});
</script>
</body>
</html>반응형