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>

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

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

相关文章

exsi的安装和配置

exsi的安装和配置

直接虚拟真实机 vcent server 管理大量的exsi SXI原生架构模式的虚拟化技术&#xff0c;是不需要宿主操作系统的&#xff0c;它自己本身就是操作系统。因此&#xff0c;装ESXI的时候就等同于装操作系统&#xff0c;直接拿iso映像(光盘)装ESXI就可以了。 VMware vCente…
阅读更多...
【Python 千题 —— 基础篇】欢迎光临

【Python 千题 —— 基础篇】欢迎光临

题目描述 题目描述 欢迎光临。为列表中的每个嘉宾打印欢迎光临语句。例如&#xff0c;有一份嘉宾列表 ["李二狗", "王子鸣"]&#xff0c;则需要根据嘉宾名单打印输出&#xff1a; 欢迎光临&#xff01;李二狗。 欢迎光临&#xff01;王子鸣。下面是一份…
阅读更多...
IOS上架流程

IOS上架流程

准备 开发者账号完工的项目 上架步骤 一、创建App ID二、创建证书请求文件 &#xff08;CSR文件&#xff09;三、创建发布证书 &#xff08;CER&#xff09;四、创建Provisioning Profiles配置文件 &#xff08;PP文件&#xff09;五、在App Store创建应用六、打包上架 一、…
阅读更多...
未来之路：大模型技术在自动驾驶的应用与影响

未来之路：大模型技术在自动驾驶的应用与影响

本文深入分析了大模型技术在自动驾驶领域的应用和影响&#xff0c;万字长文&#xff0c;慢慢观看~ 文中首先概述了大模型技术的发展历程&#xff0c;自动驾驶模型的迭代路径&#xff0c;以及大模型在自动驾驶行业中的作用。接着&#xff0c;详细介绍了大模型的基本定义、基础功…
阅读更多...
基于flask+bootstrap4实现的注重创作的轻博客系统项目源码

基于flask+bootstrap4实现的注重创作的轻博客系统项目源码

一个注重创作的轻博客系统 作为一名技术人员一定要有自己的博客&#xff0c;用来记录平时技术上遇到的问题&#xff0c;把技术分享出去就像滚雪球一样会越來越大&#xff0c;于是我在何三博客的基础上开发了[l4blog]&#xff0c;一个使用python开发的轻量博客系统&#xff0c;…
阅读更多...
旺店通·企业版对接打通金蝶云星空查询调拨单接口与分布式调入单新增接口

旺店通·企业版对接打通金蝶云星空查询调拨单接口与分布式调入单新增接口

旺店通企业版对接打通金蝶云星空查询调拨单接口与分布式调入单新增接口 源系统:旺店通企业版 旺店通是北京掌上先机网络科技有限公司旗下品牌&#xff0c;国内的零售云服务提供商&#xff0c;基于云计算SaaS服务模式&#xff0c;以体系化解决方案&#xff0c;助力零售企业数字化…
阅读更多...
分布式搜索引擎ES

分布式搜索引擎ES

文章目录 初识elasticsearch了解ES倒排索引正向索引倒排索引正向和倒排 es的一些概念文档和字段索引和映射mysql与elasticsearch 安装ES部署kibana安装IK分词器扩展词词典停用词词典 索引库操作mapping映射属性索引库的CRUD创建索引库和映射查询索引库修改索引库删除索引库 文档…
阅读更多...
绘图软件 OmniGraffle mac中文版特点说明

绘图软件 OmniGraffle mac中文版特点说明

OmniGraffle mac是一款图形绘制和图表设计软件&#xff0c;主要面向 macOS 和 iOS 平台。它适用于用户创建流程图、组织结构图、原型设计、网站线框图、地图等各种类型的图形。该软件的界面直观&#xff0c;用户友好&#xff0c;让用户能够轻松地创建和编辑复杂的图形。 OmniGr…
阅读更多...
快照snapshot要点记录

快照snapshot要点记录

目录 COW快照ROW快照 snapshot&#xff1a;快照 快照分为&#xff1a;COW快照、ROW快照 COW&#xff1a;Copy On Write 指写前复制技术 ROW&#xff1a;Redirect On Write 指写时重定向技术 COW快照 性能无法达到最高&#xff0c;因为每次都要与COW共享映射表进行比对。存储中…
阅读更多...
13. 高精度延时

13. 高精度延时

13. 高精度延时 GPT 定时器简介GPT 定时器结构GPT 定时器工作模式 GPT 定时器相关寄存器GPTx_CRGPTx_PRGPTx_SRGPTx_CNTGPTx_OCR GPT 配置步骤程序编写bsp_delay.hbsp_delay.cmain GPT 定时器简介 GPT 定时器是一个 32 位向上定时器&#xff0c;也就是从0x00000000 开始向上递…
阅读更多...
uni-app的下拉搜索选择组合框

