programing

jQuery.val() vs.attr("value")

lovejava 2023. 10. 21. 09:49

jQuery.val() vs.attr("value")

저는 이 둘이 같은 줄 알았는데 아닌 것 같네요.일반적으로 사용해 왔습니다.$obj.attr("value")양식 필드로 작업하지만 현재 작성 중인 페이지에는$obj.attr("value")필드에 입력한 텍스트를 반환하지 않습니다.하지만,$obj.val()한다.

내가 만든 다른 페이지에 둘 다$obj.attr("value")그리고.$obj.val()양식 필드에 입력한 텍스트를 반환합니다.

무엇을 설명할 수 있습니까?$obj.attr("value")한 경우에는 기대한 대로 작동하지만 다른 경우에는 작동하지 않습니까?

jQuery를 사용하여 양식 필드의 값을 설정하고 검색하는 적절한 방법은 무엇입니까?

개체 속성과 개체 속성 사이에는 큰 차이가 있습니다.

.prop() 대 .attr()의 몇 가지 차이점에 대해서는 이 질문(및 답변)을 참조하십시오.

요점은 말입니다..attr(...)시작할 때(html이 생성될 때)에만 개체 값을 가져옵니다.val()여러 번 변경될 수 있는 객체의 속성 값을 얻는 것입니다.

jQuery 1.6 이후로.attr()속성(마크업 자체의 속성)의 원래 값을 반환합니다.prop()를 사용하여 현재 값을 구해야 합니다.

var currentValue = $obj.prop("value");

그러나 val()을 사용하는 것이 항상 동일한 것은 아닙니다.예를 들어, 의 값은<select>elements는 실제로 선택한 옵션의 값입니다.val()그 점을 고려해서 말입니다만.prop()하지 않다.이런 이유로,val()선호합니다.

추신: 이것은 답변이 아니라 위 답변들에 대한 보충 자료일 뿐입니다.

나중에 참고하기 위해 의심을 해소하는 데 도움이 될 수 있는 좋은 예를 들어봤습니다.

다음을 시도해 보십시오.이 예에서는 파일을 선택하는 데 사용할 수 있는 파일 선택기를 만든 다음 선택한 파일의 이름을 검색합니다.HTML 코드는 아래와 같습니다.

<html>
    <body>
        <form action="#" method="post">
            <input id ="myfile" type="file"/>
        </form>
        <script type="text/javascript" src="jquery.js"> </script>
        <script type="text/javascript" src="code.js"> </script>
    </body>
</html>

code.js 파일에는 다음과 같은 jQuery 코드가 포함되어 있습니다.jQuery 코드 스니펫 두 개를 하나씩 사용해보고 출력을 확인해보세요.

jTr('value')가 있는 jQuery 코드:

$('#myfile').change(function(){
    alert($(this).attr('value'));
    $('#mybutton').removeAttr('disabled');
});

val()이 있는 jQuery 코드:

$('#myfile').change(function(){
    alert($(this).val());
    $('#mybutton').removeAttr('disabled');
});

출력:

속성('value')이 있는 jQuery 코드의 출력은 'undefined'가 됩니다.val()이 있는 jQuery 코드의 출력이 선택한 파일 이름이 됩니다.

설명:이제 상위 답변이 무엇을 전달하고 싶은지 쉽게 이해할 수 있습니다.처음에 선택한 파일이 없으므로 값이 정의되지 않았기 때문에 속성('value')이 있는 jQuery 코드의 출력이 '정의되지 않음'으로 표시됩니다.val()은 현재 값을 얻기 때문에 사용하는 것이 좋습니다.

정의되지 않은 값이 반환되는 이유를 확인하려면 HTML에서 이 코드를 사용해 보십시오. 이제 특성을 확인할 수 있습니다.값이 'test'이고 이전에는 정의되지 않았기 때문에('value') 항상 'test'를 반환합니다.

<input id ="myfile" type="file" value='test'/>

당신에게 유용했길 바랍니다.

예를 들어 배워보겠습니다.기본값이 = "이름 입력"인 텍스트 입력 필드가 있습니다.

var inp = $("input").attr("value");

var inp = $("input").val();

둘 다 "이름 입력"을 반환합니다.

그러나 브라우저에서 기본 텍스트를 "Jose"로 변경한다고 가정합니다.

var inp = $("input").attr("value");

는 기본 텍스트(즉, "이름 입력")를 제공합니다.

var inp = $("input").val();

그렇지만.val()"Jose", 즉 현재 값을 반환합니다.

도움이 되길 바랍니다.

양식 필드를 설정하고 값을 얻는 적절한 방법은 메소드를 사용하는 것입니다.

$('#field').val('test'); // Set
var value = $('#field').val(); // Get

