jQuery 【关于jQuery 、 jQuery简介、基础选择器、属性选择器、jQuery扩展】(一)-全面详解（学习总结---从入门到深化）

目录

关于jQuery 

 jQuery简介

 选择器之基础选择器(一)

选择器之基础选择器(二)

 选择器之属性选择器(一)

选择器之属性选择器(二)

选择器之jQuery扩展(一)

选择器之jQuery扩展(二)

关于jQuery 

 现在是否还需要学习jQuery，毫无疑问到目前为止，我们仍然需要学习jQuery，原因如下：

1 各大网站还在应用（京东、百度）
2 一些广告页面、落地页还在应用
3 源码非常优秀，有助于理解JavaScript
4 其实对DOM操作并不能完全移除，只要涉及到DOM操作，jQuery是非常方便的

 jQuery简介

 jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画操作更加简单。

jQuery最大的优点就是简化DOM操作

官网文档：https://jquery.com/
中文文档：https://www.jquery123.com/

 体验jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="./js/jquery-3.6.0.min.js" charset="utf-8"></script>
</head>

<body>
    <div class="container">
        <p class="name">Hello jQuery</p>
    </div>
    <script type="text/javascript">
        $('.name').html("Hello 体验 jQuery")
    </script>
</body>
</html>

jQuery版本说明
jQuery分为三个大版本：1.x 2.x 3.x

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版本
不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用  3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.6.0

 jQuery重点讲解知识点


1 选择器
2 DOM操作
3 CSS操作
4 事件处理
5 遍历
6 动画

 选择器之基础选择器(一)

 JavaScript实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">类选择器</div>
    <div class="box">类选择器</div>
    <span>元素选择器</span>
    <a id="it" href="#">ID选择器</a>
    <script>
        // 类选择器
        var div1 = document.getElementsByClassName("box")[0]
        var div2 = document.getElementsByClassName("box")[1]
        div1.innerHTML = "JS类选择器1"
        div2.innerHTML = "JS类选择器2"
        // 元素选择器
        var span = document.getElementsByTagName("span")[0]
        span.innerHTML = "JS元素选择器"
        // ID选择器(ID是唯一的)
        var a = document.getElementById("it");
        a.innerHTML = "JSID选择器"
    </script>
</body>
</html>

jQuery实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <div class="box">类选择器</div>
    <div class="box">类选择器</div>
    <span>元素选择器</span>
    <a id="it" href="#">ID选择器</a>
    <script>
        // $就是jQuery的缩写，他就代表了jQuery
        // 类选择器
        $(".box").html("jQuery类选择器")
        // 元素选择器
        $("span").html("jQuery元素选择器")
        // ID选择器
        $("#it").html("jQuery ID选择器")
    </script>
</body>
</html>

选择器之基础选择器(二)

 子元素选择器 ("parent > child")
选择所有指定“parent”元素中指定的"child"的直接子元素

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-size: 14px;
       }
    </style>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <ul class="topnav">
        <li>Item 1</li>
        <li>Item 2
            <ul>
                <li>child item 1</li>
                <li>child item 2</li>
                <li>child item 3</li>
            </ul>
        </li>
        <li>Item 3</li>
    </ul>
    <script>
        $(".topnav > li").css("border", "3px double red");
    </script>
</body>
</html>

后代元素选择器（"parent child"）
选择所有指定“parent”元素中指定的"child"的后代元素
 

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-size: 14px;
       }
    </style>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <ul class="topnav">
        <li>Item 1</li>
        <li>Item 2
            <ul>
                <li>child item 1</li>
                <li>child item 2</li>
                <li>child item 3</li>
            </ul>
        </li>
        <li>Item 3</li>
    </ul>
    <script>
        $(".topnav li").css("border", "3px double red");
    </script>
</body>
</html>

 选择器之属性选择器(一)

 Attribute Selector [name="value"]
选择指定属性是给定值的元素

attribute: 属性
Selector: 选择器
name: 选中的属性
value: 属性值

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
 <body>
    <div>
        <input type="radio" name="user" value="name" />
        <span>name</span>
    </div>
    <div>
        <input type="radio" name="user" value="age" />
        <span>age</span>
    </div>
    <script>
       $('input[value="name"]').next().html("username");
    </script>
 </body>
</html>

Attribute Selector [name|="value"]
选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
 <body>
    <a href="#" alt="txc">童小纯</a>
    <a href="#" alt="txc-web">童小纯-前端</a>
    <a href="#" alt="txcxiaotong">txcxiaotong</a>
    <script>
        $('a[alt|="txc"]').css('border','3px solid green');
    </script>
 </body>
