前端之jQuery

目录

一、jQuery

jQuery内容

jQuery版本

jQuery对象

jQuery基础语法

二、查找标签

基本选择器

层级选择器

基本筛选器

属性选择器

表单筛选器

三、筛选器方法

四、操作标签

一、jQuery

  1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
  2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

jQuery的优势：

  1. 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
  2. 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
  3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
  4. 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
  5. Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
  6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
  7. 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

jQuery内容

  1. 选择器
  2. 筛选器
  3. 样式操作
  4. 文本操作
  5. 属性操作
  6. 文档处理
  7. 事件
  8. 动画效果
  9. 插件
  10. each、data、Ajax

下载方式

官网链接：jQuery

中文文档：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

bootcdn：https://www.bootcdn.cn/

CDN的作用是：为了加快响应速度

  • https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js
  • <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

jQuery版本

  • 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，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。相当于： document.getElementById("i1").innerHTML;

jQuery对象无法使用 DOM对象的任何方法，如果你想使用jQuery提供的各个方法，就需要你把DOM对象转为jQuery对象。DOM对象：标签对象

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对像
var variable = DOM对象
$variable[0] //jQuery对象转成DOM对象

jQuery基础语法

jQuery("选择器").action();  -------->  $("选择器").action();

二、查找标签

基本选择器

id选择器：

$("#id")

标签选择器：

$("tagName")

class选择器： 

$(".className")

配合使用：

$("div.c1")  // 找到有c1 class类的div标签
$('div#d1')

所有元素选择器：

$("*")

组合选择器：

$("#id, .className, tagName")$('#d1,.c1,p')  # 并列+混用
$('div span')   # 后代
$('div>span')   # 儿子
$('div+span')   # 毗邻
$('div~span')   # 弟弟

层级选择器

x和y可以为任意选择器

$("x y");   // x的所有后代y（子子孙孙）
$("x > y"); // x的所有儿子y（儿子）
$("x + y")  // 找到所有紧挨在x后面的y
$("x ~ y")  // x之后所有的兄弟y

基本筛选器

:first // 第一个
:last  // 最后一个
:eq(index) // 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd  // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index) // 匹配所有大于给定索引值的元素
:lt(index) // 匹配所有小于给定索引值的元素
:not(元素选择器) // 移除所有满足not条件的标签
:has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

例子： 

$('ul li:first') // 大儿子 
$('ul li:last')  // 小儿子
$('ul li:eq(2)')	   // 放索引
$('ul li:even')   // 偶数索引 0包含在内
$('ul li:odd')    // 奇数索引
$('ul li:gt(2)')  // 大于索引
$('ul li:lt(2)')  // 小于索引
$('ul li:not("#d1")') // 移除满足条件的标签
$("div:has('h1')")    // 找到所有后代中有h1标签的div标签
$("div:has(.c1)")     // 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")      // 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")  // 找到所有后代中不含a标签的li标签

练习：

自定义模态框，使用jQuery实现弹出和隐藏功能。

jQuery版自定义版本

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>自定义模态框</title><style>.cover {position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: darkgrey;z-index: 999;}.modal {width: 600px;height: 400px;background-color: white;position: fixed;left: 50%;top: 50%;margin-left: -300px;margin-top: -200px;z-index: 1000;}.hide {display: none;}</style>
</head>
<body>
<input type="button" value="弹" id="i0"><div class="cover hide"></div>
<div class="modal hide"><label for="i1">姓名</label><input id="i1" type="text"><label for="i2">爱好</label><input id="i2" type="text"><input type="button" id="i3" value="关闭">
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>var tButton = $("#i0")[0];tButton.onclick=function () {var coverEle = $(".cover")[0];var modalEle = $(".modal")[0];$(coverEle).removeClass("hide");$(modalEle).removeClass("hide");};var cButton = $("#i3")[0];cButton.onclick=function () {var coverEle = $(".cover")[0];var modalEle = $(".modal")[0];$(coverEle).addClass("hide");$(modalEle).addClass("hide");}
</script>
</body>
</html>

属性选择器

[attribute]
[attribute=value]  // 属性等于
[attribute!=value] // 属性不等于

