项目开发
html5 + css3 + javascript 第一阶段的重构网页 页面仔 复杂,比较慢,DOM驱动
bootstrap + jQuery + ajax 省略很多DOM操作,比较快捷,DOM驱动
vue + element-ui + axios 非常快,几乎不涉及DOM操作,数据驱动
bootstrap
1、介绍
利用 BootstrapCDN 和一个最简模板快速上手 Bootstrap。Bootstrap 是全球最流行的前端框架,用于构建响应式、移动设备优先的 WEB 站点
2、使用
1) 使用bootCDN(联网)
2) 将bootstrap下载到本地
css文件
bootstrap.min.css
js文件
jquery.min.js
bootstrap.min.js
3、布局
1) 布局容器
.container
类似于固定宽度并支持响应式布局的容器
.container-fluid
类似于100%宽度,占据全部视口的容器(流式布局容器)
2) 媒体响应
页面样式可以根据屏幕的大小自适应的调整
3) 栅格系统
系统会将屏幕或视口自动的划分为最多12列
基本使用:
<div class="row">
<div class="col-md-6">123</div>
<div class="col-md-6">456</div>
</div>
<div class="row">
<div class="col-md-4">一二三</div>
<div class="col-md-4">四五六</div>
<div class="col-md-4">七八九</div>
</div>
简化操作:(会自动分为多个等份的列)
<div class="row">
<div class="col">一二三</div>
<div class="col">四五六</div>
<div class="col">七八九</div>
</div>
嵌套使用:
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">1</div>
<div class="col-md-6">2</div>
</div>
</div>
<div class="col-md-6">456</div>
</div>
4) 图片
1. 外边框 img-thumbnail
2. 圆角 rounded
3. 左右浮动 float-left、float-right
4. 水平居中 mx-auto、d-block
注意:
只有当元素为块级元素或者行内块元素的时候,margin:auto;才生效(也就是水平居中)
如果img标签需要在父元素中水平居中,父元素可以使用text-center,来让img水平居中
5) 表格
1. 以前写表格
table{
border: 1px solid #333;
width: 100%;
}
table td,
table th{
border: 1px solid #333;
text-align: center;
}
2. 现在写表格,直接加类名
3. 常用类名
table-dark
表格主题色
<table class="table table-dark"></table>
thead-light
表格头部的背景色
<thead class="thead-light"></thead>
table-striped
条纹表格
<table class="table table-striped"></table>
table-bordered
边框表格
<table class="table table-bordered"></table>
table-borderless
无边框表格
<table class="table table-borderless"></table>
table-hover
可悬浮表格
<table class="table table-hover"></table>
table-sm
小表格
<table class="table table-sm"></table>
caption
表格标题
<caption>List of users</caption>
4、组件
1) 警告框
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
注意:
alert框中不仅可以写文本,还可以写html元素(p、span、h1、div)
2) 按钮
3) 表单
4) 模态框
5) 轮播图
时间间隔
data-interval="2000"
悬停时停止轮播
data-pause="hover"
轮播一次
data-wrap="false"
jQuery
1、介绍
jQuery是一个快速、小巧、功能丰富的JavaScript库。它使诸如HTML文档遍历和操作、事件处理、动画和Ajax之类的事情变得更加简单,因为它提供了一个易于使用的API,可以跨多种浏览器工作。jQuery结合了通用性和可扩展性,改变了数百万人编写JavaScript的方式。
2、使用
1) bootCDN
2) 下载到本地
console.log(jQuery);
console.log($);
console.log(jQuery === $);
后期使用jQuery的时候,都使用简写的$形式
3、在文档加载完毕之后
DOM中
window.onload = function(){
}
jQuery中
方法一:
$(document).ready(function(){
})
方法二:
$(function(){
})
4、选择器
css3的选择器
#id .class div [name] * div>div
jQuery中
1) id选择器 #id
<div id="one">12</div>
<div id="one[bar]">34</div>
<div id="one.bar">56</div>
var firstDiv = $('#one');
console.log(firstDiv);
var secondDiv = $('#one\\[bar\\]');
console.log(secondDiv);
var lastDiv = $('#one\\.bar');
console.log(lastDiv);
注意:
如果id中出现了特殊字符,比如[] . 之类的,需要使用\\进行转义
2) 元素选择器 button
<button>按钮</button>
var btn = $('button');
3) 类选择器 .class
<button class="btn">按钮</button>
var btn = $('.btn');
4) 普遍选择器 *
选中当前html文件中所有的标签
var list = $('*');
5) 子代选择器 div > div
选中给定元素下的所有子元素
6) 后代选择器 div div
选中给定元素下的所有后代元素
<ul class="one">
<li>1</li>
<li>2</li>
<li>3</li>
<li>
<ul>
<li>4</li>
<li>5</li>
</ul>
</li>
</ul>
// var lis = $('.one li');
var lis = $('.one > li');
console.log(lis);
7) 下一个兄弟选择器 prev + next
匹配紧跟在prev元素之后的next元素
8) 之后所有兄弟选择器 prev ~ siblings
匹配prev元素之后的所有siblings元素
<div class="one">12</div>
<div>34</div>
<div>56</div>
<div>78</div>
// var divs = $('.one + div');
var divs = $('.one ~ div');
console.log(divs);
9) 伪类选择器
:first
获取第一个元素
:last
获取最后一个元素
:nth-child(n)
获取第n个元素
<div class="one">
<div>12</div>
<div>34</div>
<div>56</div>
<div>78</div>
</div>
var firstDiv = $('.one div:first');
var lastDiv = $('.one div:last');
var otherDiv = $('.one div:nth-child(3)');
console.log(firstDiv);
console.log(lastDiv);
console.log(otherDiv);
:not(selector)
去除所有与给定的选择器匹配的元素
var input = $('input:not(:checked)');
console.log(input); // 选中没有被勾选的checkbox
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox">
:even
匹配所有索引值为偶数的元素,从0开始
:odd
匹配所有索引值为奇数的元素,从0开始
// var input = $('input:even');
var input = $('input:odd');
console.log(input);
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
:eq(index)
匹配一个给定索引值的元素
var input = $('input:eq(3)');
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
:contains(text)
匹配包含给定文本的元素
var div = $('div:contains("hello")');
console.log(div); // <div>hello</div>
<div>hello</div>
<div>hell</div>
<div>hel</div>
<div>he</div>
:has(selector)
匹配含有选择器所匹配的元素的元素
//var div = $('div:has(p)');
var div = $('div:has(.one)');
console.log(div);
<div>
<p class="one">段落一</p>
</div>
<div>
<p>段落二</p>
</div>
<div>hel</div>
10) 属性选择器
[attribute]
匹配包含给定属性的元素
// var div = $('div p[class]');
var div = $('div p[name]');
console.log(div);
<div>
<p class="one">段落一</p>
</div>
<div>
<p name="test">段落二</p>
</div>
<div>hel</div>
11) selected
:selected
匹配所有选中的option元素
12) checked
:checked
匹配所有选中的被选中元素(单选框、复选框)
13) checkbox
:checkbox
匹配所有复选框
0、如何实现鼠标点击当前的li,给它添加背景色,其他li没有背景色?
siblings()
含义:
返回被选元素的所有同级元素(同级元素是指共享相同父元素的元素)
语法:
$A.siblings() 选中所有与A同级的元素
1、如何实现查询文章,并且显示到页面?
1) 底层ajax
$.ajax({
//请求后台的地址
url:'',
//请求方式 get post put ...
method:'get',
//携带的数据,传递给后台的数据
data:{},
//请求成功的回调函数
success:function(res){},
//请求失败的回调函数
error:function(err){}
})
1、没有参数
$.ajax({
url:'http://47.106.244.1:8099/manager/category/findAllCategory',
method:'get',
data:{},
success:function(res){
console.log(res.data)
}
})
2、需要前端传递数据
$.ajax({
url:'http://47.106.244.1:8099/manager/article/findArticle',
method:'get',
data:{
page:0,
pageSize:10,
},
success:function(res){
console.log(res.data.list)
}
})
2) 简化ajax
$.get(url,data,function(){});
$.post(url,data,function(){});
2、如何实现点击左侧导航栏,实现右侧切换对应的页面?
load()
问题:
再浏览器打开时,无法切换,并且保存跨域,是由于浏览器对静态页面有限制
解决:
方法一:将项目部署到阿里云服务器上
方法二:vscode编辑器下载插件 live server ,下载完成后,关闭vscode后重新打开,右击open with live server