zoukankan      html  css  js  c++  java
  • jQuery结束、前端框架Bootstrap、手动搭建一个图书管理系统页面

    * jQuery结束
    * 前端框架Bootstrap
    * 手动搭建一个图书管理系统页面

    # 今日内容详细

    ### 阻止后续事件执行

    ```html
    <script>
    $('#d2').click(function (e) {
    $('#d1').text('宝贝 你能看到我吗?')
    // 阻止标签后续事件的执行 方式1
    // return false
    // 阻止标签后续事件的执行 方式2
    // e.preventDefault()
    })
    </script>
    ```

    ### 阻止事件冒泡

    ```html
    <script>
    $('#d1').click(function () {
    alert('div')
    })
    $('#d2').click(function () {
    alert('p')
    })
    $('#d3').click(function (e) {
    alert('span')
    // 阻止事件冒泡的方式1
    // return false
    // 阻止事件冒泡的方式2
    // e.stopPropagation()
    })
    </script>
    ```

    ### 事件委托

    ```html
    <button>是兄弟,就来砍我!!!</button>

    <script>
    // 给页面上所有的button标签绑定点击事件
    // $('button').click(function () { // 无法影响到动态创建的标签
    // alert(123)
    // })

    // 事件委托
    $('body').on('click','button',function () {
    alert(123) // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的
    })
    </script>
    ```

    ### 页面加载

    ```python
    # 等待页面加载完毕再执行代码
    window.onload = function(){
    // js代码
    }

    """jQuery中等待页面加载完毕"""
    # 第一种
    $(document).ready(function(){
    // js代码
    })
    # 第二种
    $(function(){
    // js代码
    })
    # 第三种
    """直接写在body内部最下方"""
    ```

    ### 动画效果

    ```python
    $('#d1').hide(5000)
    w.fn.init [div#d1]
    $('#d1').show(5000)
    w.fn.init [div#d1]
    $('#d1').slideUp(5000)
    w.fn.init [div#d1]
    $('#d1').slideDown(5000)
    w.fn.init [div#d1]
    $('#d1').fadeOut(5000)
    w.fn.init [div#d1]
    $('#d1').fadeIn(5000)
    w.fn.init [div#d1]
    $('#d1').fadeTo(5000,0.4)
    w.fn.init [div#d1]
    ```

    ### 补充

    ```python
    # each()
    # 第一种方式
    $('div')
    w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
    $('div').each(function(index){console.log(index)})
    VM181:1 0
    VM181:1 1
    VM181:1 2
    VM181:1 3
    VM181:1 4
    VM181:1 5
    VM181:1 6
    VM181:1 7
    VM181:1 8
    VM181:1 9

    $('div').each(function(index,obj){console.log(index,obj)})
    VM243:1 0 <div>​1​</div>​
    VM243:1 1 <div>​2​</div>​
    VM243:1 2 <div>​3​</div>​
    VM243:1 3 <div>​4​</div>​
    VM243:1 4 <div>​5​</div>​
    VM243:1 5 <div>​6​</div>​
    VM243:1 6 <div>​7​</div>​
    VM243:1 7 <div>​8​</div>​
    VM243:1 8 <div>​9​</div>​
    VM243:1 9 <div>​10​</div>​

    # 第二种方式
    $.each([111,222,333],function(index,obj){console.log(index,obj)})
    VM484:1 0 111
    VM484:1 1 222
    VM484:1 2 333
    (3) [111, 222, 333]
    """
    有了each之后 就无需自己写for循环了 用它更加的方便
    """
    # data()
    """
    能够让标签帮我们存储数据 并且用户肉眼看不见
    """
    $('div').data('info','回来吧,我原谅你了!')
    w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]

    $('div').first().data('info')
    "回来吧,我原谅你了!"
    $('div').last().data('info')
    "回来吧,我原谅你了!"

    $('div').first().data('xxx')
    undefined
    $('div').first().removeData('info')
    w.fn.init [div#d1, prevObject: w.fn.init(10)]

    $('div').first().data('info')
    undefined
    $('div').last().data('info')
    "回来吧,我原谅你了!"
    ```

    # 前端框架Bootstrap

    该框架已经帮你写好了很多页面样式,你如果需要使用,只需要下载它对应文件,之后直接cv拷贝即可

    在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可

    版本选择建议使用v3版本:<https://v3.bootcss.com/>

    ### 注意

    **bootstrap的js代码是依赖于jQuery的,也就意味着你在使用Bootstrap动态效果的时候,一定要导入jQuery**

    代码

    博客

    ### 布局容器

    ```python
    <div class="container">
    左右两侧有留白
    </div>

    <div class="container-fluid">
    左右两侧没有留白
    </div>
    # 后续在使用bootstrap做页面的时候 上来先写一个div class="container",之后在div内部书写页面
    ```

    ### 栅格系统

    ```python
    <div class="row"></div>
    写一个row就是将所在的区域划分成12份

    <div class="col-md-6 "> 获取你所要的份数
    # 在使用bootstrap的时候 脑子里面一定要做12的加减法
    ```

    ### 栅格参数 响应式布局

    ```python
    .col-xs- .col-sm- .col-md- .col-lg-
    # 针对不同的显示器 bootstrap会自动选择对应的参数
    # 如果你想要兼容所有的显示器 你就全部加上即可


    # 在一行如何移动位置
    <div class="col-md-8 c1 col-md-offset-2"></div>
    ```

    ### 排版

    bootstrap将所有原生的HTML标签的文本字体统一设置成了肉眼可以接受的样式

    效果一样,但是标签表达的意思不一样(语义)

    ### 表格

    ```python
    <table class="table table-hover table-striped table-bordered">

    <tr class="success">
    <td>1</td>
    <td>jason</td>
    <td>123</td>
    <td>study</td>
    </tr>

    <tr class="active">...</tr>
    <tr class="success">...</tr>
    <tr class="warning">...</tr>
    <tr class="danger">...</tr>
    <tr class="info">...</tr>
    ```
    颜色变化

    ### 表单

    ```python
    <div class="container">
    <div class="col-md-8 col-md-offset-2">
    <h2 class="text-center">登陆页面</h2>
    <form action="">
    <p>username:<input type="text" class="form-control"></p>
    <p>password:<input type="text" class="form-control"></p>
    <p>
    <select name="" id="" class="form-control">
    <option value="">111</option>
    <option value="">222</option>
    <option value="">333</option>
    </select>
    </p>
    <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
    <input type="submit">
    </form>
    </div>
    </div>

    # 针对表单标签 加样式就用form-control
    class="form-control"
    """
    <input type="checkbox">222
    <input type="radio">333
    checkbox和radio我们一般不会给它加form-control,直接使用原生的即可
    """

    # 针对报错信息 可以加has-error(input的父标签加)
    <p class="has-error">
    username:
    <input type="text" class="form-control">
    </p>
    ```

    ### 按钮

    ```python
    <a href="https://www.mzitu.com/" class="btn btn-primary">点我</a>
    <button class="btn btn-danger">按我</button>
    <button class="btn btn-default">按我</button>
    <button class="btn btn-success">按我</button>
    <button class="btn btn-info">按我</button>
    <button class="btn btn-warning">按我</button>

    颜色 大小

    <button class="btn btn-warning btn-lg">按我</button>
    <button class="btn btn-warning btn-sm">按我</button>
    <button class="btn btn-warning btn-xs">按我</button>
    <input type="submit" class="btn btn-primary btn-block">
    通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。
    ```

    ### 图标

    ```python
    <h2 class="text-center">登陆页面 <span class="glyphicon glyphicon-user"></span></h2>


    <style>
    span {
    color: greenyellow;
    }
    </style>

    # 扩展
    ```

    ### 导航条

    ```python
    <nav class="navbar navbar-inverse">
    <nav class="navbar navbar-default">
    ```
    颜色不同

    也可以放在底部

    <nav class="navbar navbar-default navbar-fixed-bottom">
      <div class="container">
        ...
      </div>
    </nav>


    ### 分页器

    ```python
    <nav aria-label="Page navigation">
    <ul class="pagination">
    <li>
    <a href="#" aria-label="Previous">
    <span aria-hidden="true">&laquo;</span>
    </a>
    </li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
    <a href="#" aria-label="Next">
    <span aria-hidden="true">&raquo;</span>
    </a>
    </li>
    </ul>
    </nav>
    ```

    ### 弹框

    ```python
    https://lipis.github.io/bootstrap-sweetalert/


    swal('你还好吗?')
    undefined
    swal('你还好吗?')
    undefined
    swal('你还好吗?','我不好,想你了!')
    undefined
    swal('你还好吗?','我不好,想你了!','success')
    undefined
    swal('你还好吗?','我不好,想你了!','warning')
    undefined
    swal('你还好吗?','我不好,想你了!','error')
    undefined
    swal('你还好吗?','我不好,想你了!','info')
    undefined
    ```
  • 相关阅读:
    Hdu 1257 最少拦截系统
    Hdu 1404 Digital Deletions
    Hdu 1079 Calendar Game
    Hdu 1158 Employment Planning(DP)
    Hdu 1116 Play on Words
    Hdu 1258 Sum It Up
    Hdu 1175 连连看(DFS)
    Hdu 3635 Dragon Balls (并查集)
    Hdu 1829 A Bug's Life
    Hdu 1181 变形课
  • 原文地址:https://www.cnblogs.com/0B0S/p/12932721.html
Copyright © 2011-2022 走看看