【一】JQuery基础
【1】什么时Jquery
(1)定义
- jQuery是一个流行的JavaScript库,旨在简化JavaScript编程和处理HTML文档的任务。
- 它提供了一组易于使用的功能和方法,可以加快开发速度并提高跨浏览器兼容性。
- 一款轻量级的JS框架
(2)特点
- 简化DOM操作:jQuery提供了简洁的语法和方法,使得选择和操作HTML元素变得更加容易。可以使用CSS选择器来选择元素,并使用链式调用方法来操作它们。
- 事件处理:jQuery使事件处理变得更加简单。您可以使用
.on()
方法来附加事件处理程序,并使用.click()
、.hover()
等方法来处理常见的事件。 - AJAX支持:jQuery提供了简化和改进AJAX(Asynchronous JavaScript and XML)操作的方法。可以使用
.ajax()
方法轻松地发送异步HTTP请求,并处理返回的数据。 - 动画效果:jQuery具有丰富的动画功能,可以轻松地创建过渡效果、淡入淡出、滑动等动画效果。可以使用
.animate()
方法来控制元素的属性值,从而实现动画效果。 - 跨浏览器兼容性:jQuery致力于提供跨浏览器一致性。会自动处理浏览器之间的差异,并提供相应的解决方案,以确保代码在不同浏览器上运行良好。
- 插件生态系统:jQuery拥有丰富的插件生态系统,使开发人员能够轻松地扩展和定制功能。这些插件提供了各种功能,如日期选择器、图表库、图像轮播等。
(3)版本
-
1.x
- 兼容IE678,使用最为广泛的,官方只做BUG维护,功能不再新增。
- 因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)
-
2.x
-
不兼容IE678,很少有人使用,官方只做BUG维护,功能不再新增。
-
如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)3.x
-
-
3.x
- 不兼容IE678,只支持最新的浏览器。
- 需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
【2】基本语法
(1)基本语法结构
jQuery(选择器).action
(2)简写
$(选择器).action
【3】下载和配置
(1)下载导入
- 官网下载地址:Download jQuery | jQuery
-
复制并保存在本地
jquery-3.7.1.min.js
-
导入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.7.1.min.js"></script>
</head>
<body>
</body>
</html>
(2)基于网络分布
-
比需要有网络
-
jquery (v3.7.1) - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
-
复制
<script>
标签 -
导入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
【4】修改Pycharm默认配置
- 首先进入settings界面
- 点击Editor
- 再点击File and Code Templates
- 编辑HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>#[[$Title$]]#</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
#[[$END$]]#
</body>
</html>
【二】选择器
- 选择器用于选取HTML元素
【1】基本选择器
(0)类型转换
- jQuery对象 -> 标签对象
//第一个id为d1的标签
$("#d1")[0]
- 标签对象 -> jQuery对象
$(document.getElementById("d1"))
(1)元素选择器
- 使用元素名称作为选择器,选取所有匹配该元素名称的元素。
// 选择所有的段落元素
$("p")
(2)ID选择器
- 使用ID属性值作为选择器,选取具有相同ID的唯一元素。
// 选择ID为"id1"的元素
$("#id1")
(3)类选择器
- 使用类名作为选择器,选取具有相同类名的元素。
// 选择类名为"my-class"的元素
$(".my-class")
// 选择同时包含"class1"和"class2"类名的元素
$(".class1.class2")
(4)属性选择器
- 使用元素的属性和属性值进行选择。
// 选择所有具有"title"属性的元素
$("[title]")
// 选择具有"title"属性且值为"example"的元素
$("[title='example']")
//选择具有 "href" 属性值以 "https://" 开头的所有链接
$('a[href^="https://"]')
(5)选择器组合
- 通过逗号分隔多个选择器,同时选择多个元素。
// 选择包含"class1"或"class2"类名的元素
$(".class1, .class2")
(6)后代选择器
- 选择某个元素的后代元素。
// 选择所有div内部的p元素
$("div p")
(7)儿子选择器
- 选择某个元素的直接子元素。
// 选择所有列表元素中的直接子元素li
$("ul > li")
(8)毗邻选择器
- 选择紧接在指定元素后的毗邻元素。
//选择紧接在 "myElement" 元素后的下一个兄弟元素
$('#myElement + div')
(9)兄弟选择器
- 选择指定元素之后的所有兄弟元素。
//选择紧接在 "myElement" 元素后的所有兄弟元素中具有 "myClass" 类的元素
$('#myElement ~ .myClass');
【2】属性选择器
- 属性选择器可以根据属性的存在、属性值的相等性、属性值的前缀、后缀或包含关系来选择元素。
(1)[attribute]
- 选择具有指定属性的元素。
- 例如,
[href]
会选择具有href
属性的元素。
(2)[attribute=value]
- 选择具有指定属性并且属性值等于指定值的元素。
- 例如,
[type=text]
会选择type
属性值为text
的元素。
(3)[attribute~=value]
- 选择具有指定属性并且属性值包含指定值的元素。属性值可以是多个单词,用空格分隔。
- 例如,
[class~=red]
会选择具有class
属性值包含单词red
的元素。
<p class="red bold">This is a paragraph.</p>
<p class="blue">This is another paragraph.</p>
<p class="red">This is a third paragraph.</p>
<script>
//第一个和第三个 `<p>` 元素都具有 class`属性值包含单词 red,因此它们会被选中。
$("[class~=red]")
</script>
(4)[attribute|=value]
- 选择具有指定属性并且属性值以指定值开头的元素,或者以指定值开头并且后面紧跟连字符(-)的元素。例如,
[lang|=en]
会选择具有lang
属性值为en
或者以en-
开头的元素。
<div lang="en">English content</div>
<div lang="en-US">English (United States) content</div>
<div lang="fr">French content</div>
<script>
//第一个和第二个 <div> 元素都符合这个条件,因此它们会被选中
$("[lang|=en]")
</script>
(5)[attribute^=value]
- 选择具有指定属性并且属性值以指定值开头的元素。
- 例如,
[href^=https]
会选择具有href
属性值以https
开头的元素。
<a href="https://www.example.com">Link 1</a>
<a href="http://www.example.com">Link 2</a>
<script>
//选择第一个 <a> 元素
$('[href^="https://"]')
</script>
(6)[attribute$=value]
- 选择具有指定属性并且属性值以指定值结尾的元素。
- 例如,
[src$=.png]
会选择具有src
属性值以.png
结尾的元素。
<img src="image.png" alt="Image 1">
<img src="image.jpg" alt="Image 2">
<script>
//选择第一个 <img> 元素
$('[src$=".png"]')
</script>
(7)[attribute*=value]
- 选择具有指定属性并且属性值包含指定值的元素。
- 例如,
[title*=open]
会选择具有title
属性值包含单词open
的元素。
<p class="red-text">Red text</p>
<p class="blue-text">Blue text</p>
<script>
//选择第一个 <p> 元素
$('[class*="red"]')
</script>
(8)组合
- 选择具有以特定属性值开头且以特定字符串结尾的元素
<a href="https://www.example.com/home">Home</a>
<a href="https://www.example.com/about">About</a>
<a href="https://www.example.com/contact">Contact</a>
<a href="https://www.example.com/products">Products</a>
<script>
//选择第一个 <a> 元素
$("a[href^='https:'][href$='home']")
</script>
【3】组合选择器
(1)并集(分组)
- 使用
,号
分隔
// 选择包含"class1"或"class2"类名的元素
$(".class1, .class2")
(2)交集
- 紧挨着
// 选择同时包含"class1"和"class2"类名的元素
$(".class1.class2")
(3)嵌套
.find()
方法
//选择包含"class1"类名元素下的包含"class2"类名的元素
$(".class1").find(".class2")
【三】筛选器
【1】基本筛选器
:first
:选择第一个匹配的元素。:last
:选择最后一个匹配的元素。:even
:选择索引为偶数的元素(从0开始计数)- 它会选择索引为0、2、4等的匹配元素。
:odd
:选择索引为奇数的元素(从0开始计数)。- 它会选择索引为1、3、5等的匹配元素。
:eq(index)
:选择索引为指定值的元素,其中 index 是一个整数。- 它会选择与指定索引相匹配的元素。例如,
:eq(2)
会选择第三个匹配的元素。
- 它会选择与指定索引相匹配的元素。例如,
:gt(index)
:选择索引大于指定值的元素,其中 index 是一个整数。- 它会选择索引大于指定值的所有匹配元素。
:lt(index)
:选择索引小于指定值的元素,其中 index 是一个整数。- 它会选择索引小于指定值的所有匹配元素。
:header
:选择所有标题元素(如<h1>
,<h2>
,<h3>
等)。- 它会选择文档中所有的标题元素。
:not(selector)
:选择不匹配指定选择器的元素。- 它会选择不符合指定选择器条件的所有元素。
:has(selector)
:选择包含至少一个匹配指定选择器的元素。- 它会选择包含至少一个符合指定选择器条件的元素的所有元素。
:empty
:选择没有子元素或文本的空元素。:contains(text)
:选择包含指定文本 text 的元素。:parent
:选择有子元素或文本的元素。及父子关系或这文本内容。
<div>
<p>This is a paragraph.</p>
</div>
<span>Some text</span>
<script>
//它将选择 <div>、<span> 和 <p> 元素,
$(":parent")
</script>
:animated
:选择当前正在执行动画的元素。:focus
:选择当前获得焦点的元素。
【2】表单筛选器
-
:input
:选择所有的输入元素,包括<input>
、<select>
、<textarea>
和<button>
等。 -
:text
:选择所有的文本输入框,即type="text"
的<input>
元素。 -
:password
:选择所有的密码输入框,即type="password"
的<input>
元素。 -
:radio
:选择所有的单选按钮,即type="radio"
的<input>
元素。 -
:checkbox
:选择所有的复选框,即type="checkbox"
的<input>
元素。 -
:submit
:选择所有的提交按钮,即type="submit"
的<input>
或<button>
元素。 -
:reset
:选择所有的重置按钮,即type="reset"
的<input>
或<button>
元素。 -
:button
:选择所有的普通按钮,即type="button"
的<input>
或<button>
元素。 -
:file
:选择所有的文件上传输入框,即type="file"
的<input>
元素。 -
:image
:选择所有的图像按钮,即type="image"
的<input>
元素。 -
:enabled
:选择所有启用的表单元素。 -
:disabled
:选择所有禁用的表单元素。 -
:checked
:选取所有被选中的复选框或单选按钮元素。 -
:selected
选取所有被选中的下拉列表(<select>
)元素中的选项(<option>
)。
$('input[type="text"]')
$('input[type="password"]')
// 等价于上面的操作
$(':text')
$(':password')
【3】筛选器方法
-
.eq(index)
:选取指定索引位置的元素。 -
.first()
:选取第一个匹配的元素。 -
not(selector)
:从匹配的元素中去除指定的元素。 -
.filter(selector)
:根据指定的选择器筛选元素。 -
.has(selector)
:筛选包含指定选择器所匹配元素的元素。 -
.next()
:选择当前元素的下一个同级元素。 -
.nextAll()
:选择当前元素之后的所有同级元素。 -
.nextUntil()
:选择当前元素到指定元素之间的所有同级元素。 -
.parent()
:选择当前元素的直接父元素。 -
.parents()
:选择当前元素的所有祖先元素。 -
.parentsUntil()
:选择当前元素到指定元素之间的所有祖先元素。 -
.children()
:取到所有的子标签 -
.siblings()
:同级别上下所有标签 -
.find()
:根据条件筛选