> 웹 프론트엔드 > JS 튜토리얼 > jquery로 태그 내용을 얻는 방법

jquery로 태그 내용을 얻는 방법

藏色散人
풀어 주다: 2020-11-17 10:29:46
원래의
5197명이 탐색했습니다.

jquery로 태그 콘텐츠를 가져오는 방법: 1. "$('#id').val()" 메서드를 사용하여 태그 값을 가져옵니다. 2. "$('#id'를 통해 가져옵니다. ).text()" 메소드 태그 중간에 있는 텍스트 3. "$('#id').html()" 메소드를 통해 태그에 포함된 html 콘텐츠를 가져옵니다.

jquery로 태그 내용을 얻는 방법

권장: "Basic JavaScript Tutorial"

jquery를 사용하여 레이블 값이나 요소의 콘텐츠를 가져옵니다.

$('#标签id').val() 可以用来获取标签的value值,比如 input 标签的value值可以用它获取;
$(&#39;#标签id&#39;).text()可以用来获取标签中间的文本,比如 <span>值1</span>就可以用它获取到值1;
$(&#39;#标签id&#39;).html() 可以用来获取标签中间的html内容,比如<div id="div1"><span>123</span></div>可以用$(&#39;#div1&#39;).html()获取到<span>123</span>;
$(&#39;#标签id&#39;).attr(&#39;属性名&#39;)可以用它来获取标签的指定属性的值,比如<a href="xxx.aspx">xxx</a>就可以用.attr(&#39;href&#39;)获取到xxx.aspx。
jquery提供了三个获得内容的方法: text()、html() 以及 val(),其中前两个可用于解决本问题:
$("label#userid").text(); // 首选,获取label的文本
$("label#userid").html(); // 也可以实现,获取label标签内的所有html标记,一般情况改下label标签内就是文本,所以等效上面的方法
로그인 후 복사

다음은 예제 데모입니다. 위의 두 가지 방법을 사용하여 라벨 라벨의 내용을 얻고, 최종 결과의 차이점에 주의하세요

Html 요소 만들기

<div class="box">
<span>点击按钮获取label中内容:</span><br>
<div class="content">
<label id="userid">输入用户名</label><input type="text">
</div>
<input type="button" value="获取label中的内容">
</div>
로그인 후 복사

CSS 스타일 설정

div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
div.box span{color:#999;font-style:italic;}
div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
h3{display:inline-block;}
input[type=&#39;button&#39;]{height:30px;margin:10px;padding:5px 10px;}
로그인 후 복사

jquery 코드 작성

$(function(){
$("input:button.btn1").click(function() {
alert($("label#userid").text());
});
$("input:button.btn2").click(function() {
alert($("label#userid").html());
});
})
로그인 후 복사

효과 관찰

text() 메서드를 사용하여 태그 내용

위 내용은 jquery로 태그 내용을 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