【035】Python全栈日记-jQuery（二）+bootstrap

本次是jQuery第二节，还有一部分bootstrap的内容，今天会通过一些知识点穿插实例进行学习，补全一些常用的知识点。

 

一、自定义动画

我们昨天学了淡入淡出、滑上滑下和显示消失的动画效果，今天来学习如何进行自定义动画：

1、animate(params,[speed],[easing],[fn])

animate用于创建自定义动画的函数。

 

（1）概念

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.

 

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

 

（2）参数

[params],[speed],[easing],[fn]

params:

一组包含作为动画属性和终值的样式属性和及其值的集合

 

speed:

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

 

easing:

要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

 

fn:

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

 

实例：

效果：

 

 

二、节点操作

我们在JavaScript中学过创建节点和删除节点，还有如何把创建的节点关联在html中

createElement ：创建节点

createTextNode：创建文本节点

appendchlid：追加节点

 

今天我们来看看jQuery中如何进行节点操作。

 

1、创建节点：

直接在$()中写入需要创建的节点，同时还有文本节点，也一起写进去

 

2、关联节点

创建完节点，接下来就是如何与html中的标签进行关联

（1）内部插入

【1】append(content|fn)

向每个匹配的元素内部追加内容。追加为父元素的最后一个子元素。

使用方法：

给id为#test的标签追加元素<a href="#">百度</a>，放在最后一个位置

 

【2】appendTo(content)

这个同样是追加内容，也是追加到父元素的最后一个子元素后。但是使用方法不同。

把<a href="#">百度</a>追加给id为#test的标签，放在最后一个位置

 

其实两个意思一模一样，看你喜欢用哪种了。

 

【3】prepend(content|fn)

向每个匹配的元素内部前置内容。追加为父元素的第一个子元素

给id为#test的标签追加元素<a href="#">百度</a>，放在第一个子元素位置。

 

【4】prependTo(content)

向每个匹配的元素内部前置内容。追加为父元素的第一个子元素。

把<a href="#">百度</a>追加给id为#test的标签，放在第一个子元素位置。

 

这俩也一个意思，看你习惯了。

 

（2）外部节点

与内部的区别就是，外部是添加孩子元素，而外部追加的是兄弟元素。

【1】after(content|fn)：在每个匹配的元素之后插入内容。

【2】before(content|fn)：在每个匹配的元素之前插入内容。

效果：

 

【3】insertAfter(content)：在每个匹配的元素之后插入内容。

【4】insertBefore(content)：在每个匹配的元素之前插入内容

和上面的同理，反过来了，把节点追加给标签。

 

 

3、删除节点

（1）empty()

删除匹配的元素集合中所有的子节点。

 

（2）remove([expr])

从DOM中删除所有匹配的元素。

 

 

三、实例练习

城市选择

我们在网页中经常会看到这样的选择，中间的4个按钮分别是，所有的都放在右边，所有的都放在左边，选择的放在右边，选择的放在左边。

 

我们的选项卡用的是select和option，但是要想达到这种所有选项都在框中需要加入一条select标签的属性：multiple，放在select标签里就行了。

 

这个案例就是使用追加和删除完成的，首先看看html和css

 

然后就是jQuery

效果：

 

 

四，手风琴选项栏

有时候网页上会有如下面动图所示的手风琴式选项卡，其实做起来很简单，但是需要一定逻辑。

 

手风琴的关键思路是使用滑入滑出动画加上排他的方法

手风琴选项卡的html＋css如下：

我们通过css和html可以发现，刚开始我们把选项卡的大盒子隐藏了，然后我们写jQuery·

这就是jQuery的牛逼之处，这个例子把jquery的隐形迭代和链式结构特征体现的淋漓尽致。

 

 

五、评论

这个方法也很简单，我们需要先获取到文本框中的文字，然后把文字追加到文本框的盒子里就行·。

Html：

Css：

jQuery：

效果：

 

 

 

六、弹幕效果

弹幕效果肯定不陌生，我们做的发的弹幕有两点：随机颜色、随机高度出现。从屏幕最右到最左，这里面涉及到了随机数和自定义动画（本期第一节内容）

 

