【技术分享】WEB前端全栈成长计划(二阶段)-jQuery入门篇

学完HTML+CSS+JavaScript后通过课程接触到jQuery，jQuery不能算是前端框架，最多是个Js函数库，但它同样经典。jQuery的对于自己的定义“write less,do more（写得更少，又能做更多的事情），学完js后已经学习过通过JS操作DOM（网页文档对象模型），原生的js语法在使用上非常的繁琐，jQuery的出现很好的帮助了开发者高效的完成效果，减少了代码量。虽然现在bootstrap、vue这类前端框架横空出世，但作为经典之作的jQuery还是很有必要掌握一下它的基本使用。

由于初学，本篇不会过多深入研究，仅从基础使用角度出发研究与学习一下。

一、下载jQuery与HTML文档中加载jQuery库

1、下载jQuery

官网地址：https://jquery.com/download/

jQuery已经历3个版本，目前最新版为3.5.1，简单说明一下

完整版

Download the compressed, production jQuery 3.5.1 （压缩版）

Download the uncompressed, development jQuery 3.5.1 （未压缩版）

移除ajax和effects模块版本

Download the compressed, production jQuery 3.5.1 slim build （压缩）

Download the uncompressed, development jQuery 3.5.1 slim build （未压缩版）

学习使用，下载未压缩的完整版可满足需求

官网下载有时会失败，我的Gitee上存了一份，有需要的可以去下载

https://gitee.com/net_master/Public/tree/master/jQuery

2、HTML文档中加载jQuery库

                                                                                                          

jQuery入口函数（document ready 文档就绪事件）

这个函数是保证在DOM文档全部加载完毕后才进行相关操作，如果文档还未加载完就运行jQuery进行操作，可能出现失败的情况

两种写法：

$(document).read(function(){             // jQuery代码部分         });           $(function(){             // jQuery代码部分         });

重点：我们只要记住如果我们的HTML页面有很多是jQuery动态处理的，那一定得将代码写在入口函数中，以确保在DOM加载完后才执行操作

jQuery选择器

允许对单个或多个HTML元素进行操作

jQuery基于CSS选择器，支持id、类、属性等查找HTML元素，选择器与$()搭配使用

#id         查询id     .class       查询类     :first       查询第一个     :first-child    查询每个元素的第一个元素       $(".btn-class")          查询class为btn-class的元素     $("span.newBox")          查询class为newBox中的元素     $("h3:first")           查询第一个h3元素     $("ul li:first")         查询第一个

元素中的第一个
• 元素     $("ul li:first-child")      查询每个
  元素中的第一个
  • 元素     $("*")               查询html中所有元素     $("this")             查询当前html元素

    重点：学过CSS选择器应该很容易理解jQuery选择器，但是要特别注意 class中某一元素的查询语法与CSS选择器略有不同

    三、理解jQuery事件

    当我们在网页中移动鼠标，点击鼠标的时候会有一些响应，这些响应就叫做事件。处理事件是我们提前写了处理逻辑，当网页中触发我们定义事件时，事件将按照我们写的代码逻辑进行处理。

    jQuery事件有：鼠标事件、键盘事件、表单事件、文档/窗口事件，在这里我们重点说一下鼠标事件，因为初学CSS后，我们希望尽快掌握一些页面特效

    鼠标事件

    click       单击

    dblclick    双击

    mouseenter  移入

    mouseleave  移出

    hover       悬停

    语法结构： $("选择符").事件函数(可选值)

    1、click和dblclick事件

    为HTML元素添加一个点击事件，不是按钮元素也可以添加点击事件，但是同一个元素只能添加一种点击事件，两种事件是不能叠加的

    单击点我看看
        
    双击点我看看
        

    2、mouseenter和mouseleave事件

    和点击事件不一样，mouseenter和mouseleave事件可以单独使用，也可以搭配使用

    我这个无情的DIV