【jQuery】 jQuery基础及选择器介绍（基本选择器 层次选择器 属性选择器 过滤选择器）

文章目录

  • jQuery基础
    • 1. 优势
    • 2. 版本
    • 3. 基本语法
    • 4. 选择器
      • 基本选择器
      • 层次选择器
      • 属性选择器
      • 过滤选择器
        • 基本过滤选择器
        • 可见性过滤选择器
      • 注意事项

jQuery基础

jQuery 是一个功能强大且易于使用的 JavaScript 库，它极大地简化了前端开发的工作。无论是 DOM 操作、事件处理还是 Ajax 交互，jQuery 都能提供简洁高效的解决方案。尽管近年来随着 ES6+ 以及框架如 React、Vue 和 Angular 的兴起，jQuery 的使用频率有所下降，但对于许多项目来说，尤其是那些不需要复杂状态管理和虚拟 DOM 更新的项目，jQuery 仍然是一个非常实用的选择。

设计思想：write less, do more

  • jQuery 官网
  • jQuery 中文 API 手册

1. 优势

通过一个简单的例子来对比原生 JavaScript 和使用 jQuery 的不同之处

需求说明：
当用户点击页面中的按钮时，将一个文本框中的文本变为大写，并且改变背景颜色。

<!-- 使用原生 JavaScript -->
<style>
    .uppercase {background-color: yellow;}
</style>
<body>
    <input type="text" id="myInput" value="hello world">
    <button id="convert">转换为大写</button>

    <script>
        document.getElementById('convert').addEventListener('click', function() {
            var inputElement = document.getElementById('myInput');
            inputElement.value = inputElement.value.toUpperCase();
            inputElement.classList.add('uppercase');
        });
    </script>
</body>

<!-- 使用原生 jQuery -->
<style>
    .uppercase {background-color: yellow;}
</style>
<script src="https://code.jquery.com/jquery-3.x.x.min.js"></script>
<body>
    <input type="text" id="myInput" value="hello world">
    <button id="convert">转换为大写</button>

    <script>
        $(document).ready(function() {
            $("#convert").click(function() {
                var inputElement = $("#myInput");
                inputElement.val(inputElement.val().toUpperCase());
                inputElement.addClass('uppercase');
            });
        });
    </script>
</body>

代码量

  • 原生 JavaScript：需要导入 DOM 元素，添加事件监听器，并且手动改变文本和样式。
  • jQuery：使用链式调用和更简洁的选择器，使得代码更短更清晰。

语法简洁性

  • 原生 JavaScript：语法相对繁琐，需要显式地获取元素引用，绑定事件处理函数。
  • jQuery：语法更为简洁，使用 $ 符号和链式调用可以让代码更加紧凑。

易读性和可维护性

  • 原生 JavaScript：虽然现代 JavaScript 已经非常强大，但是对于一些简单的DOM操作，代码仍然显得有些冗长。
  • jQuery：代码更容易阅读，维护起来也更方便

JavaScript 转 jQuery $(js对象);

jQuery 转 JavaScript $(选择器).get(0); / $(选择器)[0]

2. 版本

jQuery 库分开发版和发布版

名称大小说明
jquery-3.版本号.js（开发版）约286KB完整无压缩版本，主要用于测试、学习和开发
jquery-3.版本号.min.js（发布版）约94.8KB经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>

3. 基本语法

// 为页面加载事件绑定方法
$(document).ready(function() {
    alert("我欲奔赴沙场征战jQuery，势必攻克之！");
});

$(document).ready() 与 window.onload 类似，但也有区别

window.onload$(document).ready()
执行时机必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行网页中所有 DOM 文档结构绘制完毕后即刻执行，可能与 DOM 元素关联的内容（图片、flash、视频等）并没有加载完
编写个数同一页面不能同时编写多个同一页面能同时编写多个
简化写法无$(function(){
// 执行代码
});

4. 选择器

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作

基础语法是：$(selector).action()

基本选择器

标签选择器、类选择器、ID选择器、并集选择器和全局选择器

