03_Web开发基础之综合应用

web开发基础之综合使用

学习目标和内容

1、能够描述jQuery的作用

2、能够使用jQuery的选择器获取元素

3、能够使用jQuery对HTML标签元素注册事件

4、能够使用jQuery对HTML元素的属性进行操作

5、能够描述Bootstrap的作用

6、能够使用Bootstrap创建简单网页

7、能够描述AJAX的作用

8、能够实现AJAX发送请求到后端服务

一、jQuery

1、jQuery相关介绍

jQuery 是一个 JavaScript 的脚本库，提供了很多便捷的操作 DOM 的方法。

jQuery 中提供的操作如下：

选择器、属性操作、样式操作、节点操作、动画、注册事件

2、下载和部署

jQuery 官网：

英文：jQuery

中文：jQuery API 中文文档 | jQuery中文网

下载地址：

Download jQuery | jQuery

使用方式注意：

①在HTML文档的</body>前引入即可。

②在使用一些js插件时，依赖jQuery的，必须先引入jquery，再引入js的插件。

<script src="jquery-3.3.1.js"></script>

3、使用jQuery

$和jQuery

// 遍历数组
$.each(arr, function (index, item) {
  // index 当前项的索引
  // item 当前项
});
// 获取第一个参数，在数组中出现的索引，如果数组中没有返回 -1
$.inArray('linux', arr);

4、jQuery选择器

jQuery中的选择器和CSS选择器使用基本类似。

$('.box').css('color', 'red');

5、jQuery注册事件

$('#btn').click(function() {
   //执行代码
});
$('.box').mouseover(function () {
//执行代码
});

6、jQuery属性操作

//获取或者设置表单元素的值
$('#username').val()
//获取或者设置标签之间的内容
$('.box').html()
//获取或者设置元素属性的值
$('.box').attr(）

7、jQuery隐藏显示

//显示
$('.box').show()
//隐藏
$('.box').hide()

8、jQuery样式操作

//操作行内样式
$('.box').css();
//操作类样式
//添加类样式
$('.box').addClass(); 
//移除类样式
$('.box').removeClass();

二、Bootstrap

1、Bootstrap介绍

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

作用：可以==快速搭建响应式的网页==，而不需要书写大量的 css

中文文档: Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网

2、下载和部署

下载地址：起步 · Bootstrap v3 中文文档 | Bootstrap 中文网

2.1、目录结构

bootstrap/

├── css/

│ ├── bootstrap.css

│ ├── bootstrap.css.map

│ ├── bootstrap.min.css

│ ├── bootstrap.min.css.map

│ ├── bootstrap-theme.css

│ ├── bootstrap-theme.css.map

│ ├── bootstrap-theme.min.css

│ └── bootstrap-theme.min.css.map

├── js/

│ ├── bootstrap.js

│ └── bootstrap.min.js

└── fonts/

├── glyphicons-halflings-regular.eot

├── glyphicons-halflings-regular.svg

├── glyphicons-halflings-regular.ttf

├── glyphicons-halflings-regular.woff

└── glyphicons-halflings-regular.woff2

如何学习使用bootstrap

1、官方文档学习

2、第三方学习网站

Bootstrap 教程 | 菜鸟教程>

2.2、基本模板演示

<!DOCTYPE html>
<html lang="zh-CN">
<head>     
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">        
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
     <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <h1>你好，Boostrap！</h1>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>  
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

2.3、全局CSS

Bootstrap中提供了很多类样式方便编写页面。

①容器类样式

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
</div>

.container-fluid 类用于 100% 宽度，占据全部视窗口（viewport）的容器。

<div class="container-fluid">
</div>

②按钮类样式

.btn开头的类给按钮添加不同类样式

<a class="btn btn-default" href="#" role="button">（默认样式）Default</a>
<button class="btn btn-primary" type="submit">（首选项）Primary</button>
<input class="btn btn-success" type="button" value="（成功）Success">
<input class="btn btn-info" type="submit" value="（一般信息）Info">

<button class="btn btn-warning" type="submit">（警告）Warning</button>
<button class="btn btn-danger" type="submit">（危险）Danger</button>
<button class="btn btn-link" type="submit">（链接）Link</button>

③表格类样式

.table

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线

.table-striped

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

.table-bordered

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

.table-hover

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

④表单

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
   <label>
      <input type="checkbox"> Check me out
   </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

⑤分页

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>

2.4、Bootstrap插件

交互的效果要通过 JavaScript 来实现，Bootstrap 的插件在使用前，需要先引用两个 js 文件。

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.js"></script>

①模态框实现 cmdb项目中，资产管理-主机添加，使用到了模态框 JavaScript 插件 · Bootstrap v3 中文文档 | Bootstrap 中文网

第一步：获取官方的模态框demo

<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
     <div class="modal-body">
        <!-- 此处是在模态框中显示的内容 -->
        <p>One fine body…</p>
     </div>
     <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

第二步点击按钮弹出模态框

设置按钮的属性data-target属性设置为模态框的id

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

第三步隐藏模态框

给 Save Changes 按钮的 id 属性设置值，myModal

$('#btn').click(function () {
  $('#myModal').modal('hide');
});

3、基于Bootstrap的案例

起步 · Bootstrap v3 中文文档 | Bootstrap 中文网

案例：快速实现一个资产管理，主机列表的页面

使用examples案例中的dashboard页面

第一步：使用模板页面

引入css

第二步：根据实际情况，修改html标签

查看最后呈现效果

实现点击按钮，模态框表单，操作按钮

三、Layer

官方文档地址：https://layer.layui.com/

1、部署使用

①解压之后，部署layer插件

②引入layer.js

③实现confirm效果

四、Ajax

1、ajax介绍

==Ajax== 即“==Asynchronous Javascript And XML==”（异步 JavaScript 和 XML）

创建交互式网页应用的网页开发的一组技术。

作用：==异步发送请求==，提升了用户体验。

2、使用jQuery发送AJAX

2.1、发送get请求

$.ajax({
  type: 'get',
  url: 'xxxxx',
  success: function (res) {
      //成功后执行的代码
  }
})

2.2、发送post请求

$.post('/path/to/file', {param1: 'value1'}, function(data, textStatus, xhr) {
      /*optional stuff to do after success */
});

2.3、Ajax方法

$.ajax({
  type: 'post',
  url: 'xxxxx',
  data: data,
  success: function (res) { 
      //成功执行的代码
  }
});

3、实现聊天机器人

API：http://www.tuling123.com/openapi/api

请求方法：POST

请求参数：key=d7c82ebd8b304abeacc73b366e42b9ed&info=你好

参数名称	参数值
key	请求权限标识符
info	关键字参数

4、操作主机列表页面

4.1、接口服务器搭建

使用json-server启动一个接口服务器，借助node进行开发的。安装node系统环境。

①安装json-serser

cmd > npm install -g json-server

②编写json数据文件

③cmd进入路径，启动json-server服务

服务接口启动成功

4.2、动态获取主机列表

①复制主机列表清空tbody的数据内容

②通过ajax发送请求获取json格式数据拼接字符串模板追加写入页面