在.js中包含jquery脚本页面

Question

对不起，如果标题不太清楚，但我认为它是正确的。不过，我想要做的有点像（在某种程度上）用JQuery（pref）构建一个小部件，PHP & CSS。

我真的很希望发生的事情是我网站的“成员”只需在他们的HTML中粘贴2行代码来加载小部件。事情是这样的：

<script type="text/javascript" src="http://www.mydomain.com/script.js"></script> 

然后显示控件像这样<div id="displaywidget"></div>

确定该位是“容易”和确定。但我怎么包括jQuery或“东西”来生成在script.js的小部件

我的意思是“displaywidget” - 小部件div的ID将是我的服务器上的PHP文件的名称，基本上是脚本.js将需要将displaywidget.php加载到div displaywidget中。

我想我使用document.getElementById('displaywidget')获得div，但是如何在div中写入/插入/加载displaywidget.php？

思考我写的“纯”java可以做“我想要的大部分，即document.getElementById('displaywidget')，但我更愿意”包括“Jquery.js，因为我希望小部件的某些方面使用JQuery。 JQuery UI日期函数

对不起，如果我漫不经心，但试图思考，因为我一直沿着我的“真正的”问题是我不太确定“纯”的JavaScript即获得div显示/加载displaywidget.php

建议请（哦，如果我找错了树，请随时告诉我 - 很好:)）。

在此先感谢

Answer 1

多一点 “拖网&认为” 我发现这个代码后：

(function() { 
// Localize jQuery variable 
var jQuery; 
/******** Load jQuery if not present *********/ 
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') { 
var script_tag = document.createElement('script'); 
script_tag.setAttribute("type","text/javascript"); 
script_tag.setAttribute("src","http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"); 
script_tag.onload = scriptLoadHandler; 
script_tag.onreadystatechange = function() { // Same thing but for IE 
if (this.readyState == 'complete' || this.readyState == 'loaded') { 
scriptLoadHandler(); 
} 
}; 
// Try to find the head, otherwise default to the documentElement 
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); 
} else { 
// The jQuery version on the window is the one we want to use 
jQuery = window.jQuery; 
main(); 
} 
/******** Called once jQuery has loaded ******/ 
function scriptLoadHandler() { 
// Restore $ and window.jQuery to their previous values and store the 
// new jQuery in our local jQuery variable 
jQuery = window.jQuery.noConflict(true); 
// Call our main function 
main(); 
} 
/******** Our main function ********/ 
function main() { 
jQuery(document).ready(function($) { 
******* Load CSS *******/ 
var css_link = $("<link>", { 
rel: "stylesheet", 
type: "text/css", 
href: "style.css" 
}); 
css_link.appendTo('head');   

/******* Load HTML *******/ 
var jsonp_url = "http://al.smeuh.org/cgi-bin/webwidget_tutorial.py?callback=?"; 
$.getJSON(jsonp_url, function(data) { 
$('#example-widget-container').html("This data comes from another server: " + data.html); 
}); 
}); 
} 
})(); // We call our anonymous function immediately 

writtend由Alex Marandon，发现这里http://alexmarandon.com/articles/web_widget_jquery/ - 作品，正是我想要的，包括/将JQuery安装到.js文件中

Answer 2

我想我使用document.getElementById（'displaywidget'）来获取div，但是如何在div中写入/插入/加载displaywidget.php？

您正在寻找jQuery中的AJAX行为，它会调用php页面，然后将数据推送到div中。

你应该在这个过程的早期加载jQuery，就在你的head元素的前面。一旦它被加载，它将被缓存，所以不用担心它在每个页面上。没有真正的开销发生。

一旦安装了jQuery，您可以调用与获取数据和流行元素相关的许多AJAX函数之一。 Theres $ .load（），$ .ajax（）和其他一些可以逃脱我的东西，除非我去看看他们的文档部分。

你可以在没有jQuery的情况下完成所有这些工作，但是它的代码更多，你必须控制浏览器的差异。

Answer 3

您可以将jquery加载到script.js中，只需将它复制并粘贴到script.js中的任何javascript之前或之后即可。

所以，如果脚本。JS是：

//start of file 
alert('ex'); 
//end of file 

让它：

//start of file 
alert('ex') 
Copy and pasted Jquery source 
//end of file