'$ (this)와'this '의 차이점은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/1051782

  •  20-08-2019
  •  | 
  •  

문제

현재이 자습서를 통해 작업 중입니다. jQuery를 시작합니다

아래 두 가지 예는 다음과 같습니다.

$("#orderedlist").find("li").each(function (i) {
    $(this).append(" BAM! " + i);
});
$("#reset").click(function () {
    $("form").each(function () {
        this.reset();
    });
});

첫 번째 예에서는 사용합니다 $(this) 각각의 텍스트를 추가합니다 li 요소. 우리가 사용하는 두 번째 예에서 this 양식을 재설정 할 때 직접.

$(this) 보다 훨씬 더 자주 사용되는 것 같습니다 this.

내 추측은 첫 번째 예입니다. $() 각각을 변환하고 있습니다 li jQuery 객체에 요소를 이해합니다 append() 두 번째 예에서는 기능을 수행합니다 reset() 양식에서 직접 호출 할 수 있습니다.

기본적으로 우리는 필요합니다 $() 특수 jQuery 전용 기능의 경우.

이 올바른지?

도움이 되었습니까?

해결책

예, 당신은 필요합니다 $() jQuery를 사용할 때. jQuery의 도움을 원한다면 DOM을 수행하는 것만으로도 명심하십시오.

$(this)[0] === this

기본적으로 요소 세트를 얻을 때마다 jQuery는 그것을 jQuery 객체. 한 가지 결과 만 있다는 것을 알고 있다면 첫 번째 요소에있을 것입니다.

$("#myDiv")[0] === document.getElementById("myDiv");

등등...

다른 팁

$() jQuery 생성자 함수입니다.

this 호출의 DOM 요소에 대한 참조입니다.

그래서 기본적으로 $(this), 당신은 방금 지나고 있습니다 this 안에 $() jQuery 메소드와 함수를 호출 할 수 있도록 매개 변수로.

예, 필요합니다 $(this) jQuery 함수의 경우 jQuery를 사용하지 않는 요소의 기본 JavaScript 메소드에 액세스하려면 사용할 수 있습니다. this.

사용할 때 jQuery, 사용하는 것이 좋습니다 $(this) 대개. 그러나 차이를 알고 있다면 (배우고 알아야한다면) 때로는 더 편리하고 더 빠르며 사용하는 것이 더 빠릅니다. this. 예를 들어:

$(".myCheckboxes").change(function(){ 
    if(this.checked) 
       alert("checked"); 
});

보다 쉽고 순수합니다

$(".myCheckboxes").change(function(){ 
      if($(this).is(":checked")) 
         alert("checked"); 
});

this 요소, $(this) 해당 요소로 구성된 jQuery 객체입니다

$(".class").each(function(){
 //the iterations current html element 
 //the classic JavaScript API is exposed here (such as .innerHTML and .appendChild)
 var HTMLElement = this;

 //the current HTML element is passed to the jQuery constructor
 //the jQuery API is exposed here (such as .html() and .append())
 var jQueryObject = $(this);
});

더 깊은 표정

thisMDN 실행 컨텍스트에 포함되어 있습니다

범위는 현재를 나타냅니다 실행 컨텍스트ECMA. 이해하기 위해 this, 실행 컨텍스트가 JavaScript에서 작동하는 방식을 이해하는 것이 중요합니다.

실행 컨텍스트는 이것을 묶습니다

제어가 실행 컨텍스트에 들어가면 (해당 범위에서 코드가 실행됩니다) 변수 환경은 설정입니다 (어휘 및 가변 환경 - 기본적으로 변수가 이미 액세스 할 수있는 영역과 로컬 변수가 될 영역이 설정됩니다. 저장) 및 바인딩 this 발생합니다.

jQuery는 이것을 묶습니다

실행 컨텍스트는 논리적 스택을 형성합니다. 결과적으로 스택의 컨텍스트는 이전 변수에 액세스 할 수 있지만 바인딩이 변경되었을 수 있습니다. jQuery가 콜백 함수를 호출 할 때 마다이 바인딩을 변경합니다. 사용하여 applyMDN.

callback.apply( obj[ i ] )//where obj[i] is the current element

전화의 결과 apply 그게 다 jQuery 콜백 함수 내부, this 현재 요소를 나타냅니다 콜백 함수에서 사용 중입니다.

예를 들어, .each, 일반적으로 사용되는 콜백 함수는 .each(function(index,element){/*scope*/}). 그 범위에서 this == element 사실이다.

jQuery 콜백은 적용 함수를 사용하여 현재 요소와 호출되는 함수를 바인딩합니다. 이 요소는 jQuery 객체의 요소 배열에서 나옵니다. 구성된 각 jQuery 객체에는 선택자jQuery API 그것은 jQuery 객체를 인스턴스화하는 데 사용되었습니다.

$(selector) jQuery 함수를 호출합니다 (기억하십시오 $ 에 대한 참조입니다 jQuery, 코드 : window.jQuery = window.$ = jQuery;). 내부적으로 jQuery 함수는 함수 객체를 인스턴스화합니다. 따라서 즉시 명확하지는 않지만 $() 내부적으로 사용됩니다 new jQuery(). 이 jQuery 객체의 구성의 일부는 선택기의 모든 일치를 찾는 것입니다. 생성자는 또한 HTML 문자열을 허용합니다 그리고 요소. 당신이 지나갈 때 this jQuery 생성자에게, 당신은 jQuery 객체를. 그런 다음 jQuery 객체는 선택기와 일치하는 DOM 요소의 어레이와 같은 구조를 포함합니다 (또는 경우 단일 요소 만 this).

jQuery 객체가 구성되면 이제 jQuery API가 노출됩니다. jQuery API 함수가 호출되면이 배열과 같은 구조를 내부적으로 반복합니다. 배열의 각 항목에 대해 API의 콜백 함수를 호출하여 콜백의 바인딩 this 현재 요소에. 이 호출은 위의 코드 스 니펫에서 볼 수 있습니다. obj 어레이와 같은 구조입니다 i 반복자는 현재 요소의 배열에서 위치에 사용됩니다.

예, 사용함으로써 $(this), 객체에 대한 jQuery 기능을 활성화했습니다. 만 사용하여 this, 일반적인 JavaScript 기능 만 있습니다.

this JavaScript 객체를 참조하십시오 $(this) jQuery로 캡슐화하는 데 사용됩니다.

예 => 

// Getting Name and modify css property of dom object through jQuery
var name = $(this).attr('name');
$(this).css('background-color','white')

// Getting form object and its data and work on..
this = document.getElementsByName("new_photo")[0]
formData = new FormData(this)

// Calling blur method on find input field with help of both as below
$(this).find('input[type=text]')[0].blur()

//Above is equivalent to
this = $(this).find('input[type=text]')[0]
this.blur()

//Find value of a text field with id "index-number"
this = document.getElementById("index-number");
this.value

or 

this = $('#index-number');
$(this).val(); // Equivalent to $('#index-number').val()
$(this).css('color','#000000')
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top