16jQuery基本语法

【一】jQuery基本语法

jQuery(选择器).action()
简写
jQuery(选择器) ---->  $(选择器)
(1)js与jquery对比
<script>// 原生jslet p1Ele = document.getElementById("p1");let p2Ele = document.getElementById("p2");
​p1Ele.style.color = 'red'p2Ele.style.color = 'green'
​
// jQuery$('#d1').css('color','red').next().css('color','green')
</script>

【二】基本选择器

1.元素选择器(Element Selector)会得到第一个匹配的html代码
eg:段落选择器$('p');
​
2.ID选择器(ID Selector)
eg: 选择具有id= "d1"的元素$('#d1');
​
3.类选择器(Class Selector)
eg:选择具有 class="d1" 的元素$('.d1');
​
4.属性选择器(Attribute Selector)
eg:选择所有具有 "target" 属性的元素$('[target]');
​
5.选择器组合(分组)
eg:选择所有段落元素和具有class="d1"的元素和id="d1"的元素$('p,.d1,#d1');
​
6.后代选择器 空格
eg:选择所有 "myElement" 元素内的段落元素$('#myElement p');
​
7.子元素选择器(Child Selector)>
eg:选择所有 "myElement" 元素的直接子元素中的段落元素$('#myElement > p');
​
8.下一个兄弟元素选择器+
eg:选择紧接在 "myElement" 元素后的下一个兄弟元素$('#myElement + div');
​
9.后续所有兄弟元素选择器~
eg:选择紧接在 "myElement" 元素后的所有兄弟元素中具有 "myClass" 类的元素$('#myElement ~ .myClass');

【三】分组和嵌套

1.分组--》同时选择匹配这些选择器的所有元素
$('.selector1, .selector2').doSomething();
​
2.嵌套--》用于表示某个选择器的子元素或特定关系的元素。
$('parent').find('.child').doSomething();//parent标签下的class=id的元素

【四】基本筛选器

