备考1+x前端证书

Bootstrap

Bootstrap3和Bootstrap4 栅格系统的区别

.container固定宽度

.container-fluid 100%宽度

Bootstrap3

代码语言：javascript复制

.col-xs(<768px)  超小屏幕
.col-sm(>=768px) 小屏幕
.col-md(>=992px) 中等屏幕
.col-lg(>=1200px) 大屏幕

Bootstrap4

代码语言：javascript复制

.col-(<576px) 超小屏幕
.col-sm(>=576px) 平板
.col-md(>=768px) 桌面显示器
.col-lg(>=992px) 大桌面显示器
.col-xl(>=1200px) 超大桌面显示器

Bootstrap4 分页

代码语言：javascript复制

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

核心类名 class=pagination pagination pagination 重要的类名敲三遍

当前页可以使用 .active 类来高亮显示效果如下:

Bootstrap4 下拉菜单

代码语言：javascript复制

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Dropdown button
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
  </div>
</div>

核心类名

.dropdown 类用来指定一个下拉菜单。

.dropdown-menu 类来设置实际下拉菜单。

代码语言：javascript复制

dropdown dropdown dropdown
dropdown-menu dropdown-menu dropdown-menu

Bootstrap4 折叠

代码语言：javascript复制

<button data-toggle="collapse" data-target="#demo">折叠</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

核心类名 collapse

代码语言：javascript复制

collapse collapse collapse

Bootstrap4 导航

代码语言：javascript复制

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

核心类名 nav

代码语言：javascript复制

nav nav nav

响应式导航栏

代码语言：javascript复制

.navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。

例如

.navbar-expand-lg 就是大于lg的宽度展示全部导航栏 小于则展示面包屑菜单折叠导航栏

实操题重点

导航栏组件

代码语言：javascript复制

.navbar

表单

堆叠表单

代码语言：javascript复制

form-group

内联表单

代码语言：javascript复制

form-inline

按钮

代码语言：javascript复制

.btn
.btn btn-info 信息
.btn btn-primary 主要按钮
.btn btn-success 成功
.btn btn-info 信息
.btn btn-danger 危险
.btn btn-link 链接

输入框组

代码语言：javascript复制

.input-group

列表组件

代码语言：javascript复制

.list-group

css

背景颜色渐变linear-gradient

代码语言：javascript复制

background: linear-gradient(to bottom,black,white)

to bottom 表示从上到下

to right 表示从左到右

to bottom right 表示从左上角到右下角渐变

字体倍数

以 rem为单位例如:

代码语言：javascript复制

font-size: 2.25rem;

过渡属性transition

代码语言：javascript复制

transition:设置过渡的属性名称 规定过渡效果几秒完成 规定速度曲线 定义过渡何时开始(延迟几秒后开始过渡)

过渡属性同常结合伪类使用

例如:

代码语言：javascript复制

#content h2:hover {
	font-size: 2.25（13）;/* 设置字体大小为根元素大小的2.25倍 */
	transition: font-size 1s;/* 使用过渡，1s内标题字号变大 */
}

意思为鼠标经过以后 1秒内字体变大2.25倍

盒子阴影box-shadow

代码语言：javascript复制

box-shadow: 10px 5px 10px #f00;

x轴 y轴阴影大小阴影颜色

JavaScript

获取dom对象的几种方式

通过id名获取标签

代码语言：javascript复制

document.getElementById('id名') //获取的唯一一个dom对象

通过类名获取标签

代码语言：javascript复制

document.getElementByClassName('类名') //获取的是一个数组

通过标签名获取标签

代码语言：javascript复制

document.getElementByTagName('标签名') //获取的是一个数组

操作DOM

创建DOM对象

代码语言：javascript复制

var div = document.createElement('div'); //创建div标签

把标签放在某个页面或某个标签中

代码语言：javascript复制

父节点.appendChild(子节点)

删除节点

代码语言：javascript复制

div.empty() 清空div标签的所有子标签和内容
div.remove() 清空标签所有子标签和内容 以及清空自己

遍历对象

foreach

代码语言：javascript复制

var obj = {'name':'Sch0lar','age':'19','sex':'男'};
    Object.keys(obj).forEach(function(key){
        console.log(key,obj[key]);
    })

for in

代码语言：javascript复制

var obj = {'0':'a','1':'b','2':'c'};
    for(var i in obj) {
        console.log(i,":",obj[i]);
}

ajax

之前对ajax并不熟练考试要考所以重新整理一下

ajax对象的创建

主流浏览器通过 new XMLHttpRequest()获得

老版浏览器通过 new ActiveXObject("Microsoft.XMLHTTP") 获得

