【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属性指定类库文件的路径，让浏览器能够加载并执行该文件。
```
1
<script src="path/to/jquery.js"></script>
2
<script src="path/to/plugin.js"></script>
```
这样，当浏览器解析到这两个<script>标签时，就会下载并执行对应的类库文件。
使用类库功能：一旦类库文件被加载和执行，就可以使用其中提供的功能了。通常，类库会扩展或增强原生 JavaScript 的功能，通过在页面中引入类库文件，我们可以使用类库提供的函数、方法或特性。
```
1
$(document).ready(function() {
2
  // 在文档加载完成后执行一些代码
3
  // 使用类库提供的函数或方法
4
});
```
上述代码示例中，$符号是 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基本语法#

基本语法

1
jQuery(选择器).action()

秉承jQuery宗旨，jQuery 简写成 $

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

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

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

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

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

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

17
    pEle.color = "red";
18

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

22
</script>
23
</body>
24
</html>

【九】基本选择器#

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

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

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

1
$('p');

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

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

1
$('#myElement');

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

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

1
$('.myClass');

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

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

1
$('[target]');

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

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

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

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

1
$('p, .myClass');

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

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

1
$('#myElement p');

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

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

1
$('#myElement > p');

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

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

1
$('#myElement + div');

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

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

1
$('#myElement ~ .myClass');

【10】示例#

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

9
</head>
10
<body>
11
<div id="d1">div
12
    <span>div>span</span>
13
    <p>div>p
14
        <span>div>p>span</span>
15
    </p>
16
</div>
17
<p class="p1">p</p>
18
<span>span</span>
19
</body>
20
</html>

id 选择器

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

返回的是jQuery对象

class选择器

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

标签选择器

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

jQuery对象转标签对象

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

标签对象jQuery对象

1
$(document.getElementById("d1"))
2
// 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）：#

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

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

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

【2】嵌套（Nesting）：#

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

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

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

1
$('parent')
2
  .find('.child')
3
  .filter('.special')
4
  .doSomething();

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

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

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

9
</head>
10
<body>
11

12
<span>span1</span>
13
<span>span2</span>
14

15
<div id="d1">div
16
    <span>
17
        div>span1
18
    </span>
19
    <p id="d2">div>p
20
        <span>
21
            div>p>span
22
        </span>
23
    </p>
24
    <span>
25
        div>span2
26
    </span>
27
</div>
28

29
<span>span-1</span>
30
<span>span-2</span>
31
</body>
32
</html>

id选择器

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

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

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

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

后代选择器

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

儿子后代选择器

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

紧挨着的标签

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

所有兄弟便签

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

【十三】基本筛选器#

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

【1】#

选择第一个匹配元素。

【2】#

选择最后一个匹配元素。

【3】#

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

【4】#

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

【5】(index)#

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

【6】(index)#

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

【7】(index)#

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

【8】
#

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

【9】#

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

【10】#

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

【11】(text)#

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

【12】#

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

【13】#

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

可以使用，并使用。

【十四】基本筛选器案例#

拿ul下的所有li标签

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

只拿第一个/最后一个

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

只拿索引为偶数的标签

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

只拿索引为奇数的标签

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

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

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

移除满足元素的标签

1
$('ul li:not("#d1")')
2
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】案例#

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

9
</head>
10
<body>
11
<input type="text" username="dream">
12
<input type="text" username="chimeng">
13
<p username="dream"></p>
14
</body>
15
</html>

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

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

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

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

【十六】表单筛选器#

【演示】#

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

1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

【2】在您的JavaScript文件中使用jQuery选择器来选取需要进行筛选的表单元素。
例如，如果您要筛选具有特定类名或其他属性的表单元素，可以使用类选择器（.className）或属性选择器（[attribute=‘value’]）。

1
var filteredElements = $('.className'); // 根据类名筛选
2
var filteredElements = $('[attribute="value"]'); // 根据属性值筛选

【3】使用jQuery的筛选器方法来进一步过滤选取到的表单元素。
例如，您可以使用filter()方法根据特定条件进行筛选。

1
var filteredElements = $('.className').filter(function() {
2
  // 根据条件筛选
3
  return condition;
4
});

【4】处理筛选结果。
一旦您获得了符合条件的表单元素集合，您可以根据需要对其进行处理，例如显示、隐藏、修改属性等等。

1
filteredElements.show(); // 显示筛选结果
2
filteredElements.hide(); // 隐藏筛选结果
3
filteredElements.attr('attribute', 'value'); // 修改筛选结果的属性值
4
// 进一步进行其他操作...

【方法】#

表单筛选器#

:text：选取所有文本输入框元素（<input type="text">）。
:password：选取所有密码输入框元素（<input type="password">）。
:file：选取所有文件上传输入框元素（<input type="file">）。
:radio：选取所有单选按钮元素（<input type="radio">）。
:checkbox：选取所有复选框元素（<input type="checkbox">）。
:submit：选取所有提交按钮元素（<input type="submit">）。
:reset：选取所有重置按钮元素（<input type="reset">）。
:button：选取所有按钮元素（<button>）。

表单对象属性#

:enabled：
- 选取所有可用的表单元素。
- 可用元素指的是没有被禁用（disabled）的元素。

示例：

1
$("input:enabled") // 选择所有可用的输入框

:disabled：
- 选取所有禁用的表单元素。

示例：

1
$("input:disabled") // 选择所有被禁用的输入框

:checked：
- 选取所有被选中的复选框或单选按钮元素。

示例：

1
$("input:checked") //选取所有被选中的复选框或单选按钮

:selected：
- 选取所有被选中的下拉列表（<select>）元素中的选项（<option>）。

示例：

1
$("select option:selected") //选取所有被选中的下拉列表选项

