jQuery选择器

什么是jQuery选择器?
jQuery选择器 是指对#JavaScript# 选取元素的操作进行了封装,使选择 Html 元素时更加的容易。
jQuery选择器作用?
jQuery 选择器类似于 CSS 选择器,用来选取网页中的元素
$("h3").css("background","#09F");
获取并设置网页中所有 <h3> 元素的背景
“h3” 为选择器语法,必须放在 $()
$(“h3”) 返回 jQuery 对象
.css() 是为 jQuery 对象设置样式的方法
一、 jQuery 选择器分类
jQuery 选择器功能强大,种类也很多,需要学习的分类有以下几个:
1 、类 CSS 选择器
基本选择器 ,层次选择器 ,属性选择器
2 、过滤选择器
基本过滤选择器 ,可见性过滤选择器
jQuery 中,选择器的操作最终的结果都是一个集合,需要进一步处理集合中的元素,然后进行操
作。使用 jQuery 选择器,可以对一个或多个选取的 Html 元素进行操作,以达到完成指定的任务。
注意: jQuery 中, $(*) 表示选取 Html 页面中的全部元素,选取的是一个具有 HTML DOM 树形结构的集合。
二、基本选择器
基本选择器包括标签选择器、类选择器、 ID 选择器、并集选择器、交集选择器和全局选择器
名称
语法构成描述示例
标签选择
element
根据给定的标签名匹配元素
$("h2" )选取所有h2元素
类选择器
.class根据给定的class匹配元素
$(" .title") 选取所有 class title 的元
ID 选择器
#id根据给定的id匹配元素$(" #title")选取idtitle的元素
语法构成描述示例
selector1,...selectorN
将每一个选择器匹配的元素合并后一起返回
$("div,p,.title" ) 选取所有 div p和 <br />拥有 class title 的元素
element.class
element#id
匹配指定 class id 的某元素或元素集合
$("h2.title") 选取所有拥有 class
title h2 元素
*匹配所有元素$("*" )选取所有元素
示例
<div id="box"> id为box的div
<h2 class="title">class为title的h2</h2>
<h3 class="title">class为title的h3</h3>
<h3>热门排行</h3>
<dl>
<dt><img src="images/ch04/case_1.gif" width="93" height="99"
alt="斗地主" /></dt>
<dd class="title">斗地主</dd>
<dd>休闲游戏</dd>
<dd>QQ斗地主是国内同时在线人数最多的棋牌游戏......</dd>
</dl>
</div>
1 、标签选择器
标签选择器根据给定的标签名匹配元素
作用范围:当前 css 作用范围内所有叫该名字的标签被选中
使用说明:当所有的同一种标签需要设置相同的效果,那么我们可以用标签选择器
$("h3").css("background","#09F")
获取并设置所有 <h3> 元素的背景颜色
2 、类选择器
类选择器根据给定的 class 匹配元素
使用说明: 1 、在同一种标签使用,表示选中这类标签中的一部分 ( 加上相同 class 属性 )
2 、可以跨标签使用 ( 加上相同的 class 属性 )
$(".title").css("background","#09F")
获取并设置所有 class title 的元素的背景颜色
3 ID 选择器
ID 选择器根据给定的 id 匹配元素
使用说明:一个 id 值在一个页面只能使用一次,在页面中我们更多的是用来布局
$("#box").css("background","#09F")
获取并设置 id box 的元素的背景颜色
小结:样式的优先级:就近原则
ID 选择器 > 类选择器 > 标签选择器
4 、并集选择器
并集选择器用来合并元素集合,由多个基本 ( 单个 ) 选择器任意组合,每个选择器之间用逗号分隔
使用场景:当有很多种元素对象需要选择,但没有什么规律,用多个基本选择器选中。
$("h2,dt,.title").css("background","#09F")
获取并设置所有 <h2> <dt> class title 的元素的背景颜色
5 、交集选择器
交集选择器可以对元素集合根据 class id 再筛选
使用需要同时满足两个基本条件,再把两个选择器直接组合起来
A 、第一个基本选择器必须为标签选择器
B 、第二个基本选择器为非标签选择器(类、 id 选择器)
使用场景:通常是为了选择同一种 标签中的一部分对象元素
$("h2.title").css("background","#09F") 1
6 、全局选择器
全局选择器可以获取所有元素
改变所有元素的字体颜色
$("*").css("color","red")
jQuery选择器内容比较多,将分为三篇博客来讲述,这是第一篇
感谢大家的阅读,如有不对的地方,可以私信我,感谢大家!

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

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

