JavaWeb学习------jQuery

Dear 丶 2024-03-22 11:04 64阅读 0赞

## JavaWeb学习------jQuery ##

### jQuery函数库下载 ###

1.  **jQuery函数库下载官网：**[Download jQuery | jQuery][Download jQuery _ jQuery]
2.  **配套资料，免费下载**

链接：https://pan.baidu.com/s/1aXBfItEYG4uM53u6PUEMTg

提取码：6c9i

*  然后下载？

1.  来到官网，有两种jQuery可以下载，一种是压缩版的，另一种是没有压缩的 ，建议两个都下载下来，没有压缩版本的可以看源码。

![851ee11e79eb4c5da2b8474e762e9d96.png][]

2.按照下图：

![8b08d55bb0b74bddb0bc4b04c95b6a03.png][]

3.下载到对应的文件夹上即可

![65950beb7fa74b10bc0243b0e6619378.png][]

4.打开没有压缩版的：【可以看到源码：1万多行代码】

![cabebc96691a45d1a344d6600b846493.png][]

压缩版的：【2行代码】

![699d8f82b2b3403583cc2d8f206f0473.png][]

--------------------

## 第一章 [jQuery][]简介 ##

### 1.1、jQuery简介 ###

jQuery 是一个开源框架，是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。目前超过90%的网站都使用了jQuery库，jQuery的宗旨：写的更少，做得更多！

### 1.2、jQuery版本介绍 ###

*  **1.x**
    
     *  兼容老版本IE
     *  文件较大，但兼容性最好
 *  **2.x**
    
     *  部分IE8及以下版本不支持
     *  文件较小，执行效率更高
 *  **3.x**
    
     *  完全不再支持IE8及以下版本
     *  提供了一些新的API
     *  提供不包含AJAX/动画API的版本
     *  （本教程所采用）

### 1.3、jQuery引入方式 ###

*  本地引入：将jQuery下载下来，然后导入项目中，使用script标签进行引用

*  CDN引入：使用远程CDN资源库在线引入，避免了文件下载

### 1.4、jQuery快速使用 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery</title>
     <script src="jquery-3.6.4.min.js"></script>
    </head>
    <body>    
    
        $(function () {
            // 请将jQuery代码书写在这里 ...
            alert('Hello,World!');
        });
    </script>
    </body>
    </html>

### 1.5、jQuery两把利器 ###

#### jQuery两把利器分别是： ####

*  jQuery核心函数：即： $() 或 jQuery()，jQuery定义了这个全局的函数供我们调用，它既可作为一般函数调用，且传递的参数类型不同/格式不同，功能就完全不同，也可作为对象调用其定义好的方法，此时 $ 就是一个工具对象。
 *  jQuery核心对象：即执行jQuery核心函数返回的对象，jQuery对象内部包含的是dom元素对象的伪数组(可能只有一个元素)，jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作dom，调用jQuery对象的任何方法后返回的还是当前jQuery对象。

## 第二章 jQuery核心函数 ##

### 2.1、[选择器][Link 1] ###

#### 2.1.1、基本选择器 ####

![34d21739f2ba40ae92a1bef758085cc6.jpeg][]

**2.1.1.1、标签选择器**

**需求描述：选择页面中所有的div标签，设置其背景为红色**

<div>我是div1</div>
    <div>我是div2</div>
    <div>我是div3</div>

$('div').css('background', 'red');

效果：

![f95ebad41a43409ba7a9aa642030a821.png][]

**2.1.1.2、id选择器**

**需求描述：选择页面中所有id为btn的按钮，设置其背景为红色**

$('.red').css('background', 'red');

效果：

![e2ef9bad31994df0b35166ae3ee3a72a.png][]

**2.1.1.3、class选择器**

**需求描述：选择页面中所有class为red的段落，设置其背景为红色**

$('.red').css('background', 'red');

效果：

![55da2589a4244eeca811a3cd9730ddb7.png][]

**2.1.1.4、通配符选择器**

**需求描述：选择页面中class为content的div下所有元素，设置其背景为红色**

$('.content *').css('background', 'red');

效果：

![dc4829e59836433797a98db00d0b2eb1.png][]

**2.1.1.5、并集选择器**

**需求描述：选择页面中所有的段落与按钮，设置其背景为红色**

<p>我是段落</p>
    <button>我是按钮</button>
    <div>我是div</div>
    <h1>我是大标题</h1>

$('p,button').css('background', 'red');

效果：

![89a44181b1d5457fa83f51dab066e791.png][]

