• 회원가입
  • 로그인

[HTML_CSS] JQ - text(), html(), val() , attr() 메서드 - (내용얻기/값얻기/속성얻기) (내용설정/값설정/속성설정) (text메서드/html메서드/val매세드/attr메서드)

 

 

text() - 선택요소의 텍스트 내용 반환/설정

htm () - 선택요소의 HTML 내용 반환/설정.

val() - 폼양식의 필드값 반환/설정

attr() - 선택요소 속성값 반환/설정

 

 


속성 반환

 

예제


text () - 텍스트 얻기

html () - HTML 포함 텍스트 얻기

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("#hz1").click(function(){

        alert("Text: " + $("#homzzang").text());

       // 결과: Text:  Homzzang.com is best.

    });

    $("#hz2").click(function(){

        alert("HTML: " + $("#homzzang").html());

        // 결과: HTML:  <b>Homzzang.com</b> is best.

    });

});

</script>


<p id="homzzang"> <b>Homzzang.com</b> is best.</p>


<button id="hz1">Text 보기</button>

<button id="hz2">HTML 보기</button>


결과 보기


val()  :  입력값 얻기

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        alert("Value: " + $("#site").val()); 

        // 결과: Value: Homzzang.com

    });

});

</script>


<p>Name: <input type="text" id="site" value="Homzzang.com"></p>

<button>입력값 보기</button>


결과보기


attr()  :  속성값 얻기

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        alert($("#hz").attr("href")); 

        // 결과값: https://homzzang.com

    });

});

</script>


<p><a href="https://homzzang.com.com" id="hz">Homzzang.com</a></p>

<button>href 속성값 보기</button>


결과보기

 

 

속성 설정

 

text(), html(), val() - 내용 설정

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("#btn1").click(function(){

        $("#site").text("홈짱닷컴");

    });

    $("#btn2").click(function(){

        $("#domain").html("<b>Homzzang.com</b>");

    });

    $("#btn3").click(function(){

        $("#manager").val("홈짱");

    });

});

</script>


<p id="site">사이트.</p>

<p id="domain">도메인</p>


<p>운영자: <input type="text" id="manager" value="닉네임"></p>


<button id="btn1">Text 설정</button>

<button id="btn2">HTML 설정</button>

<button id="btn3">Value 설정</button>


결과 보기

 

text(), html(), val() - 콜백함수

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("#btn1").click(function(){

        $("#site").text(function(i, origText){

            return "기존 text: " + origText + " 새 text: 홈짱닷컴 (index: " + i + ")"; 

        });

    });


    $("#btn2").click(function(){

        $("#domain").html(function(i, origText){

            return "기존 html: " + origText + " 새 html: <b>Homzzang.com</b> (index: " + i + ")"; 

        });

    });

});

</script>


<p id="site"><b>사이트</b> 이름</p>

<p id="domain"><b>도메인</b> 주소</p>


<button id="btn1">기존/새 Text 보이기</button>

<button id="btn2">기존/새 HTML 보이기</button>


결과 보기

 

attr() 예제 -  1개 속성값 설정

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("#hz").attr("href", "https://homzzang.com");

    });

});

</script>


<p><a href="http://www.homzzang.com" id="hz">Homzzang.com</a></p>

<button>href 속성값 변경하기</button>


결과 보기

 

attr() 예제 -  여러 속성값 동시 설정.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("#hz").attr({

            "href" : "https://homzzang.com",

            "title" : "웹코딩 기초 배우기"

        });

    });

});

</script>


<p><a href="http://www.homzzang.com" title="코딩" id="hz">홈짱닷컴</a></p>

<button>href 속성과 title 속성 동시에 바꾸기</button>


결과 보기

 

attr() 예제 -  콜백함수

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("#hz").attr("href", function(i, origValue){

            return origValue + "/b/css"; 

        });

    }); 

});

</script>


<p><a href="https://homzzang.com" id="hz" target="_blank">홈짱닷컴 CSS 배우기</a></p>

<button>href 속성값 바꾸기</button>


결과 보기 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

no_profile 디피씨평단14752원 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2022-02-08 (화) 18:59 6개월전
text(), html(), val() - 콜백함수 에서
 
$("#site").text(function(i, origText){
  return "기존 text: " + origText + " 새 text: 홈짱닷컴 (index: " + i + ")";

의 origText가 어떻게 기존의 문장을 갖고 있는거죠?ㅠㅠ
주소
     
     
홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2022-02-08 (화) 19:43 6개월전
해당 콜백함수의 매개변수 정의가 아래와 같습니다.
첫번째 것: 선택요소의 색인번호
두번째 것: 선택요소의 현재 텍스트내용

따라서, 해당 메서드 실행 시, 자동으로 해당 함수로 값이 넘어가는 겁니다.
왜 이렇게 작동하냐고 물어보시는 거라면, 대장금 답변으로 대체하겠습니다. https://youtu.be/mc-rssKIWtg

더 자세한 건 여기 참고하세요.
https://homzzang.com/b/jquery-210
https://api.jquery.com/text/
주소
찾아주셔서 감사합니다. Since 2012