JavaScript(19) jQuery HTML 가져오기 및 설정 내용 및 속성

jQuery HTML
jQuery는 HTML 요소와 속성을 조작할 수 있는 강력한 방법을 가지고 있습니다.
jQuery DOM 작업
jQuery에서 매우 중요한 부분은 바로 DOM을 조작하는 능력이다.jQuery는 일련의 DOM과 관련된 방법을 제공합니다. 이것은 접근과 조작 요소와 속성을 매우 easy하게 합니다.
팁: DOM = Document Object Model(문서 객체 모델)
DOM은 HTML과 XML 문서에 접근하는 기준을 정의합니다. "W3C 문서 대상 모델은 플랫폼과 언어의 인터페이스와 독립되어 있으며, 프로그램과 스크립트가 문서의 내용, 구조, 스타일에 동적 접근과 업데이트를 동의합니다."
jQuery HTML - 컨텐트 및 속성 가져오기
획득 내용 - text(), html() 및 val()
DOM 작업에 유용한 세 가지 간단한 jQuery 방법:
text () - 선택한 요소의 텍스트 내용을 설정하거나 반환합니다.
html() - 선택한 요소의 내용을 설정하거나 반환합니다(HTML 태그 포함)val () - 양식 필드의 값을 설정하거나 반환합니다.
jQuery text() 및 html() 방법을 사용하여 컨텐트를 얻을 수 있습니다.

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

jQuery val() 방법을 사용하여 입력 필드의 값을 가져옵니다.

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

속성 가져오기 - attr()
jQuery attr() 메서드는 속성 값을 가져오는 데 사용됩니다.
링크에서 href 속성의 값을 얻으려면:

$("button").click(function(){
  alert($("#Attr").attr("href"));
});

jQuery HTML - 설정 내용 및 속성 설정 내용 - 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()의 리셋 함수
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.csdn.net");
});

attr () 방법도 같은 시간에 여러 개의 속성을 설정하는 것에 동의합니다.
href와 title 속성을 동시에 설정하려면:

$(document).ready(function(){
  $("button").click(function(){
    $("#csdn").attr({
      "href" : "http://www.csdn.net",
      "target" : "_blank"
    });
  });
});

attr()의 콜백 함수
콜백 함수에는 선택한 요소 목록의 현재 요소 아래 첨자와 원시(구) 값 두 가지 매개 변수가 있습니다.다음에 함수의 새 값으로 사용하고자 하는 문자열을 되돌려줍니다.
콜백 함수가 있는 attr() 방법:

  $("button").click(function(){
    $("#csdn").attr("href", function(i,origValue){
      return origValue + "/u014194675"; 
    });
  });

팁:

<p><a href="http://blog.csdn.net" id="csdn">csdn</a></p>

하하~
여기까지 배우고 싶었는데 위에 다 불완전한 샘플이 있어서 연습하기가 불편할 수도 있지만 작은 샘플을 몇 개 붙이면 지저분해 보일 수도 있어요...그래서 나는 하나의 큰 예를 총결하였다...겸사겸사 내 홈페이지에 넣을 수 있어...그림을 붙이고 싶지 않아요...링크를 첨부하십시오클릭하여 링크 열기.

<!DOCTYPE html>
<html>

<head>
<script src="jquery-1.11.1.js"></script>
<script>
$(document).ready(function(){

  $("#btn1").click(function(){
    alert("Text: " + $("#test1").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test1").html());
  });
  $("#btn3").click(function(){
    alert("Value: " + $("#test2").val());
  });

  $("#btn4").click(function(){
    $("#test1").text("   ");
  });
  $("#btn5").click(function(){
    $("#test1").html("<b>   </b>");
  });
  $("#btn6").click(function(){
    $("#test2").val("  ");
  });

  $("#btn7").click(function(){
    $("#test1").text(function(i, origText){
      return (origText + "      ");
    });
  });
  $("#btn8").click(function(){
    $("#test1").html(function(i, origText){
        return (origText + " <b>  </b>");
    });
  });
  $("#btn9").click(function(){
    $("#test2").val(function(i, origText){
      return (origText + " Jay Chou");
    });
  });

  $("#button1").click(function(){
    alert($("#xyxy").attr("href"));
  });
  $("#button2").click(function(){
    $("#xyxy").attr({
      "href" : "http://www.suxin.yeyou.eu",
      "target" : "view_frame"
    });
  });
  $("#button3").click(function(){
    $("#xyxy").attr("href", function(i,origValue){
      return origValue + "/answer.html"; 
    });
  });

});
</script>
</head>

<body>

<p id="test1" value="csdn">      <b>  </b>     </p>
<button id="btn1">    </button>
<button id="btn2">   HTML</button>

<button id="btn4">    </button>
<button id="btn5">   HTML</button>

<button id="btn7">        </button>
<button id="btn8">       HTML</button>

<p>  ：<input type="text" id="test2" value="   "></p>
<button id="btn3">   value</button>
<button id="btn6">   value</button>
<button id="btn9">       value</button>

<p><a href="http://www.suxin.yeyou.eu/test.html" target="_blank" id="xyxy">     </a></p>
<button id="button1">   href</button>
<button id="button2">   href     </button>
<button id="button3">       href </button>
<p>     ；    button2，     ；     button3，     。</p>

</body>

</html>

방금 < a > 탭을 설정한 target 속성에 대한 작은 문제를 보충합니다.
이전에 "href 여러 속성 설정"에서 target을 로 설정합니다self.이 말은'그리고 button2를 클릭하고 링크를 클릭하면'같은 페이지임에도 불구하고 href는http://www.suxin.yeyou.eu되다http://www.suxin.yeyou.eu/test.html"이것은 내가 원하는 결과가 아니다. 왜냐하면'이후에 button3을 클릭하고 링크를 클릭하면 내가 원하는 효과에 도달하지 못하기 때문이다."
그래서 나는 target을view 로 설정했다frame.이렇게 하면 속성을 바꿀 뿐만 아니라 문제도 생기지 않는다.나뷰frame과블랭크는 뭐가 달라요?
target="view_window"
사용자가 처음으로 내용 목록에 있는 링크를 선택하면 브라우저에서 새 창을 열고'view window '로 표시한 다음 표시할 문서 내용을 표시합니다.만약 사용자가 이 내용 목록에서 링크를 하나 더 선택하고 이'view window'가 열려 있다면
브라우저는 아까 그 문서들을 대신해서 선택한 문서를 다시 창을 불러옵니다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

기초 정리 - 1

문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

JavaScript(19) jQuery HTML 가져오기 및 설정 내용 및 속성

좋은 웹페이지 즐겨찾기