table of Contents
A, jQuery follow-up
1. animation
// 基本
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) Examples of custom animations thumbs
<!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's own method
- Note: jQuery method returns a jQuery object, through the elements of the set jQuery - referred implicit iterative process ( i.e., a method by jQuery object point, traversal automatically jQuery object in each of the array JS objects, these objects are JS execution method a point. ). When this happens, it usually does not need to explicitly circulation
.each()method:
(1) each(similarly for loop)
A grammar:
$.each(collection, callback(indexInArray, valueOfElement))： // 例子： li =[10,20,30,40] $.each(li,function(i, v){ console.log(i, v);//index是索引，ele是每次循环的具体元素。 }) // 输出： 010 120 230 340Grammar II:
.each(function(index, Element))： // 描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。 // 例子： // 为每一个li标签添加foo $("li").each(function(){ $(this).addClass("c1"); }); 等价于：$("li").addClass("c1"); // 对所有标签做统一操作Terminate traversal
//在遍历过程中可以使用 return false 提前结束each循环。类似python的for循环时的break
(2) data()(invisible data is stored)
- Originally we can add custom attributes to the label to make the label carry some data. However, these data can be viewed through a browser to view the source code, but by
data()the method of increasing the data directly stored in memory. Not only through thedata()viewing method.
Adding value method:
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
See the value added method of using data
$("div").data("k");//返回第一个div标签中保存的"k"的值
The method of removing data elements stored by the data
removeData(key): 描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。 // 例子： $("div").removeData("k"); //移除元素上存放k对应的数据
Two, Bootstrap front end of the frame
- Bootstrap specific usage, please click on the link: Bootstrap official website
1. CDN
CDN stands for Content Delivery Network, ie, content delivery network, faster access to data in other remote parts of the original by CDN.
- Bootstrap framework to find the source online through the website BOOTCDN, and then import the compressed version of a link by link css label local html documents, import compressed version of the link by js script tag.
They can also be downloaded to the next are stored in a file, and then import.
2. Bootstrap CSS style commonly used in the global
- The following are achieved by the class that these keywords are written directly in the class attribute tag
(1) lattice systems
Remember that the grid can not exceed 12
- Keywords:
containerMaximum widthcol-参数Raster classrow
(2) Form
- Keywords:
tableCreate a table styletable-参数Detailed reconciliation table style
(3) Form
Keywords:
form-controlSetting form style
(4) button
Keywords:
btnThe label becomes a buttonbtn-参数Adjustment button style
3. Bootstrap components commonly used in
(1) the Fonts icon (the icon is also available through other sites)
- These icons equivalent to the text of the label information. The method can be adjusted directly text changes its state.
- Here are a icon library
(2) a navigation bar
Keyword
navbarCreate a navigation bar:
<nav class="navbar navbar-default"> html代码 </nav>navbar-参数Regulate navigation bar style
(3) IMAX
- Keywords:
jumbotromCreate a giant screen
(4) panel
- Keywords:
panelCreate a panelpanel-参数Adjustment panel style