>  기사  >  웹 프론트엔드  >  jquery의 값 방법은 무엇입니까?

jquery의 값 방법은 무엇입니까?

青灯夜游
青灯夜游원래의
2022-05-17 14:15:553245검색

5가지 값 가져오기 방법: 1. "element object.text()"를 사용하여 지정된 요소의 텍스트 콘텐츠를 가져옵니다. 2. "element object.html()"을 사용하여 요소에 태그가 포함된 콘텐츠를 가져옵니다. 3. "input "Box element.val()"을 사용하여 사용자 입력 내용을 얻습니다. 4. "Element object.attr("속성 이름")"을 사용하여 지정된 속성의 값 등을 얻습니다.

jquery의 값 방법은 무엇입니까?

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.2.1 버전, Dell G3 컴퓨터.

jquery에서 값을 얻는 방법은 여러 가지가 있습니다. 아래에서 소개해드리겠습니다.

1. 요소의 콘텐츠 값을 가져오는 두 가지 방법: text() 또는 html()

  • text() 메서드는 선택한 요소의 텍스트 콘텐츠를 반환할 수 있습니다.

  • html() 메서드는 선택한 요소의 콘텐츠(innerHTML)를 반환할 수 있습니다.

예: text()를 사용하여 텍스트 콘텐츠를 가져오고, html()을 사용하여 태그가 포함된 콘텐츠를 가져옵니다

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					console.log($("p").text());
					console.log($("p").html());
				});
			});
		</script>
	</head>
	<body>
		<button>获取p元素的内容</button>
		<p>这是一个<b>段落</b>。</p>
	</body>
</html>

jquery의 값 방법은 무엇입니까?

2. 입력 입력 상자의 입력 값을 가져옵니다

입력 입력 상자는 값 속성 제어에 의해 결정됩니다. 이는 val() 메서드를 사용하여 직접 얻을 수도 있고 attr("value") 메서드를 사용하여 얻을 수도 있습니다.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					console.log($("input[type=text]").val());
					console.log($("input[type=password]").attr("value"));
				});
			});
		</script>
	</head>
	<body>

		<button>获取input元素的内容</button>
		<p>用户名: <input type="text" name="user" value="李华" /></p>
		<p>密 码: <input type="password" name="password" value="123456" /></p>
	</body>
</html>

jquery의 값 방법은 무엇입니까?

3. 요소 속성 값 가져오기

요소 속성 값은 두 가지 방법으로 얻을 수 있습니다:

  • attr() 메서드

  • prop() 메서드

차이: 있음 사실 체크됨, 선택됨, 비활성화됨 등 값과 false가 있는 두 개의 Boolean 속성을 연산하려면 prop() 메서드를 사용하는 것이 좋으며, 다른 속성은 attr() 메서드를 사용하여 연산하는 것이 좋습니다.

예 1: attr()을 사용하여 일반 속성 값 가져오기

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					console.log($("input").attr("name"));
				});
			});
		</script>
	</head>
	<body>

		<button>获取name属性值</button>
		<p>用户名: <input type="text" name="user" value="李华" /></p>
	</body>
</html>

jquery의 값 방법은 무엇입니까?

예 2: prop()을 사용하여 부울 속성 값 가져오기

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					console.log($("input").prop("disabled"));
				});
			});
		</script>
	</head>
	<body>

		<button>获取disabled属性值</button>
		<p>密 码: <input type="password" name="password" value="123456" disabled /></p>
	</body>
</html>

jquery의 값 방법은 무엇입니까?

[권장 학습: jQuery 비디오 튜토리얼 웹 프론트엔드 비디오

위 내용은 jquery의 값 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.