针对 jQuery 遍历的知识点，以下是一些实操练习题：

### jQuery 祖先
**练习题**：
1. 编写一个 jQuery 脚本，当用户点击页面上的任意一个 `<input>` 元素时，找到该元素最近的 `<div>` 祖先，并改变其背景颜色。
2. 创建一个函数，该函数接受一个选择器作为参数，返回该选择器下第一个元素的所有祖先元素的集合。

### jQuery 后代
**练习题**：
1. 编写一个脚本，当用户点击页面上的任意一个 `<div>` 元素时，找到该 `<div>` 元素下所有的 `<span>` 后代元素，并为它们添加一个类 "highlight"。
2. 设计一个功能，允许用户点击一个按钮，然后获取页面上某个特定元素下所有后代的文本内容，并显示在一个列表中。

### jQuery 同胞
**练习题**：
1. 编写一个脚本，当用户点击页面上的一个 `<li>` 元素时，找到该元素的所有同胞 `<li>` 元素，并为它们添加一个边框。
2. 创建一个函数，该函数接受一个选择器和一个索引作为参数，返回该选择器下指定索引元素的所有同胞元素。

### jQuery 过滤
**练习题**：
1. 编写一个脚本，选择页面上所有的 `<button>` 元素，然后过滤出那些包含 "Delete" 文本的按钮，并为它们添加一个点击事件监听器，当点击时执行特定操作。
2. 设计一个功能，允许用户输入一个类名，然后过滤页面上所有具有该类名的元素，并返回它们的集合。

### 综合练习
1. **动态列表操作**：创建一个动态列表，用户可以添加和删除列表项。使用 jQuery 的遍历方法来管理列表项的添加和删除。
2. **元素属性过滤**：设计一个功能，允许用户根据元素的特定属性（如 `data-*` 属性）来过滤页面上的元素，并执行操作，如更改样式或删除元素。
3. **导航菜单**：构建一个简单的导航菜单，使用 jQuery 的遍历方法来处理菜单项的点击事件，实现展开和折叠子菜单的功能。

通过完成这些练习题，你将能够掌握 jQuery 在 DOM 遍历方面的各种方法，提高你在实际项目中对 DOM 操作的熟练度和灵活性。

10.5 jQuery的遍历练习

以下是针对 jQuery 的 HTML 操作知识点的一些实操练习题：

### jQuery 捕获
**练习题**：
1. 编写一个 jQuery 脚本，捕获页面中所有 `<li>` 元素的文本内容，并将其显示在一个 `<div>` 中。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/1e77428641a65aa4cc5de7e08fb94d95.image.webp)
3. 创建一个函数，该函数接受一个选择器作为参数，并返回该选择器下第一个元素的 HTML 内容。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/1740e7d698c29571acdedb78aa84eb0f.image.webp)
### jQuery 设置
**练习题**：
1. 使用 `.html()` 方法，将一个新段落 `<p>` 的内容设置为 "Hello, jQuery!"。
2. 编写一个函数，该函数接受两个参数：选择器和新的 HTML 内容，然后更新匹配元素的内容。

### jQuery 添加元素
**练习题**：
1. 创建一个按钮，当点击时，向页面中的特定 `<div>` 添加一个新的 `<li>` 元素。
2. 编写一个函数，该函数接受一个父元素选择器和一个 HTML 字符串作为参数，并在父元素中添加这个 HTML。

### jQuery 删除元素
**练习题**：
1. 添加一个按钮，点击时删除页面上所有具有特定类名的元素。
2. 设计一个功能，允许用户点击一个按钮来删除页面上最后一个 `<li>` 元素。

### jQuery CSS 类
**练习题**：
1. 编写一个 jQuery 脚本，为页面上所有偶数 `<li>` 元素添加一个类 "even-item"。
2. 创建一个按钮，点击时切换页面上一个特定元素的 "active" 类。

### jQuery css() 方法
**练习题**：
1. 使用 `.css()` 方法，改变页面上所有 `<input>` 元素的背景颜色为黄色。
2. 编写一个函数，该函数接受一个选择器、一个 CSS 属性名和一个属性值作为参数，并应用这些样式到匹配的元素上。

