目录
// 基本
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])
<!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>
点赞特效简单示例
.each()
方法: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
data()
(存放隐形的数据)data()
方法增加的数据直接保存在内存中。无法只能通过data()
方法查看。添加值的方法:
$("div").data("k",100);//给所有div标签都保存一个名为k,值为100
查看使用data方法添加的值
$("div").data("k");//返回第一个div标签中保存的"k"的值
移除元素通过data方法上存放的数据
removeData(key):
描述:移除存放在元素上的数据,不加key参数表示移除所有保存的数据。
// 例子:
$("div").removeData("k"); //移除元素上存放k对应的数据
CDN的全称是Content Delivery Network,即内容分发网络 ,通过CDN可以更快的访问到原本在其他远距离地方的数据。
也可将他们下载来下分别保存在文件中,再进行导入。
切记栅格不能超过12
container
最大宽度col-参数
栅格类row
table
创建表格样式table-参数
调节表格详细样式关键字:
form-control
设置表单样式关键字:
btn
将标签变成按钮
btn-参数
调节按钮样式
关键字
navbar
创建导航条:<nav class="navbar navbar-default">
html代码
</nav>
navbar-参数
调节导航条样式jumbotrom
创建巨幕panel
创建面板panel-参数
调节面板样式原文:https://www.cnblogs.com/Mcoming/p/11899902.html