jquery入门

一、什么是jquery

jquery其实就是一个Javascript代码库，极大的简化了开发人员的各种操作

二、安装和引用

jquery有本地调用和远程调用两种方式

本地调用：

<script src="js/jquery-3.6.0.min.js"></script>

注：可以把"jquery-3.6.0.min.js"换成其他版本

网络调用（这种方式只有在有网络的情况下才能使用）：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

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

三、入口函数

在未学习jquery之前，我们一直用window.onload来解决客服端载入问题。但是只有少数小型文件会被很快的载入，大部分的大型文件不能很快的载入，而jquery提供了一个可以快速载入文件的函数，那就是ready。

$(document).ready(function(){})
简写形式：$(function(){})

它与window.onload的区别如下：

 四、jQuery对象宇Dom对象的转换

一、Dom对象转换为jQuery对象

$(Dom对象)
jquery(Dom对象)

二、jQuery对象转换为Dom对象

jQuery对象[索引号]
jQuery对象.get[索引号]

五、jQuery样式操作

一、添加一条样式

jQuery对象.css("样式属性名","属性值")

二、添加多条样式

jQuery对象.css({"样式属性名":"属性值","样式属性名":"属性值",......});

三、获取样式

jQuery对象.css("属性名");

六、选择器

jQuery中常见的选择器有基本选择器、层次选择器、过滤选择器和表单选择器等，其中过滤选择器包括基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器和表单对象属性选择器。

一、基本选择器

$("#box") //选取id为box的元素，返回的是单个元素

$(".box") //选取class为box的元素，返回的是集合元素

$("div")  //根据元素名匹配，选取的是名为div的元素，返回的是集合元素

$("*") //选择所有元素 返回的是集合元素

$("div,span,.box")  //选择所有的div、span元素和class为box的元素

二、层次选择器

$("div span")  //选取div下所有的span元素，返回的是集合元素

$("div>span")  //选取div下的span元素,只选取子元素中的span,下一级的span不选取,注意区别于第一条

$(".box+span")  //选取class=box后紧邻的span元素，必须是挨着的

$(".box~span")  //选取class=box后所有的span元素

三、基本过滤选择器

$("div:first")  选择第一个div元素，选择的是文档里的第一个元素，返回的是单个元素，注意区别于first-child选择器

$("div:last")  选择最后一个元素，与第一条规则类似，只不过是最后一个

$("tr:odd")  选择索引为奇数的行，索引号从0开始
$("tr:even")  选择索引为偶数的行，索引号从0开始

$("li").eq(0)  选择第一个li元素

$("li:lt(3)")  选择索引号小于3的li
$("li:gt(3)")  选择索引号大于3的li

四、内容过滤选择器

$("div:contains("你好")")  选择含有"你好"的元素

$("div:empty")  选择不包含子元素的div元素

$("div:has(p)") 选择含有p元素的所有div元素

后续选择器内容以后更新

七、一些动画

 上面代码是隐藏和显示动画代码

八、类操作

下面是添加和移除类的代码

jquery对象.addClass("类名1 类名2 .....");

jquery对象,removeClass("类名1 类名2 ...")

;