**2.1.1.6、交集选择器**

**需求描述：选择页面中所有class为red的段落，设置其背景为红色**

<p class="red">我是段落1</p>
    <p class="red">我是段落2</p>
    <p class="red">我是段落3</p>
    <div class="red">我是div1</div>
    <div class="red">我是div2</div>
    <div class="red">我是div3</div>

$('p.red').css('background', 'red');

效果：

![be59e64c5e544814b2de3424dfd500f6.png][]

#### 2.1.2、层级选择器 ####

**2.1.2.1、子代选择器**

**需求描述：选择ul下的所有span子元素，设置其背景为红色**

<ul>
        <span>我是ul的span1</span>
        <li>我是li1 <span>我是li1的span1</span></li>
        <li>我是li2 <span>我是li2的span2</span></li>
        <li>我是li3 <span>我是li3的span3</span></li>
        <span>我是ul的span2</span>
    </ul>

$('ul>span').css('background', 'red');

效果：

![eb8529401dca4a4fb7605da8a0b92bdb.png][]

**2.1.2.2、后代选择器**

**需求描述：选择ul下的所有span元素，设置其背景为红色**

$('ul span').css('background', 'red');

效果：

![af8d08f4e5584cf3822a660b6f1fe2b2.png][]

**2.1.2.3、兄弟选择器**

**需求描述：选中id为box的下一个兄弟li，设置其背景为红色**

<ul>
        <span>我是ul的span1</span>
        <li id="box">我是li1 <span>我是li1的span1</span></li>
        <li>我是li2 <span>我是li2的span2</span></li>
        <li>我是li3 <span>我是li3的span3</span></li>
        <span>我是ul的span2</span>
    </ul>

$('#box+li').css('background', 'red');

效果：

![c455707bf1df488da4627de4de56b23a.png][]

**需求描述：选中id为box的后边的兄弟li，设置其背景为红色**

$('#box~li').css('background', 'red');

**效果：**

![57c10f3cb8f44587a93aa422a4f99cbc.png][]

#### 2.1.3、过滤选择器 ####

**2.1.3.1、基本筛选器**

![06e939f4b0994470828aa772f613e169.jpeg][]

**需求描述：实现隔行变色，让表格的奇数行的背景变为红色，:even代表选取下标为偶数的行**

$('tr:even').css('background', 'red');

效果：

![52890b0b833d445a90252f5b67e3b378.png][]

**需求描述：实现隔行变色，让表格的偶数行的背景变为红色，:odd代表选取下标为奇数的行**

$('tr:odd').css('background', 'red');

效果：

![bb2db3239a4644299264b5672c22df64.png][]

**需求描述：实现让表格的第一行的背景变为红色**

$('tr:first').css('background', 'red');

效果：

![2774488400224826a7ae4293b91c0ad0.png][]

**需求描述：实现让表格的最后一行的背景变为红色**

$('tr:last').css('background', 'red');

效果：

![eba2b1eb53f344d5a7f749dfe62d3114.png][]

**需求描述：实现让下标（从0开始）小于2的行数的背景变为红色**

$('tr:lt(2)').css('background', 'red');

效果：

![295b0a96e0a4435a92b029096c9a32d3.png][]

**需求描述：实现让下标（从0开始）大于2的行数的背景变为红色**

$('tr:gt(2)').css('background', 'red');

效果：

![86e360f425f94b22bf2c899f2f1365b8.png][]

**需求描述：实现让下标（从0开始）等于2的行数的背景变为红色**

$('tr:eq(2)').css('background', 'red');

效果：

![4a2c7da012a14d32be78e79029f158d6.png][]

**需求描述：实现让下标（从0开始）不等于2的行数的背景变为红色**

$('tr:not(tr:eq(2))').css('background', 'red');

效果：

![9cae8c811fc04967b245c3f169a05c6b.png][]

**2.1.3.2、内容筛选器**

**需求描述：实现让内容为“男”的单元格的背景变为红色**

$('td:contains("男")').css('background', 'red');

效果：

![e985abc12b9f4d048ae9f799216aa098.png][]

**需求描述：实现让内容为span标签的单元格的背景变为红色**

$('td:has(span)').css('background', 'red');

效果：

![594c911dfad247ceaeb0462e686a3017.png][]

**需求描述：实现让内容为空的单元格的背景变为红色**

$('td:empty').css('background', 'red');

效果：

![98914a1ff2914054a1a62438df30064b.png][]

**需求描述：实现让内容不为空的单元格的背景变为红色**