可以使用:checked选择器来获取选中的复选框的值
或通过:enabled选择器来禁用或启用表单元素等。

【案例】#

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

9
</head>
10
<body>
11
<p>username <input type="text"></p>
12
<p>password <input type="password"></p>
13
<input type="button">
14
</body>
15
</html>

1
$('input[type="text"]')
2
S.fn.init [input, prevObject: S.fn.init(1)]
3
$('input[type="password"]')
4
S.fn.init [input, prevObject: S.fn.init(1)]
5

6
// 等价于上面的操作
7
$(':text')
8
S.fn.init [input, prevObject: S.fn.init(1)]
9
$(':password')
10
S.fn.init [input, prevObject: S.fn.init(1)]

【十七】筛选器方法#

【1】`eq(index)`：#

选取指定索引位置的元素。
示例：

1
$("li").eq(2)  // 选取索引为2的列表项

【2】`first()`：#

选取第一个匹配的元素。
示例：

1
$("div").first() // 选取第一个div元素

【3】`last()`：#

选取最后一个匹配的元素。
示例：

1
$("p").last() // 选取最后一个段落元素

【4】`not(selector)`：#

从匹配的元素中去除指定的元素。
示例：

1
$("li").not(".selected") // 去除具有类名为selected的列表项

【5】`filter(selector)`：#

根据指定的选择器筛选元素。
示例：

1
$("div").filter(".highlight") // 筛选具有类名为highlight的div元素

【6】`has(selector)`：#

筛选包含指定选择器所匹配元素的元素。
示例：

1
$("ul").has("li") // 筛选包含列表项的ul元素

【7】案例#

拿到标签下面的标签

1
// 拿到所有的 id为 d1的标签
2
$('#d1')
3
// S.fn.init [span#d1]
4

5
// // 拿到 id为 d1的标签下一个标签
6
$('#d1').next()
7
// S.fn.init [span, prevObject: S.fn.init(1)]
8

9
//  拿到 id为 d1的标签下的所有标签
10
$('#d1').nextAll()
11
// S.fn.init(6) [span, div#d2, span, span, span.c1, script, prevObject: S.fn.init(1)]
12

13
// 拿到 id为 d1的标签下的直到结束条件的所有标签
14
$('#d1').nextUntil()
15
S.fn.init(6) [span, div#d2, span, span, span.c1, script, prevObject: S.fn.init(1)]
16

17
// 拿到 id为 d1的标签下的直到class为c1的标签的所有标签
18
$('#d1').nextUntil('.c1')
19
S.fn.init(4) [span, div#d2, span, span, prevObject: S.fn.init(1)]

类上面，拿到标签上面的标签

1
$('.c1')
2
// S.fn.init [span.c1, prevObject: S.fn.init(1)]
3
$('.c1').prev()
4
// S.fn.init [span, prevObject: S.fn.init(1)]
5
$('.c1').prevAll()
6
// S.fn.init(5) [span, span, div#d2, span, span#d1, prevObject: S.fn.init(1)]
7
$('.c1').prevUntil("#d2")
8
// S.fn.init(2) [span, span, prevObject: S.fn.init(1)]

取父标签

1
$('#d3').parent()
2
// S.fn.init [p, prevObject: S.fn.init(1)]
3
$('#d3').parent().parent()
4
// S.fn.init [div#d2, prevObject: S.fn.init(1)]
5
$('#d3').parent().parent().parent()
6
// S.fn.init [body, prevObject: S.fn.init(1)]
7
$('#d3').parent().parent().parent().parent()
8
// S.fn.init [html, prevObject: S.fn.init(1)]
9
$('#d3').parent().parent().parent().parent().parent()
10
// S.fn.init [document, prevObject: S.fn.init(1)]
11
$('#d3').parent().parent().parent().parent().parent().parent()
12
// S.fn.init [prevObject: S.fn.init(1)]

1
// 取该标签的所有父级以上的标签
2
$('#d3').parents()
3
// S.fn.init(4) [p, div#d2, body, html, prevObject: S.fn.init(1)]
4

5
// 取该标签的所有父级以上的标签直到 ‘body’为止
6
$('#d3').parentsUntil('body')
7
// S.fn.init(2) [p, div#d2, prevObject: S.fn.init(1)]

取到所有的子标签

1
$('#d2').children()
2
// S.fn.init(3) [span, p, span, prevObject: S.fn.init(1)]

同级别上下所有标签

1
$('#d2').siblings()
2
// S.fn.init(6) [span#d1, span, span, span, span.c1, script, prevObject: S.fn.init(1)]

找div标签下的p标签

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

4
// 从某个区域内筛选出想要的标签
5
$('div').find('p')
6
// S.fn.init [p, prevObject: S.fn.init(1)]

拿div便签下的第一个span标签

1
$('div span')
2
// S.fn.init(3) [span, span#d3, span, prevObject: S.fn.init(1)]
3
$('div span:first')
4
// S.fn.init [span, prevObject: S.fn.init(1)]
5

6
// 优化方法
7
$('div span').first()
8
// S.fn.init [span, prevObject: S.fn.init(3)]

音乐

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】#

【2】#

【3】#

【4】#

【5】(index)#

【6】(index)#

【7】(index)#

【8】#

【9】#

【10】#

【11】(text)#

【12】#

【13】#

【十四】基本筛选器案例#

【十五】属性选择器#

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

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

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

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

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

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

【7】案例#

【十六】表单筛选器#

【演示】#

【8】
#

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

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

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

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

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

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

【1】`eq(index)`：#

【2】`first()`：#

【3】`last()`：#

【4】`not(selector)`：#

【5】`filter(selector)`：#

【6】`has(selector)`：#