티스토리 뷰
반응형
<!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>반응형
'Javascript, jQuery' 카테고리의 다른 글
| (jQuery) 제이쿼리 이벤트 처리 간단히 알아보기 (2) (0) | 2017.09.13 |
|---|---|
| (jQuery) 제이쿼리 이벤트 처리 간단히 알아보기 (0) | 2017.09.11 |
| (javascript) 자바스크립트 Json 형식 간단히 알아보기 (0) | 2017.09.07 |
| (Javascript) 자바스크립트에서 form 입력양식 제어하기 (0) | 2017.09.06 |
| (Javascript) 자바스크립트 모바일 및 브라우저 (정보,접속 여부) (0) | 2017.09.06 |
댓글
최근에 올라온 글
최근에 달린 댓글