<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){
$(".annotation").each(function(idx){//배열을 돌면서 하나씩 첨자 붙여주기each사용, function()에 매개변수 지정 : 반복 횟수(배열의 index)를 전달해준다.- 0부터 var i = idx+1; $(this).after("<sup>"+i+"<sup>");//<sup>윗첨자, <sub>아랫첨자 //$(this).append("<sup>"+i+"<sup>");//append를 사용하면 자식노드로 들어가서 배경색이 들어가고, after를 사용하면 span태그 밖으로 들어가서 배경색이 들어가지 않는다. }); }); </script> <style type="text/css"> .annotation { background: pink; } </style> </head> <body> <input type="button" id="prevBtn" value="이전페이지로"/> <input type="button" id="nextBtn" value="다음 페이지로"/> <h3>jQuery란?</h3> <div> <b>jQuery</b>는 가볍고 빠르며, 간결한 <span class="annotation">오픈소스</span> 스크립트 라이브러리입니다. 이를 이용하면 Rich 웹 UI를 개발하는 데 도움이 되는 다양한 기능들 즉, HTML 문서 <span class="annotation">트래버스</span>, 이벤트 처리, 애니메이션, <span class="annotation">Ajax</span> 상호 작용 등을 지원하여 빠르고 견고하게 리치 웹 애플리케이션 개발을 할 수 있도록 지원합니다. </div> <br /> <div id="btnDiv">DIV</div> </body> </html>