$('td:parent').css('background', 'red');

效果：

![9d4f7d1af7004761b08a17c317349efd.png][]

**2.1.3.3、属性筛选器**

**需求描述：查找herflang属性的标签元素，设置其背景为红色**

$('[hreflang]').css('background', 'red');

效果：

![5a2ec323e44540418c9b70e8888cca6e.png][]

![bdb7630c63964e4d8f06079b70ebe037.jpeg][]

[Download jQuery _ jQuery]: https://jquery.com/download/
[851ee11e79eb4c5da2b8474e762e9d96.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/15afeef4886c47ad960938c5ff81746b.png
[8b08d55bb0b74bddb0bc4b04c95b6a03.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/b46232d1eab04aa3a6bb2f089d15de43.png
[65950beb7fa74b10bc0243b0e6619378.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f4fce8ab248c4f6a84e3f4a8e5b818d5.png
[cabebc96691a45d1a344d6600b846493.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/3db7ebfb6e9e442a92f3eda530c44281.png
[699d8f82b2b3403583cc2d8f206f0473.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f7bc19a338e9445fa1a9321e3ffc814c.png
[jQuery]: https://so.csdn.net/so/search?q=jQuery&spm=1001.2101.3001.7020
[Link 1]: https://so.csdn.net/so/search?q=%E9%80%89%E6%8B%A9%E5%99%A8&spm=1001.2101.3001.7020
[34d21739f2ba40ae92a1bef758085cc6.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f02205a17080414884aa3991d60f311a.png
[f95ebad41a43409ba7a9aa642030a821.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/4a918b826d424aabbe80181d5bed8774.png
[e2ef9bad31994df0b35166ae3ee3a72a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/cc0d91963c9840fd8ecaea805de4f342.png
[55da2589a4244eeca811a3cd9730ddb7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/c777c39d31524763aec34413c23c9b1d.png
[dc4829e59836433797a98db00d0b2eb1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/947697b9fc3b45b28ed8c8aecfca2b4a.png
[89a44181b1d5457fa83f51dab066e791.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/2d755dd6058e4ee69267c869f1c4a76e.png
[be59e64c5e544814b2de3424dfd500f6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/0953ffb1df7c4c4595c47427abd956da.png
[eb8529401dca4a4fb7605da8a0b92bdb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/334c0b3e4ce94069b70cbf314fc91521.png
[af8d08f4e5584cf3822a660b6f1fe2b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f62ef008db124673a38af474b9714317.png
[c455707bf1df488da4627de4de56b23a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/099f552e469343ccb41e1f8356395cc4.png
[57c10f3cb8f44587a93aa422a4f99cbc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/1daca1541ec549fc81b9ca9518c50910.png
[06e939f4b0994470828aa772f613e169.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/ff0bfcdc99aa43f7aa295f75051f6771.png
[52890b0b833d445a90252f5b67e3b378.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/3119d9a2ce1b4191932657705ab49f1e.png
[bb2db3239a4644299264b5672c22df64.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/b5655a3b75094b0590895127b9e0fc07.png
[2774488400224826a7ae4293b91c0ad0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/220b804305a444c0a67a45ac53842f53.png
[eba2b1eb53f344d5a7f749dfe62d3114.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/6247314c04c842bfbd5446787b257a82.png
[295b0a96e0a4435a92b029096c9a32d3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/1eeea374883e497993a92fb35718c12c.png
[86e360f425f94b22bf2c899f2f1365b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/09d6dab515a34e378807fcde3e37a3ec.png
[4a2c7da012a14d32be78e79029f158d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/bf93e65dd4d1437db4d74c36eeeb73a1.png
[9cae8c811fc04967b245c3f169a05c6b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/128665d701c941c3884a028ea3226e11.png
[e985abc12b9f4d048ae9f799216aa098.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/0fb7836107da435f80a76e02fa319b0b.png
[594c911dfad247ceaeb0462e686a3017.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/2efeeac84e3641ddbe0f07ee2e8cef57.png
[98914a1ff2914054a1a62438df30064b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/7fcfb6b603474208aa060f4b86f7dd2d.png
[9d4f7d1af7004761b08a17c317349efd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/90b14a54f5df4b948a5f24a2c423cc83.png
[5a2ec323e44540418c9b70e8888cca6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/38a2d0bc95ab4bd3bed18bc85bf45e5e.png
[bdb7630c63964e4d8f06079b70ebe037.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/db78b4881d3b47ac9caa8668beea4194.png