<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자 맟 태그 조작 메서드</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function() {
// 문서 객체의 웹 컨텐츠 중 텍스트(글자)를 얻어 오는 메서드 : text(), html()
// 결과값을 얻어오는 메서드를 'getter 메서드'라고 한다. (반환형O)
var text = $('h1:first').text();
console.log('텍스트 : '+text);
var text2 = $('h1:last').html();
console.log('두번째 텍스트 : '+text2);
var text3 = $('h1:nth-child(2)').html();
console.log('두번째 텍스트2 : '+text3);
// alert(text); > 콘솔이 아닌 화면에 띄우는 방법
// alert(text2);
//문서 객체에 텍스트(글자)를 지정하는 메서드 : text('텍스트')
//문서 객체에 텍스트(글자) 또는 태그를 지정하는 메서드 : html('텍스트'), html('태그')
//값을 설정(지정)하는 메서드를 'setter 메서드' 라고 한다. (단수,복수 적용) (반환형X)
$('h1:first-child').html('<a href="#">menu</a>');
$('h1:nth-child(2)').text('<a href="#">menu</a>');
//last-child 적용이 안되는 경우가 있는데 이때는 대체하는 선택자를 사용한다. (browser 버전에 따라 다르게 적용될 수 있음)
});
</script>
</head>
<body>
<h1>header-0</h1>
<h1>header-1</h1>
</body>
</html>