18世界杯排名

jQuery引入和基本语法

【一】引入库文件

// 方法一：【1】本地引入库文件

//方法二：CDN引入

【二】jQuery的特点

（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配置

【1】settings设置模板

文件下载到本地

借助于pycharm自带的模板功能

settings

Editor

File and Code Templates

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

（1）官网

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

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

（2）压缩

如果 URL 结尾含有 min、compressed、gz 或 .gzipped 等词汇及其对应后缀，如 .min.js、.gz.css 等，则可能是指向已压缩的文件。

后缀名区分是否已压缩

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

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

缺点

必须联网

【四】jQuery基本语法

【1】基本语法

jQuery(选择器).action()

【2】简写

秉承jQuery宗旨，jQuery 简写成 $

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

【3】基本选择器

【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');

【4】组合选择器

在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)

【5】分组与嵌套

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

【1】分组（Grouping）

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

例如：

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

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

【2】嵌套（Nesting）

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

例如：

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

通过嵌套选择器，可以在指定的父元素下选择特定的子元素进行操作。

嵌套选择器在jQuery中非常有用，可以通过链式调用来实现更复杂的选择和操作。

例如：

$('parent')

.find('.child')

.filter('.special')

.doSomething();

上述代码首先选择父元素

然后在父元素下找到特定的子元素

并进一步筛选出特定的具有".special"类名的元素

最后对这些元素执行相应的操作。

【6】案例

Title

span1

span2

div

div>span1

div>p

div>p>span

div>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)]

【五】属性选择器

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

Title

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

【2】选取表单元素

例如，如果您要筛选具有特定类名或其他属性的表单元素，可以使用类选择器（.className）或属性选择器（[attribute='value']）。

var filteredElements = $('.className'); // 根据类名筛选

var filteredElements = $('[attribute="value"]'); // 根据属性值筛选

【3】过滤选取到的表单元素

例如，您可以使用filter()方法根据特定条件进行筛选。

var filteredElements = $('.className').filter(function() {

// 根据条件筛选

return condition;

});

【4】处理筛选结果

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

filteredElements.show(); // 显示筛选结果

filteredElements.hide(); // 隐藏筛选结果

filteredElements.attr('attribute', 'value'); // 修改筛选结果的属性值

// 进一步进行其他操作...

【七】表单相关方法

【1】表单筛选器

:text：选取所有文本输入框元素（）。

:password：选取所有密码输入框元素（）。

:file：选取所有文件上传输入框元素（）。

:radio：选取所有单选按钮元素（）。

:checkbox：选取所有复选框元素（）。

:submit：选取所有提交按钮元素（）。

:reset：选取所有重置按钮元素（）。

:button：选取所有按钮元素（