jQuery Hello世界

Today we will look into jQuery Hello World program. In the earlier post, we discussed what is jQuery?. Here we will learn how to download and install it and then run a simple “jQuery Hello World” program.

今天，我们将研究jQuery Hello World程序。在之前的文章中，我们讨论了jQuery是什么？。在这里，我们将学习如何下载和安装它，然后运行一个简单的“ jQuery Hello World”程序。

下载jQuery (Download jQuery)

jQuery is a javascript library and comes in a single JS file, you can download it from jQuery Official Website. There are development and production versions, you can download any one of these to learn jQuery but in a production environment, you should use jQuery minified production version.

jQuery是一个javascript库，位于一个JS文件中，您可以从jQuery Official Website下载。有开发和生产版本，您可以下载其中的任何一个以学习jQuery，但是在生产环境中，您应该使用jQuery精简生产版本。

安装jQuery (Installing jQuery)

Once you have jQuery JS downloaded, you can use it in any HTML, JSP, PHP files by including it in the head section.

一旦下载了jQuery JS，您就可以在其头部将其包含在任何HTML，JSP，PHP文件中。

<script type="text/javascript" src="jquery-3.2.1.min.js"></script>

Note that the src path is relative here, in above case HTML and jQuery JS file should be in the same directory.

请注意，src路径是相对的，在上述情况下，HTML和jQuery JS文件应位于同一目录中。

jQuery Hello世界 (jQuery Hello World)

Here is our first HTML with jQuery hello world functionality.

这是我们第一个具有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>

When I open above HTML in a browser, here is what I get after clicking on the last line.

当我在浏览器中打开HTML上方时，这是单击最后一行后得到的内容。

jQuery函数说明 (jQuery Functions Explanation)

$(document).ready(function(){$("#msg").html("<strong>Hello World by JQuery</strong>");
});

$() is the syntax for jQuery function, here when DOM elements are ready or fully loaded, an element with id “msg” HTML is set by this function. Here we are using jQuery for manipulating the HTML data.

$（）是jQuery函数的语法，在此情况下，当DOM元素准备就绪或完全加载时，此函数将设置ID为“ msg” HTML的元素。在这里，我们使用jQuery来处理HTML数据。

$(document).ready(function() {$("#newdiv").click(function() {alert("Hello world!");});
});

Here we are using the mouse click event to show the alert for all the elements with id “newdiv”. That’s all for getting started with jQuery and jQuery hello world program.

在这里，我们使用鼠标单击事件来显示ID为“ newdiv”的所有元素的警报。这就是开始使用jQuery和jQuery hello world程序的全部。

翻译自: https://www.journaldev.com/887/jquery-hello-world

jQuery Hello世界相关推荐

ajax中的让渡,jQuery必须掌握的API
这次给大家带来jQuery必须掌握的API,使用jQuery必须掌握的API的注意事项有哪些,下面就是实战案例,一起来看一下. 其中包括jQuery 核心函数和方法.jQuery属性参考手册.jQue ...
jQuery框架学习第二天：jQuery中万能的选择器
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
从零开始学习jQuery (二) 万能的选择器
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
作为曾经的 Web 开发“王者”，jQuery 的传奇怎么续写？
作为世界上使用最广泛的JavaScript库,jQuery曾经帮助过一代开发人员创建了适用于每种浏览器的网站,可以说,Web开发之所以能有今天,jQuery可谓功不可没.但是随着新的库.框架和范例的不 ...
JQuery：视频+实战总结
[前言] 整理总结完CSS后,便一鼓作气进入JQuery的世界:由于有了js的基础,所以直接晋级JQuery实战.早就听闻大名鼎鼎的JQuery,这次领教后果然名不虚传. [菜鸟初始JQuery] · ...
jquery获取img的src值_JQuery
JQuery 主要内容 Jquery对象 jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少,做得更多,使用 jQuery 将极大的提高编写 javascrip ...
[乐意黎转载]从零开始学习jQuery (二) 万能的选择器
一.摘要本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显减轻开发人员的工作量. 二.前言编写任何javascript程 ...
jQuery 从零开始学习 (二) 选择器
一.摘要本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显减轻开发人员的工作量. 二.前言编写任何javascript程 ...
jQuery (JavaScript 脚本库)
jQuery 简介: 是一套兼容多浏览器的 javascript 脚本库. jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,由 Dave Meth ...