如何使用JQuery noConflict（）加載頁面

Question

我想在我的加載頁面中使用JQuery noConflict（）。

這是我的JavaScript加載頁面：

<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function($) { 
     // initial page load 
     $('#area').load('pages/home/home.php'); 
     $("ul.sidebar-menu li a.Dashboard").addClass("hidups"); 
     $('ul.sidebar-menu li a').click(function() { 
      var page = $(this).attr('href'); 
      document.title = "Admin | " + page; 
      $("ul.sidebar-menu li a").removeClass("hidups"); 
      $(this).addClass("hidups"); 
      $('#area').load('pages/' + page + '/' + page + '.php', '', function(response, status, xhr) { 
       if (status == 'error') { 
        $("#area").load('pages/error/404.php'); 
       } 
      }); 
      return false; 
     }); 
    }); 
</script> 

，這是我的網頁上的腳本後負荷（product.php）：

<link rel="stylesheet" href="build/css/alertify.core.css" /> 
<link rel="stylesheet" href="build/css/alertify.default.css" id="toggleCSS" /> 
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> 
<link rel="stylesheet" href="dist/css/AdminLTE.min.css"> 
<style type="text/css"> 
    .modal-body2 { 
     height: 300px; 
     overflow-y: scroll; 
     padding: 15px; 
     position: relative; 
    } 
    .centerd { 
     bottom: 0; 
     left: 0; 
     margin: auto; 
     position: static; 
     right: 0; 
     top: 0; 
     width: 50%; 
    } 
</style> 

<script src="plugins/jQuery/jquery-1.8.3.min.js"></script> 
<script src="build/js/alertify.min.js"></script> 
<script type="text/javascript" src="plugins/tinymce/tinymce.min.js"</script> 
<script type="text/javascript" src="pages/produk/aplikasi.js"></script> 

<?php 
// memanggil berkas koneksi.php 
require '../../config/koneksi.php'; 
?> 

<div class="content-wrapper"> 
    <!-- Content Header (Page header) --> 
    <section class="content-header"> 
     <h1> 
     Jammin 
     <small>Data</small> 
     </h1> 
     <ol class="breadcrumb"> 
     <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li> 
     <li><a href="#">Tables</a></li> 
     <li class="active">Data Produk</li> 
     </ol> 
    </section> 
    <!-- tempat untuk menampilkan data mahasiswa --> 
    <section class="content"> 
     <div class="row"> 
     <div class="col-xs-12"> 
      <div class="box"> 
       <div class="box-header"> 
        <h3 class="box-title">Data Produk</h3> 
        <a href="#myModal" id="0" class="tambah btn btn-default" data-toggle="modal" style="color:black"> 
        Tambah Data </a> 
        <button type="button" class="btn btn-danger" id="delete-all"> 
        <i class="icon-plus"></i> Hapus Semua Data 
        </button> 
       </div> 
       <div class="box-body"> 
        <div id="data-produk"> </div> 
       </div> 
      </div> 
     </div> 
     </div> 
    </section> 
</div> 
<!-- awal untuk modal dialog --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h3 id="myModalLabel">Tambah Data Produk</h3> 
     </div> 
     <div class="modal-body2"> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button> 
      <button id="simpan-produk" class="btn btn-success" data-dismiss="modal" aria-hidden="true" >Simpan Data</button> 
     </div> 
     </div> 
    </div> 
</div> 

但是這不會因爲jQuery工作.min已經「墜毀」。我想我應該使用jquery.noConflict來解決它，但我不知道如何使用jquery.noConflict到我的加載頁面。

Answer 1

用這個jQuerynoConflict

<script type="text/javascript"> 
JQuery(document).ready(function($) { 

// initial page load 
     JQuery('#area').load('pages/home/home.php'); 
     JQuery("ul.sidebar-menu li a.Dashboard").addClass("hidups"); 
     JQuery('ul.sidebar-menu li a').click(function(){ 

     var page = JQuery(this).attr('href'); 
     document.title="Admin | "+page; 
     JQuery("ul.sidebar-menu li a").removeClass("hidups"); 
     JQuery(this).addClass("hidups"); 
     JQuery('#area').load('pages/'+page+'/'+ page +'.php' , '', function(response, status, xhr) { 
       if (status == 'error') { 
        JQuery("#area").load('pages/error/404.php'); 
       } 
      }); 

     return false; 
     }); 
     }); 

</script> 

Answer 2

有接近這幾方面，我最喜歡的是一個封閉。

;(function($){ 
    //$ is now safe here eg. $.('.selector'); 
})(jQuery); 

或者

只需使用$ .noConflict使用需要的美元符號，如原型的其他庫之前

OR

只需使用jQuery而不是$無處不在，這將使你的代碼少便攜，不太漂亮:)