例子：

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']"); // 取到checkbox类型的input标签
$("input[type!='text']"); // 取到类型不是text的input标签

表单筛选器

:text
:password
:file
:radio
:checkbox:submit
:reset
:button

例子：

$(":checkbox")  // 找到所有的checkbox
$('input[type="text"]')---------->$(':text') 
$('input[type="password"]')---------->$(':password')

表单对象属性：

:enabled
:disabled
:checked
:selected

例子：

找到可用的input标签

<form><input name="email" disabled="disabled" /><input name="id" />
</form>$("input:enabled")  // 找到可用的input标签

找到被选中的option：

<select id="s1"><option value="beijing">北京市</option><option value="shanghai">上海市</option><option selected value="guangzhou">广州市</option><option value="shenzhen">深圳市</option>
</select>$(":selected")  // 找到所有被选中的option$(':checked')  # 它会将checked和selected都拿到
$(':selected')  # 它不会 只拿selected
$('input:checked')  # 自己加一个限制条件

三、筛选器方法

  • 下一个元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
  • 上一个元素： 
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
  • 父亲元素： 
$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
  • 儿子和兄弟元素： 
$("#id").children(); // 儿子们
$("#id").siblings(); // 兄弟们
  • 查找
    • 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p")----------------->等价于$("div p")
  • 筛选
    • 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的

等价于 $("div.c1")

补充：

.first() // 获取匹配的第一个元素$('div span:first')-------------->$('div span').first()
.last() // 获取匹配的最后一个元素$('div span:last')----------------->$('div span').last()
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素$('div span:not("#d3")') --------------->$('div span').not('#d3')
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq()  // 索引值等于指定值的元素

示例：左侧菜单