我们可以通过window.XMLHttpRequest来判断浏览器是否支持XMLHttpRequest()

window.XMLHttpRequest 判断浏览器是否支持XMLHttpRequest()

ajax请求服务服务器返回数据

代码语言：javascript复制

xhr = new XMLHttpRequest();
xhr.open('get','test.php') 
//open和服务器进行交互。参数1请求方式 参数2 服务器地址
xhr.send()//发出请求
xhr.onreadystatechange = function(){ //监听
	if(xhr.readyState ==4 && xhr.status==200)
    alert(xhr.responseText);
}

get post区别

POST与GET不同的是 POST方式需要设置头信息，并将数据通过send()方法发送

代码语言：javascript复制

文件头信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

数据传输时字符串转码

例如我只想传一个参数 content参数值为Sch0lar&age 可以看到这里&符号将age也解析为了一个参数解决办法就是url编码

代码语言：javascript复制

encodeURIComponent 函数进行转码 之后在输入到服务器

因为get方式有自解码机制所以也不会有任何错误

代码语言：javascript复制

encodeURIComponent(content);

PHP

封装mysqli

代码语言：javascript复制

<?php
    //定义一个类
    class Mysqldb{
        public $host;
        public $user;
        public $pwd;
        public $dbname;
        public $charset;
        public $con;
        public function  __construct($config){
            $this->host = isset($config['host'])?$config['host']:'localhost';
            $this->user = isset($config['user'])?$config['user']:'root';
            $this->pwd = isset($config['pwd'])?$config['pwd']:'root';
            $this->dbname = isset($config['dbname'])?$config['dbname']:'xss';
            $this->charset = isset($config['charset'])?$config['charset']:'utf8';
            $this->connect();
            $this->selectDb();
            $this->setchart();
            
        }
        //封装对象
        public function connect(){
            $con = mysqli_connect($this->host,$this->user,$this->pwd);
            if(!$con){
                die('链接失败');
            }
            $this->con = $con;
        }
        
        //封装选择数据库
        public function selectDb(){
            mysqli_select_db($this->con,$this->dbname);
        }
        //封装设置字符集
        public function setchart(){
            mysqli_set_charset($this->con,$this->charset);
        }
        //封装获取资源
        public function query($sql){
            $res=mysqli_query($this->con,$sql);//返回的资源
            if(!$res){
                return false;
            }
            return $res;
        }
        //查询全部数据
        public function selectall($sql){
            $res = $this->query($sql);
            $arr = [];
            while ($row = mysqli_fetch_assoc($res)){
                $arr[] = $row;
            }
            return $arr;
        }
        //查询单条语句
        public function selectone($sql){
            $res = $this->query($sql);
            
            $row = mysqli_fetch_assoc($res);
            return $row;
        }
        
    }
?>

包含上面文件以后即可调用mysqldb类

代码语言：javascript复制

<?php
    function __autoload($class_anme){
        require './'.$class_anme.'.class.php';        
    }
    $arr1 = array(
        'host'=>'localhost'
    );	//传入数组 
    $db1 = new Mysqldb($arr1); //将数组传入类里
    $sql = 'select * from admin where id=1'; //构造sql语句
    $res = $db1->selectone($sql);	//sql语句带入到 selectone方法进行单条查询
    print_r($res);
?>

laravel

运行laravel项目

代码语言：javascript复制

php artisan serve

创建laravel项目

代码语言：javascript复制

composer create-project --prefer-dist laravel/laravel=版本号 项目名称

创建控制器

代码语言：javascript复制

php artisan make:controller 控制器名

创建验证器

代码语言：javascript复制

php artisan make:request 验证器的名称

创建模型

代码语言：javascript复制

php artisan make:model 模型名

创建中间件

代码语言：javascript复制

php artisan make:middleware 中间件名称

自己定义验证规则

代码语言：javascript复制

用validate关键字
	required 必填 不能为空
	present 必填 可以为空
	filled 可不填 填时不能为空
	nullable 验证字段值可以为null

xml ajax bootstrap laravel http

0 人点赞

备考1+x前端证书

Bootstrap

Bootstrap3和Bootstrap4 栅格系统的区别

Bootstrap4 分页

Bootstrap4 下拉菜单

Bootstrap4 折叠

Bootstrap4 导航

实操题重点

css

背景颜色渐变linear-gradient

字体倍数

过渡属性transition

盒子阴影box-shadow

JavaScript

获取dom对象的几种方式

操作DOM

遍历对象

ajax

ajax对象的创建

ajax请求服务 服务器返回数据

get post区别

数据传输时字符串转码

PHP

封装mysqli

laravel

ajax请求服务服务器返回数据