• 11.20


    JQuery

    动画效果

    // 基本
    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])
    

    each

    jQuery.each(collection, callback(indexInArray, valueOfElement)):

    描述:一个通用的迭代函数,它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。

    .each(function(index, Element)):

    描述:遍历一个jQuery对象,为每个匹配元素执行一个函数。

    .each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的,所以关键字 this 总是指向这个元素。

    注意

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

    .data()

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

    .data(key, value):

    描述:在匹配的元素上存储任意相关数据。

    $("div").data("k",100);//给所有div标签都保存一个名为k,值为100
    

    .data(key):

    描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)HTML5 data-*属性设置。

    $("div").data("k");//返回第一个div标签中保存的"k"的值
    

    .removeData(key):

    描述:移除存放在元素上的数据,不加key参数表示移除所有保存的数据。

    $("div").removeData("k");  //移除元素上存放k对应的数据
    

    Bootstrap

    基于jQuery的,使用框架动态效果的时候必须先导入jQuery

    需要导的三个文件:jQuery,css,js

    布局容器

    使用前端框架之后 所有标签样式的调整 全部是通过class属性值来的
    <div class="container"></div> 左右两边留白
    <div class="container-fluid"></div>全屏显示

    栅格系统

    默认情况下:

    ​ 一个row就是一行
    ​ 每个row默认会均分成12份
    ​ 可以通过col-md-Num 来选择想要占几份

    栅格参数:

    .col-xs-:超小屏幕(手机)

    .col-sm-:小屏幕(屏幕)

    .col-md-:中等屏幕(桌面显示器)

    .col-lg-:大屏幕(大桌面显示器)

    写在开头的两句代码:

    <div class="container-fluid">
    		  <div class="row">
    			...
    		  </div>
    		</div>
    

    列偏移

    col-md-offset-3

    表格

    为任意<table>标签添加.table类可以为其赋予基本的样式

    表单

    单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input><textarea><select> 元素都将被默认设置宽度属性为 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

    浮动

    通过添加一个类,可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。

    <div class="pull-left">...</div>   //向左浮动
    <div class="pull-right">...</div>  //向右浮动
    

    按钮

    <a><button><input> 元素添加按钮类(button class)即可使用 Bootstrap 提供的样式。

    如:<button class="btn btn-default" type="submit">Button</button>

    通过改变btn-default可以改变按钮的颜色

    btn-default  默认样式-白色
    btn-primary  首选项-深蓝色
    btn-success  成功-绿色
    btn-info 	 一般信息-淡蓝色
    btn-warning  警告-黄色
    btn-danger   危险-红色
    
  • 相关阅读:
    前端路由hash、history原理及简单的实践下
    nginx缓存配置及开启gzip压缩
    koa2基于stream(流)进行文件上传和下载
    理解nodejs中的stream(流)
    理解http浏览器的协商缓存和强制缓存
    Nginx中的Rewrite的重定向配置与实践
    Redis入门---字符串类型
    Redis报错 Server started, Redis version 3.2.13 Can't handle RDB format version 9 Fatal error loading the DB: Invalid argument. Exiting.
    redis 基本原理及安装
    Go语言之高级篇beego框架之Controller
  • 原文地址:https://www.cnblogs.com/maqiaobin/p/11899892.html
Copyright © 2020-2023  润新知