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

현재이 튜토리얼을 진행하고 있습니다 : 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요소를 append()함수 를 이해하는 jQuery 객체로 변환 하는 반면 두 번째 예 reset()에서는 양식에서 직접 호출 할 수 있습니다.

기본적으로 $()특별한 jQuery 전용 함수 가 필요 합니다.

이 올바른지?

예 $(). jQuery를 사용할 때만 필요합니다 . jQuery의 도움으로 DOM 작업을 수행하려면이 점을 명심하십시오.

$(this)[0] === this

기본적으로 요소 세트를 다시 얻을 때마다 jQuery는 jQuery 객체 로 변환 합니다 . 결과가 하나만 있다는 것을 알고 있다면 첫 번째 요소가됩니다.

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

등등...

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

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

따라서 기본적으로 in에서 매개 변수로 in 을 $(this)전달하여 jQuery 메서드 및 함수를 호출 할 수 있습니다.this$()

예, $(this)jQuery 함수 가 필요 하지만 jQuery를 사용하지 않는 요소의 기본 자바 스크립트 메소드에 액세스하려면을 사용하면 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);
});

더 깊은 모습

this^MDN 은 실행 컨텍스트에 포함되어 있습니다

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

실행 컨텍스트가 이것을 바인딩

제어가 실행 컨텍스트에 들어가면 (코드가 해당 범위에서 실행되고 있음) 변수의 환경이 설정됩니다 (Lexical and Variable Environments)-기본적으로 변수에 액세스 할 수있는 영역과 로컬 변수에 대한 영역을 설정합니다. 저장) 및 바인딩이 this발생합니다.

jQuery가 이것을 바인딩합니다.

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

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

호출의 결과 apply즉 , jQuery를 콜백 함수의 내부에 this현재 요소를 지칭 콜백 함수에 의해 사용된다.

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

jQuery 콜백은 apply 함수를 사용하여 현재 요소로 호출되는 함수를 바인딩합니다. 이 요소는 jQuery 객체의 요소 배열에서 가져옵니다. 생성 된 각 jQuery 객체에는 jQuery 객체 를 인스턴스화하는 데 사용 된 선택기 ^{jQuery API} 와 일치하는 요소 배열이 포함 됩니다.

$(selector)jQuery 함수를 호출합니다 ( 코드에 $대한 참조 임을 기억하십시오 :) . 내부적으로 jQuery 함수는 함수 객체를 인스턴스화합니다. 따라서 내부적으로 사용 하면 즉시 명백하지 않을 수도 있습니다 . 이 jQuery 객체 구성의 일부는 선택기의 모든 일치 항목을 찾는 것입니다. 생성자는 html 문자열 과 요소 도 허용 합니다 . 당신이 통과 할 때 JQuery와 생성자에, 당신이 jQuery를 객체의 현재 요소를 전달하는로 구성된다 . 그런 다음 jQuery 객체에는 선택기와 일치하는 DOM 요소의 배열과 같은 구조가 포함됩니다 (또는 경우 단일 요소 ).jQuerywindow.jQuery = window.$ = jQuery;$()new jQuery()thisthis

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

예,를 사용 $(this)하여 객체에 대해 jQuery 기능을 활성화했습니다. 을 사용 this하면 일반적인 Javascript 기능 만 있습니다.

this자바 스크립트 객체를 참조하고 $(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')