javascript ecmascript 【14.0】前端基础jQuery之引入

【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 文件中使用

这样，当浏览器解析到这两个

人生得意须尽欢!

【九】基本选择器

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】示例

p

span

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]

//

标签对象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"类名的元素最后对这些元素执行相应的操作。

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

span1

span2

span-1

span-2

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】案例

$('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文档的标签内添加

精彩文章

 您阅读本篇文章共花了：