jQuery后续和 前端框架Bootstrap

目录

1|0一、jQuery后续

1|11. 动画效果

 
// 基本
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|0（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>

点赞特效简单示例

1|22. jQuery的自带方法
  • 注意： jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程（即一个jQuery对象通过点的方法，会自动的遍历jQuery对象这个数组中的每一个JS对象，将这些JS对象都执行一次点的方法。）。当这种情况发生时，它通常不需要显式地循环的 .each()方法：

1|0（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

1|0（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对应的数据

2|0二、前端框架之Bootstrap

2|11. CDN

  • CDN的全称是Content Delivery Network，即内容分发网络 ，通过CDN可以更快的访问到原本在其他远距离地方的数据。

  • 通过网站BOOTCDN找到在线的Bootstrap框架的源码，再通过本地的html文档的link标签导入其中的压缩版css链接，通过script标签导入压缩版的js链接即可。

  • 也可将他们下载来下分别保存在文件中，再进行导入。

2|22. Bootstrap中常用的全局CSS样式
  • 以下都是通过类来实现的，即这些关键字都是直接写在标签的class属性中

1|0（1）栅格系统

  • 切记栅格不能超过12

  • 关键字：

    • container最大宽度
    • col-参数 栅格类
    • row

1|0（2）表格
  • 关键字：
    • table 创建表格样式
    • table-参数 调节表格详细样式

1|0（3）表单

关键字：

  • form-control 设置表单样式

1|0（4）按钮

关键字：

  • btn 将标签变成按钮

  • btn-参数 调节按钮样式

2|33. Bootstrap中常用的组件

1|0（1）字体图标（也可通过其他网站获取图标）
  • 这些图标相当于标签的文本信息。可直接调节文本的方法改变其状态。
  • 这里提供一个 图标库

1|0（2）导航条

  • 关键字

    • navbar 创建导航条：
    <nav class="navbar navbar-default">
    html代码
</nav>
    • navbar-参数 调节导航条样式

1|0（3）巨幕
  • 关键字：
    • jumbotrom 创建巨幕

1|0（4）面板
  • 关键字：
    • panel 创建面板
    • panel-参数 调节面板样式

__EOF__

本文作者：BigSun丶
本文链接：https://www.cnblogs.com/Mcoming/p/11899902.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   BigSun丶  阅读(171)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示