uni-app的下拉搜索选择组合框

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;Vue篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家介绍uni-app中一款可以搜索下拉选择输入框的插件 下拉搜索选择组合框 superwei-combox 组合框 uni-app中可下拉搜索选…
阅读更多...
【86 backtrader实现crypto交易策略】backtrader和ccxt对接实现中低频自动化交易-01

【86 backtrader实现crypto交易策略】backtrader和ccxt对接实现中低频自动化交易-01

最近有点空闲，尝试把backtrader和一些实盘交易的接口对接一下，方便大家进行中低频交易，主要目标包括：股票(qmt),期货(ctpbee), crypto(ccxt),外盘交易(ib，已实现，但是版本比较旧，后期会继续更新). 这个周末尝试实现了backtrader和ccxt的对接，主要是参考了下面的开源代…
阅读更多...
工具及方法 - 手机扫条码工具: SCANDIT APP

工具及方法 - 手机扫条码工具: SCANDIT APP

一般扫个链接使用微信扫一扫即可。扫具体条码&#xff0c;可以在微信里搜索小程序&#xff0c;打开也能扫&#xff0c;得到条码内容。 还有其他方式&#xff0c;比如使用淘宝、百度等APP也可以直接扫码条码&#xff0c;还能得到更多的信息。 使用百度的话&#xff0c;不扫条码…
阅读更多...
springboot+maven多环境动态配置，以及编译失败的解决方案

springboot+maven多环境动态配置，以及编译失败的解决方案

一、前言 在我们的项目开发过程中一般会有多套的环境&#xff0c;比如比较常见的会有三套&#xff1a; dev &#xff08;研发环境&#xff09;&#xff0c;test(测试环境)&#xff0c;prod&#xff08;生产环境&#xff09;。 application.yml 是主配置文件&#xff0c;当在不…
阅读更多...
创建具有负载平衡和集群的可扩展 Node.js 应用程序

创建具有负载平衡和集群的可扩展 Node.js 应用程序

创建具有负载平衡和集群的可扩展 Node.js 应用程序 负载平衡是提高应用程序性能、可扩展性和可用性的一项重要技术。当客户端向负载均衡器发出请求时&#xff0c;负载均衡器根据预定义的规则将请求分发到不同的实例。 可以使用cluster集群模块或 PM2 等工具根据负载均衡器的流…
阅读更多...
数字媒体技术基础之：常见图片文件格式

数字媒体技术基础之：常见图片文件格式

在数字图像处理和图形设计领域&#xff0c;了解不同的图片文件格式及其特点是至关重要的。每种格式都有其独特的用途和优势。以下介绍一些最常见的图片文件格式。 JPEG Joint Photographic Experts Group 扩展名&#xff1a;.jpg 或 .jpeg 特点&#xff1a; 1、有损压缩&#x…
阅读更多...
navicat导入已有sql表过程

navicat导入已有sql表过程

已知我有一个外部的sql表&#xff0c;如图&#xff1a; 想要将其导入navicat并运行。 看一下我的navicat&#xff0c; navicat里已有的数据库并没有library&#xff0c;所以需要建立一个同名的library数据库来存储library.sql文件。 具体步骤如下&#xff1a; 在“本地连接”…
阅读更多...
QT windows与linux之间sokcet通信中文乱码问题解决方法

QT windows与linux之间sokcet通信中文乱码问题解决方法

QT windows与linux之间sokcet通信中文乱码问题解决方法 linux发送与接收都转码utf-8: tcpClient ->write( send_msg.toUtf8());//解决乱码&#xff0c;发送转码 接收&#xff1a; QByteArray buffer tcpClient->readAll(); if(!buffer.isEmpty()) { // ui->plain…
阅读更多...
C++ VS2015安装教程，下载和安装（下载地址+图解+详细步骤）

C++ VS2015安装教程，下载和安装（下载地址+图解+详细步骤）

说明&#xff1a;VS2015的三个版本分别为&#xff1a; Visual Studio Community(社区版)&#xff1a;满足大部分程序员的需求&#xff08;推荐&#xff09; Visual Studio Professional(专业版) Visual Studio Enterprise(企业版) 1、下载地址(这里只提供Community版) htt…
阅读更多...
PlantUML基础使用教程

PlantUML基础使用教程

环境搭建 IDEA插件下载 打开IEDA系列IDE&#xff0c;从FIle–>Settings–>Plugins–>Marketplace 进入到插件下载界面&#xff0c;搜索PlantUML&#xff0c;安装PlantUML Integration和PlantUML Parser两个插件&#xff0c;并重启IDE 安装和配置Graphviz 进入官网…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023