jQuery 基础、选择器和筛选器

【一】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默认配置

  1. 首先进入settings界面
  2. 点击Editor
  3. 再点击File and Code Templates
  4. 编辑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()：根据条件筛选

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/2807790.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

vivado VHDL Objects、VHDL实体描述

vivado VHDL Objects、VHDL实体描述

VHDL对象包括&#xff1a;信号、变量、常量和运算符。 信号 在中声明VHDL信号&#xff1a; •体系结构声明部分&#xff1a;在该体系结构内的任何位置使用VHDL信号。 •一个块&#xff1a;在该块中使用VHDL信号。 使用<信号分配运算符分配VHDL信号。 signal sig1 : std…
阅读更多...
matlab|计及源荷不确定性的综合能源生产单元运行调度与容量配置随机优化模型

matlab|计及源荷不确定性的综合能源生产单元运行调度与容量配置随机优化模型

目录 1 主要内容 1.1 风光场景聚类 1.2 主模型程序结果 1.3 随机模型和确定性模型对比 1.4 有无储气对比 1.5 煤价灵敏性分析 1.6 甲烷价格灵敏性分析 2 部分程序 3 下载链接 1 主要内容 本程序复现《计及源荷不确定性的综合能源生产单元运行调度与容量配置两阶段随机…
阅读更多...
基础算法（算法竞赛）--排序区间合并火烧赤壁、堆 序列合并

基础算法（算法竞赛）--排序区间合并火烧赤壁、堆 序列合并

1、B站视频链接&#xff1a;A21 排序 区间合并_哔哩哔哩_bilibili 题目链接&#xff1a;火烧赤壁 - 洛谷 #include <bits/stdc.h> using namespace std; #define N 20005 struct line{int l,r;bool operator<(line &t){return l<t.l;} }a[N];//定义结构体数组…
阅读更多...
面向对象设计模式

面向对象设计模式

一、单例 一个类只能创建唯一一个对象 利用限制构造、static完成 二、工厂模式 优势&#xff1a;规范接口&#xff08;纯虚函数&#xff09;&#xff1b;实现多态&#xff08;虚函数表&#xff09;&#xff1b;继承 1、简单工厂 一个工厂创建所有产品。 返回基类指针可…
阅读更多...
µC/OS-II---两个系统任务

µC/OS-II---两个系统任务

目录 空闲任务---OS_TaskIdle()统计任务---OS_TaskStat()统计任务初始化统计任务代码 OSInit()函数二者的协调使用 空闲任务—OS_TaskIdle() C/OS-II 规定&#xff1a;一个用户应用程序必须使用这个空闲任务&#xff0c;而且这个任务不能用软件来删除。优先级别&#xff1a;OS…
阅读更多...
K线实战分析系列之七：行情顶部的看跌信号——黄昏星形态

K线实战分析系列之七：行情顶部的看跌信号——黄昏星形态

K线实战分析系列之七&#xff1a;行情顶部的看跌信号——黄昏星形态 一、黄昏星形态二、黄昏线总结 一、黄昏星形态 二、黄昏线总结 黄昏星的高点形成阻力位&#xff0c;启明星的低点形成支撑位中间的星线实体与第一根K线的实体跳空区域比较宽&#xff0c;第三根K线覆盖了第一…
阅读更多...
linux系统git仓库

linux系统git仓库

git仓库 获取 Git 仓库&#xff08;初始化仓库&#xff09;创建裸库创建本地库 获取 Git 仓库&#xff08;初始化仓库&#xff09; 创建裸库 git仓库服务器创建useradd git passwd git mkdir /git-root/ cd /git-root/git init --bare shell.git #制作裸库chown -R git:gi…
阅读更多...
Linux进程信号 ----- （信号保存）

Linux进程信号 ----- （信号保存）

前言 信号从产生到执行&#xff0c;并不会被立即处理&#xff0c;这就意味着需要一种 “方式” 记录信号是否产生&#xff0c;对于 31 个普通信号来说&#xff0c;一个 int 整型就足以表示所有普通信号的产生信息了&#xff1b;信号还有可能被 “阻塞”&#xff0c;对于这种多状…
阅读更多...
在Win11上部署Stable Diffusion WebUI Forge

在Win11上部署Stable Diffusion WebUI Forge

Stable Diffusion WebUI Forge 是 Stable Diffusion WebUI&#xff08;基于 Gradio&#xff09;之上的平台&#xff0c;可简化开发、优化资源管理并加快推理速度。“Forge”这个名字的灵感来自“Minecraft Forge”。这个项目旨在成为SD WebUI的Forge。 与原始 WebUI&#xff0…
阅读更多...
MySQL数据库调优之关联查询、排序查询、分页查询、子查询、Group by优化

MySQL数据库调优之关联查询、排序查询、分页查询、子查询、Group by优化