### jQuery 尺寸
**练习题**：
1. 显示页面上最大的 `<div>` 的宽度和高度。
2. 创建一个函数，该函数接受一个选择器作为参数，并返回该选择器下第一个元素的宽度和高度。

### 综合练习
1. **动态内容更新**：创建一个动态更新内容的功能，用户可以通过输入框输入文本，并点击按钮将其添加到页面上的一个列表中。
2. **元素样式动态更改**：设计一个功能，用户可以通过选择不同的选项来动态更改页面上元素的样式，如颜色、边框等。
3. **DOM 操作与动画结合**：结合 DOM 操作和动画效果，创建一个功能，当用户点击一个按钮时，一个新的列表项从右侧滑入到列表中，并带有淡入效果。

通过完成这些练习题，你将能够更深入地理解 jQuery 的 HTML 操作方法，并且能够更熟练地在项目中应用这些技术。

10.4 jQuery的HTML练习

以下是一些针对 jQuery 效果操作的实操练习题：

### jQuery 隐藏/显示
**练习题**：
1. 创建一个按钮，当点击时，隐藏页面上的一个具有特定 ID 的元素。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/273cf618621e6cd41525da3f57ea5b53.image.webp)
3. 编写一个函数，该函数接受一个元素的 ID 作为参数，并显示或隐藏该元素，取决于其当前状态。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/08fbcd504f9f64795ef678e5a3787a32.image.webp)

### jQuery 淡入淡出
**练习题**：
1. 制作一个淡入效果，当页面加载完成后，一个隐藏的元素逐渐变得可见。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/57f6d6c7ae97f8d39f6a199014ae6b02.image.webp)
3. 创建一个淡出效果，当用户点击一个按钮时，页面上的一个元素逐渐消失。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/1a827aba5f24f289f7006dafd3fa010c.image.webp)

### jQuery 滑动
**练习题**：
1. 编写一个 jQuery 脚本，当用户将鼠标悬停在一个元素上时，该元素向上滑动出现。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/983ead44680937382668548e8b8e58e1.image.webp)
3. 设计一个滑动效果，当用户点击一个按钮时，页面上的一个元素向下滑动并隐藏。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/fdf19cb6cb2724b98ef732ae3ed85fd8.image.webp)

### jQuery 动画
**练习题**：
1. 使用 `.animate()` 方法创建一个动画，使一个元素在水平方向上移动 100 像素。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/549b72ef695595d0a37170e3da731ac9.image.webp)
3. 设计一个动画序列，一个元素先放大，然后缩小，最后移动到页面的另一位置。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/0bab9bc6b9cf6b9f41b25e6a2ac8fc11.image.webp)



### jQuery 停止动画
**练习题**：
1. 创建一个动画，使一个元素在 2 秒内淡出，然后立即停止并显示该元素。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/de3f5d6dbb6c1895b23fd8c09a1900c5.image.webp)
3. 实现一个功能，用户可以点击一个按钮来停止当前正在播放的所有动画。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/4867bd0cc9b402f87a8fcc0d103e5b13.image.webp)
### jQuery Callback
**练习题**：
1. 使用回调函数，在元素淡入完成后，弹出一个包含 "Fade In Complete!" 的警告框。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/a4f0023c06af3e4e0ae8fd96b279b4ef.image.webp)
3. 编写一个函数，该函数在动画完成后执行另一个指定的函数。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/160c01fa522bc4a77b3d2909085aef15.image.webp)
### jQuery 链
**练习题**：
1. 编写一个 jQuery 链，先对一个元素添加一个边框，再淡出，然后淡入。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/99416b4a3924717d0436ee214f0bed3a.image.webp)

2. 设计一个链式调用，先使一个元素淡入，然后向上滑动，再向下滑出

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/7f15bd8f2e95aa9157c1b63dde3fc1d3.image.webp)
### 综合练习
1. **动画序列**：创建一个动画序列，其中包含淡入、滑动和动画效果，每个效果之间有短暂的延迟。
2. **交互式动画**：设计一个交互式动画，用户可以通过按钮控制动画的播放、暂停和停止。
3. **动态内容加载**：结合 Ajax 和动画，当用户点击一个链接时，从服务器加载内容，并以动画形式展示。

