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()：根据条件筛选

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

LeetCode二叉搜索树的最近公共祖先

LeetCode二叉搜索树的最近公共祖先

题目描述 给定一个二叉搜索树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个结点 p、q&#xff0c;最近公共祖先表示为一个结点 x&#xff0c;满足 x 是 p、q 的祖先且 x 的深度尽可能大&#xff08;一个节点也…
阅读更多...
前后端分离Vue+nodejs校园论坛bbs系统x450z

前后端分离Vue+nodejs校园论坛bbs系统x450z

开发语言 node.js 框架&#xff1a;Express 前端:Vue.js 数据库&#xff1a;mysql 数据库工具&#xff1a;Navicat 开发软件&#xff1a;VScode本论文拟采用计算机技术设计并开发的论坛bbs系统&#xff0c;主要是为用户提供服务。使得用户可以在系统上查看帖子信息、签到积分等…
阅读更多...
数字化转型导师鹏：政府数字化转型政务服务类案例研究

数字化转型导师鹏：政府数字化转型政务服务类案例研究

政府数字化转型政务服务类案例研究 课程背景&#xff1a; 很多地方政府存在以下问题&#xff1a; 不清楚标杆省政府数字化转型的政务服务类成功案例 不清楚地级市政府数字化转型的政务服务类成功案例 不清楚县区级政府数字化转型的政务服务类成功案例 课程特色&#x…
阅读更多...
Apache POI技术-在Java中的基本使用

Apache POI技术-在Java中的基本使用

Apache POI技术-在Java中的基本使用 文章目录 Apache POI技术-在Java中的基本使用前言一、Apache POI是什么&#xff1f;1.Apache POI简介&#xff1a;2.Apache POI主要包括的模块&#xff1a;3.Apache POI 的应用场景&#xff1a;报表生成&#xff1a;数据导入导出&#xff1a…
阅读更多...
Python爬虫进阶：爬取在线电视剧信息与高级检索

Python爬虫进阶：爬取在线电视剧信息与高级检索

简介&#xff1a; 本文将向你展示如何使用Python创建一个能够爬取在线电视剧信息的爬虫&#xff0c;并介绍如何实现更高级的检索功能。我们将使用requests和BeautifulSoup库来爬取数据&#xff0c;并使用pandas库来处理和存储检索结果。 目录 一、爬取在线电视剧信息 …
阅读更多...
[ai笔记13] 大模型架构对比盘点：Encoder-Only、Decoder-Only、Encoder-Decoder

[ai笔记13] 大模型架构对比盘点：Encoder-Only、Decoder-Only、Encoder-Decoder

欢迎来到文思源想的ai空间&#xff0c;这是技术老兵重学ai以及成长思考的第13篇分享&#xff01; 最近看完《这就是chatgpt》对于大语言模型的三种架构演进图印象颇深&#xff0c;今日就专题盘点一下三种大模型架构理论&#xff0c;同时做一个简单对比。 1 Encoder-Only架构 …
阅读更多...
day4：对话框与事件

day4：对话框与事件

使用qt搭建一个简易的闹钟系统 #include "second.h" #include "ui_second.h"second::second(QWidget *parent) :QWidget(parent),ui(new Ui::second) {ui->setupUi(this);this->setWindowFlag(Qt::FramelessWindowHint);this->setAttribute(Qt::…
阅读更多...
基于yolov5的电瓶车和自行车检测系统，可进行图像目标检测，也可进行视屏和摄像检测（pytorch框架）【python源码+UI界面+功能源码详解】

基于yolov5的电瓶车和自行车检测系统，可进行图像目标检测，也可进行视屏和摄像检测（pytorch框架）【python源码+UI界面+功能源码详解】

