• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

목차

  1. 4개 메서드 정의
  2. 4개 메서드 반환
  3. 4개 메서드 설정

 

4개 메서드 정의 


  • text() 메서드 - 선택요소의 텍스트 내용 반환/설정
  • htm() 메서드 - 선택요소의 HTML 내용 반환/설정.
  • val() 메서드 - 폼양식의 필드값 반환/설정
  • attr() 메서드 - 선택요소 속성값 반환/설정

 

 

4개 메서드 반환

[목차]


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>


결과보기

 

4개 메서드 설정

[목차]


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 2년전
text(), html(), val() - 콜백함수 에서
 
$("#site").text(function(i, origText){
  return "기존 text: " + origText + " 새 text: 홈짱닷컴 (index: " + i + ")";

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

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

더 자세한 건 여기 참고하세요.
https://homzzang.com/b/jquery-210
https://api.jquery.com/text/
주소
분류 제목
basic JQ - 제이쿼리 입문
basic JQ - 선행지식 / 포함요소
basic JQ - 시작 (= 버전 + 다운 + 설치 + 외부링크) (jQuery, down, CDN)
basic JQ - syntax ★ - 기본구문 (= 최적작동시점) + (즉시호출/즉시작동/즉시실행) 구문 (= IIF… 2
Selector JQ - selector ★★★★★ - 선택자 (= 제어할 요소선택) ※ this선택자 (=디스선택자)
Event JQ - event ★ - 이벤트 (= 메서드실행 촉발사건) ※ e 매개변수를 명시적으로 전달해야 하는 이유
Event JQ - $(document).ready() 메서드 ★ - 문서로드완료후 실행 (= ready메서드 = 다…
Event JQ - click() 메서드 ★ - click 이벤트발생/함수실행. (= click메서드 = 클릭 메서드…
Event JQ - dblclick() 메서드 ★ - dblclick 이벤트발생/함수실행. (= dblclick메서드 …
Event JQ - mouseenter() 메서드 ★★★ - mouseenter 이벤트발생/함수실행. (= mousee…
Event JQ - mouseleave() 메서드 ★ - mouseleave 이벤트발생/함수실행 (= mouseleav…
Event JQ - mousedown() 메서드 - mousedown 이벤트발생/함수실행. (= mousedown메서…
Event JQ - mouseup() 메서드 - mouseup 이벤트발생/함수실행. (= mouseup메서드 = 마우스…
Event JQ - hover() 메서드 ★ - hover 이벤트발생/함수실행. (= hover메서드 = 허버 메서드)
Event JQ - blur() 메서드 ★ - 포커스 해제/제거(= blur메서드 = 블러메서드) ※ 포커스 시 아웃…
Event JQ - on() 메서드 ★★★★★ - 이벤트핸들러 부착 (= 여러이벤트・여러메서드 함께실행 = 이벤트부착…
Effect JQ - Hide/Show - hide() / show() / toggle() 메서드 ★ - 숨기기/보이기…
Effect JQ - Fade (페이드) ★ - fadeIn() / fadeOut() / fadeToggle() / fa…
Effect JQ - slideDown() / slideUp() / slideToggle() 메서드 ★ - 슬라이드메서드…
1/15
목록
찾아주셔서 감사합니다. Since 2012