jQuery-入门
这是有关jQuery JavaScript库的入门教程。
DOM
DOM或者文档对象模型是HTML的编程接口，它以树形结构表示文档，并提供允许我们在页面中添加，编辑，获取和删除内容的方法。
考虑以下HTML文件。
<!DOCTYPE html> <html> <head> <title>Getting Started</title> </head> <body> <p>Hello World</p> </body> </html>
因此，我们体内有一段。
DOM表示如下。
当页面在浏览器中加载时，将创建上述DOM。
每个框代表一个节点。
因此，我们有DOCUMENT节点，并且它有一个子节点html。
在html节点下，我们有head节点。
在标题下方，我们有一个标题节点，其中有一个文本节点入门。
另外，在html节点下，我们有body节点。
在主体下，我们有一个p段落节点，其中有一个文本节点Hello World。
节点类型
我们可以有三种类型的节点。
- 子节点
- 父节点
- 兄弟节点
作为任何其他节点的直接后代的节点称为子节点。
在上图中，我们可以很容易地说主体节点是子节点，因为它是html节点的直接后代。
具有直接后代的节点称为父节点。
在上图中，html节点是父节点，因为它具有直接后代(主体节点)。
共享同一父节点的节点称为同级节点。
在上图中，我们可以说主体节点和头节点是同级节点，因为它们共享同一个父html节点。
包含jQuery
为了避免延迟内容加载，一个好的做法是在结束body标签之前在末尾包含JavaScript和jQuery文件。
$符号
在我们HTML页面中包含jQuery文件之后，我们得到一个$符号。
这是jQuery简写形式。
DOM准备就绪后运行jQuery
当我们请求页面时，服务器发送HTML响应，然后浏览器将其用于构建DOM。
当DOM完成时，会触发一个事件，以表明它已准备就绪。
我们可以使用jQuery监听此ready事件，并且仅在此事件之后运行我们的jQuery代码。
document
"document"包含对给定页面中所有HTML元素的引用。
为了获得文档，我们编写以下代码。
$(document);
document准备事件
为了检查文档的ready事件，我们使用" ready"方法。
$(document).ready();
" ready"方法具有仅在ready事件触发后才执行的函数。
$(document).ready(function(){
//your code goes here...
//this is executed after the ready event is fired
});
代码示例
项目结构
可以说，getting-started.html文件中包含以下HTML代码。
<!DOCTYPE html> <html> <head> <title>Getting Started</title> </head> <body> <!-- script --> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/app.js"></script> </body> </html>
我们在js文件夹中包含了app.js文件。
它包含以下代码。
$(document).ready(function(){
$("body").prepend("<p>Hello World</p>");
});
上面的代码将创建一个具有" Hello World"内容的p元素。