</html>

Attribute Selector [name*="value"]
选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）
 

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <input name="txc-itxiaotong" />  
    <input name="txcweb" />
    <input name="xiaotongweb" />
    <input name="itxiaotong" />
    <script>$('input[name*="txc"]').val('study!');</script>
</body>
</html>

选择器之属性选择器(二)

 

Attribute Selector [name~="value"]
选择指定属性用空格分隔的值中包含一个给定值的元素

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <input name="txc-itxiaotong" />  
    <input name="txc web" />
    <input name="txcxiaotongweb" />
   <script>$('input[name~="txc"]').val('study!');</script>
</body>
</html>

Attribute Selector [name$="value"]
选择指定属性是以给定值结尾的元素。这个比较是区分大小写的
 

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <input name="txc-itxiaotong" />  
    <input name="txcweb" />
    <input name="txcxiaotongweb" />
    <script>$('input[name$="web"]').val('study!');</script>
</body>
</html>

Attribute Selector [name^="value"]
选择指定属性是以给定字符串开始的元素
 

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <input name="txc-itxiaotong" />  
    <input name="txc web" />
    <input name="xttxcweb" />
    <script>$('input[name^="txc"]').val('study!');</script>
</body>
</html>

选择器之jQuery扩展(一)

:eq(index) Selector
在匹配的集合中选择索引值为index的元素。
 

温馨提示
index下标计算是从0开始的

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <ul class="nav">
        <li>List 1, item 1</li>
        <li>List 1, item 2</li>
        <li>List 1, item 3</li>
    </ul>
    <script>
        $("li:eq(2)").css("border","2px solid red")

    </script>
</body>
</html>

:even Selector
选择所引值为偶数的元素

特别注意
这是基于0的索引，所以 :even 选择器是选择第一个元素，第三个元素，依此类推在匹配。

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <table border="1">
        <tr>
            <td>Row with Index #0</td>
        </tr>
        <tr>
            <td>Row with Index #1</td>
        </tr>
        <tr>
            <td>Row with Index #2</td>
        </tr>
        <tr>
            <td>Row with Index #3</td>
        </tr>
    </table>
    <script>$("tr:even").css("background-color", "#bbbbff");</script>
</body>
</html>

:odd Selector
选择索引值为奇数元素

特别注意
这是基于0的索引，所以 :odd 选择器是选择第二个元素，第四个元素，依此类推在匹配。

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <table border="1">
        <tr>
            <td>Row with Index #0</td>
        </tr>
        <tr>
            <td>Row with Index #1</td>
        </tr>
        <tr>
            <td>Row with Index #2</td>
        </tr>
        <tr>
            <td>Row with Index #3</td>
        </tr>
    </table>
    <script>$("tr:odd").css("background-color", "#bbbbff");</script>
</body>
</html>

选择器之jQuery扩展(二)

 :first Selector
选择第一个匹配的元素

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <table border="1">
        <tr>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
        </tr>
    </table>
    <script>$("tr:first").css("background-color", "red");</script>
</body>
</html>

:last Selector
选择最后一个匹配的元素
 

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <table border="1">
        <tr>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
        </tr>
    </table>
    <script>$("tr:last").css("background-color", "red");</script>
</body>
</html>

:gt(index) Selector
选择匹配集合中所有大于给定index（索引值）的元素。
 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>gt demo</title>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <table border="1">
        <tr>
            <td>TD #0</td>
            <td>TD #1</td>
            <td>TD #2</td>
        </tr>

        <tr>
            <td>TD #3</td>
            <td>TD #4</td>
            <td>TD #5</td>
        </tr>
        <tr>
            <td>TD #6</td>
            <td>TD #7</td>
            <td>TD #8</td>
        </tr>
    </table>
    <script>
        $("td:gt(4)").css("backgroundColor","yellow");
    </script>
</body>
</html>

:lt(index) Selector
选择匹配集合中所有索引值小于给定index参数的元素
 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>gt demo</title>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <table border="1">
        <tr>
            <td>TD #0</td>
            <td>TD #1</td>
            <td>TD #2</td>
        </tr>
        <tr>
            <td>TD #3</td>
            <td>TD #4</td>
            <td>TD #5</td>
        </tr>
        <tr>
            <td>TD #6</td>
            <td>TD #7</td>
            <td>TD #8</td>
        </tr>
    </table>
    <script>
        $("td:lt(4)").css("backgroundColor","yellow");
    </script>
</body>
</html>

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

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

相关文章

CentOS to KeyarchOS 系统迁移体验

CentOS to KeyarchOS 系统迁移体验