相关文章

【Linux】对进程地址空间的理解

一、关于进程地址空间的简单理解 进程地址空间其实是分了很多个区域的&#xff0c;区域划分的本质就是区域内的各个地址都是可以使用的。如同下面这个图所示&#xff1a; 无论是环境变量的地址还是环境变量表的地址&#xff0c;所存放的地址都在栈的上部。这里的已初始化数据和…

golang 使用protobuf

1.下载protobuf的编译器&#xff0c;安装到系统设置环境变量 地址&#xff1a;https://github.com/protocolbuffers/protobuf/releases 下载对应的编译器 2.安装库文件 二选一 go get github.com/golang/protobuf/proto go get github.com/gogo/protobuf/proto 安装go语言插件 …

浅谈性能测试

本文主要针对WEB系统的性能测试。不涉及具体的执行操作&#xff0c;只是本人对性能测试的一点理解和认识。 性能测试的目的&#xff0c;简单说其实就是为了获取待测系统的响应时间、吞吐量、稳定性、容量等信息。而发现一些具体的性能相关的缺陷&#xff08;如内存溢出、并发处…

centos7系统下nginx1.24.0升级

如果没有这些目录&#xff0c;请先创建: mkdir /data/software mkdir /data/program提前下载所需的软件&#xff1a; cd /data/software wget https://ftp.pcre.org/pub/pcre/pcre-8.42.tar.gz wget https://nginx.org/download/nginx-1.24.0.tar.gz安装nginx cd /data/soft…

微信小程序开发之常用组件解释

1 基础内容组件 1.1text组件 text的功能主要是用于内联文本&#xff0c;与网页中的span有点类似。 主要属性有 例子&#xff1a;页面上添加一个可以选中的文本 在wxml文件中添加&#xff1a; <view> <text user-select>17544456565</text> </view>…

洗地机哪个好?专业对比,帮你选出比较适合的洗地机

随着科技的不断发展&#xff0c;洗地机已经成为了现代生活中不可或缺的清洁工具。然而&#xff0c;市面上涌现出各种各样的洗地机品牌&#xff0c;品质良莠不齐。因此&#xff0c;选择一个可靠的品牌至关重要&#xff0c;以确保产品质量和使用效果。为了帮助大家更好地选择&…

数据结构 之 栈与单调栈习题 力扣oj(附加思路版)

#include<stack> --栈的头文件 栈的特点 &#xff1a; 先进后出 &#xff0c; 后进先出 相关函数&#xff1a; top() 获取栈顶元素 ,返回栈顶元素的值 pop() 删除栈顶元素 ,没有返回值 push() 放入元素 ,没有返回值 empty() 为空返回 true 否则返回false size() 元素…

二叉树|701.二叉搜索树中的插入操作

