Magento의 jQuery와 Prototype 호환성을 해결하는 다섯 가지 방법
첫 번째 시나리오: Prototype을 로드한 다음 jQuery를 로드합니다.
방법1: jQuery 라이브러리와 모든 플러그인은 jQuery 이름 공간에 있고 전역 변수를 포함하여 jQuery 이름 공간에 저장됩니다.
jQuery를 사용합니다.noConflict();주요 역할은 언제든지 jQuery를 불러오면 호출할 수 있고 $기호의 사용권을 다른 js 라이브러리에 되돌려줍니다. jQuery는 자신의 이름 공간을 만들 때 다른 라이브러리의 $를 변수에 저장합니다.
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script type="text/javascript" >
// js $ ，
jQuery.noConflict();
// jQuery $ jQuery
jQuery(document).ready(function (){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('proto').hide();
</script>
</head>
<body></body>
</html>방법2: $와 같은 짧은 문자를 사용하고 싶다면 jQuery를 사용하십시오.noConflict()의 반환 값은 변수에 값을 지정합니다.이 변수는 jQuery의 새 줄임말입니다. 물론 $이외의 임의의 문자열을 사용할 수 있습니다. 예를 들어:
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script type="text/javascript" >
//$j jQuery，
var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function (){
$j("div").hide();
});
// Use Prototype with $(...), etc.
$('proto').hide();
</script>
</head>
<body></body>
</html>방법3: $를 사용하고 싶지만 다른 문자를 사용하고 싶지 않아도 된다.그리고 보통 프로그래머들은 이렇게 하는 것을 좋아한다. 왜냐하면 이렇게 쓴 코드는 원래의 $기호를 거의 바꾸지 않기 때문이다.그것은 이름 공간의 개념을 이용하여 모든 jQuery 코드를 문서의ready 이벤트 이름 공간 범위에 봉인하는 것이다. 예를 들어: jQuery (document).Magento 노트는 jQuery 코드를 입력하는 ready를 선호합니다.
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script type="text/javascript" >
jQuery.noConflict();
// Put all your code in your document ready area
jQuery(document).ready(function ($){
// $
$("div" ).hide();
});
// Use Prototype with $(...), etc.
$('proto' ).hide();
</script>
</head>
<body></body>
</html>두 번째 경우: 먼저 jQuery를 불러오고 Prototype을 불러옵니다
이 순서대로 불러오면 다른 js 라이브러리의 $기호가 jQuery에 의해 점용되는 문제가 없습니다.따라서 다른 js 라이브러리의 코드는 수정 없이 $를 사용할 수 있고, jQuery는 $를 대체할 수 있습니다.예:
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script type="text/javascript" >
// jQuery jQuery(...)
jQuery(document).ready(function (){
jQuery("div" ).hide();
});
// Prototype ， $(...),
$('someid' ).hide();
</script>
</head>
<body></body>
</html>또는 jQuery처럼 긴 문자를 쓰고 싶지 않으면 다른 방법을 사용할 수 있습니다.
var $j = jQuery;간단하게 $j를 실현하는 것이 가장 좋은 방법일 수도 있습니다.
단, jQuery로만 코드를 쓰고 싶을 때, 이름 공간을 통해 $, 즉 jQuery 소스 코드와 같은 방법을 사용할 수 있습니다.
<script type="text/javascript" >
(function($) {
/* ， $ jQuery， $ jQuery ， prototype js
*/ }
)(jQuery)
</script>참조 출처:http://docs.jquery.com/Using_jQuery_with_Other_Libraries
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