1. KOS(KeyarchOS)——云峦操作系统简介 KeyarchOS 即云峦操作系统(简称 KOS)是浪潮信息基于 Linux 内核、龙蜥等开源技术自主研发的一款服务器操作系统&#xff0c;支持x86、ARM 等主流架构处理器&#xff0c;广泛兼容传统 CentOS 生态产品和创新技术产品&#xff0c;可为用户…
阅读更多...
【Docker】实现JMeter分布式压测

【Docker】实现JMeter分布式压测

一个JMeter实例可能无法产生足够的负载来对你的应用程序进行压力测试。如本网站所示&#xff0c;一个JMeter实例将能够控制许多其他的远程JMeter实例&#xff0c;并对你的应用程序产生更大的负载。JMeter使用Java RMI[远程方法调用]来与分布式网络中的对象进行交互。JMeter主站…
阅读更多...
python socket编程2 - socket创建发送方所需参数的获得

python socket编程2 - socket创建发送方所需参数的获得

使用socket进行进程间通信或者跨网络的计算机间通讯&#xff0c;有点类似日常生活中的发送快递。 根据发送方的需要&#xff0c;选择不同的物流公司&#xff1a; 在选择适合的公司和运输方式后&#xff0c;需要在app上做出选择&#xff0c;并根据要求填写一些信息。app会根据…
阅读更多...
Java用户和内核交互图

Java用户和内核交互图

阅读更多...
tsmc12 nm boundary cell注意事项

tsmc12 nm boundary cell注意事项

我正在「拾陆楼」和朋友们讨论有趣的话题，你⼀起来吧？ 拾陆楼知识星球入口 往期文章导读: boundary cell添加失败问题整理 注意N/P的区别 针对上下两边的boundary cell，有N/P类型的区别，看版图衬底形状上下是不对称的，而且P
阅读更多...
Mac M3 芯片安装 Nginx

Mac M3 芯片安装 Nginx

Mac M3 芯片安装 Nginx 一、使用 brew 安装 未安装 brew 的可以参考 【Mac 安装 Homebrew】 或者 【Mac M2/M3 芯片环境配置以及常用软件安装-前端】 二、查看 nginx 信息 通过命令行查看 brew info nginx可以看到 nginx 还未在本地安装&#xff0c;显示 Not installed …
阅读更多...
白帽黑客一般一个月收入多少？

白帽黑客一般一个月收入多少？

最近有人问我&#xff0c;像我们这种白帽黑客&#xff0c;一个月能赚多少&#xff1f;其实啊&#xff0c;网上那种搞盗号或做挂的&#xff0c;都不算正经的黑客&#xff0c;真正的黑客绝对不会干这种事情&#xff0c;因为搞这种事都会涉及违法入侵、破坏计算机系统。 先不说赚…
阅读更多...
C++ Qt 学习（八）：Qt 绘图技术与图形视图

C++ Qt 学习（八）：Qt 绘图技术与图形视图

1. 常见 18 种 Qt 绘图技术 1.1 widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <memory> #include <QTreeView> #include "CPaintWidget.h"using namespace std;class Widget : public QWidget {Q_OBJECTpublic:Widget…
阅读更多...
LOWORD, HIWORD, LOBYTE, HIBYTE的解释

LOWORD, HIWORD, LOBYTE, HIBYTE的解释

文章目录 实验结论 实验 int 类型大小正常为4Byte 以小端序来看 0x12345678在内存中的存储为 0x78 0x56 0x34 0x120x78在低地址&#xff0c;0x12在高地址 程序输出 #include <stdio.h> #include <string.h> #include<windows.h>int main() {int a 0x12345…
阅读更多...
d3dcompiler_43.dll丢失了怎么办，详细解答和d3dcompiler_43.dll修复方法

d3dcompiler_43.dll丢失了怎么办，详细解答和d3dcompiler_43.dll修复方法

以下将为您提供几种处理d3dcompiler_43.dll文件丢失的解决措施&#xff0c;这些方法实用有效&#xff0c;可以帮助我们恢复计算机运行。 一.d3dcompiler_43.dll是什么 在我们开始探讨如何修复d3dcompiler_43.dll文件丢失的问题之前&#xff0c;首先需要了解这个文件的作用。该…
阅读更多...
现场直击！触想智能亮相德国2023 SPS展会

现场直击！触想智能亮相德国2023 SPS展会

