在原型存在的地方注入 jQuery - noConflict()

Question

我只使用 webkit。我需要将 jQuery 注入到已经加载原型的页面中。我正在使用此代码来加载 jQuery。 （您可以在控制台中尝试）

var s = document.createElement('script');
s.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js');
s.setAttribute('type', 'text/javascript');
document.getElementsByTagName('head')[0].appendChild(s);

我仅使用上面的代码就收到错误。

如何在加载时使用 noConflict() 。如果我在注入 jquery 脚本后输入以下代码，我仍然会收到错误。

$(document).ready(function() {
  jQuery.noConflict();
  // my thing here
});

这也会引发错误：

jQuery.noConflict();
$(document).ready(function() {
  // my thing here
});

Answer 1

编辑：因为您正在从另一个脚本加载脚本，所以您应该将需要运行的 jQuery 代码放在脚本加载事件的回调中：

var s = document.createElement('script');
s.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js');
s.setAttribute('type', 'text/javascript');
document.getElementsByTagName('head')[0].appendChild(s);

   // Place your code in an onload handler for the jQuery you're loading
s.onload = function() {

    jQuery.noConflict(); // release jQuery's hold on "$"

    jQuery(document).ready(function( $ ) {

      alert( $.fn.jquery );
   });
};

另一种解决方案就是不使用这种加载 jQuery 的方法。只需对您的

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js" type="text/javascript"></script>

<script type="text/javascript">
    jQuery.noConflict(); // release jQuery's hold on "$"

      // do this with ready() -------v------ and the "$" will be available inside
    jQuery(document).ready(function( $ ) {

      // $ is safe for jQuery inside this .ready() callback
      alert( $.fn.jquery );
    });
</script>

---

原始答案：

执行以下操作：

var s = document.createElement('script');
s.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js');
s.setAttribute('type', 'text/javascript');
document.getElementsByTagName('head')[0].appendChild(s);


jQuery.noConflict(); // release jQuery's hold on "$"

  // do this with ready() -------v------ and the "$" will be available inside
jQuery(document).ready(function( $ ) {

  // $ is safe for jQuery inside this .ready() callback
  alert( $.fn.jquery );
});

Answer 2

尝试

var $j = jQuery.noConflict();
$j(document).ready(function() {
  // my thing here
});

然后您可以将 $j 用于任何 jquery $

Answer 3

$ 是 jQuery（以及原型）的别名/快捷方式。 NoConflict 基本上释放了对 $ 快捷方式的控制，因此一旦调用，其他库就可以控制它。试试这个：

jQuery(document).ready(function() {
  // my thing here
});

Answer 4

在这里，您首先使用 $ 然后使用 jQuery.noConflict()，问题是您（错误地）假设 $ 是 jQuery在设置无冲突之前：

$(document).ready(function() {
  jQuery.noConflict();
  // my thing here
});

在这里，您做了相反的事情。您首先完成了无冲突位，很好，但随后继续使用 $ 访问 jQuery，这将不再起作用（作为 noConflict() 的直接结果> call)：

jQuery.noConflict();
$(document).ready(function() {
  // my thing here
});

结合您的两项努力，您最终会得到以下结果。我还在 .ready 行中添加了 $ ，以便在 ready 函数中您可以仍然使用$ 作为您的 jQuery 参考。

jQuery.noConflict(); // stops $ being associated with jQuery
jQuery(document).ready(function($) { // use long-hand jQuery object reference to call `ready()`
  // my thing here
});