【034】Python全栈日记-jQuery（一）

从今天开始我们要进行JQuery的学习，由于我们属于后端工程师，所以JQueryurey只学习两节，不会进行很多框架的学习，如果对这方面感兴趣的可以自己去查询更多框架。

 

本次日记需要用到的jQuery手册和jQuery库（链接：https://pan.baidu.com/s/13CwlU-RevxSQI2cSovKfBQ ）

提取码：5hb8

 

一、什么是JQuery

jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

 

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器。

 

       说的通俗易懂一点就是，有一个牛逼的大神，他把我们在JavaScript中经常使用的东西都做成了函数，咱们只需要调用函数就能的到想要的结果，大大的节省了我们的时间，我们在python中学过类，jQuery就相当于一个大类，然后里面有各种各样的方法，我们仅需调用方法就能解决问题，但是也会面临一个问题，那就是JavaScript和jQuery的一些函数命名会发生改变，而且JavaScript和jQuery的方法并不通用，不过大同小异，我相信看完本次日记你很快就能上手了。

 

JQuery相当于是对JavaScript的一次高级包装，既然是包装肯定会显得更牛逼更值钱，所以我们jQuery使用$()作为jQuery的函数名，而我们在j去中定义变量最好也加上$的符号，作为区分，但是不加也没啥问题。

 

 

二、如何使用jQuery

首先我们需要导入jQuery的JavaScript文件，我在开头的百度云中分享了

通常我们放在body中，我之前说过jQuery是大神写的函数，并不是JavaScript自带的，所以我们使用时肯定得把jQuery的包放在我们JavaScript文件夹中。

 

 

三、JavaScript与jQuery的入口函数

在JavaScript中我们使用window.onload = function () {}来作为使用JavaScript的一个入口，目的在于防止网页静态没加载完事我们就开始进行JavaScript效果。

JavaScript中静态加载的内容包括：文档树  外部链接 .css  .js 图片 视频  音频。

但是我们使用JavaScript的入口函数存在一个问题，例如如下的例子，当网页加载完毕我们弹出两个弹窗：

结果：

弹出了第二个窗口，而未显示第一个弹窗

这说明JavaScript的入口函数会相互覆盖，这在我们导入多个JavaScript文件的时候很容易发生问题。

 

接下来看看jQuery的入口函数，

有两种写法，一种是最标准的（没人用的）：

另一种是简化版本（大家都在用）：

他的意思和JavaScript一样的，也是当静态加载完毕后进行动态效果，但是jQuery的入口函数一旦dom结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成。

而且jQuery入口函数可以书写多次不像window.onload会发生覆盖：

结果：会弹出弹出3个弹窗，但是顺序不一定，这充分体现了js的异步特性。

 

 

四、对象转换

一定要理解：JavaScript对象用JavaScript的属性和方法  jquery对象用jquery的方法。

例如：我们在JavaScript中给一个标签写入文字：

 

而到了jQuery中就变成，因为还没学jQuery选择器，所以先用JavaScript的：

慢慢你会发现，虽然不一样，但是jQuery的方法基本就是JavaScript的属性的简称，因为jQuery本来就是对JavaScript的高度封装，把JavaScript的一些属性都封装为函数的方法，学过python的应该对这个概念一点不陌生的。

 

但是jQuery还是留了一个后门的，毕竟jQuery能完成的JavaScript都可以完成，而JavaScript能完成jQuery不一定可以做到。

 

我们可以把jQuery的对象转为JavaScript对象，仅需要在jQuery对象后添加【0】

这样就实现jQuery对象转为JavaScript对象并使用JavaScript方法。

 

 

五、jQuery两个特征

我们发现jQuery中我们基本一直在用$()，$()括号中，可以放匿名函数，更重要的是可以放选择器，jQuery支持所有的css选择器，我们接下来马上会进行选择器介绍，这里我们需要用标签选择器。

我们在HTML中写一个无序列表

让我们会议以下如何在JavaScript中给每个li都添加背景色呢？我们会在使用for循环进行依次遍历，然后添加属性：

而在jQuery中大佬把循环也给封装进去了，在jQuery中实现同样功能的代码如下：

我们发现，不需要循环也可以给每个li都添加css，而且我们把添加css属性和添加文字写在了一行，这就是jQuery的两个特征：

隐形迭代：在获取元素的同时已经进行了遍历。

链式调用：只要你能看懂，jQuery完全可以写成一行，而你看看百度等大网站，确实写在了一行，因为在JavaScript中空格也是占用空间的，写成一行会节省很大的空间。

 

上一个事例中用了两个方法，

一个是.text，给标签写文字，之前说过了。

另一个是.css ，给标签写css属性，这个也是写在行内的，css有两种写法，一种是像python字典一样的键值对（可以只写一个属性键值对）

一个是单一属性使用的：

当我们给.css（）传入两个参数是修改属性，当我们给.css（）写一个参数的时候，就变为获取参数。

获取属性：css('属性名')

设置属性：css('属性名字','属性值');

 

 

六、选择器

在css中我们学习了11种选择器，而jQuery为我们提供了30多种选择器，我们来学习其中常用的选择器。

 

我在开头分享了一个jQuery参考手册，里面有jQuery所有的方法，而且点进去后有非常详细的用法，自学主要靠他就完全没有问题，让我们看看一共有多少选择器：

同时还有很多方法来进行选择标签，很多功能与选择器相同，哪个方便用哪个。

 

 

我们写一个无序列表以此来学习选择器：

1、基本选择器

这个就是css的id选择器，标签选择器，类选择器。全局选择器和多标签选择器。