这些练习题将帮助你深入理解和实践 jQuery 的效果操作，通过编写实际的代码来加深对 jQuery 动画和效果的理解。

这些练习题涉及到的 jQuery 知识点主要包括：

1. **选择器（Selectors）**：用于选取页面上的元素。
   - `$('#elementId')`：通过 ID 选择元素。

2. **事件处理（Event Handling）**：
   - `.click()`：绑定点击事件。
   - `.ready()`：确保在文档加载完成后执行代码。

3. **效果（Effects）**：
   - `.hide()`：隐藏元素。
   - `.show()`：显示元素。
   - `.fadeIn()`：淡入效果，使隐藏的元素逐渐变得可见。
   - `.fadeOut()`：淡出效果，使元素逐渐消失。

4. **函数（Functions）**：
   - 编写自定义函数，接受参数，并根据条件执行操作。

5. **链式调用（Chaining）**：jQuery 允许你在一行代码中对同一个元素执行多个操作。

6. **动画队列（Animation Queue）**：控制动画的执行顺序。

下面是针对每个练习题的 jQuery 代码示例：

**隐藏/显示练习题示例代码：**

```javascript
// 创建一个按钮，点击时隐藏具有特定 ID 的元素
$('#myButton').click(function() {
  $('#myElement').hide(); // 隐藏元素
});

// 编写一个函数，接受一个元素的 ID 作为参数，并显示或隐藏该元素
function toggleVisibility(elementId) {
  $('#' + elementId).toggle(); // 切换元素的显示状态
}
```

**淡入淡出练习题示例代码：**

```javascript
// 制作一个淡入效果，页面加载完成后，隐藏的元素逐渐变得可见
$(document).ready(function() {
  $('#hiddenElement').fadeIn(); // 淡入效果
});

// 创建一个淡出效果，点击按钮时，页面上的一个元素逐渐消失
$('#myButton').click(function() {
  $('#visibleElement').fadeOut(); // 淡出效果
});
```

这些代码示例展示了如何使用 jQuery 来实现题目中的要求。在实际应用中，你可能需要根据具体的 HTML 结构和需求来调整选择器和事件处理逻辑。



这些练习题涉及到的 jQuery 知识点主要包括：

1. **滑动效果（Sliding）**：
   - `.slideUp()`：元素向上滑动并隐藏。
   - `.slideDown()`：元素向下滑动并显示。

2. **动画（Animation）**：
   - `.animate()`：创建自定义动画效果。

3. **停止动画（Stopping Animations）**：
   - `.stop()`：停止当前动画效果。

4. **事件绑定（Event Binding）**：
   - `.hover()`：绑定鼠标悬停事件。
   - `.click()`：绑定点击事件。

5. **动画队列控制**：
   - `.stop(true, true)`：停止动画，`true` 参数表示立即完成当前动画，第二个 `true` 参数表示清除动画队列。

下面是针对每个练习题的 jQuery 代码示例：

**滑动练习题示例代码：**

```javascript
// 当用户将鼠标悬停在一个元素上时，该元素向上滑动出现
$('#myElement').hover(function() {
  $(this).slideUp(); // 向上滑动隐藏
}, function() {
  $(this).slideDown(); // 向下滑动显示
});

// 当用户点击一个按钮时，页面上的一个元素向下滑动并隐藏
$('#myButton').click(function() {
  $('#myElement').slideUp(); // 向下滑动隐藏
});
```

**动画练习题示例代码：**

```javascript
// 使用 .animate() 方法创建一个动画，使一个元素在水平方向上移动 100 像素
$('#myElement').animate({
  left: '+=100px'
}, 500); // 动画持续时间 500 毫秒

// 设计一个动画序列，一个元素先放大，然后缩小，最后移动到页面的另一位置
$('#myElement').animate({
  height: '+=50px', // 放大高度
  width: '+=50px'   // 放大宽度
}, 500).animate({
  height: '-=50px', // 缩小高度
  width: '-=50px'   // 缩小宽度
}, 500).animate({
  left: '+=100px'   // 水平移动
}, 500);
```

**停止动画练习题示例代码：**

