【14.0】前端基础jQuery之引入

【一】什么是jQuery

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

jQuery内部封装了原生的js代码

能够通过书写更少的代码，完成js操作，类似于Python中的模块

前端叫 “类库”

兼容多个浏览器

【二】导入模块

【1】Python当中导入模块发生了哪些事？

导入模块其实需要消耗资源

在Python中，导入模块可以分为两个阶段：编译阶段和运行阶段。

在编译阶段，Python解释器会扫描并分析源代码，将导入语句转换为相应的字节码指令。这些指令会被存储在编译后的.pyc文件中，以便在之后的运行阶段使用。

在运行阶段，当执行到导入模块的语句时，Python会按照以下步骤进行模块的导入：

搜索模块：解释器首先会搜索模块是否已经加载到内存中。如果是内置模块，则直接使用；如果是标准库或第三方库，会按照一定的搜索路径进行查找。
编译模块：如果模块没有被加载到内存中，则解释器会在硬盘上找到对应的.py文件，并将其编译成字节码文件（.pyc）。编译后的字节码文件包含了模块的定义、函数、类等信息。
创建模块命名空间：解释器创建一个新的命名空间来存放模块中的变量、函数和类等。模块中的全局变量会成为该命名空间的属性。
执行模块代码：解释器开始执行模块的字节码指令，逐行解释并执行模块中的代码。这会导入模块中定义的函数、类和全局变量等。
返回模块对象：当模块中的代码执行完毕后，解释器返回一个表示该模块的模块对象。可以通过该对象访问模块中定义的内容。

总结起来，导入模块时，Python解释器会搜索、编译、执行模块的代码，并创建一个命名空间来存放模块中的变量和函数。这样，我们就可以在当前代码中使用模块中定义的功能了。

【2】jQuery中导入类库发生了哪些事？

它的文件非常小（几十kb），基本不影响网络速度

在jQuery中导入类库（也称为插件）可以通过以下步骤完成：

获取类库文件：首先需要获取所需的类库文件（通常是一个 JavaScript 文件），可以从官方网站或其他来源下载得到。
导入类库文件：将类库文件保存在项目目录中，并在 HTML 文件中使用<script>标签来导入类库文件。在<script>标签中，使用src属性指定类库文件的路径，让浏览器能够加载并执行该文件。
```
<script src="path/to/jquery.js"></script>
<script src="path/to/plugin.js"></script>
```
这样，当浏览器解析到这两个<script>标签时，就会下载并执行对应的类库文件。
使用类库功能：一旦类库文件被加载和执行，就可以使用其中提供的功能了。通常，类库会扩展或增强原生 JavaScript 的功能，通过在页面中引入类库文件，我们可以使用类库提供的函数、方法或特性。
```
$(document).ready(function() {
  // 在文档加载完成后执行一些代码
  // 使用类库提供的函数或方法
});
```
上述代码示例中，$符号是 jQuery 的别名，通过调用.ready()方法，我们可以确保在文档加载完成后执行传入的函数。

总结起来，导入 jQuery 类库涉及获取类库文件、在 HTML 文件中导入类库文件，并通过调用类库提供的功能来实现对页面元素的操作、动态加载和事件处理等功能。

【三】jQuery的优势

【1】详细

（1）简化DOM操作：

jQuery提供了强大且简洁的API，使得对DOM元素的选择、遍历和操作变得更加容易。
通过使用jQuery，可以通过简洁的语法实现复杂的DOM操作，减少编写冗长代码的工作量。

（2）跨浏览器兼容性：

jQuery解决了不同浏览器之间的兼容性问题。
它封装了一致的API，使得开发人员能够编写跨浏览器兼容的代码，无需关注各种细节和差异。

（3）丰富的插件生态系统：

jQuery拥有庞大的插件生态系统，涵盖了各种功能和特性，如动画效果、表单验证、图像轮播等。
这些插件可以大幅度提高开发效率，让开发人员能够快速实现复杂的功能。

（4）AJAX支持：

