jQuery详解

news/2024/7/8 1:50:35

介绍

jQuery

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

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

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

min.js文件与js文件

js文件是JavaScript源码文件,min.js是压缩版的js文件,二者在功能上完全一致

$

$就是jQuery的缩写,他就代表了jQuery

引入

网址

https://www.jq22.com/jquery/jquery.html

引入jQuery【下面是各种版本】

<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<script src="https://www.jq22.com/jquery/jquery-2.1.1.js"></script>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/jquery/jquery-1.9.1.js"></script>
<script src="https://www.jq22.com/jquery/jquery-1.7.1.js"></script>

选择器

基础选择器

元素选择器

选择span标签

$("span").html("jQuery元素选择器")

类选择器

选择class属性为box的元素

$(".box").html("jQuery类选择器")

Id选择器d

选择id为it的元素

$("#it").html("jQuery id选择器")

选择器内一层子代

选择class为topnav中的直接子元素li,对更深一层的元素不起作用

$(".topnav > li").css("border", "3px double red");

后代选择器所有子代

选择class为topnav中的所有子元素li

$(".topnav li").css("border", "3px double red");

属性选择器

name: 选中的属性

value: 属性值

完美匹配 [name="value"]

选择class为jia的input标签

$('input[class="jia"]').val('jiakewei')


包含 [name*="value"]

选择class包含j的input标签

$('input[class*="j"]').val('study!');

空格分割后包含 [name~="value"]

选择class中用空格分隔的值中包含jkw的input标签

$('input[class~="jkw"]').val('study!');

前缀 [name|="value"]

选择alt属性值前缀【或-连接符前面】为jia的a标签

$('a[alt|="jia"]').css('border', '3px solid green');

开头  [name^="value"]

选择name是以jkw开始的input标签

$('input[name^="jkw"]').val('study!');

结尾 [name$="value"]

选择name是以jkw结尾的input标签

$('input[name$="jkw"]').val('study!');

索引选择器

索引index下标计算是从0开始的

准确索引 :eq(index)

匹配第二个li元素

$("li:eq(2)").css("border","2px solid red")

偶数索引 :even

索引index下标计算是从0开始的,所以:even选择器是选择1,3,5.......的li

$("li:even(2)").css("border","2px solid red")

奇数索引 :odd

索引index下标计算是从0开始的,所以:odd选择器是选择2,4,6.......的li

$("li:odd(2)").css("border","2px solid red")

第一个元素 :first

选择第一个匹配的li

$("li:first").css("border","2px solid red")

最后一个元素 :last

选择最后一个匹配的li

$("li:last").css("border","2px solid red")

大于给定索引 :gt(index)

匹配索引值大于4的li元素

$("li:gt(4)").css("border","2px solid red")

小于给定索引 :lt(index) 

匹配索引值小于4的li元素

$("li:lt(4)").css("border","2px solid red")


http://lihuaxi.xjx100.cn/news/1082198.html

相关文章

Go语言——【高质量编程 | 代码规范】

作者&#xff1a;非妃是公主 专栏&#xff1a;《Golang》 博客主页&#xff1a;https://blog.csdn.net/myf_666 个性签&#xff1a;顺境不惰&#xff0c;逆境不馁&#xff0c;以心制境&#xff0c;万事可成。——曾国藩 文章目录 一、高质量编程定义 二、代码规范1. 代码格式…

java获取星期几

如果你要问 java什么时候学习比较好&#xff0c;那么答案肯定是 java的星期几。 在 Java中&#xff0c;你可以使用 public static void main &#xff08;&#xff09;方法来获取一个类的所有成员变量&#xff0c;然后在所有类中调用这个方法来获取对象的所有成员变量。它能以对…

Unity 后处理(Post-Processing) -- (1)概览

在Unity中&#xff0c;后处理&#xff08;Post-Processing&#xff09;是在相机所捕捉的图像上应用一些特殊效果的过程&#xff0c;后处理会让图像视觉效果更好&#xff08;前提是做的好&#xff09;。 这些效果的范围有非常细微的颜色调整&#xff0c;也包括整体的美术风格的大…

VS Code C++ 输出窗口中文乱码问题解决

VS Code C 输出窗口中文乱码问题解决 系统cmd终端乱码 的情况&#xff1a;原因解决方法&#xff1a;&#xff08;仅针对cmd终端输出的情况&#xff09;方法一&#xff1a;更改代码文件的编码方法二 &#xff1a;更改cmd默认终端的编码方式 系统cmd终端乱码 的情况&#xff1a; …

开心消消乐

给定一个 N 行 M 列的二维矩阵&#xff0c;矩阵中每个位置的数字取值为 0 或 1&#xff0c;矩阵示例如&#xff1a; 1 1 0 0 0 0 0 1 0 0 1 1 1 1 1 1 现需要将矩阵中所有的 1 进行反转为 0&#xff0c;规则如下&#xff1a; 当点击一个 1 时&#xff0c;该 1 被反转为 0&am…

《使用深度神经网络对光电容积脉搏图进行归一化,以进行个体和群体比较》阅读笔记

目录 一、论文摘要 二、论文十问 Q1&#xff1a;论文试图解决什么问题&#xff1f; Q2&#xff1a;这是否是一个新的问题&#xff1f; Q3&#xff1a;这篇文章要验证一个什么科学假设&#xff1f; Q4&#xff1a;有哪些相关研究&#xff1f;如何归类&#xff1f;谁是这一…

C#基础 (类型转换_隐式转换)

什么是类型转换 类型转换就是不同变量类型之间的相互转换 隐式转换的基本规则——>不同类型之间自动转换 大范围装小范围 相同大类型之间的转换 有符号 long——>int——>short——>sbyte 可以用大范围装小范围的类型&#xff08;隐式转换&#xff09; 不能够用小范…

【三十天精通Vue 3】第二十一天 Vue 3的安全性详解

✅创作者&#xff1a;陈书予 &#x1f389;个人主页&#xff1a;陈书予的个人主页 &#x1f341;陈书予的个人社区&#xff0c;欢迎你的加入: 陈书予的社区 &#x1f31f;专栏地址: 三十天精通 Vue 3 文章目录 引言一、Vue 3 中的安全问题1.1 前端安全问题概述1.2 Vue 3 中的安…