day54——jquery补充、bootstrap

day54

jquery

页面载入

window.onload:
	原生js的window.onload事件:// onload 等待页面所有内容加载完成之后自动触发的事件
	window.onload = function(){
            $('.c1').click(function () {
                $(this).addClass('c2');
            });
        };

jquery页面载入:
	$(function () {
            $('.c1').click(function () {
                $(this).addClass('c2');
            });
        })

非简写方式
	$(document).ready(function(){
        // 在这里写你的JS代码...
     })

与window.onload的区别
	1.window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
	2.jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）

jquery的each

循环数组:
	var a = [11,22,33];
    $.each(a,function(k,v){
       console.log(k,v);
    })

循环标签对象:
	$('li').each(function(k,v){
        console.log(k,$(v).text());
    })

return false；终止循环

在遍历过程中可以使用 return false提前结束each循环。 类似于break
而直接使用return;后面什么都不加，不写false，就是跳过本次循环的意思 类似与continue

动画效果

// 基本
show([s,[e],[fn]])  $('.c1').show()  //show(5000),就是5秒之后显示出来这个标签，并且有一个动画效果，（搞个img图片看看效果），后面两个参数先不用管
hide([s,[e],[fn]])  $('.c1').hide()
toggle([s],[e],[fn])//这几个toggle的意思就是你原来是什么效果，我就反着来
// 滑动（拉窗帘一样）
slideDown([s],[e],[fn])
//使用的时候别忘了给标签设置一个高度和宽度，其实就是控制你的标签高度，如果你写$('#di').slideUp(5000)；意思就是5秒内把你的高度变为0
//还有如果你直接操作的是img标签和操作img标签的父级标签，两个的效果是不同的
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出（控制透明度）
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])  o参数是透明度，0-1的区间，意思是淡入或者淡出到一个多大的透明读
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])

data方法

bootstrap

栅格系统

列偏移col-md-offset-x

col-md-offset-x
    <div class="container-fluid">
<!--            <h1>xxxx</h1>-->
        <div class="row">
            <div class="col-md-6 col-md-offset-3 c1">
        </div>
    </div>

列嵌套

    <div class="container-fluid">
<!--            <h1>xxxx</h1>-->
        <div class="row">
            <div class="col-md-6 col-md-offset-3 c1">
            // 列中又分栅格
                <div class="row">
                    <div class="col-sm-6 c1"></div>
                    <div class="col-sm-6 c2"></div>
                </div>
            </div>
        </div>
    </div>

前端其他制作网页工具

bootstrap——https://v3.bootcss.com/

iconfont——https://www.iconfont.cn/

font awesome——http://www.fontawesome.com.cn/

element——https://element.eleme.cn/#/zh-CN

掘金——https://juejin.im/