```javascript
// 创建一个动画，使一个元素在 2 秒内淡出，然后立即停止并显示该元素
$('#myElement').fadeOut(2000).stop(true, true).show();

// 实现一个功能，用户可以点击一个按钮来停止当前正在播放的所有动画
$('#stopButton').click(function() {
  $('.animatedElement').stop(true, true); // 停止所有动画
});
```

在实际应用中，你需要根据具体的 HTML 结构和需求来调整选择器和事件处理逻辑。这些示例代码提供了基本的框架，可以根据需要进行扩展和修改。


这些练习题涉及到的 jQuery 知识点主要包括：

1. **回调函数（Callbacks）**：
   - 回调函数是在 jQuery 效果完成后执行的函数。

2. **链式调用（Chaining）**：
   - 通过链式调用，可以在一行代码中对同一个元素执行多个操作。

3. **动画和效果（Animations and Effects）**：
   - `fadeIn()`：淡入效果。
   - `stop()`：停止动画。
   - `show()`：显示元素。
   - `animate()`：自定义动画。

4. **警告框（Alerts）**：
   - `alert()`：弹出包含指定消息的警告框。

下面是针对每个练习题的 jQuery 代码示例：

**回调函数练习题示例代码：**

```javascript
// 使用回调函数，在元素淡入完成后弹出警告框
$('#myElement').fadeIn(function() {
  alert('Fade In Complete!'); // 淡入完成后执行
});

// 编写一个函数，在动画完成后执行另一个指定的函数
function performAfterAnimation(element, animation, callback) {
  $(element)[animation](function() {
    callback(); // 动画完成后执行回调函数
  });
}

// 示例使用
performAfterAnimation('#myElement', 'fadeIn', function() {
  alert('Another Animation Complete!');
});
```

**链式调用练习题示例代码：**

```javascript
// 编写一个 jQuery 链，先隐藏一个元素，然后立即显示它，并在最后添加一个边框
$('#myElement').hide().show().css('border', '1px solid black');

// 设计一个链式调用，先使一个元素淡入，然后停止淡入动画，并立即淡出
$('#myElement').fadeIn().stop().fadeOut();
```

在实际应用中，你可能需要根据具体的 HTML 结构和需求来调整选择器和事件处理逻辑。这些示例代码提供了基本的框架，可以根据需要进行扩展和修改。

10.3 jQuery效果练习

以下是一些基于 jQuery 的基础知识点的案例操作练习题：

### jQuery 简介
**练习题**：
1. 研究 jQuery 的历史和它如何改变了前端开发。
2. 列出至少三个使用 jQuery 的好处。

### jQuery 安装
**练习题**：
1. 描述如何通过 CDN 在 HTML 页面中引入 jQuery。
2. 解释为什么使用 CDN 引入 jQuery 可能是一个好主意。

### jQuery 语法
**练习题**：
1. 编写一个 jQuery 函数，该函数在页面加载完成后，将页面的背景颜色更改为蓝色。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/892cee54f56f9c26a9d6b464e8260640.image.webp)

3. 使用 jQuery 的 `$(document).ready()` 函数，创建一个点击事件监听器，当用户点击页面时，弹出一个包含 "Hello, World!" 的警告框。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/5ac62e3672f6bd2c0feb99ddbc78eb57.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/8b74d0889d562e99bdc12801b831c01e.image.webp)

### jQuery 选择器
**练习题**：
1. 假设有一个 HTML 页面，其中包含一个具有 id="myDiv" 的 `<div>` 元素。编写一个 jQuery 脚本，选择这个元素并添加一个类 "highlight"。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/f89b1e548a9bae573f7c4ecd58d269bd.image.webp)

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/c295e46cca223412a3aa9530210fa09b.image.webp)

3. 编写一个 jQuery 脚本来选择页面中所有的 `<input>` 元素，并为它们设置一个 placeholder 属性为 "Enter your name"。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/edfcc65bedaa35ce9f427c510da63502.image.webp)

### jQuery 事件
**练习题**：
1. 创建一个 HTML 页面，其中包含一个按钮元素。使用 jQuery 为这个按钮添加一个点击事件，当按钮被点击时，按钮的文本更改为 "Clicked!"。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/2b220715640775799c6de8f9a77c5308.image.webp)