名称语法构成描述示例
标签选择器element根据给定的标签名匹配元素$(“h2”)选取所有h2元素
类选择器.class根据给定的class匹配元素$(“.title”)选取所有class为title的元素
ID选择器#id根据给定的id匹配元素$(“#title”)选取id为title的元素
并集选择器selector1,selector2,…,selectorN将每一个选择器匹配的元素合并后一起返回$(“div,p,.title” )选取所有div、p和拥有class为title的元素
全局选择器*匹配所有元素$(“*”)选取所有元素

标签选择器根据给定的标签名匹配元素

$(document).ready(function(){
    $("dt").click(function(){
        $("dd").css("display","block"); // 设置<dd>标签中的内容显示出来
    });
    $("h1").css("color","blue"); // 设置<h1>标签中的字体颜色为蓝色
})

类选择器根据给定的class匹配元素

$(".price").css({"background":"#efefef","padding":"5px"});
// 设置class为price元素的背景颜色和内边距

ID选择器根据给定的 id 匹配元素

$("#author").css("color","#083499");
// 设置 id 为 author 的元素的字体颜色

并集选择器用来合并元素集合

$(".intro,dt,dd").css("color","#ff0000");
// 改变 class 为 intro,所有dt,dd颜色为纯红色

全局选择器可以获取所有元素

$("*").css("font-weight","bold");
// 设置所有元素的字体加粗显示

层次选择器

通过 DOM 元素之间的层次关系来获取元素

