[ 2. JQuery로 선택한 태그 요소의 값과 속성을 바까보자 ]
<body>
<textarea name="txtarea" rows="8" cols="80">
<strong>안녕하세요</strong>
</textarea>
<input type="text" name="first" value="firstValue" />
<input type="text" name="second" value="secondValue" style="color:red;">
<a href="http://www.google.com" id="aTag">구글</a>
<table id="tableTag">
<tr class="hello">
<td>안녕</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function(){
// 1. 태그 내의 텍스트 가져오기
var textareaVal = $("textarea[name=txtarea]").text();
// 텍스트를 가져오기 때문에 <strong> 태그도 문자열로 그대로 가져온다.
console.log(textareaVal);
// 2. 태그 내의 텍스트 변경하기
$("textarea[name=txtarea]").text("값을 변경합니다.");
// 3. input 태그 내의 value 값 가져오기
var inputFirstVal = $("input[name=first]").value();
console.log(inputFirstVal);
// 4. input 태그 내의 value 값 바꾸기
$("input[name=first]").value("value 값 바꾸기");
// 5. textarea 내에 태그를 포함한 문자열을 그대로 집어 넣기
// text() 와의 차이점은 text는 태그를 포함하는 문자열을 그대로 넣는다.
// ex) <b>안녕</b> 를 넣으면 textarea에서는 <b>안녕</b>가 출력됨
// 하지만, 이 곳에서 사용할 html() 은 b태그가 적용된 안녕이 출력되게 됨
$("textarea[name=txtarea]").html("<b>안녕</b>");
// 6. 태그의 속성값을 가져오기
// 아래처럼하면, style이라는 속성의 값을 가져옴
var styleValue = $("input[name=second]").attr("style");
// a 태그의 href 속성값을 가져옴
var hrefVal = $("#aTag").attr("href");
// 7. 태그의 속성값을 바까보자.
// name이 second인 input 태그의 style 속성을 바까 글자색을 노랑색으로 바꿈
$("input[name=second]").attr("style","color:yellow;");
// a태그의 href 속성값을 naver로 바꿈
$("#aTag").attr("href","http://www.naver.com");
// 8. 태그 내에 추가하기
// 위의 html()이나 text()는 태그 사이에 지정한 걸로 완전히 치완되버리는 것!
// 하지만, append는 기존에 있던 것에다가 추가되는 개념이다.
// 예를들어, 지금 table태그 내에 최초에 <tr><td>안녕</td></tr> 이 있는데
// $("#tableTag").html("<tr><td>추가</td></tr>"); 을 하면 기존의 안녕은 없어지고
// 추가가 들어갈 것이지만 append를 하면 안녕 바로 아래에 추가가 붙게된다.
$("#tableTag").append("<tr><td>추가</td></tr>");
// 9. 위의 append()가 지정한 태그 내부에 하나씩 아래로 붙는다면
// prepend()는 지정한 태그 내부에서 가장 마지막에 삽입된 녀석의 앞에 붙게 됩니다.
// 예를들어, table 태그 내에 안녕과 추가가 들어 있는데 prepend로 추가2를 넣으면
// 추가 뒤에 들어오는게 아니고 안녕 앞에 추가2가 들어오게 됩니다.
$("#tableTag").prepend("<tr><td>추가2</td></tr>");
// 10. 지정한 태그 다음 위치에 추가하기
$("#tableTag").after("<p>table태그 다음에 추가합니다.</p>");
// 11. 지정한 태그 이전 위치에 추가하기
$("#tableTag").before("<span>table태그 이전에 추가합니다.</span>");
// 12. 태그 내부의 지정한 것만 비우기
$("#tableTag").remove(".hello");
// 13. 지정한 태그 내부 전부를 비우기
$("#tableTag").empty(); // 기존에 내부에 있던 tr td 등을 싹 비워버립니다.
});
</script>
</body>
</html>
'개발 > Javascript' 카테고리의 다른 글
| 이벤트 발생시 a 태그의 이동기능을 동작하지 않게하고 처리하기 (0) | 2017.06.11 |
|---|---|
| JQuery 애니메이션 관련 정리(fadeIn,fadeOut,hide,show,animate,stop) (0) | 2017.06.11 |
| 4. script 선언의 위치?!! (0) | 2017.06.11 |
| 3. 일정주기마다 callback 함수를 실행하는 setInterval()에 대해서... (0) | 2017.06.11 |
| 1. window 객체에 대하여...(부모창, 자식창 간에 데이터 주고 받기 포함) (0) | 2017.06.11 |