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') === $('') 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
- 手动搭建一个图书管理系统页面
今日内容详细
阻止后续事件执行
阻止事件冒泡
事件委托
页面加载
# 等待页面加载完毕再执行代码
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 ?1??VM243:1 1 ?2??VM243:1 2 ?3??VM243:1 3 ?4??VM243:1 4 ?5??VM243:1 5 ?6??VM243:1 6 ?7??VM243:1 7 ?8??VM243:1 8 ?9??VM243:1 9 ?10??# 第二种方式$.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
布局容器
左右两侧有留白 左右两侧没有留白# 后续在使用bootstrap做页面的时候 上来先写一个div class=container,之后在div内部书写页面
栅格系统
写一个row就是将所在的区域划分成12份 获取你所要的份数# 在使用bootstrap的时候 脑子里面一定要做12的加减法
栅格参数
.col-xs- .col-sm- .col-md- .col-lg-# 针对不同的显示器 bootstrap会自动选择对应的参数# 如果你想要兼容所有的显示器 你就全部加上即可# 在一行如何移动位置
排版
bootstrap将所有原生的HTML标签的文本字体统一设置成了肉眼可以接受的样式
效果一样，但是标签表达的意思不一样（语义）
表格
1 jason 123 study ... ... ... ... ...
表单
登陆页面
# 针对表单标签 加样式就用form-control class="form-control""""222333checkbox和radio我们一般不会给它加form-control，直接使用原生的即可"""# 针对报错信息 可以加has-error（input的父标签加） username:
按钮
点我 通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
图表
登陆页面
# 扩展
导航条
分页器
弹框
https://lipis.github.io/bootstrap-sweetalert/ swal('你还好吗?')undefinedswal('你还好吗?')undefinedswal('你还好吗?','我不好，想你了!')undefinedswal('你还好吗?','我不好，想你了!','success')undefinedswal('你还好吗?','我不好，想你了!','warning')undefinedswal('你还好吗?','我不好，想你了!','error')undefinedswal('你还好吗?','我不好，想你了!','info')undefined# 我们在后面的课程中 还会涉及到该部分内容
作业
"""今日作业必做题1.前端框架Bootstrap整体文档看一遍2.自定义点赞功能，点击按钮旁边的数字动态加一3.自己尝试着搭建图书管理系统页面4.自己尝试着搭建jQuery练习题页面"""
相关