名称语法构成描述示例
后代选择器ancestor descendant选取ancestor元素里的所有descendant（后代）元素$(“#menu span”)选取#menu下的<span>元素
子选择器parent>child选取parent元素下的child（子）元素$(“#menu>span”)选取#menu的子元素<span>
相邻元素选择器prev+next选取紧邻prev元素之后的next元素$(“h2+dl”)选取紧邻<h2>元素之后的同辈元素<dl>
同辈元素选择器prev~sibings选取prev元素之后的所有siblings元素$(“h2~dl”)选取<h2>元素之后所有的同辈元素<dl>

后代选择器用来获取元素的后代元素

$(".textRight p").css("color","red");
// 设置class为textRight元素中的所有<p>标签的字体全部为红色

子选择器用来获取元素的子元素

$(".textRight>p").css("color","red");
// 设置class为textRight元素中的子元素<p>标签的字体全部为红色

相邻选择器用来选取紧邻目标元素的下一个元素

 $("h1+p").css("text-decoration","underline");

同辈选择器用来选取目标元素之后的所有同辈元素

$("h1~p").css("text-decoration","underline");

属性选择器

通过 HTML 元素的属性来选择元素

语法构成描述示例
[attribute^=value]选取给定属性是以某些特定值开始的元素$(“[href^=‘en’]”)选取href属性值以en开头的元素
[attribute$=value]选取给定属性是以某些特定值结尾的元素 ( " [ h r e f ("[href ("[href=‘.jpg’]")选取href属性值以.jpg结尾的元素
[attribute*=value]选取给定属性是以包含某些值的元素$(“[href*=‘txt’]”)选取href属性值中含有txt的元素

根据属性名获取元素

​ 1）根据是否包含某属性来选取元素

// a 标签带有 class 属性
$("#news a[class]").css("background","#c9cbcb");

根据属性值获取元素

​ 1）根据属性的值来选取元素

// class 属性值为 hot
$("#news a[class='hot']").css("background","#c9cbcb");

​ 2）指定选取不等于属性是某个特定值的元素

$("#news a[class!='hot']").css("background","#c9cbcb");

根据属性值包含特定的值获取元素

​ 1）指定属性值以指定值开头的元素

// a 标签 href 属性值以 www 开头
$("#news a[href^='www']").css("background","#c9cbcb");

​ 2）指定属性值以指定值结尾的元素

// a 标签 href 属性值以 html 结尾
$("#news a[href$='html']").css("background","#c9cbcb");

​ 3）指定属性值包含指定值的元素

// a 标签 href 属性值包含 k2 的元素
$("#news a[href*='k2']").css("background","#c9cbcb");

过滤选择器

通过特定的过滤规则来筛选出所需的元素

主要分类

​ 基本过滤选择器

​ 可见性过滤选择器

​ 表单对象过滤选择器

​ 内容过滤选择器、子元素过滤选择器……

基本过滤选择器
语法描述示例
:first选取第一个元素$(“li:first”)选取所有<li>元素中的第一个<li>元素
:last选取最后一个元素$(“li:last”)选取所有<li>元素中的最后一个<li>元素
:not(selector)选取去除所有与给定选择器匹配的元素$(“li:not(.three)”)选取class不是three的元素
:even选取索引是偶数的所有元素$(“li:even”)选取索引是偶数的所有<li>元素
:odd选取索引是奇数的所有元素$(“li:odd”)选取索引是奇数的所有<li>元素
:eq(index)选取索引等于index的元素$(“li:eq(1)”)选取索引等于1的<li>元素
:gt(index)选取索引大于index的元素$(“li:gt(1)”)选取索引大于1的<li>元素
:lt(index)选取索引小于index的元素$(“li:gt(1)”)选取索引小于1的<li>元素
:header选取所有标题元素 如h1~h6$(“:header”)选取网页中所有标题元素
:focus选取当前获取焦点的元素$(“:focus”)选取当前获取焦点的元素
:animated选择所有动画$(“:animated”)选取当前所有动画元素

案例：制作仿奥列表页面

<div class="contain">
    <h2>祝福冬奥</h2>
    <ul>
        <li> 贝克汉姆：衷心希望北京能够申办成功！</li>
        <li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
        <li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>
        <li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
        <li> 赵宏博：北京申办冬奥会是再合适不过了！</li>
        <li> 你喜欢哪些冬季运动项目？(点击进入调查页)</li>
    </ul>
</div>

在这里插入图片描述

$(".contain:header").css({"background":"#2a65ba","color":"#ffffff"});
$(".contain li:first").css({"font-size":"16px","color":"#e90202"});
$(".contain li:last").css("border","none");
$(".contain li:even").css("background","#f0f0f0");
$(".contain li:odd").css("background","#cccccc");

在这里插入图片描述

$(".contain:header").css({"background":"#2a65ba","color":"#ffffff"});
$(".contain li:first").css({"font-size":"16px","color":"#e90202"});
$(".contain li:last").css("border","none");
$(".contain li:lt(2)").css({"color":"#708b02"});
$(".contain li:gt(3)").css({"color":"#b66302"});

在这里插入图片描述

可见性过滤选择器

通过元素显示状态来选取元素

语法描述示例
:visible选取所有可见的元素$(“:visible”)选取所有可见的元素
:hidden选取所有隐藏的元素$(“:hidden”)选取所有隐藏的元素
$("p:hidden").show();
$("p:visible").hide();

注意事项

1）特殊符号的转义

<div id="id#a">aa</div>
<div id="id[2]">cc</div>

$("#id#a");   =====>  $("#id\\#a");
$("#id[2]");  =====>  $("#id\\[2\\]");

2）选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果

// 带空格的jQuery选择器 选取class为“test”的元素内部的隐藏元素
var $t_a = $(".test :hidden"); 

// 不带空格的jQuery选择器 选取隐藏的class为“test”的元素
var $t_b = $(".test:hidden");

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

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

相关文章

健康推荐系统：SpringBoot技术实现

健康推荐系统：SpringBoot技术实现

3系统分析 3.1可行性分析 通过对本基于智能推荐的卫生健康系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本基于智能推荐的卫生健康系统采用SSM框架&#…
阅读更多...
在Java程序中监听mysql的binlog

在Java程序中监听mysql的binlog

文章目录 1、背景2、mysql-binlog-connector-java简介3、准备工作1、验证数据库是否开启binlog2、开启数据库的binlog3、创建具有REPLICATION SLAVE权限的用户4、事件类型 eventType 解释1、TABLE_MAP 的注意事项2、获取操作的列名 5、监听binlog的position1、从最新的binlog位…
阅读更多...
HCIP-HarmonyOS Application Developer 习题（十）

HCIP-HarmonyOS Application Developer 习题（十）

1、HarmonyOS设备A上的应用通过调用分布式任务调度的能力continuesbility&#xff0c;向设备B的应用发起跨端迁移&#xff0c;此过程属于跨端迁移中的哪个流程? A、流转准备 B、流转进行 C、流转结束 D、流转完成 答案&#xff1a;D 分析&#xff1a; 2、为了帮助用户通过全局…
阅读更多...
前端vue-登录页面中密码登录和验证码登录的实现步骤

前端vue-登录页面中密码登录和验证码登录的实现步骤

要实现密码登录和验证码登录
阅读更多...
软件测试工程师面试整理 —— 操作系统与网络基础！

软件测试工程师面试整理 —— 操作系统与网络基础！

在软件测试中&#xff0c;了解操作系统和网络基础知识对于有效地进行测试工作至关重要。无论是在配置测试环境、调试网络问题&#xff0c;还是在进行性能测试和安全测试时&#xff0c;这些知识都是不可或缺的。 1. 操作系统基础 操作系统&#xff08;Operating System, OS&am…
阅读更多...
Node.js管理工具NVM

Node.js管理工具NVM

nvm&#xff08;Node Version Manager&#xff09;是一个用于管理多个 Node.js 版本的工具。以下是 nvm 的使用方法和一些常见命令&#xff1a; 一、安装 nvm 下载 nvm&#xff1a; 地址&#xff1a;https://github.com/coreybutler/nvm-windows/releases访问 nvm 的 GitHub 仓…
阅读更多...
Python | Leetcode Python题解之第474题一和零

Python | Leetcode Python题解之第474题一和零

题目&#xff1a; 题解&#xff1a; class Solution:def findMaxForm(self, strs: List[str], m: int, n: int) -> int:count10 []for s in strs:count10.append([0,0])for c in s:if c 0: count10[-1][0]1else: count10[-1][1]1dp [[0]*(n1) for _ in range(m1)]for i …
阅读更多...
贪吃蛇游戏（代码篇）

贪吃蛇游戏（代码篇）

我们并不是为了满足别人的期待而活着。 前言 这是我自己做的第五个小项目---贪吃蛇游戏&#xff08;代码篇&#xff09;。后期我会继续制作其他小项目并开源至博客上。 上一小项目是贪吃蛇游戏&#xff08;必备知识篇&#xff09;&#xff0c;没看过的同学可以去看看&#xf…
阅读更多...
文件完整性监控：如何提高企业的数据安全性

文件完整性监控：如何提高企业的数据安全性

企业网络庞大而复杂&#xff0c;需要处理大量关键业务数据&#xff0c;这些敏感文件在企业网络中不断传输&#xff0c;并由多个用户和实体存储、共享和访问。FIM 工具或具有 FIM 功能的 SIEM 解决方案使企业能够跟踪未经授权的文件更改、对敏感信息的恶意访问、数据篡改尝试和内…
阅读更多...
ubuntu下实时查看CPU，内存（Mem）和GPU的利用率

ubuntu下实时查看CPU，内存（Mem）和GPU的利用率

一、实时查看CPU和内存&#xff08;Mem&#xff09;利用率 htop官网&#xff1a;htop - an interactive process viewer sudo apt-get install htop htop ①. 顶部状态栏&#xff08;System Metrics Overview&#xff09; 这个区域显示系统的全局资源使用情况&#xff0c;包括…
阅读更多...
JavaSE——集合12：Map接口实现类—Properties

JavaSE——集合12：Map接口实现类—Properties

目录 一、Properties基本介绍 二、Properties常用方法 一、Properties基本介绍 Properties类继承自HashTable类并且实现了Map接口&#xff0c;也是使用一种键值对的形式&#xff0c;来保存数据。Properties的使用特点和HashTable类似Properties还可以用于从xxx.properties文件…
阅读更多...
【实践】快速学会使用阿里云消息队列RabbitMQ版

【实践】快速学会使用阿里云消息队列RabbitMQ版

文章目录 1、场景简介2、实验架构和流程2.1、实验架构2.2、实验流程 3、创建实验资源4、创建阿里云AccessKey5、创建静态用户名密码6、创建Vhost、Exchange、Queue并绑定关系6.1、Vhost 的作用6.2、创建Vhost6.3、Exchange 的作用6.4、创建Exchange6.5、Queue 的作用6.6、创建Q…
阅读更多...
基于Python flask的豆瓣电影可视化系统，豆瓣电影爬虫系统

基于Python flask的豆瓣电影可视化系统，豆瓣电影爬虫系统

博主介绍&#xff1a;✌Java徐师兄、7年大厂程序员经历。全网粉丝13w、csdn博客专家、掘金/华为云等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3fb; 不…
阅读更多...
Mysql(七) --- 索引

Mysql(七) --- 索引

文章目录 前言1.简介1.1.索引是什么&#xff1f;1.2.为什么使用索引? 2.索引应该使用什么数据结构&#xff1f;2.1.Hash2.2.二叉搜索树2.3.N叉树2.4.B树2.4.1. 简介2.4.2. B树的特点2.4.3. B树和B树的对比 3.Mysql中的页3.1.为什么要使用页3.2.页文件头和页文件尾3.3.页主体3.…
阅读更多...
【Linux】解锁线程基本概念和线程控制，步入多线程学习的大门

【Linux】解锁线程基本概念和线程控制，步入多线程学习的大门

目录 1、线程初识 1.1线程的概念 1.2.关于线程和进程的进一步理解 1.3.线程的设计理念 1.4.进程vs线程&#xff08;图解&#xff09; 1.5地址空间的第四谈 2.线程的控制&#xff1a; 2.1.关于线程控制的前置知识 2.2创建线程的系统调用&#xff1a; 这个几号手册具体…
阅读更多...
JavaScript | 定时器（setInterval和clearInterval）的使用

JavaScript | 定时器（setInterval和clearInterval）的使用

效果图如下&#xff1a; 当用户第一次看到这个页面时&#xff0c;按钮是不可点击的&#xff0c;并显示一个5秒的倒计时。倒计时结束后&#xff0c;按钮变为可点击状态&#xff0c;并显示“同意协议”。这样做的目的是确保用户有足够的时间阅读用户协议。 <!DOCTYPE html>…
阅读更多...
机器学习：知识蒸馏（Knowledge Distillation，KD）

机器学习：知识蒸馏（Knowledge Distillation，KD）

知识蒸馏&#xff08;Knowledge Distillation&#xff0c;KD&#xff09;作为深度学习领域中的一种模型压缩技术&#xff0c;主要用于将大规模、复杂的神经网络模型&#xff08;即教师模型&#xff09;压缩为较小的、轻量化的模型&#xff08;即学生模型&#xff09;。在实际应…
阅读更多...
Vue(3) 组件

Vue(3) 组件

文章目录 对组件的理解单文件组件非单文件组件基本使用几个注意点组件的嵌套VueComponent构造函数一个重要的内置关系 组件的自定义事件全局事件总线安装全局事件总线使用事件总线解绑事件消息订阅与发布简介使用步骤范例 $nextTick插槽1.默认插槽2.具名插槽作用域插槽 对组件的…
阅读更多...
[linux 驱动]网络设备驱动详解

[linux 驱动]网络设备驱动详解

目录 1 描述 2 结构体 2.1 net_device 2.2 sk_buff 2.3 net_device_ops 2.4 ethtool_ops 3 相关函数 3.1 网络协议接口层 3.1.1 dev_queue_xmit 3.1.2 netif_rx 3.1.3 alloc_skb 3.1.4 kfree_skb 3.1.5 skb_put 3.1.6 skb_push 3.1.7 skb_reserve 3.2 网络设备驱…
阅读更多...
使用OpenCV实现基于EigenFaces的人脸识别

使用OpenCV实现基于EigenFaces的人脸识别

引言 人脸识别技术近年来得到了飞速的发展&#xff0c;它被广泛应用于安全监控、门禁系统、智能设备等领域。其中&#xff0c;基于特征脸&#xff08;EigenFaces&#xff09;的方法是最早期且较为经典的人脸识别算法之一。本文将介绍如何使用Python和OpenCV库实现一个简单的人…
阅读更多...
最新文章

Copyright @ 2022~2023