赵走x博客 - 开发者的网上家园

14、jQuery 和 Django

资源编号:76321 Tango with Django Python Web 热度：98

jQuery 是个优秀的 JavaScript 库，免除了很多痛苦。几行 jQuery 代码往往能封装几百行纯 JavaScript 代码。而且，jQuery 提供了一整套处理 HTML 元素的功能。

本章将讨论：

❏ 如何在 Django 应用中使用 jQuery；

❏ 如何理解 jQuery 代码；

❏ 提供一些简单的示例。

# 15.1 在 Django 项目/应用中使用 jQuery

在基模板中添加下述代码：
```
{% load staticfiles %} 
<script src="https://cdn.staticfile.org/jquery/3.0.0/jquery.min.js" > </script> 
<script src="{% static "js/rango-jquery.js" %}"></script>
```
如果你自己下载了 jQuery，保存在静态文件目录中，那就添加下述代码：
```
<script src="{% static "js/jquery.min.js" %}"></script> 
<script src="{% static "js/rango-jquery.js" %}"></script>
```
确保你设定了静态文件相关的设置（参见第 4 章）。

在 static 目录中新建 js 目录，把你下载的 jQuery 脚本文件（jquery.min.js）保存在这里。另外，在 这个目录中新建一个文件，命名为 rango-jquery.js。我们自己编写的 JavaScript 代码保存在这个文 件中。打开 rango-jquery.js，写入下述 JavaScript 代码：
```
$(document).ready(function() { // jQuery 代码写在这里
});
```
这段代码使用 jQuery 选择文档对象（$(document)），然后调用 ready() 函数。浏览器准备好文档 之后（页面完全加载了），执行 function() { } 表示的匿名函数。通常都会等到文档加载完毕才 执行 jQuery 函数。否则，执行代码之前，相应的 HTML 元素可能尚未加载。详情参见 jQuery 文 档。

>★ “选择后执行”模式 ★
jQuery 代码更偏向函数式编程风格，而纯 JavaScript 代码通常采用过程式编程风格。jQuery 代码遵循的模式是“选择后执行”：先选择一个元素，然后对其执行某种操作。

### 示例：点击后弹出对话框

下面举个例子，使用标准的 JavaScript 和 jQuery 分别实现相同的功能，让你一窥二者之间的差 异。在 about.html 模板中添加下述代码：
```
<button class="btn btn-primary" onClick="alert('You clicked the button using JavaScript.');"> 
Click Me - I run JavaScript
</button>
```
可以看到，我们把 alert() 函数赋值给按钮的 onClick 属性。访问关于页面，试试效果。

下面使用 jQuery 实现同样的功能。在 about.html 模板中再添加一个按钮：
```
<button class="btn btn-primary" id="about-btn"> 
Click Me - I'm JavaScript on Speed
</button>
```
注意，现在按钮上没有任何 JavaScript 代码。相应的代码写在 rango-jquery.js 文件中：
```
$(document).ready( function() { 
		$("#about-btn").click( function(event) { 
				alert("You clicked the button using jQuery!"); 
				}); 
		});
```
刷新页面，看看效果。理论上点击两个按钮后都会弹出对话框。

这段 jQuery 代码先选择文档对象，在文档准备好之后执行其中的函数，即
```
$("#about-btn").click()
```
这部分代码从页面中选择 id 为 about-btn 的元素，然后以编程的方式 把 alert() 函数赋予 click 事件。

一开始你可能会觉得 jQuery 有些麻烦，毕竟做到同一件事，编写的 jQuery 代码多很多。对 alert() 这样的简单函数来说，确实如此。但是实现复杂的功能时，使用 jQuery 更方便，因为 JavaScript 代码在单独的文件中。jQuery 在运行时赋予事件句柄，实现了关注点分离，即把 jQuery/JavaScript 代码与 HTML 标记解耦了。

### 选择符

jQuery 提供了多种选择元素的方式。前例展示了如何使用 # 选择符在 HTML 文档中查找特定 ID 的元素。如果想查找类，使用 . 选择符，例如：
```
$(".ouch").click( function(event) {
	alert("You clicked me! ouch!"); 
	});
```
此时，文档中 class 属性为 "ouch" 的所有元素都被选中，把点击句柄设为 alert() 函数。注意， 所有被选中的元素都被赋予了同一个函数。

此外，还可以通过标签名选择 HTML 元素：
```
$("p").hover( function() { 
	$(this).css('color', 'red'); }, function() {
	$(this).css('color', 'blue'); });
```
把这段 JavaScript 代码添加到 rango-jquery.js 文件中，然后在 about.html 模板中添加一个段落， `<p>This text is for a JQuery Example</p>`。刷新关于页面，把鼠标悬停在那个段落上看看效 果。

这里，我们选择所有 HTML p 元素，并为悬停事件关联了两个函数，一个在鼠标移到元素上时执 行，另一个在鼠标从元素上移开时执行。可以看到，这里用到了另一个选择符，即 this。这个选 择符表示当前选中的元素。注意，jQuery 的 hover() 函数接受两个函数。

上述代码要添加到 $(document).ready() 函数中。如果把 $(this) 改成 $(p)，情况如何？

悬停是一种鼠标移动事件。其他鼠标移动事件的说明参见[ jQuery API 文档](http://api.jquery.com/category/events/mouse-events/ " jQuery API 文档")。

# 15.2 示例：操纵 DOM

在前例中，我们使用 hover() 函数为悬停事件指定处理句柄，然后使用 css() 函数修改元素的颜 色。css() 函数用于操纵 DOM，除此之外 jQuery 库提供了很多这样的函数。例如，可以使用 addClass() 函数为元素添加类：
```
$("#about-btn").addClass('btn btn-primary');
```
这行代码选择 ID 为 about-btn 的元素，为其添加 btn 和 btn-primary 两个类。

还可以访问某个元素内部的 HTML。把下述 div 元素添加到 about.html 模板中：
```
<div id="msg">Hello - I'm here for a JQuery Example too</div>
```
然后在 rango-jquery.js 中添加下述 JavaScript 代码：
```
$("#about-btn").click( function(event) { 
		msgstr = $("#msg").html() 
		msgstr = msgstr + "ooo" 
		$("#msg").html(msgstr) 
		});
```
点击 ID 为 about-btn 的元素后，先获取 ID 为 msg 的元素中的内容，在后面追加 "ooo" 之后，再 次调用 html() 函数，传入修改后的内容，替换元素中现有的 HTML。

本章简单介绍了如何在 Django 应用中使用 jQuery，还举例说明了 jQuery 的用法。下一章将使用 jQuery 为 Rango 应用添加 Ajax 功能。