1. text(), html()및 val()메서드를 사용하여 콘텐츠를 설정하는 방법
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <h1>Set text(), html(), val() 실습하기</h1> <hr> <p id="test1">문장 1</p> <p id="test2">문장 2</p> <p>Input field: <input type="text" id="test3" value="Disney"></p> <button id="btn1">Set Text</button> <button id="btn2">Set HTML</button> <button id="btn3">Set Value</button> <script> $(document).ready(function () { $("#btn1").click(function () { $("#test1").text("Mickey mouse"); }); $("#btn2").click(function () { $("#test2").html("<b>Donald Duck</b>"); }); $("#btn3").click(function () { $("#test3").val("Goofy"); }); }); </script> </body> </html>
2. text(), html() 및 val()에 대한 콜백 함수
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <h1>Set text(), html() 및 val()에 대한 콜백 함수 실습하기</h1> <hr> <p id="test1">This is a <b>bold</b> paragraph.</p> <p id="test2">This is another <b>bold</b> paragraph.</p> <button id="btn1">Show Old/New Text</button> <button id="btn2">Show Old/New HTML</button> <script> $(document).ready(function () { $("#btn1").click(function () { $("#test1").text(function (i, origText) { return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); }); $("#btn2").click(function () { $("#test2").html(function (i, origText) { return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; }); }); }); </script> </body> </html>
3. 링크의 href 속성 값을 변경(설정)하는 방법
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <h1>Set attr()메서드는 속성 값을 설정/변경 실습하기</h1> <hr> <p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p> <button>Change href Value</button> <p>링크 위에 마우스를 올리거나 클릭하여 href 속성 값이 변경되었는지 확인하세요.</p> <script> $(document).ready(function () { $("button").click(function () { $("#w3s").attr("href", "https://www.w3schools.com/jquery/"); }); }); </script> </body> </html>
4. href 및 title 속성을 동시에 설정하는 방법
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <h1>Set href 및 title 속성을 동시에 설정하는 방법 실습하기</h1> <hr> <p><a href="https://www.w3schools.com" title="some title" id="w3s">W3Schools.com</a></p> <button>Change href and title</button> <p>링크 위에 마우스를 올려놓으면 href 속성이 변경되고 제목 속성이 설정되는 것을 확인하세요.</p> <script> $(document).ready(function () { $("button").click(function () { $("#w3s").attr({ "href": "https://www.w3schools.com/jquery/", "title": "W3Schools jQuery Tutorial" }); }); }); </script> </body> </html>
5. attr()에 대한 콜백 함수
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <h1>Set attr()에 대한 콜백 함수 실습하기</h1> <hr> <p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p> <button>Change href Value</button> <p>링크 위에 마우스를 올리거나 클릭하여 href 속성 값이 변경되었는지 확인하세요.</p> <script> $(document).ready(function () { $("button").click(function () { $("#w3s").attr("href", function (i, origValue) { return origValue + "/jquery/"; }); }); }); </script> </body> </html>
Share article