jQuery对AJAX进行了封装，使得在Web应用中进行异步请求变得更加简单。
通过使用jQuery的AJAX API，可以轻松地发送AJAX请求、处理响应和更新页面内容，实现更好的用户体验。

（5）动画效果：

jQuery提供了丰富的动画效果和过渡效果，可以轻松地实现元素的淡入淡出、滑动、展开收起等动画效果，给网页增添了交互和生动性。

扩展性与可定制性：

jQuery允许开发人员根据自己的需求进行定制和扩展。
开发人员可以自定义插件，编写自己的jQuery代码，并且可以根据项目需求选择只导入所需的模块，减小文件体积。

【2】小结

（1）一款轻量级的JS框架。

jQuery核心js文件才几十kb，不会影响页面加载速度。

（2）丰富的DOM选择器

jQuery的选择器用起来很方便
比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。

（3）链式表达式

jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。

（4）事件、样式、动画支持

jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。

（5）Ajax操作支持

jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。

（6）跨浏览器兼容

jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。

（7）插件扩展开发

jQuery有着丰富的第三方的插件
- 例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

【四】jQuery学习内容

选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax

下载链接：jQuery官网

中文文档：jQuery AP中文文档

【五】jQuery的版本

【1】1.x：

兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。
因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)

【2】2.x：

不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。
如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)

【3】3.x：

不兼容IE678，只支持最新的浏览器。
需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。

【六】jQuery配置

【1】settings设置模板

文件下载到本地
- 借助于pycharm自带的模板功能
settings
- Editor
  - File and Code Templates

【2】基于网络分发(CDN)

直接引入jQuery提供的CDN服务(基于网络请求加载)

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

后缀名区分是否已压缩

未压缩：https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js

已压缩：https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js

缺点
- 必须联网

【七】jQuery基本语法

基本语法

jQuery(选择器).action()

秉承jQuery宗旨，jQuery 简写成 $

jQuery(选择器) ---->  $(选择器)

【八】jQuery与原生JS代码比较

将P标签内部的文本颜色改成红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>

</head>
<body>
<p id="p1">人生得意须尽欢!</p>

<script>
    // 原生js
    let pEle = document.getElementById("p1");

    pEle.color = "red";

    // jQuery
    $('p').css("color", "blue");

</script>
</body>
</html>

【九】基本选择器

jQuery是一个流行的JavaScript库，它提供了便捷的方法来选择和操作HTML元素。以下是jQuery中的九个基本选择器：

【1】元素选择器（Element Selector）：

使用元素名称作为选择器，选取所有匹配该元素名称的元素。
示例：选择所有段落元素

$('p');

【2】ID选择器（ID Selector）：

使用ID属性值作为选择器，选取具有相同ID的唯一元素。
示例：选择具有 "myElement" ID的元素

$('#myElement');

【3】类选择器（Class Selector）：

使用类名作为选择器，选取具有相同类名的元素。
示例：选择所有具有 "myClass" 类的元素

$('.myClass');

【4】属性选择器（Attribute Selector）：

使用元素的属性和属性值进行选择。
示例：选择所有具有 "target" 属性的元素

$('[target]');

示例：选择具有 "href" 属性值以 "https://" 开头的所有链接

$('a[href^="https://"]');

【5】选择器组合（Multiple Selectors）：

通过逗号分隔多个选择器，同时选择多个元素。
示例：选择所有段落元素和具有 "myClass" 类的元素

$('p, .myClass');

【6】后代选择器（Descendant Selector）：

选择某个元素的后代元素。
示例：选择所有 "myElement" 元素内的段落元素

$('#myElement p');

【7】子元素选择器（Child Selector）：

选择某个元素的直接子元素。
示例：选择所有 "myElement" 元素的直接子元素中的段落元素

$('#myElement > p');

【8】下一个兄弟元素选择器（Next Adjacent Selector）：

选择紧接在指定元素后的下一个兄弟元素。
示例：选择紧接在 "myElement" 元素后的下一个兄弟元素

