Web开发基础之综合应用

开发
字数统计: 2.6k   |   阅读时长≈ 12 分钟

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 官网：

​ 英文：http://jquery.com/

​ 中文：https://www.jquery123.com/

下载地址：

http://jquery.com/download/

使用方式注意：

①在HTML文档的前引入即可。

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

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

3、使用jQuery

$和jQuery

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

4、jQuery选择器

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

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

5、jQuery注册事件

1
2
3
4
5
6
$('#btn').click(function() {
   //执行代码
});
$('.box').mouseover(function () {
//执行代码
});

6、jQuery属性操作

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

7、jQuery隐藏显示

1
2
3
4
//显示
$('.box').show()
//隐藏
$('.box').hide()

8、jQuery样式操作

1
2
3
4
5
6
7
//操作行内样式
$('.box').css();
//操作类样式
//添加类样式
$('.box').addClass(); 
//移除类样式
$('.box').removeClass();

二、Bootstrap

1、Bootstrap介绍

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

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

中文文档: https://v3.bootcss.com/

2、下载和部署

下载地址：https://v3.bootcss.com/getting-started/#download

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、官方文档学习

15539185317342、第三方学习网站

http://www.runoob.com/bootstrap/bootstrap-tutorial.html>

2.2、基本模板演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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 类用于固定宽度并支持响应式布局的容器。

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

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

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

②按钮类样式

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

1
2
3
4
5
6
7
8
<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 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线

.table-striped

通过 .table-striped 类可以给

之内的每一行增加斑马条纹样式。

.table-bordered

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

.table-hover

通过添加 .table-hover 类可以让

中的每一行对鼠标悬停状态作出响应。

④表单

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 、