一、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循环）

  1. 语法一：

    $.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

  2. 语法二：

    .each(function(index, Element))：
    
// 描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。  

// 例子：

// 为每一个li标签添加foo
    
$("li").each(function(){
    
  $(this).addClass("c1");
    
});
    
等价于：$("li").addClass("c1");  // 对所有标签做统一操作

  3. 终止遍历

//在遍历过程中可以使用 return false 提前结束each循环。类似python的for循环时的break

（2）data() （存放隐形的数据）

  • 原本我们可以通过给标签添加自定义属性来让标签携带一些数据。但是这些数据可以通过浏览器查看源码查看到，但通过data()方法增加的数据直接保存在内存中。无法只能通过data()方法查看。

  1. 添加值的方法：

    • $("div").data("k",100);//给所有div标签都保存一个名为k，值为100

  2. 查看使用data方法添加的值

    • $("div").data("k");//返回第一个div标签中保存的"k"的值

  3. 移除元素通过data方法上存放的数据

    • removeData(key):

描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

// 例子：
      
$("div").removeData("k");  //移除元素上存放k对应的数据

二、前端框架之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的更多相关文章

  1. 前端框架Bootstrap（10.7国庆补写）

    框架的官网地址:https://v3.bootcss.com/ 主要学习Bootstrap框架提供的样式.组件.插件的使用. 首先下载到本地,在项目中导入使用: 下载的文件中包含:min.css的是压 ...

  2. 【html、CSS、javascript-13】前端框架Bootstrap

    1.Bootstrap前端框架:包含css样式.js插件.图标等 http://www.bootcss.com/ 2.Font Awesome:非常全的图标大全 https://fontawesome ...

  3. 前端框架 bootstrap 的使用

    内容概要 前端框架 bootstrap 简介 引入方式 布局容器 栅格系统 图标 内容详细 简介 网址:https://v3.bootcss.com/ 版本: 2.X 3.X 4.X 推荐使用3.X版 ...

  4. 前端框架Bootstrap

    前端框架Bootstrap http://www.bootcss.com/ Bootstrap 编码规范 http://codeguide.bootcss.com/

  5. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

  6. 简洁灵活的前端框架------BootStrap

      前  言 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.[1] ...

  7. 前端框架bootstrap(响应式布局)入门

    Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

  8. 最受欢迎的前端框架 —— Bootstrap学习

    Bootstrap是Twitter的Mark Otto和Jacob Thornton开发的,是目前最受欢迎的前端框架,它简单灵活,使得Web前端开发更加快捷方便. 首先,要基本掌握Bootstrap框 ...

  9. 前端框架——Bootstrap

    一.Bootstrap介绍 凡是使用过bootstrap的开发者,不外乎做这么两件事情:复制and粘贴. Bootstrap官方网址:http://www.bootcss.com Bootstrap, ...

随机推荐

  1. jquery用formada发送文件到服务器

    var formdata = new FormData(); formdata.append("file", $("#Input")[0].files[0]); ...

  2. LeetCode.1010-歌曲总长度可被60整除的对数

    这是小川的第377次更新,第405篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第239题(顺位题号是1010).在歌曲列表中,第i首歌曲的持续时间为[i]秒. 返回其总 ...

  3. 将dos窗口调白教程

    将dos弹出窗口调白教程 第1步:同时按住Win+R键,输入cmd 第2步:右键点击标题栏 第3步:点击默认值,然后再点击颜色 第四步:将窗口颜色设置为白色,字体颜色设置为黑色(效果测试)

  4. tomcat7远程代码执行 ImageMagick 命令执行漏洞

    tomcat7远程代码执行 windows     / linux   ::$DATA ImageMagick 命令执行漏洞(CVE-2016–3714) base64编码

  5. 【神经网络与深度学习】Caffe部署中的几个train-test-solver-prototxt-deploy等说明

    1:神经网络中,我们通过最小化神经网络来训练网络,所以在训练时最后一层是损失函数层(LOSS), 在测试时我们通过准确率来评价该网络的优劣,因此最后一层是准确率层(ACCURACY). 但是当我们真正 ...

  6. [JavaScript] console.log只在查看时才会读取这个打印的对象，并把此刻相关属性和值显示出来

      /** * 写个函数解决console.log只在查看时才会读取这个打印的对象,并把此刻相关属性和值显示出来 * @param arg */ const log = function (...ar ...

  7. 【五一qbxt】test2

    又犯了一些迷之错误??要不然yy鼠标就是我的了 1.Superman: 小姐姐的题解:直接用set模拟即可emmmm 里面有很多指针啊,乱七八糟的,不会qwq,先看看我的大模拟吧: #include& ...

  8. CF 1140B Good String

    Description You have a string ss of length nn consisting of only characters > and <. You may d ...

  9. python中几个常见的魔法方法

    首先,什么是魔法方法呢?在python中方法名如果是__xxxx__()的,那么就有特殊的功能,因此叫做"魔法"方法. __ init__()方法 当一个实例被创建的时候调用的初始 ...

  10. wyy Downloader（当前置顶项目）

    第一个大刀阔斧肝的 PY 项目,名称简称为 wyyDLer 公开 EXE 计划: 感觉程序应该是没什么可以完善的了,然后就顶雷([雾 ) 把 EXE 放上来好了 1.2版下载链接 应该不会出事把 Qv ...