功能演示&#xff1a; 基于yolov5的电瓶车和自行车检测系统_哔哩哔哩_bilibili &#xff08;一&#xff09;简介 基于yolov5的电瓶车和自行车检测系统是在pytorch框架下实现的&#xff0c;这是一个完整的项目&#xff0c;包括代码&#xff0c;数据集&#xff0c;训练好的模型…
阅读更多...
【Linux】部署前后端分离项目---(Nginx自启，负载均衡）

【Linux】部署前后端分离项目---(Nginx自启，负载均衡）

目录 前言 一 Nginx&#xff08;自启动&#xff09; 2.1 Nginx的安装 2.2 设置自启动Nginx 二 Nginx负载均衡tomcat 2.1 准备两个tomcat 2.1.1 复制tomcat 2.1.2 修改server.xml文件 2.1.3 开放端口 2.2 Nginx配置 2.2.1 修改nginx.conf文件 2.2.2 重启Nginx服务 2…
阅读更多...
代码随想录刷题笔记 DAY 32 | K 次取反后最大化的数组和 No.1005 | 加油站 No.134 | 分发糖果 No.135

代码随想录刷题笔记 DAY 32 | K 次取反后最大化的数组和 No.1005 | 加油站 No.134 | 分发糖果 No.135

文章目录 Day 3201. K 次取反后最大化的数组和&#xff08;No. 1005&#xff09;1.1 题目1.2 笔记1.3 代码 02. 加油站&#xff08;No. 134&#xff09;2.1 题目2.2 笔记2.3 代码 03. 分发糖果&#xff08;No. 135&#xff09;3.1 题目3.2 笔记3.3 代码 Day 32 01. K 次取反后…
阅读更多...
测试C#使用PuppeteerSharp将网页生成PDF文件

测试C#使用PuppeteerSharp将网页生成PDF文件

微信公众号“DotNet开发跳槽”、“dotNET跨平台”、“DotNet”发布了几篇将网页生成图片或pdf文件的文章&#xff08;参考文献2-5&#xff09;&#xff0c;其中介绍了使用puppeteer-sharp、Select.HtmlToPdf、iTextSharp等多种方式实现html转图片或pdf&#xff0c;正好最近有类…
阅读更多...
探秘SuperCLUE-Safety：为中文大模型打造的多轮对抗安全新框架

探秘SuperCLUE-Safety：为中文大模型打造的多轮对抗安全新框架

探秘SuperCLUE-Safety&#xff1a;为中文大模型打造的多轮对抗安全新框架 进入2023年以来&#xff0c;ChatGPT的成功带动了国内大模型的快速发展&#xff0c;从通用大模型、垂直领域大模型到Agent智能体等多领域的发展。但是生成式大模型生成内容具有一定的不可控性&#xff0…
阅读更多...
本地部署ChatGPT

本地部署ChatGPT

发布一下我之前做的一个本地大模型部署,不需要API key,但要有自己的账号 利用Docker 的Pandora做本地ChatGPT模型部署 先下载安装Docker,设置好运行如下 会要求升级核心,cmd运行如下命令就OK 安装Pandora 再管理员cmd中输入如下命令拉取Pandora镜像 docker pull pengzhi…
阅读更多...
SpringBoot -【BeanFactory】基础使用及应用场景

SpringBoot -【BeanFactory】基础使用及应用场景

1.介绍 在 Spring 框架中&#xff0c;BeanFactory 是 Spring IoC 容器的核心接口&#xff0c;负责管理 bean 的创建、配置和装配。它是 Spring IoC 容器的基础。BeanFactory 接口定义了一系列方法&#xff0c;用于管理和访问容器中的 bean 对象。 BeanFactoryAware 用于在 Sp…
阅读更多...
AD24-Gerber生产文件输出及整理

AD24-Gerber生产文件输出及整理

一、Gerber生产文件输出 1、先进行规则检查 2、Gerber Files输出 3、钻孔文件 4、IPC网表 5、坐标文件 二、Gerber Flies文件整理 1、CAM 2、SMT 3、ASM 4、PRJ 5、DXF
阅读更多...
Django定时任务之django_apscheduler使用

Django定时任务之django_apscheduler使用

Django定时任务之django_apscheduler使用 今天在写一个任务需求时需要用到定时任务来做一部分数据处理与优化&#xff0c;于是在了解完现有方法&#xff0c;结合自己需求决定使用django_apscheduler&#xff0c;记录一下过程&#xff0c;有几篇值得参考的文章放在结尾&#xf…
阅读更多...
8.网络游戏逆向分析与漏洞攻防-游戏网络架构逆向分析-游戏底层功能对接类GameProc的实现

8.网络游戏逆向分析与漏洞攻防-游戏网络架构逆向分析-游戏底层功能对接类GameProc的实现

内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;通过逆向分析确定游戏明文接收数据过程 码云地址&#xff08;master 分支&#xff09;&#xff1a;https://gitee.com/dye_your_fingers/titan 码云版本号&#xff1a;bcf7559184863febdcad819e48aaa…
阅读更多...
应用配置管理

应用配置管理

一、Pod 配置管理 可变配置用 ConfigMap&#xff1b; 敏感信息用 Secret&#xff1b; 身份认证用 ServiceAccount 这几个独立的资源来实现的&#xff1b; 资源配置用 Resources&#xff1b; 安全管控用 SecurityContext&#xff1b; 前置校验用 InitContainers 这几个在 …
阅读更多...
在VSCode中新配置一个ros项目

在VSCode中新配置一个ros项目

如何从零开始配置一个ros项目 预先准备初始化ros工程运行hello_ros进行第一个示例进行编译测试 预先准备 首先要在vscode中安装&#xff08;必须安装的&#xff09;&#xff1a;ros&#xff0c;c&#xff0c;cmake&#xff0c;cmake tools&#xff08;补全camkelist文件&#…
阅读更多...
Mcal篇 配置Dio模块输出

Mcal篇 配置Dio模块输出

1、打开EB&#xff0c;新建工程 AUTOSAR version 4.0.3 2、导入Mcu 、Dio、Port三个模块 发现 verify 选项是灰色&#xff0c;重启EB verify&#xff0c;0 Errors 0 Warnings 验证OK 3、配置 clock 时钟 4、配置Dio 目标是 配置15.0~15.3 四个引脚 输出 改为DioPort_…
阅读更多...
最新文章

Copyright @ 2022~2023