师范大学通信大怨总
师范大学通信大怨总

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文档的前引入即可。

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

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、官方文档学习03_Web开发基础之综合应用_第1张图片

2、第三方学习网站

Bootstrap 教程 | 菜鸟教程>

2.2、基本模板演示



     
     
            
        
    
     Bootstrap 101 Template
    
    


    
你好，Boostrap！

    
      
    

2.3、全局CSS

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

①容器类样式

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

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

②按钮类样式

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

（默认样式）Default

③表格类样式

.table

为任意

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

.table-striped

通过 .table-striped 类可以给

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

.table-bordered

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

.table-hover

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

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

④表单

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