JQuery 복습 - DOM 조작1

https://www.w3schools.com/jquery/jquery_dom_add.asp

 

1) element의 값을 반환받을 수 있는 메서드들

//text - element의 textContent를 설정하거나 받환 받을 수 있다.
//html - element의 content를 설정하거나 반환 받을 수 있다. 
//val - form fields의 값을 설정하거나 반환 받을 수 있다.

//https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_html_get

//text: textNode 내의 HTML Element를 무시하고 순수 Text Node만 반환한다. 
$("#btn1").click(function(){
	alert("Text: " + $("#test").text());
})

//html: textNode내에 HTML Element가 존재한다면 그대로 표현 해 준다.
//예) <b>Helloworld</b> 처럼 태그를 그대로 표현해줌
//덧] 이걸 어디다 쓰나 했는데.. 태그를 직접 가져와야 할 필요가 있을때. 유용하게 사용할 수 있을것같다.

$("#btn2").click(function(){
	alert("HTML: " + $("#test").html());
})

//val: input field의 value값을 가져 올 수 있댱.

$("#btn1").click(function(){
	alert("Value: " + $("#test").val());
})

//막간의 예제!
출처: http://hobbiez.tistory.com/321
//특정 checkBox의 체크 여부 확인
$("input:checkbox[id='ID']").is(":checked") == true : false
$("input:checkbox[name='NAME']").is(":checked") == true : false

//checked/unchecked 처리
$("input:checkbox[id='ID']").prop("checked", true); // 체크처리한다.
$("input:checkbox[name='NAME']").prop("checked", false); //체크해제 한다

//특정 라디오 버튼 선택 / 모든 라디오 버튼 선택 해제
$("input:radio[name='NAME']:radio[value='VALUE']").attr("checked", true); //특정라디오버튼들중 특정 value를 가진 라디오 버튼을 체크한다.
$("input:radio[name='NAME']").removeAttr("checked"); //특정라디오버튼들을 체크 해제한다.

1) element의 값을 설정 할 수 있는 메서드들

//text, html, val 메서드에 인자를 넣으면 값을 설정 할 수 있다.
//https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_html_set
//텍스트 노드 설정
$("#btn1").click(function(){
  $("#test1").text("Hello world!");
})
//html태그를 넣은상태에서 렌더링 할 수 있다. 자세히는 모르겠는데 단순 텍스트로 표현하는것이 아니라 DOM화- 하는듯하다.
$("#btn2").click(function(){
 $("#test2").html("<b>Hello WOrld</b>");
})
//Input태그의 값을 변경 할 수 있다.
$("#btn3").click(function(){
 $(#"test3").val("InputBox의 값은 이것으로 바뀔것입니다.")
})

//text, html, val 메서드의 콜백
//https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_html_callback
//놀랍게도 해당 메서드들도 콜백을 설정 할 수 있다고 한다. (도대체 왜?)
//아, 알고보니 해당메서드의 인자로 문자열이 아니라 함수를 넘긴다면- return하는값을 새로운 텍스트로 지정한다.
//현재 요소 색인과 이전값의 두가지 매개변수를 받는다.
//굳이???? 이걸 어디다 쓰는지 모르겠지만 우선 이런게 있다- 정도만 기억해두자.

//attr element의 attribute값을 지정하고 변경 할 수 있다.
//어제배운 메서드체이닝으로 text노드의 내용도 변경해 보자.
$("button").click(function(){
 $("#w3s").attr("href", "https://www.w3schools.com/jquery").text("boo!")l
})

//attr메서드에 객체를 전송해서 일괄로 변경할 수도 있다.
$("button").click(function(){
 $("#w3s").attr({
 "href" : "https://www.w3schools.com/jquery/",
 "title" : "W3Schools jQuery Tutorial"
});
});