최신 웹 개발 튜토리얼
 

jQuery - 설정 콘텐츠 및 특성


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

우리는내용을 설정하기 이전 페이지에서 같은 세 가지 방법을 사용합니다 :

  • text() - 설정하거나 선택한 요소의 텍스트 내용을 반환
  • html() - 설정하거나 (HTML 마크 업 포함) 선택된 요소의 내용을 반환
  • val() - 설정하거나 양식 필드의 값을 반환

다음은 jQuery를의 콘텐츠 설정하는 방법을 보여줍니다 text(), html() , 그리고 val() 메소드 :

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("Dolly Duck");
});
»그것을 자신을 시도

에 대한 콜백 함수 text(), html()val()

위의 세 가지의 jQuery 모든 방법 : text(), html() , 그리고 val() , 또한 콜백 기능을 갖추고 있습니다. 콜백 함수는 두 개의 매개 변수가 있습니다 선택된 요소 원래 (이전) 값의 목록에서 현재 요소의 인덱스. 그런 다음 함수에서 새 값으로 사용하고자하는 문자열을 반환합니다.

다음의 예를 보여줍니다 text()html() 콜백 함수를 :

$("#btn1").click(function(){
    $("#test1").text(function(i, origText){
        return "Old text: " + origText + " New text: Hello world!
        (index: " + i + ")";
    });
});

$("#btn2").click(function(){
    $("#test2").html(function(i, origText){
        return "Old html: " + origText + " New html: Hello <b>world!</b>
        (index: " + i + ")";
    });
});
»그것을 자신을 시도

설정 속성 - attr()

JQuery와 attr() 메서드는 속성 값 / 변경을 설정하는 데 사용됩니다.

다음 예는의 값 (설정)을 변경하는 방법을 보여줍니다 href 링크의 속성을 :

$("button").click(function(){
    $("#w3s").attr("href", "http://www.w3ii.com/jquery");
});
»그것을 자신을 시도

attr() 메서드는 동시에 여러 속성을 설정할 수 있습니다.

다음의 예는 모두 설정하는 방법을 보여줍니다 href 동시에 속성 및 제목 :

$("button").click(function(){
    $("#w3s").attr({
        "href" : "http://www.w3ii.com/jquery",
        "title" : "w3ii jQuery Tutorial"
    });
});
»그것을 자신을 시도

에 대한 콜백 함수 attr()

JQuery와 방법 attr() , 또한 콜백 기능을 갖추고 있습니다. 콜백 함수는 두 개의 매개 변수가 : 선택된 요소의 목록과 원래 (이전)에서 현재 요소의 인덱스 값 때문이다. 그런 다음 함수에서 새 속성 값으로 사용하고자하는 문자열을 반환합니다.

다음의 예를 보여줍니다 attr() 콜백 함수를 :

$("button").click(function(){
    $("#w3s").attr("href", function(i, origValue){
        return origValue + "/jquery";
    });
});
»그것을 자신을 시도

연습으로 자신을 테스트!

연습 1» 운동 2» 운동 3» 운동 4» 운동 5»


jQuery를 HTML 참조

모든 jQuery를 HTML 방법의 전체 개요는, 우리로 이동하시기 바랍니다 jQuery를 HTML / CSS 참조 .