everdevel이 만든 무료 클라우드 개발환경을 소개합니다. 방문해 주셔서 감사합니다. 내용 변경하기오늘 배울 내용은 text(),html() 함수 입니다. text()어떤 p태그 안에 내용이 hello가 있다면 text()를 사용해서 konnichiha로 변경할 수 있습니다. 신기하죠? 그럼 한번 해볼까요? HTML<p class="change_greeting">hello</p> jQuery$('.change_greeting').text('konnichiha'); 이렇게 되면 change_greeting가 감싸고 있는 텍스트는 konnichiha로 변경됩니다. <!doctype html> <html> <head> <meta charset="utf-8" /> <title>EVERDEVEL :: 제이쿼리 강좌</title> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.min.js"> </script> <script type="text/javascript"> $(function(){ $('.change_greeting').text('konnichiha'); }); </script> </head> <body> <p class="change_greeting">hello</p> </body> </html> 결과는 바로 아래에서 확인하겠습니다. 이 소스 실행 버튼을 눌러서 결과를 확인해 보시기 바랍니다. HTML<p class="hello">hello</p> jQueryvar i = $('.hello').text(); alert(i); 아래의 소스 웹에서 보기 버튼을 눌러서 확인해 보시기 바랍니다. <!doctype html> <html> <head> <meta charset="utf-8" /> <title>EVERDEVEL :: 제이쿼리 강좌</title> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.min.js"> </script> <script type="text/javascript"> $(function(){ var i = $('.hello').text(); alert(i); }); </script> </head> <body> <p class="hello">hello</p> </body> </html> 결과는 바로 아래에서 확인하겠습니다. text()에 대해서 알아봤는데요. html()html()도 text()와 비슷한 기능인데요. $('.class_Name').html('<p>hello</p>'); 위와 같이 괄호 안에 태그를 사용할 수 있습니다. HTML<p class="change_greeting">hello</p> jQuery$('.change_greeting').html('<b>konnichiha</b>'); <!doctype html> <html> <head> <meta charset="utf-8" /> <title>EVERDEVEL :: 제이쿼리 강좌</title> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.min.js"></script> <script type="text/javascript"> $(function(){ $('.change_greeting').html('<b>konnichiha</b>'); }); </script> </head> <body> <p class="change_greeting">hello</p> </body> </html> 결과는 바로 아래에서 확인하겠습니다. 봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다. 컨텐츠의 내용을 더 보려면 바로 아래에서 확인할 수 있습니다. 컨텐츠 Home » jQuery 예제 » jQuery를 사용하여 텍스트 변경하기 Last Updated: 2022년 9월 15일 | 댓글 남기기 이 글에서는 CSS를 사용하여 텍스트를 다른 문구로 바꾸는 방법을 살펴보았습니다. CSS 대신 jQuery를 사용하면 보다 수월하게 텍스트를 원하는 대로 바꿀 수 있습니다. 다음과 같은 스크립트를 사용하면 해당 선택자의 텍스트 컨텐츠를 설정하게 됩니다. 예를 들어, 다음과 같은 스크립트를 사용하면: 버튼을 클릭하면 p 태그 내의 텍스트가 "안녕하세요!"로 바뀌게 됩니다(데모). 또 다른 예로 다음과 같은 HTML이 있을 경우: 가령, 제목이 여러 개 있을 경우 제목이 "프로필"일 경우에만 다른 문구(예: "테스트")로 바꾸기를 원한다면 다음과 같은 스크립트를 사용할 수 있습니다. 또는 다음과 같은 스크립트도 가능합니다. var text = $('#toptitle').text(); if (text == '프로필'){ $('#toptitle').text('테스트'); } 혹은 :contains() 선택자를 사용할 수 있습니다. $('#toptitle:contains("프로필")').text("테스트"); 다음과 같이 HTML을 사용하는 것도 가능합니다. $("#btn2").click(function(){ $("#test2").html("<b>안녕하세요!</b>"); }); 속성을 변경하려면 attr() 메소드를 사용합니다. $("button").click(function(){ $("#w3s").attr("href", "http://www.w3schools.com/jquery"); }); // Reference: w3schools 여기에서 실제 작동을 살펴볼 수 있습니다. 자바스크립트/jQuery 템플릿:시간을 절약하고 싶은 경우 워드프레스 플러그인, jQuery 템플릿 등을 판매하는 CodeCanyon에서 비교적 저렴한 비용에 자바스크립트/jQuery 템플릿, PHP 스크립트 등의 코드 스크립트를 구입할 수 있습니다. CodeCanyon에서 판매되는 javascript/jQuery 템플릿참고:
|