在匿名函数中调用 jQuery

Calling jQuery Within an Anonymous Function

本文关键字：调用 jQuery 函数      更新时间：2023-09-26

我目前有一个匿名函数，可以在包含jQuery的页面上滑入内容，但是当不包含jQuery时，它当然不起作用。

如何通过 JavaScript 加载 jQuery 并使其正常工作？

这是我尝试过的：

(function(){
  var c=location.protocol;
  var b=c+"//code.jquery.com/jquery-latest.js";
  var a=document.createElement("script");
  a.type="text/javascript";
  a.src=b;
  document.getElementsByTagName("head")[0].appendChild(a)
})();

(function($){

var css = "html,body {margin: 0px !important;padding: 0px !important;}#popslide {width: 525px !important;height: 250px !important;border: 2px solid #bcbbba !important;border-right: none !important;border-radius: 4px !important;position: fixed !important;bottom: 15% !important;background: #f5f5f7 !important;color: #717175 !important;font-family: 'Helvetica Neue', Helvetica, arial, sans-serif !important;z-index: 500 !important;}#popslide:before {content: '' !important;padding-bottom: 2px !important;border-bottom: 3px solid #dedfdf !important;width: 525px !important;height: 250px !important;display: block !important;position: absolute !important;z-index: -1 !important;border-radius: 3px !important;}#popslide .question {width: 200px !important;position: absolute !important;left: 25px !important;top: 25px !important;}#popslide h1 {font-size: 20px !important;font-weight: 500 !important;color: #545459 !important;}#popslide .question ul {list-style-type: none !important;padding-left: 10px !important;font-size: 13px !important;}#popslide .question ul li {margin-bottom: 6px !important;}#popslide .question input[type='button'] {background: #f12f09 !important;border: none !important;color: #fff !important;font-family: 'Helvetica Neue', Helvetica, arial, sans-serif !important;font-weight: 400 !important;font-size: 13px !important;border-radius: 3px !important;padding: 8px 20px !important;margin-top: 4px !important;margin-bottom: 5px !important;cursor: pointer !important;}#popslide .question ul li a {color: #4c8ae0 !important;font-size: 12px !important;}#popslide .question input[type='button']:hover {background: #d12200 !important;}#popslide .thumb {width: 250px !important;height: 200px !important;position: absolute !important;right: 30px !important;top: 25px !important;cursor: pointer !important;}#popslide #close {position: absolute !important;width: 20px !important;left: 6px !important;top: 6px !important;z-index: 600 !important;cursor: pointer !important;opacity:0.4 !important;filter:alpha(opacity=40) !important;}";
$('head').append('<style type="text/css">' + css + '</style>');
$('body').append(
    '<div id="popslide">'
  + '  <img src="close.png" id="close" />'
  + '  <div class="question">'
  + '    <h1>Was this cat drugged by the government?</h1>'
  + '    <ul>'
  + '      <li><input type="radio" name="vote" class="vote" id="vote1"> <label for="vote1">Probably</label></li>'
  + '      <li><input type="radio" name="vote" class="vote" id="vote2"> <label for="vote2">Yes</label></li>'
  + '      <li><input type="button" class="vote" value="Vote" id="vote3"></li>'
  + '      <li><a href="#" id="results">See results</a></li>'
  + '    </ul>'
  + '  </div>'
  + '  <img src="sail.gif" class="thumb" />'
  + '</div>'
  );
  document.getElementById('popslide').style.right = '-' + 540 + 'px'
  var right = -540
  function frame() {
    right += 10
    document.getElementById('popslide').style.right = right + 'px'
    if (right == -10) {
      clearInterval(id)
    }
  }
  var id = setInterval(frame, 10)
  $('#popslide .vote, #results, #popslide .thumb').click(function() {
    alert('BAM!');
  })
  $('#popslide #close').click(function() {
    $('#popslide').fadeOut();
  })
})($);

你可以只包含带有脚本标签的jquery，但是对于这种代码，你需要在尝试使用它之前检查jQuery是否已加载，如下所示：

(function(){  
  var c=location.protocol;
  var b=c+"//code.jquery.com/jquery-latest.js";
  var a=document.createElement("script");
  a.type="text/javascript";
  if( a.readyState ) {
    a.onreadystatechange = function() {
       if( a.readyState == 'loaded' || a.readyState == 'complete' ) {
          a.onreadystatechange = null;
          loaded();
          }
       };
    }
    else {
      a.onload = function() {
        loaded();
    };
  }
  a.src=b;
  document.getElementsByTagName("head")[0].appendChild(a);
})();
function loaded() {
    var jQuery = window.jQuery.noConflict( true );
    jQuery(document).ready(function($) {
        //use $ here for jQuery manipulations
    });
}
我现在

能想到的唯一方法（虽然不漂亮）是设置一个间隔（小间隔 - 100 毫秒左右）来检查是否存在$。如果存在，则清除间隔并调用函数。

此外，为了缩短加载时间，您可能希望使用jquery的缩小版本，因为它更小。代替//code.jquery.com/jquery-latest.js，使用//code.jquery.com/jquery-latest.min.js

相关文章：