力扣题目链接 class Solution { public:TreeNode* insertIntoBST(TreeNode* root, int val) {if (root NULL) {TreeNode* node new TreeNode(val);return node;}if (root->val > val) root->left insertIntoBST(root->left, val);if (root->val < val) r…

两分钟了解NTP网络时间服务器原理

两分钟了解NTP网络时间服务器原理 两分钟了解NTP网络时间服务器原理 NTP网络时间服务器是针对计算机、自动化装置等进行校时而研发的高科技设备&#xff0c;该产品可从GPS卫星&#xff08;北斗卫星、B码接口、PTP&#xff09;上获取标准的时间信号&#xff0c;将这些信号通过各…

从后端到前端

原文地址&#xff1a;从后端到前端 - Pleasure的博客 下面是正文内容&#xff1a; 前言 在前面几章中主要介绍了系统开发的后端部分&#xff0c;但是验证接口的适用性只能通过专门的软件&#xff08;Apifox&#xff0c;Postman等&#xff09;来进行测试。那从现在开始&#xf…

EmmyLua 远程调试 Lua 代码

EmmyLua EmmyLua 可以调试 C Lua 混合编程的项目 EmmyLua 调试器 Github 地址&#xff1a; https://github.com/EmmyLua/EmmyLuaDebugger LuaJIT 项目中用到 LuaJIT &#xff0c;正常思路静态链接了 LuaJIT 库。这导致了 EmmyLua 不能用 启动脚本 要使用 EmmyLua 远程调试…

网络安全实训Day12

写在前面 注意根据笔记中的缩进判断该文本所在层级。 网络空间安全实训-网络安全技术 SSL VPN SSL协议 定义&#xff1a;一种应用层的安全保护技术 工作流程 1.客户端与服务器通过三次握手建立TCP连接 2.客户端向服务器发送Client-Hello信息&#xff0c;消息中包含希望访问的…

【Java程序设计】【C00376】基于(JavaWeb)Springboot的社区帮扶对象管理系统(有论文)

【C00376】基于&#xff08;JavaWeb&#xff09;Springboot的社区帮扶对象管理系统&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 博主介绍&#xff1a;java高级开发&#xff0c;从事互联网行业六年&#xff0c;已经做了六年的毕业设计程序开发&am…

element UI季度选择器的实现

效果展示 用elementUI的select实现季度选择器 代码实现 generateQuarterOption放在methods中&#xff0c;需要近几年的只需要修改第一个循环的次数即可&#xff0c;mounted生命周期函数中调用generateQuarterOption() generateQuarterOption() {//近3年所有季度let now ne…

记录一次使用cert-manager-颁发CA证书

一、官网 SelfSigned - cert-manager Documentation 二、例子 apiVersion: v1 kind: Namespace metadata:name: sandbox --- apiVersion: cert-manager.io/v1 kind: ClusterIssuer metadata:name: selfsigned-issuer spec:selfSigned: {} --- apiVersion: cert-manager.io/v…

如何删除Excel中的空白行?这里提供详细步骤

要从数据集中删除所有空白行吗&#xff1f;如果是这样&#xff0c;Microsoft Excel提供自动和手动方法来清除空白行并向上移动数据。下面是如何使用这些方法。 删除空白行时&#xff0c;Excel会删除整行并上移数据&#xff0c;以便数据集中不再有空行。记住&#xff0c;你也可…

Java-常见面试题收集(五)

十一 并发编程 1 BIO、NIO、AIO 的区别 同步阻塞 I/O(BIO)&#xff1a;同步阻塞 I/O&#xff0c;服务器实现模式为一个连接一个线程&#xff0c;即客户端有连接请求时服务器就需要启动一个线程进行处理&#xff0c;如果这个连接不做任何事情会造成不必要的线程开销&#xff0c…

1.7.2 练习

一、projecrion函数 题目&#xff1a;projecrion函数中的第一个参数fov和第二个参数ratio参数进行实验。看能否搞懂它们是如何影响透视平截头体的。 当ratio不变&#xff0c;fov值变大&#xff0c;显示的物体会变小&#xff1b;当fov不变&#xff0c;radio值变大&#xff0c;…

机器学习:探索数据中的模式与智能

文章目录 导言介绍&#xff1a;机器学习的定义和重要性发展历程&#xff1a;从概念到现实应用 基础概念机器学习的基本原理监督学习、无监督学习和强化学习的区别与应用1.监督学习2.无监督学习3.强化学习 常见的机器学习任务和应用领域 结语 导言 当代科技领域中最为引人注目的…

git reset版本回退后悔药(图文例子)

目录 版本回退前期测试样例准备git reset --soft 不撤销add,撤销commit,保留修改git reset --mixed 或 git reset () 撤销add,撤销commit,保存修改git reset --hard 撤销add,撤销commit,不保存修改git reset --merge 取消合并git reset --keep 不撤销add,撤销commit,根据情况判…