집 >웹 프론트엔드 >JS 튜토리얼 >jQuery 프로토타입 충돌에 대한 두 가지 솔루션(데모 샘플 다운로드 포함)_jquery

jQuery 프로토타입 충돌에 대한 두 가지 솔루션(데모 샘플 다운로드 포함)_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB원래의: 2016-05-16 15:19:061367검색

이 기사에서는 jQuery 프로토타입 충돌에 대한 두 가지 솔루션을 예제와 함께 분석합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

jquery와 프로토타입이 어떻게 충돌할 수 있나요? 최종 분석에서는 둘 다 $를 사용하고 동시에 사용되기 때문에 혼란스럽습니다. 이 문제는 5번 이상 해결되었는데, 매번 확인해야 합니다. 안 아파요, 헤헤.

방법 1. jquery 핵심 라이브러리 파일에 코드를 추가합니다.

1. 일반적으로 jquery.js 또는 jquery.min.js이며 일부 버전 번호가 있습니다. 어떤 파일인지 알아두세요.

})( window );
jQuery.noConflict(); //最后面，加上这一行。

2. 테스트 jquery 및 프로토타입 파일 로드

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script src="jquery.min.js"></script>

3.JS 코드 작성 방법

<script type="text/javascript">
alert('prototype value : '+$('test').value); //prototype写法
jQuery(document).ready(function($){ //注意这里的，jQuery和$
  alert('jquery value : '+$('#test').val()); //jquery写法
});
</script>

이 방법을 권장합니다. 이 방법이 더 효과적입니다

전체 데모 코드는 다음과 같습니다.

<html>
<head>
<script type="text/javascript" src="./prototype.js"></script>
<script src="jquery.min.js"></script>
</head>
<body>
<form>
<input id="test" type='text' name='test' value='test'/>
</form>
<script type="text/javascript">
alert('prototype value : '+$('test').value);
jQuery(document).ready(function($){
 alert('jquery value : '+$('#test').val());
});
</script>
</body>
</html>

방법 2: jquery가 호출되는 충돌 해결

1. 테스트 jquery 및 프로토타입 파일 로드

//jquery和prototype，没有先后顺序，谁先谁后都一样。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>

2.js 코드

<script type="text/javascript">
jQuery.noConflict(); //解决冲突，这个一定要放在js代码的最前面，不然就会报错了。
alert('prototype value : '+$('test').value);
jQuery(document).ready(function($){
  alert('jquery value : '+$('#test').val());
});
</script>

이 방법은 jquery의 핵심 소스 파일이 자체 서버에 없거나 jquery 코드가 상대적으로 작은 상황에 더 적합합니다. 샘플 데모보려면 여기를 클릭하세요.

전체 데모는 여기를 클릭하여 이 사이트에서 다운로드할 수 있습니다.

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：js_javascript 기술로 구현된 이진 검색 알고리즘 예다음 기사：js_javascript 기술로 구현된 이진 검색 알고리즘 예

jQuery 프로토타입 충돌에 대한 두 가지 솔루션(데모 샘플 다운로드 포함)_jquery

관련 기사