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
使用
先引入
放在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