jQuery - Get Content and Attributes
jQuery는 HTML 요소와 속성을 변경하거나 조작하는 강력한 메소드를 가지고 있습니다.
1. jQuery DOM Manipulation
jQuery의 가장 중요한 부분은 DOM을 조작하는 가능성입니다.
jQuery는 DOM 관련 메소드의 다양한 종류로, 요소나 속성을 조작하거나 접근하는데 용이합니다.
2. Get Content - text(), html(), and val()
3 가지 간편하면서도 유용한 DOM 조작을 위한 jQuery 메소드:
- text() - 선택된 요소의 텍스트 내용을 설정하거나 반환하는 메소드
- html() - 선택된 요소의 내용을 설정하거나 반환하는 메소드
- val() - 서식 필드의 값을 설정하거나 반환하는 메소드
아래 예제는 text()와 html() 메소드가 어떻게 쓰이는지 보여줍니다:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html> <head> <script> $(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); }); </script> </head> <body> <p id="test">This is some <b>bold</b> text in a paragraph.</p> <button id="btn1">Show Text</button> <button id="btn2">Show HTML</button> </body> </html> | cs |
3. Get Attributes - attr()
attr() 메소드는 속성 값을 가져오는데 사용됩니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <head> <script> $(document).ready(function(){ $("button").click(function(){ alert($("#w3s").attr("href")); }); }); </script> </head> <body> <button>Show href Value</button> </body> </html> | cs |