关联查询优化 1.准备工作 CREATE TABLE IF NOT EXISTS type(id INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,card INT(10) UNSIGNED NOT NULL,PRIMARY KEY(id));CREATE TABLE IF NOT EXISTS book( bookid INT(10) UNSIGNED NOT NULL AUTO_INCREMENT, card INT(10) UNSIGNED N…
阅读更多...
堆C++（Acwing）

堆C++（Acwing）

代码&#xff1a; #include <iostream> #include <algorithm> #include <string.h>using namespace std;const int N 100010;int h[N], hp[N], ph[N], cnt;void heap_swap(int a, int b) {swap(ph[hp[a]] ,ph[hp[b]]);swap(hp[a], hp[b]);swap(h[a], h[b])…
阅读更多...
1904_ARM Cortex M系列芯片特性小结

1904_ARM Cortex M系列芯片特性小结

1904_ARM Cortex M系列芯片特性小结 全部学习汇总&#xff1a; g_arm_cores: ARM内核的学习笔记 (gitee.com) ARM Cortex M系列的MCU用过好几款了&#xff0c;也涉及到了不同的内核。不过&#xff0c;关于这些内核的基本的特性还是有些不了解。从ARM的官方网站上找来了一个对比…
阅读更多...
[力扣 Hot100]Day33 排序链表

[力扣 Hot100]Day33 排序链表

题目描述 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 出处 思路 归并排序即可。 代码 class Solution { public:ListNode* merge(ListNode *h1,ListNode *h2) {ListNode *head nullptr;if(h1->val<h2->val){head h1;h1h1-…
阅读更多...
Sora：颠覆性AI视频生成工具

Sora：颠覆性AI视频生成工具

Sora是一款基于人工智能&#xff08;AI&#xff09;技术的视频生成工具&#xff0c;它彻底改变了传统视频制作的模式&#xff0c;为创作者提供了高效、便捷、高质量的视频内容生成方式。通过深度学习和自然语言处理等先进技术&#xff0c;Sora实现了从文字描述到视频画面的自动…
阅读更多...
计算机体系架构初步入门

计算机体系架构初步入门

&#x1f3ac;个人简介&#xff1a;一个全栈工程师的升级之路&#xff01; &#x1f4cb;个人专栏&#xff1a;高性能&#xff08;HPC&#xff09;开发基础教程 &#x1f380;CSDN主页 发狂的小花 &#x1f304;人生秘诀&#xff1a;学习的本质就是极致重复! 目录 1 计算机五大…
阅读更多...
数据结构-列表LinkedList

数据结构-列表LinkedList

一,链表的简单的认识. 数组,栈,队列是线性数据结构,但都算不上是动态数据结构,底层都是依托静态数组,但是链表是确实真正意义上的动态数组. 为什么要学习链表? 1,链表时最简单的动态数据结构 2,掌握链表有助于学习更复杂的数据结构,例如,二叉树,trie. 3,学习链表有助于更深入…
阅读更多...
【深度学习笔记】卷积神经网络——多输入多输出通道

【深度学习笔记】卷积神经网络——多输入多输出通道

多输入多输出通道 虽然我们在subsec_why-conv-channels中描述了构成每个图像的多个通道和多层卷积层。例如彩色图像具有标准的RGB通道来代表红、绿和蓝。 但是到目前为止&#xff0c;我们仅展示了单个输入和单个输出通道的简化例子。 这使得我们可以将输入、卷积核和输出看作二…
阅读更多...
EasyRecovery2024电脑版软件评测与使用教程

EasyRecovery2024电脑版软件评测与使用教程

一、EasyRecovery电脑版软件评测 EasyRecovery电脑版是一款功能强大、操作简便的数据恢复软件。它适用于多种场景&#xff0c;无论是误删除、格式化、分区丢失还是硬件故障&#xff0c;都能提供有效的恢复方案。该软件界面直观&#xff0c;即便没有技术背景的用户也能轻松完成…
阅读更多...
使用 React 和 MUI 创建多选 Checkbox 树组件

使用 React 和 MUI 创建多选 Checkbox 树组件

在本篇博客中&#xff0c;我们将使用 React 和 MUI&#xff08;Material-UI&#xff09;库来创建一个多选 Checkbox 树组件。该组件可以用于展示树形结构的数据&#xff0c;并允许用户选择多个节点。 前提 在开始之前&#xff0c;确保你已经安装了以下依赖&#xff1a; Reac…
阅读更多...
GEE入门篇|遥感专业术语（实践操作3）：时间分辨率（Temporal Resolution）

GEE入门篇|遥感专业术语（实践操作3）：时间分辨率（Temporal Resolution）

目录 时间分辨率&#xff08;Temporal Resolution&#xff09; 1.Landsat 2.Sentinel-2 时间分辨率&#xff08;Temporal Resolution&#xff09; 时间分辨率是指特定传感器图像流的重访时间或时间节奏&#xff0c;重访时间是指卫星连续访问地球表面同一位置…
阅读更多...
最新文章

Copyright @ 2022~2023