前端基础之jQuery

最新推荐文章于 2024-08-22 11:06:05 发布

老登，快爆金币

最新推荐文章于 2024-08-22 11:06:05 发布

阅读量211

点赞数

文章标签：前端 jquery javascript python 1024程序员节开发语言 html

本文链接：https://blog.csdn.net/qq_65852978/article/details/134203549

版权

一.什么是jQuery

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

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

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

前端叫“类库”

兼容多个浏览器

二.导入模块

1.python当中导入模块发生了哪些事情？

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

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

在编译阶段，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 的别名，通过调用.ready()方法，我们可以确保在文档加载完成后执行传入的函数。

三.基本选择器

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]

老登，快爆金币

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础之jQuery

jQuery内部封装了原生的js代码能够通过书写更少的代码，完成js操作，类似于Python中的模块前端叫“类库”兼容多个浏览器。
复制链接

扫一扫