• bootstarp


    阻止后续事件执行

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

    阻止事件冒泡

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

    事件委托

    <button>是兄弟,就来砍我!!!</button>
    
    <script>
        // 给页面上所有的button标签绑定点击事件
        // $('button').click(function () {  // 无法影响到动态创建的标签
        //     alert(123)
        // })
    
        // 事件委托     
        $('body').on('click','button',function () {
            alert(123)  // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的
        })
    </script>
    

    页面加载

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

    动画效果

    $('#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]      
    

    补充

    # 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

    布局容器

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

    栅格系统

    <div class="row"></div>
    写一个row就是将所在的区域划分成12份
    
    <div class="col-md-6 ">  获取你所要的份数
    # 在使用bootstrap的时候 脑子里面一定要做12的加减法
    

    栅格参数

    .col-xs-	.col-sm-	.col-md-	.col-lg-
    # 针对不同的显示器 bootstrap会自动选择对应的参数
    # 如果你想要兼容所有的显示器 你就全部加上即可
    
    
    # 在一行如何移动位置
    <div class="col-md-8 c1 col-md-offset-2"></div>
    

    排版

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

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

    表格

    <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>
    

    表单

    <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>
    

    按钮

    <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)元素。
    

    图表

    <h2 class="text-center">登陆页面 <span class="glyphicon glyphicon-user"></span></h2>
    
    
        <style>
            span {
                color: greenyellow;
            }
        </style>
    
    # 扩展
    

    导航条

    <nav class="navbar navbar-inverse">
    <nav class="navbar navbar-default">
    

    分页器

    <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>
    

    弹框

    https://lipis.github.io/bootstrap-sweetalert/
      
      
    swal('你还好吗?')
    undefined
    swal('你还好吗?')
    undefined
    swal('你还好吗?','我不好,想你了!')
    undefined
    swal('你还好吗?','我不好,想你了!','success')
    undefined
    swal('你还好吗?','我不好,想你了!','warning')
    undefined
    swal('你还好吗?','我不好,想你了!','error')
    undefined
    swal('你还好吗?','我不好,想你了!','info')
    undefined
    # 我们在后面的课程中 还会涉及到该部分内容
    
  • 相关阅读:
    LeetCode 1275. 找出井字棋的获胜者 Find Winner on a Tic Tac Toe Game
    LeetCode 307. 区域和检索
    LeetCode 1271 十六进制魔术数字 Hexspeak
    秋实大哥与花 线段树模板
    AcWing 835. Trie字符串统计
    Leetcode 216. 组合总和 III
    Mybatis 示例之 复杂(complex)属性(property)
    Mybatis 示例之 复杂(complex)属性(property)
    Mybatis 高级结果映射 ResultMap Association Collection
    Mybatis 高级结果映射 ResultMap Association Collection
  • 原文地址:https://www.cnblogs.com/lgh8023/p/13741848.html
走看看 - 开发者的网上家园