前端 day 08 5.21 bootstrap入门

5.21

昨日回顾

样式类操作

addClass()
removeClass()
hasClass()
toggleClass()

CSS操作

$('div').css(属性名,属性值)
//链式操作:jQuery对象调用jQuery方法后还是jQuery对象
//类似于return self

位置操作

scrollTop()
scrollLeft()
//没有参数就是获取,有参数就是设置
$(window).scrollTop(0)

尺寸操作

//文本的高宽
$.height()
//文本+padding
innerHeight()
//content+padding+border
outterHeight()

文本操作

.text() //获取文字,不识别标签
.html() //获取内容,识别标签
//括号内不加参数就是获取,加参数就是设置

//获取值
.val() //对应js原生的.value()

属性操作

.attr() //一个参数就是获取,两个参数就是修改
//修改class
.attr('class','hide')
//removeAttr()

//针对checkbox,radio,option选中的selected属性不要用attr,用prop
prop('checked')
prop('checked',true) //加上true/false可以修改

文档处理

//创建标签的两种方式
$('<p>') //创建了一个p标签

//插入标签
A.append(B)
B.appendTo(A)

prepend()
prependTo()

remove() //移除标签
empty() //清空标签内的内容,标签还在

事件处理

//第一种方式
$('#d1').click(function(){...})

//第二种方式
$('#d1').on('click'.function(){...})

this:指向当前操作对象本身,有点像面向对象的self

  • 克隆事件

    clone() //默认情况下只克隆标签和文本,不克隆事件
    clone(true) //也克隆事件
    
  • 自定义模态框

  • 左侧菜单,点击一个,其他的隐藏

  • 返回顶部

    $(window).scroll(function(){
    })
    
  • 自定义登陆校验功能

    .val //获取当前input的值
    focus,blur事件
    
  • hover事件

    //进入,滑出都会触发
    $('#d1').hover(function(){},function(){})
    //可以写两个函数,滑入触发第一个,滑出触发第二个
    
  • input框监听

    $('#d1').on('input',function(){}) //只要input有输入,就会触发
    
  • 按键

    $(window).keydown(function(event){}) //按下按键
    $(window).keyup(function(event){}) //松开按键
    

今日内容

  • jQuery结束
  • bootstrap
  • 手动搭建一个图书管理系统页面

阻止后续事件执行

方式1,在事件的最后,加一句return false

$('#d1').click(function(){
	$('#d1').text('111');
	return false
})

方式2,在触发函数的内部,加上阻止默认方法

$('#d1').click(function(){
	$('#d1').text('111');
	e.preventDefault() //阻止默认
})

阻止事件冒泡

标签嵌套,在同一个位置,子标签触发了点击事件,会往上报,父标签也会触发点击事件

  • 阻止方式1:在子标签里面加return false
  • 阻止方式2:e.stopPropagation()

事件委托

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

页面加载

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

//jQuery中等待页面加载
//第一种
$(document).ready(function(){
	//代码
})

//第二种
$(function(){
	//代码
})

//第三种,直接写在body的最下方

jQuery动画效果

<style>
#d1{
	height: 100px;
	width: 200px;
	background-color: red;
}
</style>
<body>
	<div id="d1"></div>
</body>
<script>
	$('#d1').hide(500) //0.5秒,隐藏
	$('#d1').show(500) //0.5秒显示
	$('#d1').slideUp(500) //0.5秒往上滑
	$('#d1').slideDown(500)
	$('#d1').fadeIn(500)
	$('#d1').fadeOut(500)
	//div不会消失,只是隐藏了
</script>

补充

each

each() //简易版本的for循环,只能放两个参数
$('div').each(function(index,obj){console.log(index,obj)})

$.each([11,22,33],function(index,obj){
	console.log(index,obj)
})

data

让标签帮我们存储数据,用户肉眼看不见

$('div').data('info','123') //给标签临时存一个值
$('div').first().removeData('info') //移除info

前端框架bootstap

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

使用的时候,所有的页面样式只需通过class调节即可

推荐使用bootstrap3

  • bootstrap中文网
  • 引入 / 下载
  • 下载的CSS文件里面只留一个min.css

注意:bootstrap的js代码依赖于jQuery,在使用bootstrap的时候一定要导入jQuery

使用

先引入

前端 day 08 5.21 bootstrap入门

放在html,就能自动产生效果了

布局容器

两边留白

<div class="container"></div>
<!--自动留白居中-->
<div class="container-fluid"></div>
<!--不留白-->

后续使用bootstrap做页面的时候,先写一个container,再在里面写页面

栅格系统

<div class="row">
	<!--一行分成12份,每个div占4份-->
	<div class="col-md-4"></div>
	<div class="col-md-4"></div>
	<div class="col-md-4"></div>
</div>

row可以在任何地方用,把当前分成12份

栅格参数

监测浏览器屏幕大小

@media screen and(max-width: 600px) {
	.c1 {
		...
	}
}
/*监测屏幕大小,当宽度小于600,自动使用内部的样式*/

针对不同的显示器,bootstrap会自动选择对应的参数,如果想要兼容所有的显示器,就全部加上即可

在一行内移动:col-md-offset-2:当页面只有8份,往右移2份,让他居中

排版

bootstrap将html的样式统一设置成了人能接受的样式

很多样式,直接使用bootstrap的class就可以

表单

对表单标签,可以加 class=“from-control”

checkbox和radio不要使用

按钮

class="btn btn-primary"
//不同样式的按钮
btn-block //占整一行
//禁用
disable
//大小
btn-lg,btn-sm,btn-xs

清除浮动

class=“clearfix”

插件

图标

<span class=""><span>
图标放在span标签的class内,可以改颜色,大小

更多图标,可以去FONTAwesome

动态图标

导航条

分页器

徽章

弹出警告框:sweetalert

JavaScript插件

模态框

面包屑

图书管理系统

  1. 引入jQuery,bootstrap

  2. 组件:顶端导航条

  3. 左右布局

    container-fliud
    	row
    		col-md-3 //左侧
    			list-group //a标签联表
    				list-group-item
    				
    		col-md-9 //右侧
    			panel //面板
    				span//图标 pull-right
    				row
    					input //搜索框
    				div
    					table table-striped hover
    						thead
    							id
    							username
    							...
    							action
    						tbody
    							data
    							data
    							button
    							button
    							
    				nav Page
    
上一篇:HTML DOM 06 节点关系


下一篇:C#开发BIMFACE系列44 服务端API之计算图纸对比差异项来源自哪个图框