jQuery后续和 前端框架Bootstrap
一、jQuery后续
1. 动画效果
// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])
（1）自定义点赞动画实例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>点赞动画示例</title>
<style>
div {
position: relative;
display: inline-block;
}
div>i {
display: inline-block;
color: red;
position: absolute;
right: -16px;
top: -5px;
opacity: 1;
}
</style>
</head>
<body>
<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
$(this).append(newI);
$(this).children("i").animate({
opacity: 0
}, 1000)
})
</script>
</body>
</html>
点赞特效简单示例
2. jQuery的自带方法
- 注意： jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程（即一个jQuery对象通过点的方法，会自动的遍历jQuery对象这个数组中的每一个JS对象，将这些JS对象都执行一次点的方法。）。当这种情况发生时，它通常不需要显式地循环的
.each()方法：
（1）each （类似for循环）
语法一：
$.each(collection, callback(indexInArray, valueOfElement))： // 例子：
li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//index是索引，ele是每次循环的具体元素。
}) // 输出：
010
120
230
340
语法二：
.each(function(index, Element))：
// 描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。 // 例子： // 为每一个li标签添加foo
$("li").each(function(){
$(this).addClass("c1");
});
等价于：$("li").addClass("c1"); // 对所有标签做统一操作
终止遍历
//在遍历过程中可以使用 return false 提前结束each循环。类似python的for循环时的break
（2）data() （存放隐形的数据）
- 原本我们可以通过给标签添加自定义属性来让标签携带一些数据。但是这些数据可以通过浏览器查看源码查看到，但通过
data()方法增加的数据直接保存在内存中。无法只能通过data()方法查看。
添加值的方法：
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
查看使用data方法添加的值
$("div").data("k");//返回第一个div标签中保存的"k"的值
移除元素通过data方法上存放的数据
removeData(key): 描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。 // 例子：
$("div").removeData("k"); //移除元素上存放k对应的数据
二、前端框架之Bootstrap
- Bootstrap的具体用法请点击链接：Bootstrap官网
1. CDN
CDN的全称是Content Delivery Network，即内容分发网络 ，通过CDN可以更快的访问到原本在其他远距离地方的数据。
通过网站BOOTCDN找到在线的Bootstrap框架的源码，再通过本地的html文档的link标签导入其中的压缩版css链接，通过script标签导入压缩版的js链接即可。
也可将他们下载来下分别保存在文件中，再进行导入。
2. Bootstrap中常用的全局CSS样式
- 以下都是通过类来实现的，即这些关键字都是直接写在标签的class属性中
（1）栅格系统
切记栅格不能超过12
关键字：
container最大宽度col-参数栅格类row
（2）表格
- 关键字：
table创建表格样式table-参数调节表格详细样式
（3）表单
关键字：
form-control设置表单样式
（4）按钮
关键字：
btn将标签变成按钮btn-参数调节按钮样式
3. Bootstrap中常用的组件
（1）字体图标（也可通过其他网站获取图标）
- 这些图标相当于标签的文本信息。可直接调节文本的方法改变其状态。
- 这里提供一个 图标库
（2）导航条
关键字
navbar创建导航条：
<nav class="navbar navbar-default">
html代码
</nav>
navbar-参数调节导航条样式
（3）巨幕
- 关键字：
jumbotrom创建巨幕
（4）面板
- 关键字：
panel创建面板panel-参数调节面板样式
jQuery后续和 前端框架Bootstrap的更多相关文章
- 前端框架Bootstrap（10.7国庆补写）
框架的官网地址:https://v3.bootcss.com/ 主要学习Bootstrap框架提供的样式.组件.插件的使用. 首先下载到本地,在项目中导入使用: 下载的文件中包含:min.css的是压 ...
- 【html、CSS、javascript-13】前端框架Bootstrap
1.Bootstrap前端框架:包含css样式.js插件.图标等 http://www.bootcss.com/ 2.Font Awesome:非常全的图标大全 https://fontawesome ...
- 前端框架 bootstrap 的使用
内容概要 前端框架 bootstrap 简介 引入方式 布局容器 栅格系统 图标 内容详细 简介 网址:https://v3.bootcss.com/ 版本: 2.X 3.X 4.X 推荐使用3.X版 ...
- 前端框架Bootstrap
前端框架Bootstrap http://www.bootcss.com/ Bootstrap 编码规范 http://codeguide.bootcss.com/
- 前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
- 简洁灵活的前端框架------BootStrap
前 言 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.[1] ...
- 前端框架bootstrap(响应式布局)入门
Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...
- 最受欢迎的前端框架 —— Bootstrap学习
Bootstrap是Twitter的Mark Otto和Jacob Thornton开发的,是目前最受欢迎的前端框架,它简单灵活,使得Web前端开发更加快捷方便. 首先,要基本掌握Bootstrap框 ...
- 前端框架——Bootstrap
一.Bootstrap介绍 凡是使用过bootstrap的开发者,不外乎做这么两件事情:复制and粘贴. Bootstrap官方网址:http://www.bootcss.com Bootstrap, ...
随机推荐
- vue v-for直接循环数字
<svg class="icon" aria-hidden="true" v-for="index of 5" :key=" ...
- golang init方法和main方法初始化顺序
init()和main()方法是golang默认的两个方法,不需要我们调用,程序执行会自动寻找项目中的这俩方法.现在我们就讲一种通用的情况:main 包下 导入了 init2 包而在init2 包下又 ...
- cocos2dx基础篇(25) 简单碰撞检测
[3.x] 将数学类 CCPoint.CCRect 改为v3.x版本的 Vec2.Rect 就好了. [简单碰撞检测] 在一些游戏中经常会遇到碰撞检测的情况,如愤怒的小鸟飞出去后,是否与石头发生碰撞. ...
- LeetCode.949-给定数字的最大时间(Largest Time for Given Digits)
这是悦乐书的第363次更新,第391篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第225题(顺位题号是949).给定4个整数组成的数组,返回最大的24小时时间. 最小的 ...
- 找工作Java面试 题搜集
面向对象的特征有哪些方面?答:面向对象的特征主要有以下几个方面: 抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象和行为抽象两方面.抽象只关注对象有哪些属性和行为,并不关注这些行为的 ...
- python关键字以及含义，用法
Python常用的关键字 1.and , or and , or 为逻辑关系用语,Python具有短路逻辑,False and 返回 False 不执行后面的语句, True or 直接返回Tru ...
- 重装java后hadoop配置文件的修改
1.删除hdfs-site.xml中dfs.namenode.name.dir目录和dfs.datanode.data.dir目录 然后 hdfs namenode -format 不然将无法启动na ...
- 洛谷 P3857 彩灯 题解
题面 对于每一个开关,我们可以看成一个0/1串,初始是一个全部为0的串,要求经过这些开关的操作后,出现的不同的0/1串的个数 建模就是存在一些数,这些数异或起来是0(等价于没有操作).那么需要求一个集 ...
- <<C++ Primer>> 第二章 变量和基本类型 术语表
术语表 第 2 章 变量和基本类型 地址(address): 是一个数字,根据它可以找到内存中的一个字节 别名生命(alias declaration): 为另一种类型定义一个同义词:使用 &q ...
- SparkML之推荐算法ALS
参考: SparkML之推荐算法(一)ALS --有个比较详细的讲解,包含blocks使用. Spark ALS源码总结 //TODO 源码,集群尝试.研究blocks使用原理及作用. 官方解释:nu ...