jQuery 객체에 대한 체인 작업의 사용 분석

이 기사의 예에서는 jQuery 객체에 대한 체인 작업 사용을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

jQuery 객체의 연쇄 작업

먼저 예를 살펴보겠습니다.

코드는 다음과 같습니다.

$("#myphoto").css("border","solid 2px#FF0000").attr("alt"," good")

먼저 css() 함수를 호출하여 jQuery 객체의 스타일을 수정한 후 attr() 함수를 사용하여 수정합니다. 이 호출 방법은 체인과 유사하므로 "체인 작업"이라고 합니다.

과거에는 여러 문으로만 완료할 수 있었던 작업을 하나의 문으로 수행하는 것이 종종 가능했기 때문에 체인 작업을 통해 코드를 더욱 간결하게 만들 수 있습니다. 예를 들어 체인 연산을 사용하지 않는 경우 위 작업을 완료하려면 두 개의 문이 필요합니다.

$("#myphoto").css("border","solid 2px#FF0000");
$("#myphoto").arrt("alt","good");

코드 양이 늘어나는 것 외에도 선택기도 두 번 호출되어 속도가 느려집니다.

짧은 체인 작업에서는 명령문이 더 명확해지는 경우가 많으며 jQuery 객체에 대한 다양한 작업을 단계별로 구현할 수 있습니다. 그러나 체인 작업이 너무 길어서는 안 됩니다. 그렇지 않으면 jQuery 객체의 현재 상태를 확인하기가 쉽지 않기 때문에 명령문을 이해하기 어려울 것입니다. 특히 jQuery 객체에 요소 추가 및 삭제가 포함된 경우, 판단하기가 더욱 어렵습니다.

모든 jQuery 함수가 연결된 작업을 사용할 수 있는 것은 아닙니다. 이는 연쇄 연산의 원리와 관련이 있습니다. 연쇄 연산이 달성될 수 있는 이유는 각 함수가 jQuery 객체 자체를 반환하기 때문입니다. jQuery 클래스 라이브러리의 내부 구현에서는 많은 함수가 jQuery 객체 자체를 반환하지만 모두 제한된 수의 내부 함수를 호출하여 구현됩니다. 예를 들어 attr() 함수는 실제로 "jQuery. .각(객체,콜백,args)" 메서드. 이 메소드는 jQuery 객체 메소드가 아닙니다. jQuery 객체 메소드에는 "jQuery.fn.each(callback,args)"인 Each() 함수도 있습니다. :

Each:function(callback,args){
  ReturnjQuery.each(this,callback,args);
}

jQuery.each 함수의 반환 결과를 살펴보겠습니다.

Each.function(object,callback,args){
  Retumobject;
}

Object는 jQuery.fn 개체, 즉 jQuery 개체입니다. 최종 반환된 개체는 여전히 jQuery 개체입니다.

다음 원칙을 사용하여 함수가 jQuery 객체를 반환하는지, 즉 체인 작업에 사용할 수 있는지 여부를 결정할 수 있습니다.

속성 값 "attr(name)"을 가져오고 컬렉션 크기 "size()"를 가져오는 등 특정 데이터를 가져오는 함수 외에도 이러한 함수는 분명히 데이터를 반환합니다. 이러한 함수 외에도 "attr(name.value)" 속성 설정과 같은 체인 작업에 jQuery 함수를 사용할 수 있습니다.

"$" 변수 사용

"$" 변수는 "jQuery" 변수에 대한 참조입니다. "jQuery" 변수는 전역 변수이고 jQuery 개체는 "jQUery.fn"을 참조하므로 혼동하지 마세요. "jQuery" 변수는 정적 클래스와 유사하며 정적 메서드이며 언제든지 호출할 수 있습니다. 예를 들어 "jQuery.each"입니다. "jQuery.fn"은 인스턴스 메서드이며 jQuery 개체에서만 호출할 수 있습니다. 예를 들어 "jQuery.fn.each()" 메서드는 "$('#id').each" 형식으로만 호출할 수 있습니다.

앞서 언급했듯이 jQuery 내부에는 다음 구현이 있으므로 "jQuery" 대신 "$"를 사용할 수 있습니다.

jQuery=window.jQuery=window.$

그래서 "$" 변수와 "jQuery" " 변수는 실제로 전역변수인 Window 객체의 속성입니다. 페이지 어디에서나 호출할 수 있습니다.

이 글이 jquery 프로그래밍에 종사하는 모든 분들께 도움이 되기를 바랍니다.