首页 > 其他分享> > 前端 day 08 5.21 bootstrap入门

前端 day 08 5.21 bootstrap入门

2020-05-21 21:52:53 作者：互联网

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

使用

先引入

1590027599975

放在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插件

模态框

面包屑

图书管理系统

引入jQuery，bootstrap
组件：顶端导航条

左右布局

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

标签：function,jQuery,标签,08,bootstrap,5.21,class,d1
来源： https://www.cnblogs.com/telecasterfanclub/p/12933762.html