关于随机颜色我们这里扩充一下，一般都是从设定好的列表中随机抽取颜色，但是如何做到真正的随机颜色呢？

我们都知道颜色是由#+6个16进制数构成

所以我们可以用随机数生成从0到15这16个十进制数，然后把每个数转为16进制，进行6次循环拼接成一个六位16进制，这样才是真正的随机颜色。有兴趣的可以试试。

 

回到弹幕，我们先做静态

Html：

Css：

jQuery：

效果：

 

 

 

 

 

七、Bootstrap

这块老师就给我们讲了2个多小时，我觉得讲的不好，但是这个东西其实不用讲，自己摸索就ok的。

Bootstrap给我的理解就是这样的，他基于jQuery，编写了很多的现成代码，供前端设计师来使用，前端设计师只需要复制粘贴Bootstrap提供的现成代码，修改其中部分属性，就可以轻松达到目的。

Bootstrap就相当于买了一个洗衣机，我们只需要按照说明书进行就可以使用，说明书就是一个Bootstrap官网提供的文档，我们只要学会html、css和JavaScript，就完全能够理解如何使用Bootstrap。难就难在修改为自己想要的样式，没准你给人家改一改就不能用了。

 

先做个引入了解一下啥是Bootstrap

 

1、认识Bootstrap

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。  Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

 

当然上面都是百度，总结一下就是在中国不存在的另一家公司twitter里面的两个大佬，闲的无聊看其他前端工程师太苦逼了，就随手写了一套方便大众的库，前端工程师终于解放双手，复制粘贴就额可以完成一个网页制作了。

 

2、如何使用

我们需要先到Bootstrap官网（http://www.bootcss.com/）

我们使用Bootstrap基本就是在这个网站复制粘贴然后修改属性，就是这么方便。

非常友好的有中文

点那个中文文档，里面有个下载Bootstrap，下载后你会发现是三个文件夹css，fonts和js，我们只需要在html中导入css包和js包，那个字体就不用了，太丑，推荐在阿里的矢量图库中下载，那个好看。

我们也可以不下载，直接引入官方的

适用于做哪些扁平的网页，有非常明确的布局，比如小米就是用的Bootstrap做的，京东淘宝就算了，自己写都比改Bootstrap快得多。

 

 

3、了解Bootstrap

Bootstrap最重要的属性就是栅格，官方默认把pc端分为12列，然后我们的元素都在这12列中写，例如小米官网

每一行都是12个格子，然后根据我们的需要对格子进行划分。

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

 

 

我们要使用Bootstrap必须在我们使用的块中添加类container或者container-fluid，前者会根据你的页面大小进行版心设定两边留白，后者不留白，全宽度。

 

 

 

剩下的我就不多说了，我们看看怎么使用吧，他就是个库，我们要用直接复制粘贴修改就行了，没有啥新的知识点。

 

八、导航栏+Bootstrap轮播图

首先打开Bootstrap官网，点击中文手册，点击上方的组件

然后点击右侧导航栏中的导航条

进去后找到自己喜欢的样式：

复制粘贴代码：

一定注意要先导入bootstrap的css、jq和js库

然后一个导航栏就做好了

然后我们可以通过修改css样式来修改，但是注意一点，一定不要用bootstrap自带的类名，另起一个类名进行修改，你把人家类修改了，指不定后面错多少呢。

然后是做轮播图，例如小米的轮播图是把一条3：9分开并且两边留白，那我们也分开留白，先布局

然后我们给3份的盒子加入背景色方便观察，然后在9份中加入轮播图插件

在bootstrap中文文档中的JavaScript插件中的carousel中，

选想要的样式复制粘贴底下的代码，放在<div class="col-lg-9"></div>中。

如图，我们已经给左边的3份框加入了红色背景色，然后我们修改股指过来的轮播图。

这个代表有几张图，假如你有五张就再复制两个，把序号改为3，4

这个代表我们的照片，和照片注释，我们只需要把自己的照片替换进去就好，不需要注释可以删除注释的div，有几个复制几次，但是第一张会有个属性active，其他张不能有的。

修改后：

然后我们给图片添加css：

轮播图做完了。

牛逼吧，但是只适合做布局简单的网页，京东这样的你要用bootstrap去自己改可能比自己写还费时间。