介绍几个jquery常用库

绝地灬酷狼 2022-05-09 14:36 535阅读 0赞

## zeptojs ##

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。Zepto的一些可选功能是专门针对移动端浏览器的；它的最初目标是在移动端提供一个精简的类似jquery的js库。

zepto官网：[http://zeptojs.com/][http_zeptojs.com]  
zepto中文api：[http://www.css88.com/doc/zeptojs\_api/][http_www.css88.com_doc_zeptojs_api]  
zepto包含很多模块，默认下载版本包含的模块有Core, Ajax, Event, Form, IE模块，如果还需要其他的模块，可以自定义构建。  
zepto自定义构建地址：[http://github.e-sites.nl/zeptobuilder/][http_github.e-sites.nl_zeptobuilder]

## swiper ##

swiper.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件，一般用来触屏焦点图、触屏整屏滚动等效果。 swiper分为2.x版本和3.x版本，2.x版本支持低版本浏览器(IE7)，3.x放弃支持低版本浏览器，适合应用在移动端。

2.x版本中文网址：[http://2.swiper.com.cn/][http_2.swiper.com.cn]  
3.x版本中文网地址：[http://www.swiper.com.cn/][http_www.swiper.com.cn]

### swiper使用方法： ###

### swiper使用参数： ###

1、initialSlide：初始索引值，从0开始  
2、direction：滑动方向 horizontal | vertical  
3、speed：滑动速度，单位ms  
4、autoplay：设置自动播放及播放时间  
5、autoplayDisableOnInteraction：用户操作swipe后是否还自动播放，默认是true，不再自动播放  
6、pagination：分页圆点  
7、paginationClickable：分页圆点是否点击  
8、prevButton：上一页箭头  
9、nextButton：下一页箭头  
10、loop：是否首尾衔接

## ##

## bootstrap ##

简单、直观、强悍的前端开发框架，让web开发更迅速、简单。 来自Twitter，是目前很受欢迎的前端框架之一。 Bootrstrap是基于HTML、CSS、JavaScript的，让书写代码更容易。 移动优先，响应式布局开发。

bootstrap中文网址：[http://www.bootcss.com/][http_www.bootcss.com]

bootstrap 容器

*  container-fluid 流体
 *  container
    
     *  1170
     *  970
     *  750
     *  100%

<div class="container-fluid">流体容器</div>
    <div class="container">响应式固定容器</div>

bootstrap响应式查询区间：

1、大于等于768  
2、大于等于992  
3、大于等于1200

bootstrap 栅格系统

bootstrap将页面横向分为12等分，按照12等分定义了适应不同宽度等分的样式类，这些样式类组成了一套响应式、移动设备优先的流式栅格系统：

1、col-lg- *大于1200排成一行，小于1200分别占一行  
2、col-md-* 大于992排成一行，小于992分别占一行  
3、col-sm- *大于768排成一行，小于768分别占一行  
4、col-xs-* 始终排列成一行

列偏移

1、col-lg-offset-  
*2、col-md-offset-*  
3、col-sm-offset-  
*4、col-xs-offset-*

bootstrap 按钮

1、btn 声明按钮  
2、btn-default 默认按钮样式  
3、btn-primay  
4、btn-success  
5、btn-info  
6、btn-warning  
7、btn-danger  
8、btn-link  
9、btn-lg  
10、btn-md  
11、btn-xs  
12、btn-block 宽度是父级宽100%的按钮  
13、active  
14、disabled  
15、btn-group 定义按钮组

<div class="btn-group">
        <input type="button" name="" value="按钮一" class="btn btn-primary">
        <input type="button" name="" value="按钮二" class="btn btn-warning">
        <input type="button" name="" value="按钮三" class="btn btn-danger">
    </div>
    
    
    <div class="btn-group btn-group-justified">
        <div class="btn-group">
            <input type="button" name="" value="按钮一" class="btn btn-primary">
        </div>
        <div class="btn-group">
            <input type="button" name="" value="按钮二" class="btn btn-warning">
        </div>
        <div class="btn-group">
            <input type="button" name="" value="按钮三" class="btn btn-danger">
        </div>
    </div>
    
    
    <div class="btn-group btn-group-justified">
        <a href="#" class="btn btn-primary">按钮一</a>
        <a href="#" class="btn btn-default">按钮二</a>
        <a href="#" class="btn btn-default">按钮三</a>
    </div>

bootstrap 表单

1、form 声明一个表单域  
2、form-inline 内联表单域  
3、form-horizontal 水平排列表单域  
4、form-group 表单组、包括表单文字和表单控件  
5、form-control 文本输入框、下拉列表控件样式  
6、checkbox checkbox-inline 多选框样式  
7、radio radio-inline 单选框样式  
8、input-group 表单控件组  
9、input-group-addon 表单控件组物件样式  
10、input-group-btn 表单控件组物件为按钮的样式  
11、form-group-lg 大尺寸表单  
12、form-group-sm 小尺寸表单

<form role="form">
      <div class="form-group form-group-lg">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
      <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Check me out
        </label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    
    
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-addon">@</span>
    </div>
    
    
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div>

bootstrap 图片

img-responsive 声明响应式图片

bootstrap 字体图标

通过字体代替图标，font文件夹需要和css文件夹在同一目录

bootstrap 导航条

1、navbar 声明导航条  
2、navbar-default 声明默认的导航条样式  
3、navbar-inverse 声明反白的导航条样式  
4、navbar-static-top 去掉导航条的圆角  
5、navbar-fixed-top 固定到顶部的导航条  
6、navbar-fixed-bottom 固定到底部的导航条  
7、navbar-header 申明logo的容器  
8、navbar-brand 针对logo等固定内容的样式  
11、nav navbar-nav 定义导航条中的菜单  
12、navbar-form 定义导航条中的表单  
13、navbar-btn 定义导航条中的按钮  
14、navbar-text 定义导航条中的文本  
15、navbar-left 菜单靠左  
16、navbar-right 菜单靠右

<div class="navbar navbar-inverse navbar-static-top ">
        <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
             </button>
             <a href="#" class="navbar-brand">LOGO</a>
        </div>
        <div class="collapse navbar-collapse" id="mymenu">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">公司新闻</a></li>
                <li><a href="#">行业动态</a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <div class="input-group">
                      <input type="text" class="form-control">
                      <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                      </span>
                    </div>    
                </div>
            </form>
        </div>
        </div>
    </div>

路径导航

<ol class="breadcrumb">
      <li><a href="#">Home</a></li>
      <li><a href="#">Library</a></li>
      <li class="active">Data</li>
    </ol>

巨幕

bootstrap 模态框

1、modal 声明一个模态框  
2、modal-dialog 定义模态框尺寸  
3、modal-lg 定义大尺寸模态框  
4、modal-sm 定义小尺寸模态框  
5、modal-header  
6、modal-body  
7、modal-footer

<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">大弹出框按钮</button>
    
    <div class="modal fade" id="mymodal">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        大尺寸弹出框
                    </div>
                    <div class="modal-body">
                        模态框主体
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default"  data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                      </div>
                </div>
            </div>
    </div>

bootstrap 下拉菜单

1、dropdown-toggle  
2、dropdown-menu

bootstrap 隐藏类

1、hidden-xs  
2、hidden-sm  
3、hidden-md  
4、hidden-lg

[http_zeptojs.com]: http://zeptojs.com/
[http_www.css88.com_doc_zeptojs_api]: http://www.css88.com/doc/zeptojs_api/
[http_github.e-sites.nl_zeptobuilder]: http://github.e-sites.nl/zeptobuilder/
[http_2.swiper.com.cn]: http://2.swiper.com.cn/
[http_www.swiper.com.cn]: http://www.swiper.com.cn/
[http_www.bootcss.com]: http://www.bootcss.com/