-
9. JQuery 속성 가져오기JQuery 2022. 8. 30. 16:31
여러 가지 함수들을 통해 요소의 속성을 가져올 수 있다.
$(셀렉터).text() 요소의 text를 가져온다.
(내부 html 태그 미포함하여 텍스트로 가져온다.)$(셀렉터).html() 요소의 text를 가져온다.
(내부 html 태그를 포함하여 텍스트로 가져온다.)$(셀렉터).val() 요소의 value를 가져온다. $(셀렉터).attr("속성") 요소의 지정 속성값을 가져온다. * input 태그의 range의 값을 실시간으로 변경시키는 예시
<!DOCTYPE html>
<head><!-- 제일 먼저 읽는 영역 --><meta charset="UTF-8"><title>문서 제목</title><style>/*css 영역*/</style></head>
<body><!--보여지는 영역--><input type="text" value="some text"><p>문자가 쓰여진 <b>강조된</b>영역</p><span id="txt"></span><span id="html"></span><fieldset><legend>숫자 입력</legend>RANGE(0~100) : <input type="range" min="0" max="100" value="30" step="1">당신이 선택한 값 : <span id="msg"></span></fieldset><fieldset><legend>라디오 버튼</legend><div><input type="radio" name="front" value="html">HTML</div><div><input type="radio" name="front" value="CSS">CSS</div><div><input type="radio" name="front" value="JS">JS</div>선택한 값 : <span id="selected">선택값 없음</span></fieldset></body><script>
//var rdo = $("input[type='radio']");var $rdo = $(":radio");console.log($rdo); //변수에 jQuery 셀렉터로 가져온 요소가 담겨 있다는 표시
//해당 변수를 이용해서 바로 이벤트를 걸어줄 수도 있다.$rdo.click(function(){var val = $(this).val();console.log(val);$("#selected").html(val);});
var attr = $("input").attr("type");var val = $("input").val(); //value 속성만 특이하게 별도 함수를 제공한다.console.log(attr);console.log(val);var txt = $("p").text();var html = $("p").html();console.log("text() :" + txt); //태그 사이에 html 태그는 무시하고 text 만 가져온다.console.log("html() : " + html); //태그 사이에 html 태그가 있다면 가져온다.
//text()는 html 태그가 있을 경우 문자로만 인식한다. (효과 X)$("#txt").text("<h1>HTML과 TEXT의 차이</h1>");//html()은 html 태그를 인정하여 효과를 내준다 (효과 O)$("#html").html("<h1>HTML과 TEXT의 차이</h1>");
// $("input[type='range']").on("mouseup",function () {// var dd = $("input[type='range']").val();// $("#msg").html(dd);// });
// range의 값이 표시 되는가? -> OKvar point = $("input[type='range']").val();$("#msg").html(point);// 1. range를 누르고 마우스를 움직이면$("input[type='range']").on("mousedown", function () {$(this).on("mousemove", function () {//console.log($(this).val());point = $(this).val(); //이벤트가 일어나는 당사자의 값은?$("#msg").html(point); // 2. span에 값이 표시된다.});});
//마우스를 떼면 mousemove 이벤트를 종료$("input[type='range']").mouseup(function(){$(this).off("mousemove");});
</script>
</html>'JQuery' 카테고리의 다른 글
11. JQuery 속성 변경하기 예시 - 1 (0) 2022.09.01 10. JQuery 속성 변경하기 (0) 2022.08.30 8. JQuery 마우스 이벤트 (0) 2022.08.30 7. JQuery 이벤트로 생성된 버튼에 이벤트 주기 (0) 2022.08.30 6. JQuery 요소 검색하기 (0) 2022.08.30