<!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"><title>左侧菜单示例</title><style>.left {position: fixed;left: 0;top: 0;width: 20%;height: 100%;background-color: rgb(47, 53, 61);}.right {width: 80%;height: 100%;}.menu {color: white;}.title {text-align: center;padding: 10px 15px;border-bottom: 1px solid #23282e;}.items {background-color: #181c20;}.item {padding: 5px 10px;border-bottom: 1px solid #23282e;}.hide {display: none;}</style>
</head>
<body><div class="left"><div class="menu"><div class="item"><div class="title">菜单一</div><div class="items"><div class="item">111</div><div class="item">222</div><div class="item">333</div></div></div><div class="item"><div class="title">菜单二</div><div class="items hide"><div class="item">111</div><div class="item">222</div><div class="item">333</div></div></div><div class="item"><div class="title">菜单三</div><div class="items hide"><div class="item">111</div><div class="item">222</div><div class="item">333</div></div></div></div>
</div>
<div class="right"></div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script>$(".title").click(function (){  // jQuery绑定事件// 隐藏所有class里有.items的标签// $(".items").addClass("hide");  //批量操作// $(this).next().removeClass("hide");// jQuery链式操作$(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')});
</script>

四、操作标签

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

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

相关文章

管理如何实现制度流程化 流程表单化 表单信息化 信息标准化？

管理如何实现制度流程化 流程表单化 表单信息化 信息标准化？

业务化、流程化、信息化、数字化、自动化、智能化&#xff0c;是企业业务管理发展路径的六个必经阶段 制度业务化&#xff0c;业务表单化&#xff0c;表单流程化、流程信息化、信息标准化、标准制度华。 制度流程化、流程表单化、表单信息化、信息标准化、标准制度华。 管理…
阅读更多...
Windows安装WinDbg调试工具

Windows安装WinDbg调试工具

一.下载 微软官网下载SDK的地址&#xff0c;有win11&#xff0c;win10&#xff0c;win8&#xff0c;win7&#xff0c;其他 https://developer.microsoft.com/en-us/windows/downloads/sdk-archive/ 二.安装 打开windbg\Installers\X64 Debuggers And Tools-x64_en-us.msi 要安…
阅读更多...
《Effective C++》知识点（6）--继承与面向对象设计

《Effective C++》知识点（6）--继承与面向对象设计

32. 确定你的public继承模式是is-a关系 重要规则&#xff1a;public继承就意味is-a的关系。适用于基类身上的每一件事情一定也适用于继承类身 上&#xff0c;因为每一个继承类对象也都是一个基类对象。 另外两种关系是has-a(有一个)和is-implemented-in-terms-of(根据某物实现出…
阅读更多...
[揭秘]splunk 背后running 的job

[揭秘]splunk 背后running 的job

1: 背景： 最近客户总是会收到一些dashboard 的PDF 文件，有些内容不是想要的，想要求更新一下，但是问题来了，这些dashboard 的自动运行的job 在哪里呢？ 2: 查找原因： 2.1 如果知道这个dashboard 发到那个email 的，那么可以查找： abc@163.com 去: /opt/splunk/etc/use…
阅读更多...
【Redis】String字符串类型-常用命令

【Redis】String字符串类型-常用命令

文章目录 String字符串类型常用命令setgetMGETMSET 计数命令INCRINCRBYDECRDECRBYINCRBYFLOAT 其它命令APPENDGETRANGESETRANGESTRLEN 命令总结 String字符串类型 1&#xff09;⾸先Redis中所有的键的类型都是字符串类型 2&#xff09;字符串类型的值&#xff08;value&#…
阅读更多...
数据结构详细笔记——并查集

数据结构详细笔记——并查集

文章目录 逻辑结构存储结构并、查代码实现Union 操作的优化Find 操作的优化&#xff08;压缩路径&#xff09; 逻辑结构 集合&#xff1a;将各个元素划分为若干个互不相交的子集的集合 森林是m(m>0)棵互不相交的树的集合 存储结构 #define SIZE 13 int UFSets[SIZE]; …
阅读更多...
linux环境下编译，安卓平台使用的luajit库

linux环境下编译，安卓平台使用的luajit库

一、下载luajit源码 1、linux下直接下载&#xff1a; a、使用curl下载&#xff1a;https://luajit.org/download/LuaJIT-2.1.0-beta3.tar.gz b、git下载地址&#xff1b;https://github.com/LuaJIT/LuaJIT.git 2、Windows下载好zip文件&#xff0c;下载地址&#xff1a;https…
阅读更多...
云计算、大数据、人工智能、物联网、虚拟现实技术、区块链技术（新一代信息技术）学习这一篇够了！

云计算、大数据、人工智能、物联网、虚拟现实技术、区块链技术（新一代信息技术）学习这一篇够了！

目录 云计算 一、云计算的基本概念 二、云计算的分类 (一) IaaS (二) SaaS (三) PaaS 三、云环境的分类、云计算的四种部署模式 (一)公有云 (二)私有云 (三)社区云 (四)混合云 四、云计算的特点 (一)虚拟化技术 (二)动态可扩展 (三)按需部署 (四)灵活性高 (五…
阅读更多...
左偏树学习笔记

左偏树学习笔记

定义 堆&#xff0c;是一棵树&#xff0c;且每个节点的键值都大于等于 / 小于其父亲的键值。 左偏树是一种可合并的堆&#xff0c;可以以 O ( log ⁡ n ) O(\log n) O(logn) 的复杂度实现合并。 性质 左偏树满足堆的性质。 我们设定一个值 dist \text{dist} dist&#xf…
阅读更多...
动手学深度学习：1.线性回归从0开始实现

动手学深度学习：1.线性回归从0开始实现

动手学深度学习&#xff1a;1.线性回归从0开始实现 1.手动构造数据集2.小批量读取数据集3.初始化模型参数4.定义模型和损失函数5.小批量随机梯度下降更新6.训练完整代码 1.手动构造数据集 根据带有噪声的线性模型构造一个人造数据集&#xff0c;任务是使用这个有限样本的数据集…
阅读更多...
692. 前k个高频单词(map)

692. 前k个高频单词(map)

目录 一、题目 二、代码 一、题目 692. 前K个高频单词 - 力扣&#xff08;LeetCode&#xff09; 二、代码 class Solution {class KV_sort{public:bool operator()(const pair<string,int> kv1, const pair<string,int> kv2){if(kv1.first kv2.first )//两个对…
阅读更多...
C51--项目--感应开关盖垃圾桶

C51--项目--感应开关盖垃圾桶

1、项目概述 功能描述&#xff1a; 检测靠近时&#xff0c;垃圾桶自动开盖并伴随滴一声&#xff0c;2s后关盖。 发生震动时&#xff0c;垃圾桶自动开盖并伴随滴一声&#xff0c;2s后关盖。 按下按键时&#xff0c;垃圾桶自动开盖并伴随滴一声&#xff0c;2s后关盖。 硬件说明…
阅读更多...
Flutter笔记：发布一个模块 scale_design - （移动端）设计师尺寸适配工具

Flutter笔记：发布一个模块 scale_design - （移动端）设计师尺寸适配工具

Flutter笔记 发布一个模块scale_design设计师尺寸适配工具与常用组件库 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/a…
阅读更多...
UE5C++学习（一）--- 增强输入系统

UE5C++学习（一）--- 增强输入系统

一、关于增强输入系统的介绍 增强输入系统官方文档介绍 二、增强输入系统的具体使用 注&#xff1a;在使用方面&#xff0c;不会介绍如何创建项目等基础操作&#xff0c;如果还没有UE的使用基础&#xff0c;可以参考一下我之前UE4的文章&#xff0c;操作差别不会很大。 如上…
阅读更多...
HIT_OS_LAB2 调试分析 Linux 0.00 多任务切换

HIT_OS_LAB2 调试分析 Linux 0.00 多任务切换

操作系统实验二 2.1 实验目的 通过调试一个简单的多任务内核实例&#xff0c;使大家可以熟练的掌握调试系统内核的方法&#xff1b;掌握Bochs虚拟机的调试技巧&#xff1b;通过调试和记录&#xff0c;理解操作系统及应用程序在内存中是如何进行分配与管理的&#xff1b; 2.2…
阅读更多...
配置OpenCV

配置OpenCV

Open CV中包含很多图像处理的算法&#xff0c;因此学会正确使用Open CV也是人脸识别研究的一项重要工作。在 VS2017中应用Open CV&#xff0c;需要进行手动配置&#xff0c;下面给出在VS2017中配置Open CV的详细步骤。 1.下载并安装OpenCV3.4.1与VS2017的软件。 2.配置Open CV环…
阅读更多...
经典文献阅读之--DLIO(基于连续时间运动校正的轻量级激光雷达惯性导航系统)

经典文献阅读之--DLIO(基于连续时间运动校正的轻量级激光雷达惯性导航系统)

0. 简介 一般来说&#xff0c;当系统经过不规则的地形时候&#xff0c;机器人自身会存在激烈运动会导致激光雷达扫描中的运动畸变&#xff0c;从而可能降低状态估计和建图的精度。虽然已经有一些方法用于缓解这种影响&#xff0c;但它们仍然过于简单或计算成本过高&#xff0c…
阅读更多...
中国电子云-隐私计算-云原生安全可信计算，物理-硬件-系统-云产品-云平台，数据安全防护

中国电子云-隐私计算-云原生安全可信计算，物理-硬件-系统-云产品-云平台，数据安全防护

目录 联邦学习的架构思想 中国电子云-隐私计算-云原生安全
阅读更多...
01-单节点部署clickhouse及简单使用

01-单节点部署clickhouse及简单使用

1、下载rpm安装包&#xff1a; 官网&#xff1a;https://packages.clickhouse.com/rpm/stable/ clickhouse19.4版本之后只需下载3个rpm安装包&#xff0c;上传到节点目录即可 2、rpm包安装&#xff1a; 安装顺序为conmon->server->client 执行 rpm -ivh ./clickhouse-…
阅读更多...
美团面试：Redis 除了缓存还能做什么？可以做消息队列吗？

美团面试：Redis 除了缓存还能做什么？可以做消息队列吗？

这是一道面试中常见的 Redis 基础面试题，主要考察求职者对于 Redis 应用场景的了解。 即使不准备面试也建议看看，实际开发中也能够用到。 内容概览： Redis 除了做缓存，还能做什么？ 分布式锁：通过 Redis 来做分布式锁是一种比较常见的方式。通常情况下，我们都是基于 Re…
阅读更多...
最新文章

Copyright @ 2022~2023