day48 bootscript

动画效果

//基本
show()   //show   展示
hide()   //hide  隐藏  hide(500000)
toggle()
//滑动
slideDown()
slideUp()
slideToggle()
//淡入淡出
fadeIn()
fadeOut()	//fadeOut    $('div').fadeOut(5000)
fadeTo()	//fadeTo    $('div').fadeTo(5000,0.4)
fadeToggle()
//自定义
animate()

补充

each

jQuery.each(collection, callback(indexInArray, valueOfElement))：
//描述：一个通用的迭代函数，他可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length-1.其他对象通过其属性名进行迭代。

$.each($('p')function(index){
    console.log(index,value,this)
})

li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//index是索引，ele是每次循环的具体元素。
}) 
0,10
1,20
2,30
3,40

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

$('p').each(function(index,obj){
    console.log(index,obj)
})

// 为每一个li标签添加foo
$("li").each(function(){
  $(this).addClass("c1");
})
注意： jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：
$("li").addClass("c1");  // 对所有标签做统一操作

注意：在遍历过程中可以使用return false提前结束each循环

.data()

在匹配的元素集合中的所有元素上存储任意相关数据或匹配的元素集合中的第一个元素的给定数据存储的值。

.data(k,v):在匹配的元素上存储任意相关数据。

$('p').data('username','jason')临时存储

.data(k):返回匹配的元素集合中的第一个元素的给定名称的数据存储的值

$('p').first().data('username')

.removeDate(k):移除存放在元素上的数据，不加k参数表示移除 保存的数据

$('p').removeData('username')

Bootstrap

前端框架Bootstrap是基于jQuery的 所以用框架动态效果的时候，必须确保先导入jQuery。用Bootstrap之前先导入jQuery。导三个文件

 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-distcssootstrap.min.css">
    <script src="bootstrap-3.3.7-distjsootstrap.min.js"></script>

BootStrap官网

基础

BootStrap基础

布局

BootStrap布局

组件

BootStrap组件

插件

BootStrap