jQuery Hello World
时间：2020-02-23 14:46:09 来源:igfitidea点击:
今天，我们将研究jQuery Hello World程序。
在之前的文章中，我们讨论了jQuery？其中我们将学习如何下载和安装它，然后运行一个简单的" jQuery Hello World"程序。
下载jQuery
jQuery是一个javascript库，位于一个JS文件中，您可以从jQuery Official Website下载。
有开发和生产版本，您可以下载其中的任何一个以学习jQuery，但是在生产环境中，您应该使用jQuery精简生产版本。
安装jQuery
一旦下载了jQuery JS，就可以在其头部将其包含在任何HTML，JSP，PHP文件中。
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
请注意，src路径是相对的，在上述情况下，HTML和jQuery JS文件应位于同一目录中。
jQuery Hello World
这是我们第一个具有jQuery hello world功能HTML。
<html>
<head>
<title>My First jQuery Example</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#msg").html("<h2>jQuery Hello World</h2>");
});
$(document).ready(function() {
$("#newdiv").click(function() {
alert("Hello world!");
});
});
</script>
</head>
<body>
<p>This is Hello World by HTML</p>
<div id="msg">
</div>
<br
<div id="newdiv">
Click on this to see a dialogue box.
</div>
</body>
</html>
当我在浏览器中打开HTML上方时，这是单击最后一行后得到的内容。
jQuery函数说明
$(document).ready(function(){
$("#msg").html("Hello World by JQuery");
});
$()是jQuery函数的语法，在此情况下，当DOM元素准备就绪或者完全加载时，此函数将设置ID为" msg" HTML的元素。
其中我们使用jQuery来处理HTML数据。
$(document).ready(function() {
$("#newdiv").click(function() {
alert("Hello world!");
});
});
其中我们使用鼠标单击事件来显示ID为" newdiv"的所有元素的警报。
