jQuery.extend 함수 및 용법 상세
JQuery의 extend 확장 방법:
Jquery의 확장 방법인 extend는 플러그인을 쓰는 과정에서 자주 사용하는 방법입니다. 이 방법은 원형을 다시 불러오는 방법이 있습니다. 여기서 함께 알아보겠습니다.
1. Jquery의 확장 방법의 원형은 다음과 같다.
extend(dest,src1,src2,src3...);
그것의 의미는 src1, src2, src3...dest에 합병되면 반환값은 합병된 dest로 이 방법이 합병된 후에 dest의 구조를 수정한 것을 알 수 있다.Dest 구조를 수정하지 않고 결합 결과를 얻으려면 다음과 같이 하십시오.
var newSrc=$.extend({},src1,src2,src3...)// "{}" dest
이렇게 하면 src1, src2, src3을...병합을 진행한 다음 병합 결과를 newSrc에 되돌려줍니다.예를 들면 다음과 같습니다.
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
그럼 합병된 결과.
result={name:"Jerry",age:21,sex:"Boy"}
즉 뒤의 매개 변수가 앞의 매개 변수와 같은 이름이 존재하면 뒤의 매개 변수는 앞의 매개 변수 값을 덮어쓴다.
2. dest 매개 변수 생략
상기 extend 방법의 원형에 있는 dest 매개 변수는 생략할 수 있습니다. 생략하면 이 방법은 하나의 src 매개 변수만 있고, 이 src를 extend 방법을 호출하는 대상에 통합합니다. 예를 들어:
1、$.extend(src)
이 방법은 src를 jquery의 전역 대상에 통합하는 것입니다. 예를 들어:
$.extend({
hello:function(){alert('hello');}
});
Hello 방법을 jquery의 전역 대상에 통합하는 것입니다.
2、$.fn.extend(src)
이 방법은 src를 jquery의 실례 대상에 통합시킨다. 예를 들어 다음과 같다.
$.fn.extend({
hello:function(){alert('hello');}
});
바로 Hello 방법을 jquery의 실례 대상에 통합하는 것입니다.
다음은 일반적인 확장 인스턴스 몇 가지를 예로 들겠습니다.
$.extend({net:{}});
이것은 jquery 전역 대상에서 넷 이름 공간을 확장하는 것입니다.
$.extend($.net,{
hello:function(){alert('hello');}
})
이것은 Hello 방법을 이전에 확장된 Jquery의 net 이름 공간으로 확장하는 것입니다.
셋째, Jquery의 extend 메서드에는 프로파일을 다시 로드하는 방법도 있습니다.
extend(boolean,dest,src1,src2,src3...)
첫 번째 파라미터boolean은 깊이 복사를 하는지 여부를 대표하고 나머지 파라미터는 앞에서 소개한 것과 일치한다. 심층 복사가 무엇인지 우리는 하나의 예를 본다.
var result=$.extend( true, {},
{ name: "John", location: {city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} } );
우리는 src1에 끼워 넣은 하위 대상location: {city: "Boston"}, src2에도 끼워 넣은 하위 대상location: {state: "MA"}, 첫 번째 깊이 복사 파라미터가true인 것을 알 수 있다. 그러면 합병된 결과는 다음과 같다.
result={name:"John",last:"Resig",
location:{city:"Boston",state:"MA",county:"China"}}
즉, 이것은 src의 끼워 넣은 하위 대상도 합병할 것이다. 첫 번째 파라미터인boolean이false라면, 합병의 결과가 무엇인지 살펴보자. 다음과 같다.
var result=$.extend( false, {},
{ name: "John", location:{city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} }
);
그러면 합병 후의 결과는 다음과 같다.
result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}
이상은 $입니다.extend () 는 프로젝트에서 자주 사용하는 세부 사항입니다.
보충: extend () 방법으로 jquery 플러그인을 자주 작성합니다. 그러면 jquery 플러그인의 종류는 다음과 같습니다.
jQuery 플러그인 종류
1. 대상을 봉인하는 방법 이런 플러그인은 대상 방법을 봉인하여 선택기를 통해 얻은 jQuery 대상을 조작하는 데 사용되는 가장 흔히 볼 수 있는 플러그인이다.이런 플러그인은 jQuery 선택기의 강력한 장점을 발휘할 수 있다. 상당 부분의 jQuery 방법은 jQuery 스크립트 라이브러리 내부에서 이런 형식을 통해 내부 핵에 삽입하는 것이다. 예를 들어parent() 방법, appendTo() 방법 등이다.
2. 봉인 전역 함수는 독립된 함수를 jQuery 이름 공간에 추가할 수 있습니다.자주 사용하는 jQuery와 같습니다.ajax () 방법, 첫 번째 공백을 없애는 jQuery.trim () 방법은 jQuery 내부에서 전역 함수로 된 플러그인을 핵에 추가합니다.
3. 선택기 플러그인은 jQuery의 선택기가 매우 강하지만 소수의 경우 선택기 플러그인을 사용하여 자신이 좋아하는 선택기를 확충해야 한다.
jQuery.fn.extend () 는 위에서 언급한 3가지 유형 중 첫 번째, jQuery를 확장하는 데 사용됩니다.extend () 는 확장된 두 가지 플러그인에 사용됩니다.두 방법 모두 Object 유형의 매개변수를 적용합니다.Object 객체의 이름/값 쌍은 각각 함수 또는 방법명/함수 바디를 나타냅니다.
jquery.extend 함수 용법 상해
요즘 jQuery를 연구하고 있어요.jQuery를extend 확장 함수의 사용법을 기록합니다.
1、jQuery 정적 방법을 확장합니다.
$.extend({
test:function(){alert('test ')}
})
사용법: $.test()
2. 여러 객체 병합
jQuery입니다.extend(css1, css2)를 예로 들면 css1, css2개는 약간의 속성이 있다.extend 함수는 css2에 있고 css2에 없는 속성을 css1에 추가합니다. css2의 어떤 속성과 css1의 어떤 속성 이름을 사용하면 css2의 속성으로 css1의 동명 속성을 덮어씁니다.css1이 마지막 정화 대상입니다.또는
var newcss = jquery.extend(css1,css2) newcss 。
var newcss = jquery.extend({},css1,css2) newcss . css1 。
// : jQuery.extend(obj,obj,obj,..)
var Css={size: "px",style: "oblique"}
var Css={size: "px",style: "oblique",weight: "bolder"}
$.jQuery.extend(Css,Css)
// :Css size , Css weight
// Css = {size: "px",style: "oblique",weight: "bolder"}
3. 깊이 상감 대상
새 extend () 는 덧씌운 대상을 더 깊이 있게 합칠 수 있도록 합니다.아래의 예는 매우 좋은 증명이다.
// .extend()
jQuery.extend(
{ name: “John”, location: { city: “Boston” } },
{ last: “Resig”, location: { state: “MA” } }
);
// :
// => { name: “John”, last: “Resig”, location: { state: “MA” } }
// .extend()
jQuery.extend( true,
{ name: “John”, location: { city: “Boston” } },
{ last: “Resig”, location: { state: “MA” } }
);
//
// => { name: “John”, last: “Resig”,
// location: { city: “Boston”, state: “MA” } }
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.