$('#myElement + div');

【9】后续所有兄弟元素选择器（Following Siblings Selector）：

选择指定元素之后的所有兄弟元素。
示例：选择紧接在 "myElement" 元素后的所有兄弟元素中具有 "myClass" 类的元素

$('#myElement ~ .myClass');

【10】示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>

</head>
<body>
<div id="d1">div
    <span>div>span</span>
    <p>div>p
        <span>div>p>span</span>
    </p>
</div>
<p class="p1">p</p>
<span>span</span>
</body>
</html>

id 选择器

$("#d1")
// S.fn.init [div#d1]

返回的是jQuery对象

class选择器

$('.p1')
// S.fn.init [p.p1, prevObject: S.fn.init(1)]

标签选择器

$('span')
// S.fn.init(3) [span, span, span, prevObject: S.fn.init(1)]

jQuery对象转标签对象

$("#d1")[0]
// <div id="d1">…</div>

标签对象jQuery对象

$(document.getElementById("d1"))
// S.fn.init [div#d1]

【十】组合选择器

在jQuery中，"组合选择器"是一种使用多个选择器来选择元素的方法。通过组合不同的选择器，可以更精确地选取需要的元素。

【1】并集选择器（Union Selector）：

使用逗号分隔，可以同时选择多个选择器所匹配的所有元素。
例如：$("selector1, selector2")

【2】后代选择器（Descendant Selector）：

选择某个元素的后代元素。
例如：$("parent descendant")

【3】子元素选择器（Child Selector）：

选择某个元素的直接子元素。
例如：$("parent > child")

【4】相邻兄弟选择器（Adjacent Sibling Selector）：

选择某个元素的下一个相邻兄弟元素。
例如：$("element + sibling")

【5】兄弟选择器（General Sibling Selector）：

选择某个元素之后的所有兄弟元素。
例如：$("element ~ siblings")

【6】过滤选择器（Filter Selector）：

根据特定的条件过滤选取元素。
例如：$("selector").filter(condition)

【十一】分组与嵌套

在jQuery中，"分组"和"嵌套"也是常见的用法，用于选择和操作DOM元素。

【1】分组（Grouping）：

使用逗号将多个选择器组合在一起，可以同时选择匹配这些选择器的所有元素。
例如：

$('.selector1, .selector2').doSomething();

通过分组选择器，可以在一个操作中同时对多个元素进行相同的操作。

【2】嵌套（Nesting）：

在一个选择器内部嵌套另一个选择器，用于表示某个选择器的子元素或特定关系的元素。
例如：

$('parent').find('.child').doSomething();

通过嵌套选择器，可以在指定的父元素下选择特定的子元素进行操作。
嵌套选择器在jQuery中非常有用，可以通过链式调用来实现更复杂的选择和操作。
例如：

$('parent')
  .find('.child')
  .filter('.special')
  .doSomething();

上述代码首先选择父元素
然后在父元素下找到特定的子元素
并进一步筛选出特定的具有".special"类名的元素
最后对这些元素执行相应的操作。

【十二】组合选择器/分组与嵌套案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>

</head>
<body>

<span>span1</span>
<span>span2</span>

<div id="d1">div
    <span>
        div>span1
    </span>
    <p id="d2">div>p
        <span>
            div>p>span
        </span>
    </p>
    <span>
        div>span2
    </span>
</div>

<span>span-1</span>
<span>span-2</span>
</body>
</html>

id选择器

