jQuery学习笔记 #Day1

最新推荐文章于 2022-10-10 20:40:03 发布

原创最新推荐文章于 2022-10-10 20:40:03 发布 · 377 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

学习笔记专栏收录该内容

6 篇文章

订阅专栏

利用假期学（复）习了前端的一些基础知识，像是html、css，js这些。之前总是觉得学了忘，忘了学，学了还得忘，那没办法忘了还得学，后来想开了，有过哪怕一点点记忆也还是可以继续学一些东西的，做些实例的，总比一直复习基础知识强。
GIS方面呢，对自己后端的技术不是特别看好，但又想参加一些项目以及竞赛，把目标转向了webgis。之前看到小专栏的大佬讲webgis的入门有提到jquery这个js库，也有提到node.js，一个一个来吧。入门了这些js库后再去看openlayers或者是leaflet这些webgis的框架吧。
最近网课开始了，计划开始实行的较晚，每天给课外的时间可能并不多，每天的笔记内容也不会特别多，总之不管学的多少，希望可以坚持下去！

jQuery简介

jQuery是一种轻量级的js库，使得许多js语句实现起来更简洁易懂，jQuery是函数式的，基本上所有语句都类似函数的形式。

jQuery功能

jQuery具有以下功能：

HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画的实现
HTML DOM模型的遍历和修改等操作
AJAX
Utilities
函数式的事件操作和元素属性的设置，实在不要太方便。

网页中引入jQuery

将jQuery引入网页才可以使用，有两种方式，但都要通过script标签引入。

安装下载jquery文件

jQuery官网上就可以找到，下载js文件后，要**将js文件放在网页相同的目录。**这种方法就不用一次次查CDN链接了。

CDN直接引入（偏爱）

通过CDN的链接可以直接引入，这种方法更方便，所以我更偏爱一些。
百度CDN的jquery链接：https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

jQuery语法

jQuery通过美元符

$()

来选择HTML的标签，并以函数的形式根据指定事件进行指定操作。语法为

$(tag).action(){…}

jQuery选择器

jQuery的选择器基于CSS的选择器

元素选择器

选择p标签，实现点击“p”标签区域，可以进行指定操作

$(“p”).click(){…}

类选择器

选择所有class=“selected”的标签，实现点击这些区域，可以进行指定操作

$(.selected).click(){…}

id选择器

选择id=“selected”的标签，实现点击这些区域，可以进行指定操作

$(#selected).click(){…}

高级用法

标签元素存在着包含的关系，包含的关系下还有次序或是属性的分别，选择器可以有更多用法。（图片截自菜鸟教程）
在这里插入图片描述

jQuery事件函数

click（）用来处理点击后的一些列操作，它就属于事件函数。

事件分类

事件大概可以分为以下几种

鼠标
键盘
表单
文档/窗口

具体事件

（图片截自菜鸟教程）
在这里插入图片描述
事件函数是为了指定在对应的事件发生后进行什么样的操作，例如在点击button按钮后，将p标签内容隐藏

$(“button”).click(){
$(“p”).hide();
}

jQuery效果

在菜鸟教程中学习时看到了几个效果，应该不是全部的，不过还是整理下来。

隐藏和展示

将所选要素内容隐藏hide(),显示show():

$(tag).hide(speed,callback函数);
$(tag).show(speed,callback函数);

speed是效果完成所用的速度，有slow和fast可选，也可以填数字表示毫秒；callback函数则是在效果完全实现后进行的操作。这两个参数不是必须有的。以下都一样
toggle()函数可以实现两个效果的切换，被隐藏了下次操作就显示，显示出来下次就隐藏。

$(tag).toggle(speed,callback函数);

淡入淡出

将所选要素内容淡入fadeIn()，淡出fadeOut():

$(tag).fadeIn(speed,callback函数);
$(tag).fadeOut(speed,callback函数);

fadeToggle()函数可以实现两个效果的切换

$(tag).fadeToggle(speed,callback函数);

fadeTo()函数，可以设置变淡的程度

$(selector).fadeTo(speed,opacity,callback);

opacity表示变淡的程度，，介于0和1之间

滑动

将所选要素内容上滑slideUp()，下滑slideDown():

$(tag).slideUp(speed,callback函数);
$(tag).slideDown(speed,callback函数);

slideToggle()函数可以实现两个效果的切换

$(tag).slideToggle(speed,callback函数);

动画

设置动画

为所选要素设置动画animate():

$(tag).animate({动画内容},speed,callback函数);

{动画内容}内的动画内容是自定义的CSS样式，{属性名：定义的值}，可以控制多个属性，用逗号隔开

默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

可以通过一系列animate()语句实现连续的一系列变化

停止动画

停止动画使用stop()函数：

$(tag).stop();

只停止当前未完成的动画，如果还有后续的动画则无法停止
面对这种情况，加入两个参数：

$(tag).stop(stopAll,goToEnd);

两个参数都是布尔型，默认均为false

stopAll:若为true，将所有动画停止
goToEnd:若为true，直接完成全部动画

链式结构

jQuery的特性，就如连续调用各种函数一样。
将id=“p1”的标签的CSS样式颜色设为红色，花费2000毫秒向上滑动，再花费2000毫秒向下滑动

$("#p1").css(“color”,“red”).slideUp(2000).slideDown(2000);

jQuery语法不要求严格的行与缩进，可以把代码写的更美观一些。

$("#p1").css(“color”,“red”)
.slideUp(2000)
.slideDown(2000);

此外可以看到，jQuery修改CSS样式很方便，通过函数调用的形式CSS(属性：属性值)