注意格式：

 

2、层级选择器

前两个和css一样的：

 

prev + next：匹配所有紧接在 prev 元素后的 next 元素

 

prev ~ siblings：匹配 prev 元素之后的所有 siblings 元素

 

3、常用选择器

很多都很好理解，可以自己查阅手册，说几个重要的:

（1）:not(selector):

去除所有与给定选择器匹配的元素

在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)）

 

（2）even、odd：

选择偶数，奇数标签，

但是由于数组下标是从0开始的

所以选择奇数位实际上选择的是偶数下标的标签。

 

（3）first、last

选择第一个，选择最后一个

 

 

（4）eq（用的贼多）

:eq(index): 匹配一个给定索引值的元素,从0开始。

同时eq还有一个方法，可以使用.eq来调用，功能一致：

与eq相似的我们在css种学过一个

：nth-child（n），区别在于n从1开始，n代表第几个，于下标无关。

 

 

（5）ge，lt

:gt(index)：匹配所有大于给定索引值的元素，从0开始

:lt(index)：匹配所有小于给定索引值的元素，从0开始

 

（6）属性选择器

[attribute=value]：匹配给定的属性是某个特定值的元素

例如$(“input[type!='radio']”)

 

[attribute^=value]: 匹配给定的属性是以某些值开始的元素

[attribute$=value]: 匹配给定的属性是以某些值结尾的元素

[attribute*=value]: 匹配给定的属性是以包含某些值的元素

 

还有几个筛选方法很好用

(7) find()

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。所有搜索都依靠jQuery表达式来完成。

 

（8）sibilings()

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选

 

 

六、接下来通过学的东西来练习一个案例

如动图所示：

当鼠标移入图片，其他的变暗。当鼠标移出大盒子，都恢复。

 

其实就是一个鼠标事件，当鼠标放进去，当前图透明度为1，其他图片变透明，当鼠标移出大盒子，所有图片透明度都变为1.

在JavaScript鼠标事件都是onxxxxxx，例如onclick、onmouseover，而在jQuery中，只是取消了前面的on剩下的一样，例如click、mouseover

先写静态：

HTML：

Css：

jQuery：

这样就实现了突出显示的效果，是不是感觉比JavaScript简单太多了。

 

 

我们在JavaScript中学了三大操作：文本操作、属性操作、类样式操作。

让我们接下来通过实例来学习一下jQuery中是如何进行操作的。

七、文本操作

1、文字切换

点击按钮，给div框中写入文字

先写静态：

然后是jQuery

首先使用$('#box').text("<a href=\"#\">百度</a>");点击按钮后效果如下：

改为$('#box').html("<a href=\"#\">百度</a>")，点击按钮后效果如下：

你会发现其实jQuery里使用的.text和.html就是经过封装后的innertext和innerhtml。

 

2、表单验证

还记得32期的表单验证么？我们用jQuery来重写

先学习几个点，我们在JavaScript中获取input里面的填写的值是通过获取input的value属性，这样就能直到别人填写了什么而进行验证。

在jQuery中我们把：对象.value，简化为了方法：val()

 

离焦事件也从onblur变为blur

 

一个新的知识点：

trim()：jQuery中用来清除字符串前后的空格，括号中填写什么也可以清除字符串前后填写的元素。

 

HTML

没css

jQuery：

你想写多长就可以写多长。

 

 

 

八、属性操作

我们在给JavaScript进行属性操作的时候使用的是

attributes ： 获取一个属性作为对象

getAttribute ： 获取某一个属性的值

 

而jQuery的属性就很简单了：

.attr("src") :获取src属性

.attr({ src: "test.jpg", alt: "Test Image" });：设置src和alt属性，键值对

.attr("src","test.jpg"); ：设置src属性

 

点击照片切换练习：

效果：

 

 

九、类样式操作

我们在JavaScript中使用

Classlist.add()、classlist.remove()、classlist. contains()

增加、移出，是否存在类样式

 

而在jQuery中：

.addClass：添加

.removeClass：移除

. toggleClass ：如果存在（不存在）就删除（添加）一个类

 

看一个事例

Html+css

jQuery

效果：

 

十、偏移量

我们昨天学了偏移量

今天看看jQuery中的偏移量

 

offset([coordinates])

获取匹配元素在当前视口（body）的相对偏移。

返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

返回值为两个：left和top

 

十一、动画

1、show([speed,[easing],[fn]])：

显示隐藏的匹配元素

这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。

 

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

 

2、hide([speed,[easing],[fn]])

隐藏显示的元素

这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的，这个方法将不会改变任何东西。

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

 

 

动画的使用方法都是完全一样的

3、slideDown([speed],[easing],[fn])

滑下

通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

 

4、slideUp([speed,[easing],[fn]])

滑上

通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

 

5、fadeIn([speed],[easing],[fn])

淡入

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

 

6、fadeOut([speed],[easing],[fn])

淡出

通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

 

看一个实例

Html+css

jQuery

效果：

 

 

 

还记得上回学的轮播图么，我们用新学的动画效果来实现一下手动轮播，剩下的可以靠自己扩展

 

十二、特效轮播图

京东里的轮播图实际上是有一种逐渐消失和逐渐显示的效果的，这个在JavaScript实现起来很麻烦，但是jQuery中却很好实现：

这回我们把所有图片叠在一起，最上面的那张显示，剩下的都隐藏，当切换时，要显示的淡入，之前的图淡出，其余都隐藏。

我们只做手动轮播，剩下的自己扩展

 

Html：

Css：

静态就写好了，接下来我们使用jQuery来实现动态效果：

效果：