// 取 div 标签
$("div")
S.fn.init(2) [div#d1, div.d2, prevObject: S.fn.init(1)]

// 取 id为d1的div标签
$('div#d1')
// S.fn.init [div#d1, prevObject: S.fn.init(1)]

组合选择器/并列/混合使用

$('#d1,.p1,p')
// S.fn.init(2) [div#d1, p#p1, prevObject: S.fn.init(1)]

后代选择器

$('div span')
// S.fn.init(3) [span, span, span, prevObject: S.fn.init(1)]

儿子后代选择器

$('div>span')
// S.fn.init(2) [span, span, prevObject: S.fn.init(1)]

紧挨着的标签

$('div+span')
// S.fn.init [span, prevObject: S.fn.init(1)]

所有兄弟便签

$('div~span')
// S.fn.init(2) [span, span, prevObject: S.fn.init(1)]

【十三】基本筛选器

jQuery提供了许多基本筛选器，其中包括十三个常用的基本筛选器。
下面是这些基本筛选器的详细介绍：

【1】:first

选择第一个匹配元素。

【2】:last

选择最后一个匹配元素。

【3】:even

选择索引为偶数的匹配元素（索引从开始）。

【4】:odd

选择索引为奇数的匹配元素（索引从开始）。

【5】:eq(index)

选择索引为指定值index的元素（索引从开始）。

【6】:gt(index)

选择索引大于指定值index的元素（索引从开始）。

【7】:lt(index)

选择索引小于指定值index的元素（索引从开始）。

【8】:header

选择所有标题元素（例如h1、h2等）。

【9】:animated

选择当前正在执行动画的元素。

【10】:focus

选择当前获得焦点的元素。

【11】:contains(text)

选择包含指定文本text的元素。

【12】:empty

选择没有子元素或文本的空元素。

【13】:parent

选择有子元素或文本的元素。

可以使用:even筛选器选择表格中的偶数行，并使用:contains筛选器选择包含特定文本的元素。

【十四】基本筛选器案例

拿ul下的所有li标签

$('ul li')
/* S.fn.init(10) [li, li, li, li.l1, li, li, li, li, li#d1, li, prevObject: S.fn.init(1)] */

只拿第一个/最后一个


$('ul :first')
// S.fn.init [li, prevObject: S.fn.init(1)]
$('ul :last')
// S.fn.init [li, prevObject: S.fn.init(1)]

只拿索引为偶数的标签

$('ul :even')
/* S.fn.init(5) [li, li, li, li, li#d1, prevObject: S.fn.init(1)] */

只拿索引为奇数的标签

$('ul :odd')
/* S.fn.init(5) [li, li.l1, li, li, li, prevObject: S.fn.init(1)] */

拿到索引大于2的所有元素

$('ul :gt(2)')
// S.fn.init(7) [li.l1, li, li, li, li, li#d1, li, prevObject: S.fn.init(1)]

移除满足元素的标签

$('ul li:not("#d1")')
S.fn.init(9) [li, li, li, li.l1, li, li, li, li, li, prevObject: S.fn.init(1)]

【十五】属性选择器

【1】选择具有特定属性的元素：`$("[attribute]")`

例如，选择所有具有"src"属性的图片元素：$("img[src]")

【2】选择具有特定属性值的元素：`$("[attribute=value]")`

例如，选择所有"href"属性值为"https://example.com"的链接元素：$("a[href='https://example.com']")

【3】选择具有包含特定属性值的元素：`$("[attribute*=value]")`

例如，选择所有"src"属性值包含"image"的图片元素：$("img[src*='image']")

【4】选择具有以特定属性值开头的元素：`$("[attribute^=value]")`

例如，选择所有"href"属性值以"https://"开头的链接元素：$("a[href^='https://']")

【5】选择具有以特定属性值结尾的元素：`$("[attribute$=value]")`

例如，选择所有"src"属性值以".jpg"结尾的图片元素：$("img[src$='.jpg']")

【6】选择具有以特定属性值开头且以特定字符串结尾的元素：`$("[attribute^=value][attribute$=value]")`

例如，选择所有"src"属性值以"images/"开头且以".jpg"结尾的图片元素：$("img[src^='images/'][src$='.jpg']")

【7】案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>

</head>
<body>
<input type="text" username="dream">
<input type="text" username="chimeng">
<p username="dream"></p>
</body>
</html>

$('username')
// S.fn.init [prevObject: S.fn.init(1)]

// 取属性中带有username的标签
$('[username]')
// S.fn.init(3) [input, input, p, prevObject: S.fn.init(1)]

// 取属性中带有username并且值为 dream的标签
$('[username="dream"]')
// S.fn.init(2) [input, p, prevObject: S.fn.init(1)]

// 取属性中带有username并且值为 dream的p标签
$('p[username="dream"]')
// S.fn.init [p, prevObject: S.fn.init(1)]

【十六】表单筛选器

【演示】

【1】根据需要引入jQuery库文件。
可以通过在HTML文档的标签内添加

posted @ 2023-07-06 09:32 Chimengmeng 阅读(21) 评论(0) 编辑收藏举报

刷新页面返回顶部

Dream-Z

Hope Your Life Is Worth It !

【14.0】前端基础jQuery之引入

【14.0】前端基础jQuery之引入

【一】什么是jQuery

【二】导入模块

【1】Python当中导入模块发生了哪些事？

【2】jQuery中导入类库发生了哪些事？

【三】jQuery的优势

【1】详细

（1）简化DOM操作：

（2）跨浏览器兼容性：

（3）丰富的插件生态系统：

（4）AJAX支持：

（5）动画效果：

扩展性与可定制性：

【2】小结

（1）一款轻量级的JS框架。

（2）丰富的DOM选择器

（3）链式表达式

（4）事件、样式、动画支持

（5）Ajax操作支持

（6）跨浏览器兼容

（7）插件扩展开发

【四】jQuery学习内容

【五】jQuery的版本

【1】1.x：

【2】2.x：

【3】3.x：

【六】jQuery配置

【1】settings设置模板

【2】基于网络分发(CDN)

【七】jQuery基本语法

【八】jQuery与原生JS代码比较

【九】基本选择器

【1】元素选择器（Element Selector）：

【2】ID选择器（ID Selector）：

【3】类选择器（Class Selector）：

【4】属性选择器（Attribute Selector）：

【5】选择器组合（Multiple Selectors）：

【6】后代选择器（Descendant Selector）：

【7】子元素选择器（Child Selector）：

【8】下一个兄弟元素选择器（Next Adjacent Selector）：

【9】后续所有兄弟元素选择器（Following Siblings Selector）：

【10】示例

【十】组合选择器

【1】并集选择器（Union Selector）：

【2】后代选择器（Descendant Selector）：

【3】子元素选择器（Child Selector）：

【4】相邻兄弟选择器（Adjacent Sibling Selector）：

【5】兄弟选择器（General Sibling Selector）：

【6】过滤选择器（Filter Selector）：

【十一】分组与嵌套

【1】分组（Grouping）：

【2】嵌套（Nesting）：

【十二】组合选择器/分组与嵌套案例

【十三】基本筛选器

【1】:first

【2】:last

【3】:even

【4】:odd

【5】:eq(index)

【6】:gt(index)

【7】:lt(index)

【8】:header

【9】:animated

【10】:focus

【11】:contains(text)

【12】:empty

【13】:parent

【十四】基本筛选器案例

【十五】属性选择器

【1】选择具有特定属性的元素：$("[attribute]")

【2】选择具有特定属性值的元素：$("[attribute=value]")

【3】选择具有包含特定属性值的元素：$("[attribute*=value]")

【4】选择具有以特定属性值开头的元素：$("[attribute^=value]")

【5】选择具有以特定属性值结尾的元素：$("[attribute$=value]")

【6】选择具有以特定属性值开头且以特定字符串结尾的元素：$("[attribute^=value][attribute$=value]")

【7】案例

【十六】表单筛选器

【1】选择具有特定属性的元素：`$("[attribute]")`

【2】选择具有特定属性值的元素：`$("[attribute=value]")`

【3】选择具有包含特定属性值的元素：`$("[attribute*=value]")`

【4】选择具有以特定属性值开头的元素：`$("[attribute^=value]")`

【5】选择具有以特定属性值结尾的元素：`$("[attribute$=value]")`

【6】选择具有以特定属性值开头且以特定字符串结尾的元素：`$("[attribute^=value][attribute$=value]")`