-
[jQuery] 13. Set - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:20jQuery - Set Content and Attributes
1. Set Content - text(), html(), and val()
get과 마찬가지로 3 가지 메소드를 이용하여 설정합니다:
- text()
- html()
- val()
123456789101112131415161718192021222324252627282930313233<!DOCTYPE html><html><head><script>$(document).ready(function(){$("#btn1").click(function(){$("#test1").text("Hello world!");});$("#btn2").click(function(){$("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){$("#test3").val("Dolly Duck");});});</script></head><body><p id="test1">This is a paragraph.</p><p id="test2">This is another paragraph.</p><p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p><button id="btn1">Set Text</button><button id="btn2">Set HTML</button><button id="btn3">Set Value</button></body></html>cs 2. A Callback Function for text(), html(), and val()
text(), html(), val() 메소드는 또한 콜백(callback) 함수를 가지고 있습니다.
콜백 함수는 2 개의 파라미터를 갖습니다: 요소의 리스트에서 선택된 현재 요소의 인덱스 와 이전의 원본 값을 갖습니다.
1234567891011121314151617181920212223242526272829303132<!DOCTYPE html><html><head><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></head><body><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></body></html>cs 3. Set Attributes - attr()
attr() 메소드는 또한 속성 값을 설정하거나 변경하는데 사용되기도 합니다.
1234cs attr() 메소드는 여러 속성을 한 번에 바꾸는 것을 허용합니다.
123456$("button").click(function(){$("#w3s").attr({"href" : "http://www.w3schools.com/jquery","title" : "W3Schools jQuery Tutorial"});});cs 4. A Callback Function for attr()
attr() 메소드는 또한 콜백함수를 갖습니다.
12345678910111213141516171819202122232425<!DOCTYPE html><html><head><script>$(document).ready(function(){$("button").click(function(){$("#w3s").attr("href", function(i, origValue){return origValue + "/jquery";});});});</script></head><body><button>Change href Value</button><p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p></body></html>cs 'Web > jQuery' 카테고리의 다른 글
[jQuery] 16. CSS Classes - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 15. Remove - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 14. Add - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 12. Get - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 11. Chaining - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 10. Call back - jQuery 강좌 jQuery / CSE (0) 2015.06.13