jQuery 1.6에서는 라는 새로운 방법이 있습니다.

jQuery 1.6 현재 메서드는 설정되지 않은 특성에 대해 정의되지 않은 값을 반환합니다.또한 일반 개체, 배열, 창 또는 문서에는 .attr()을 사용해서는 안 됩니다.DOM 속성을 검색하고 변경하려면 .prop() 메서드를 사용합니다.

이를 얻기 위해서는value모든 입력 필드의 경우 항상 다음을 사용해야 합니다.$element.val()왜냐면jQuery요소 유형의 브라우저를 기준으로 올바른 값을 검색합니다.

jQuery('.changer').change(function () {
    var addressdata = jQuery('option:selected', this).attr('address');
    jQuery("#showadd").text(addressdata);
});

jQuery(".morepost").live("click", function() { 
var loadID = jQuery(this).attr('id'); //get the id 
alert(loadID);    
});

.attr을 사용하여 id의 값을 얻을 수도 있습니다.

이 예는 유용할 수 있습니다.

<html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  </head>
  <body>
	<input id="test" type="text"  />
	<button onclick="testF()" >click</button>
	
	
	<script>
	function testF(){
	
		alert($('#test').attr('value'));
		alert( $('#test').prop('value'));
		alert($('#test').val());
		}
	</script>
  </body>
 </html>

위의 예에서는 모든 것이 완벽하게 작동하지만 스크립트 태그에서 jquery 버전을 1.9.1 이상으로 변경하면 첫 번째 경보에 "정의되지 않음"이 표시됩니다. atttr ('value')는 jquery 버전 1.9.1 이상에서 작동하지 않습니다.

예제 추가...어트랙트 ()은 다양하고, 발 ()은 하나일 뿐입니다.Prop is boolean이 다릅니다.

//EXAMPLE 1 - RESULT
$('div').append($('input.idone').attr('value')).append('<br>');
$('div').append($('input[name=nametwo]').attr('family')).append('<br>');
$('div').append($('input#idtwo').attr('name')).append('<br>');
$('div').append($('input[name=nameone]').attr('value'));

$('div').append('<hr>'); //EXAMPLE 2
$('div').append($('input.idone').val()).append('<br>');

$('div').append('<hr>'); //EXAMPLE 3 - MODIFY VAL
$('div').append($('input.idone').val('idonenew')).append('<br>');
$('input.idone').attr('type','initial');
$('div').append('<hr>'); //EXAMPLE 3 - MODIFY VALUE
$('div').append($('input[name=nametwo]').attr('value', 'new-jquery-pro')).append('<br>');
$('input#idtwo').attr('type','initial');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="hidden" class="idone" name="nameone" value="one-test" family="family-number-one">
<input type="hidden" id="idtwo" name="nametwo" value="two-test" family="family-number-two">
<br>
<div></div>

jquery - 입력 텍스트 상자에 값을 가져옵니다.

<script type="text/javascript"> 

jQuery(document).ready(function(){

var classValues = jQuery(".cart tr").find("td.product-name").text();
classValues = classValues.replace(/[_\W]+/g, " ")

jQuery('input[name=your-p-name]').val(classValues);

//alert(classValues);

});

</script>

속성과 속성 모두에 대해 동일한 값을 얻지만 HTML에서 다른 값을 볼 수 있다면 HTML에서 다음을 시도해 보십시오.

$('#inputID').context.defaultValue;

attr('value')당신은 당신이 특정한 이름의 속성의 값을 찾고 있다고 말하는 것입니다.vaule. 사용하는 것이 좋습니다.val()이것은 jQuery의 형식을 벗어난 요소 값을 추출하는 기능이기 때문입니다.

항상 사용해왔습니다..val()그리고 솔직히 나는 당신이 사용할 가치를 얻을 수 있는지 조차 몰랐습니다..attr("value"). .val()을 사용하여 폼 필드의 값을 설정합니다.$('#myfield').val('New Value');

언급URL : https://stackoverflow.com/questions/8312820/jquery-val-vs-attrvalue

'programing' 카테고리의 다른 글

mysql 셸 내의 테이블 줄 없이 쿼리 결과 표시(비표 출력)  (0) 2023.10.21
함수에서 비동기 대기를 사용하여 비동기 함수에서 값을 반환하는 방법은 무엇입니까?  (0) 2023.10.21
spring boot application에서 탄력적인 검색 쿼리를 표시하는 방법  (0) 2023.10.21
강제 "자화" 방향 모드  (0) 2023.10.21
.gitignore & .hgignore & svn에 따라 rsync 제외: --filter=:C와 같은 ignore  (0) 2023.10.21

'programing'의 다른글

  • 현재글jQuery.val() vs.attr("value")

관련글

댓글

티스토리툴바