(1):first选择第一个匹配元素。
(2):last选择最后一个匹配元素。
(3):even选择索引为偶数的匹配元素(索引从0开始)。
(4):odd选择索引为奇数的匹配元素(索引从0开始)。
(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选择有子元素或文本的元素
​

【五】属性选择器

1.选择具有特定属性的元素:$("[attribute]")eg:选择所有具有"src"属性的图片元素:$("[src]")2.选择具有特定属性值的元素:$("[attribute=value]")eg:选择所有"href"属性值为"https://example.com"的链接元素:$("a[href='https://example.com']")
​
3.选择具有包含特定属性值的元素:$("[attribute*=value]")
eg:$("[class='up']")
​
4.选择具有以特定属性值开头的元素:$("[attribute^=value]")eg:选择所有"href"属性值以"https://"开头的链接元素:$("a[href^='https://']")5.选择具有以特定属性值结尾的元素:$("[attribute$=value]")eg:选择所有"src"属性值以".jpg"结尾的图片元素:$("img[src$='.jpg']")
​
6.选择具有以特定属性值开头且以特定字符串结尾的元素:$("[attribute^=value][attribute$=value]")eg:选择所有"src"属性值以"images/"开头且以".jpg"结尾的图片元素:$("img[src^='images/'][src$='.jpg']")

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Maven Dependencies missing jar 解决

信息摘要来自:https://blog.csdn.net/weixin_33769207/article/details/93681274 项目右键maven->update project。 如果还有 missing 的jar&#xff0c;再项目右键maven->update project&#xff0c;但是这次勾选 Force Update ...那一行&#xff0c;再OK。 如果此时依然…

【2024最新】Arduino通过Python进行串口通信控制电机

1. 背景 最近想研究一下用 Python 控制 Arduino 的技术&#xff0c;通过上网查询&#xff0c;发现可以用 Python 中的 serial 库来实现和 Arduino 主板的串口通信&#xff0c;从而控制 Arduino。 特此记录一下这个小项目的过程及出现的问题。 2. 基础准备 主板&#xff1a;…

selenium常用方法

打开浏览器定位元素的方法操作元素的方法操作浏览器的方法操作选择框的方法操作鼠标的方法 打开浏览器 from selenium import webdriver from selenium.webdriver.common.by import Bydriver webdriver.Edge()url "..." driver.get(url) driver.maximize_window()…

景联文科技打造高质量图文推理问答数据集,赋能大语言模型提升推理能力

大语言模型在处理推理任务时&#xff0c;不同于人类能够反思错误并修正思维路径&#xff0c;当它遇到自身知识盲区时&#xff0c;缺乏自我校正机制&#xff0c;往往导致输出结果不仅无法改善&#xff0c;反而可能变得更不准确。 需要依赖外部的知识库和推理能力来克服其在理解和…

【MySQL】2.库的操作

库的操作 一.创建数据库1.数据库的编码集 二.查看数据库三.修改数据库四.删除数据库五.数据库的备份和恢复 一.创建数据库 create database [if not exists] db_name [charsetutf8] [collateutf8_general_ci] //创建一个名为db_name的数据库&#xff0c;本质就是在/var/lib/my…

视觉图像面积计算

在图像处理和计算机视觉中&#xff0c;计算对象面积的常见方法有两种&#xff1a;使用四邻域标记算法和使用轮廓计算。每种方法在不同情况下有各自的优缺点。 四邻域标记算法&#xff1a; 优点&#xff1a; 简单易实现。能够处理带有孔洞的复杂区域&#xff08;只要孔洞不影响连…

WebKit性能优化秘籍:打造极速网页体验

WebKit性能优化秘籍&#xff1a;打造极速网页体验 在现代Web开发中&#xff0c;WebKit作为核心渲染引擎&#xff0c;其性能直接影响到网页的加载速度和运行效率。优化WebKit性能&#xff0c;不仅可以提升用户体验&#xff0c;还能增强应用的竞争力。本文将深入探讨如何优化Web…

Amazon Kinesis常用权限分类详解

Amazon Kinesis是一套用于实时收集、处理和分析数据流的平台化服务。为了确保Kinesis资源的安全性和访问控制,AWS提供了一套细粒度的权限管理机制。本文将详细介绍Kinesis的常用权限分类,并提供相应的JSON策略示例。 1. Kinesis Data Streams权限 Kinesis Data Streams是Ki…

蚓链实践告诉你“企业确保达成数字化营销效果的方法”

在如今这个数字化盛行的时代&#xff0c;企业想在激烈的市场竞争里崭露头角&#xff0c;确保数字营销效果那可是至关重要&#xff01;今天就来给大家聊聊实现这一目标的基本条件&#xff0c;来自蚓链数字化营销系统的广大用户体验总结。 一、精准的目标定位 企业一定要清楚地知…

uniapp 表格,动态表头表格封装渲染

1.接口表格数据&#xff1a; {"headers": [{"label": "实例名","name": "v1","order": 1,"hide": false,"dateTypeValue": null},{"label": "所属科室","name&quo…

CentOS 安装 annie/lux,以及 annie/lux 的使用

annie 介绍 如果第一次听到 annie 想必都会觉得陌生&#xff0c;annie 被大家称为视频下载神器&#xff0c;annie 作者介绍说可以下载抖音、哔哩哔哩、优酷、爱奇艺、芒果TV、YouTube、Tumblr、Vimeo 等平台的视频。 githup&#xff1a;https://github.com/pingf/annie 支持…

使用Boost.Asio编写TCP通信程序框架(一)

基于Boost.Asio库编写TCP通信程序框架&#xff1a; 我们首先需要明确几个关键点&#xff1a;节点间如何建立连接、消息如何传输、以及如何处理网络事件。以下是一个简化的设计方案&#xff1a; 1. 设计目标 可扩展性&#xff1a;系统应该能够轻松地添加或移除节点。容错性&…

51单片机嵌入式开发:1、STC89C52环境配置到点亮LED

STC89C52环境配置到点亮LED 1 环境配置1.1 硬件环境1.2 编译环境1.3 烧录环境 2 工程配置2.1 工程框架2.2 工程创建2.3 参数配置 3 点亮一个LED3.1 原理图解读3.2 代码配置3.3 演示 4 总结 1 环境配置 1.1 硬件环境 硬件环境采用“华晴电子”的MINIEL-89C开发板&#xff0c;这…

服务发现与注册:Eureka与Consul

在微服务架构中&#xff0c;服务发现与注册是一个非常重要的部分。通过服务发现机制&#xff0c;微服务能够相互找到并进行通信&#xff0c;而不需要了解彼此的具体地址。本文将详细介绍两种主流的服务发现与注册框架&#xff1a;Eureka和Consul&#xff0c;并提供相应的代码示…

elasticSearch快速了解

elasticSearch&#xff1a;经常用于搜索引擎&#xff0c;我们用的百度搜索和github上的搜索都是用的搜索引擎&#xff0c;它是对输入内容进行分析&#xff0c;然后查询&#xff0c;不像数据库模糊搜索的like一样必须含用你输入的全部内容。 elasticSearch优势&#xff1a;支持…

一文解决:你与该网站的连接不是私密连接,存在安全隐患

访问网页时&#xff0c;是不是会经常遇到网站不是私密连接的提示&#xff1f;当浏览器提示某个网页不安全时&#xff0c;这通常是因为网页使用的是非加密的HTTP协议&#xff0c;或者其HTTPS协议的SSL/TLS证书存在问题。 通常遇到这类网站时要注意&#xff0c;一来是网站未与证书…

`THREE.Line` 是 Three.js 中用于创建线段的类。

demo案例 THREE.Line 是 Three.js 中用于创建线段的类。以下是 THREE.Line 的详细说明&#xff0c;包括构造函数参数、输出、方法和属性。 构造函数 new THREE.Line(geometry, material, mode) geometry (THREE.BufferGeometry 或 THREE.Geometry): 定义线段的几何体。mater…

概率解码:SKlearn中模型的概率预测指南

概率解码&#xff1a;SKlearn中模型的概率预测指南 在机器学习中&#xff0c;概率预测是一种评估样本属于某个类别可能性的方法。这种预测方式不仅提供了分类结果&#xff0c;还给出了预测的置信度。Scikit-learn&#xff08;简称sklearn&#xff09;&#xff0c;作为Python中…

[图解]SysML和EA建模住宅安全系统-12-内部块图

1 00:00:00,580 --> 00:00:02,770 接下来我们来画流了 2 00:00:03,100 --> 00:00:05,050 首先第一个是站点状态 3 00:00:05,140 --> 00:00:08,130 从这里到这里&#xff0c;我们画一个过来 4 00:00:10,290 --> 00:00:11,890 这里流到这里 5 00:00:11,900 -->…

汉中茗茶小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;基础数据管理&#xff0c;茶叶管理&#xff0c;论坛管理&#xff0c;公告管理&#xff0c;茗茶历史管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;茗茶信息&#xf…