3. 设计一个简单的表单，包含一个输入框和一个提交按钮。使用 jQuery 来阻止表单的默认提交行为，并在用户提交表单时，显示输入框中的内容在一个 `<div>` 中。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/b180cc7359c6063157be2abfcc6affc8.image.webp)

### 额外的练习题
1. **动画效果**：编写一个 jQuery 脚本来使一个元素在被鼠标悬停时淡入。
2. **Ajax 请求**：创建一个简单的 jQuery Ajax 请求，当用户点击一个按钮时，从服务器获取数据并将其显示在页面上。
3. **表单验证**：使用 jQuery 来验证一个表单输入是否为空，如果是，则显示一个错误消息。
4. **插件使用**：集成一个 jQuery 插件，如 jQuery UI 的日期选择器，到你的项目中，并使用它来增强表单输入。

这些练习题旨在帮助你实践 jQuery 的基础知识，并逐步提高你的技能。通过完成这些任务，你将能够更好地理解 jQuery 的工作原理以及如何在你的项目中有效地使用它。

10.2 jQuery基础练习

首先在content文件夹下有一个content3.xml文件，里面保存了学生的基本信息。

现要求通过AJAX技术的方式，异步获取学生的这些信息，将展示在html网页中。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/b1bf76e4e1777aa3b39f186105884251.image.webp)

可以通过以下步骤来实现

# 1.写出html框架

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/ccdee74aa7d4e18ad6c7239bf4b1a76c.image.webp)



# 2.调整css格式

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/0e2069d1342ca66ed63e74854cc38602.image.webp)

达到效果图如下

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/b67b526f6f1d9dccb3f8e41184904a39.image.webp)

# 3.通过JavaScript的AJAX技术，将xml的数据添加到table中

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/dddcb48882c340968aaca96c3af77022.image.webp)

最后效果图

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/c0636affd5ca96cee8122fe8b69be828.image.webp)
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息</title>
    <style>
        div a{
            width: 100%;
        }
        div{
            text-align: center;
            width: 600px;
            height: auto;
            margin: 0 auto;
        }
        div table{
            width: 100%;
        }
        div tr{
            line-height: 30px;
        }
        div td{
            border-bottom:1px solid blue ;
        }
    </style>
</head>
<body>
    <div>
        <a href="content/content3.xml">获得用户信息</a>
        <hr>
        <table>
            <tr><td>编号</td><td>姓名</td><td>性别</td><td>年龄</td><td>住址</td><td>爱好</td></tr>
            <tbody id="table">
                <tr><td></td><td></td><td></td><td></td><td></td></tr>
            </tbody>
        </table>
    </div>
    <script>
        window.onload=function(){
            document.getElementsByTagName("a")[0].onclick=function(){
                var xhr = new XMLHttpRequest();
                var url=this.href;
                xhr.open("get",url,true);
                xhr.send(null);
                console.log(url);
                xhr.onreadystatechange = function(){
                    if(xhr.readyState==4&&xhr.status==200){
                        var result = xhr.responseXML;
                        console.log(result);
                        var users = result.getElementsByTagName("users")[0].getElementsByTagName("user");
                        console.log(users);
                        var html="";
                        for(var i=0;i<users.length;i++){
                            var user=users[i];
                            var id=user.getElementsByTagName("id")[0].textContent;
                            var name=user.getElementsByTagName("name")[0].textContent;
                            var gender=user.getElementsByTagName("gender")[0].textContent;
                            var age=user.getElementsByTagName("age")[0].textContent;
                            var address=user.getElementsByTagName("address")[0].textContent;
                            var hobby=user.getElementsByTagName("hobby")[0].textContent;
                            var newHtml = "<tr><td>"+id+"</td><td>"+name+"</td><td>"+gender
                                +"</td><td>"+age+"</td><td>"+address+"</td><td>"+hobby+"</td></tr>";
                            console.log(newHtml);
                            html+=newHtml;
                        }
                    }
                    document.getElementById("table").innerHTML= html;
                }
                return false;
            }
        }
    </script>
</body>
</html>
```