Day58--前端--JQuery--03与 Bootstrap

2021/9/10 6:05:30

本文主要是介绍Day58--前端--JQuery--03与 Bootstrap,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

每日测验

"""
1.下面这段代码的输出结果是什么,并给出你的解释
def index():
    return [lambda x : i * x for i in range(4)]
print([m(2) for m in index()]) 
2.什么是函数的递归调用?书写递归函数需要注意什么?你能否利用递归函数打印出下面列表中每一个元素(只能打印数字),l = [1,[2,[3,[4,[5,[6,[7,[8,[9]]]]]]]]]
3.jQuery的链式操作有什么特点,如何做到?
4.jQuery绑定事件的方式有哪些,列举出你所知道的事件
"""

昨日内容回顾

  • 样式类操作

    """
    addClass()										classList.add()					
    removeClass()				
    hasClass()
    toggleClass()
    """
    
  • css操作

    .css(属性名,属性值)
    """
    jQuery链式操作
    	一行代码可以搞定很多事情
    	jQuery对象在调用jQuery方法之后返回的还是当前对象本身
    	(本质:return self)
    """
    
  • 位置操作

    scrollTop
    scrollLeft
    # 回到顶部
    $(window).scrollTop()  # 获取
    $(window).scrollTop(300)  # 设置
    
  • 尺寸操作

    # 文本的高和宽	
    		height()
    # 文本+padding
    		innerHeight()
    # 文本+padding+border
    		outterHeight()
    
  • 文本操作

    """
    .text()  文本						innerText()
    .html()	 文本+标签			 innerHTML()
    	括号内不加参数就是获取 加了就是设置
    """
    """
    获取值
    .val()									value
    获取文件数据
    	转成标签对象.files
    """
    
  • 属性操作

    """
    .attr()						
    	.attr('class')									getAttribute
    	.attr('class','c1')							setAttribute
    .removeAttr()											removeAttribute
    
    
    # 针对checkbox、radio、option选中的checked、selected属性不要用attr
    建议你使用prop()
    	prop('checked')
    	prop('checked',true/false)
    """
    
  • 文档处理

    # jQuery如何创建标签
    document.createElement('p')			===							$('<p>')
    
    A.append(B)
    B.appendTo(A)
    
    prepend()
    prependTo()
    
    ...
    
    
    remove()		移除标签
    empty()			清空标签内部所有的内容
    
  • 事件处理

    # jQuery两种绑定事件的方式# 第一种	$('#d1').click(function(){})# 第二种	$('#d1').on('click',function(){})  """this	指代的就是当前被操作对象本身(有点像面向对象的self)"""# 克隆事件	clone()		默认情况下只克隆标签和文本不克隆事件  	clone(true)# 自定义模态框	绑定事件控制标签类属性的添加和删除# 左侧菜单	一行代码搞定# 返回顶部	$(window).scroll(function(){		})# 自定义登陆校验功能	.val()# hover事件	$('#d1').hover(function(){})  # 进出都会触发    $('#d1').hover(    function(){},    function(){}  ) # input框实时监控输入内容事件	$('#d1').on('input',function(){})# 键盘按键事件	$(window).keydown(function(event){  	event.keyCode})  $(window).keyup(function(){})"""web领域永远没有绝对的安全!!!"""
    

今日内容概要

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

今日内容详细

阻止后续事件执行

<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 0VM181:1 1VM181:1 2VM181:1 3VM181:1 4VM181:1 5VM181:1 6VM181:1 7VM181:1 8VM181: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 111VM484:1 1 222VM484: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">333checkbox和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('你还好吗?')undefinedswal('你还好吗?')undefinedswal('你还好吗?','我不好,想你了!')undefinedswal('你还好吗?','我不好,想你了!','success')undefinedswal('你还好吗?','我不好,想你了!','warning')undefinedswal('你还好吗?','我不好,想你了!','error')undefinedswal('你还好吗?','我不好,想你了!','info')undefined# 我们在后面的课程中 还会涉及到该部分内容

作业

"""今日作业必做题1.前端框架Bootstrap整体文档看一遍2.自定义点赞功能,点击按钮旁边的数字动态加一3.自己尝试着搭建图书管理系统页面4.自己尝试着搭建jQuery练习题页面"""


这篇关于Day58--前端--JQuery--03与 Bootstrap的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程