当地时间11月14日上午9时 2023 年(德国)纽伦堡国际工业自动化及元器件展览会 SPS 展(以下简称&#xff1a;SPS展会)正式拉开帷幕&#xff0c;触想智能与来自全球各地的领先科技公司及前沿业者齐聚盛会&#xff0c;共赴一场科技与创新交汇的“饕餮盛宴”。 △ 2023 SPS展会开幕(…
阅读更多...
可怕！.Net 8正式发布了，.Net野心确实不小！

可怕！.Net 8正式发布了，.Net野心确实不小！

随着三天.NET Conf 2023的会议结束了&#xff0c;.Net 8正式发布了。 .Net 8是官方号称有史以来性能最快的一个版本了。 .Net 8 增加了数以千计的性能、稳定性和安全性改进&#xff0c;以及平台和工具增强功能&#xff0c;有助于提高开发人员的工作效率和创新速度。 反正就是…
阅读更多...
载誉前行 | 求臻医学MRD检测方案荣获金如意奖·卓越奖

载誉前行 | 求臻医学MRD检测方案荣获金如意奖·卓越奖

2023年11月11日 由健康界、海南博鳌医学创新研究院 中国医药教育协会数字医疗专业委员会联合主办的 第三届“金如意奖”数字医疗优选解决方案 评选颁奖典礼 在2023中国医院管理年会上揭晓榜单并颁奖 求臻医学MRD检测解决方案 荣获第三届金如意奖最高奖项——卓越奖 这一…
阅读更多...
ROS stm32 CAN通信

ROS stm32 CAN通信

文章目录 运行环境&#xff1a;原理1.1 ros中的代码1)socketcan_bridge2)测试的ros-python包3)keil5中数据解析4)USB-CAN连接5)启动指令 运行环境&#xff1a; ubuntu18.04.melodic STM32&#xff1a;DJI Robomaster C板 ROS&#xff1a;18.04 硬件&#xff1a;USB-CAN&#x…
阅读更多...
Vue修饰符（Vue事件修饰符、Vue按键修饰符）

Vue修饰符（Vue事件修饰符、Vue按键修饰符）

目录 前言 Vue事件修饰符 列举较常用的事件修饰符 .stop .prevent .capture .once Vue按键修饰符 四个特殊键 获取某个键的按键修饰符 前言 本文介绍Vue修饰符&#xff0c;包括Vue事件修饰符以及按键修饰符 Vue事件修饰符 列举较常用的事件修饰符 .stop: …
阅读更多...
Oneid方案

Oneid方案

一、前文 用户画像的前提是标识出用户&#xff0c;存在以下场景&#xff1a;不同业务系统对同一个人的标识&#xff0c;匿名用户行为的行为归因&#xff1b;本文提供多种解决方案&#xff0c;提供大家思考。 二、方案矩阵 三、其他 相关连接&#xff1a; 如何通过图算法能力获…
阅读更多...
ChatGPT助力高效办公——神奇的效率工具Airy

ChatGPT助力高效办公——神奇的效率工具Airy

Airy是一款免费而又强大的高效办公软件&#xff0c;用户可以通过快捷键和丰富的内置插件&#xff0c;充分发挥GPT-3.5模型的强大功能&#xff0c;轻松实现搜索、翻译、文本生成与写作、文本概括与总结&#xff0c;同时还可以作为一款日程提醒工作&#xff0c;记录和提醒每天要做…
阅读更多...
day17_多线程基础

day17_多线程基础

今日内容 零、 复习昨日 一、作业 二、进程与线程 三、创建线程 四、线程的API 一、复习 IO流的分类 方向: 输入,输出类型: 字节(XxxStream),字符(XxxReader,XxxWriter)字节输入流类名: FileInputStream字节输出流类名: FileOutputStream字符输入流类名: FileReader字符输出流类…
阅读更多...
为什么说MES管理系统是车间层与管理层的桥梁

为什么说MES管理系统是车间层与管理层的桥梁

随着制造业的快速发展&#xff0c;企业对于生产过程中的管理要求越来越高。为了满足这一需求&#xff0c;MES生产管理系统应运而生。MES管理系统作为车间层与管理层之间的桥梁&#xff0c;扮演着至关重要的角色。本文将探讨为什么说MES管理系统是车间层与管理层之间的桥梁。 一…
阅读更多...
基础课4——客服中心管理者面临的挑战

基础课4——客服中心管理者面临的挑战

客服管理者在当今的数字化时代也面临着许多挑战。以下是一些主要的挑战&#xff1a; 同行业竞争加剧&#xff1a;客服行业面临着来自同行业的竞争压力。为了获得竞争优势&#xff0c;企业需要不断提高自身的产品和服务质量&#xff0c;同时还需要不断降低成本、提高效率。然而…
阅读更多...
最新文章

Copyright @ 2022~2023