前端部分 Day57 2019-01-16

前端部分

1. HTML、css、JavaScript在网页开发中的定位

• HTML超文本标记语言，定义网页结构
• css层叠样式表，用来美化页面
• JavaScript主要用来验证表单，做动态交互（ajax)

2. 简单介绍一下Ajax

2.1 什么是ajax

异步的JavaScript和xml：

2.2 作用

通过ajax与服务器进行数据库交互，ajax可以使网页实现布局更新。

2.3 实现

Ajax XmlHttpRequest对象，使这个对象可以异步向服务器发送请求，获取响应，完成局部更新。Open Send responseText、responseXml局部定位。

2.4 使用场景

登录失败时不跳转页面提示，注册时提示用户名是否存在，二级联动等等使用场景。

3. JS和JQuery

• jQuery是一个js框架，封装了js的属性和方法，让用户使用更便捷，并且增强了js的功能。

• 原来使用原生js要处理很多兼容性问题，由jQuery封装了底层，就不用处理兼容性问题。

• 原生的js的DOM和事件绑定和Ajax等操作非常麻烦，jQuery封装以后操作非常方便。

4. JQuery的页面加载事件

很多时候需要获取元素，但是必须等到该元素被加载完成后才能获取，可以把js代码放到该元素的后面，但是这样就会造成js分布在body中存在不好管理。

所有页面加载完毕后所有的元素当然已经加载完毕。一般获取元素做操作都要在页面加载完毕后操作。

4.1 jQuery的两种页面加载方式

• $(document)把原生的document这个dom对象转换为jQuery对象，转换完成后才能调用ready方法。

  ready(fn)表示页面结构被加载完毕后执行传入函数fn。

$(document).ready(function(){  });

• 当页面加载完毕后执行里面的函数

$(function(){});

4.2 与window.onload的区别

• jQuery中的页面加载完毕事件，表示的是页面结构被加载完毕。
• window.onload表示的是页面（包含图片等远程资源）被加载完毕。
• 例如： onload必须等页面中的图片、声音、图象等远程资源被加载完毕后才调用，而jQuery中只需要页面结构被加载完毕。

5. jQuery的Ajax与原生js实现Ajax的关系

jQuery中的Ajax是通过原生的js封装的，封装完成后，让我们使用起来更加便利，不用考虑底层实现或兼容性等处理。

6.HTML5

• html5在原来的基础上增强了一些标签。增加了一些像画板、声音、视频、web存储等方面的高级功能。

• HTML5太强调语义，导致在开发中都不知道要使用哪个标签。

  • 例如：在做页面布局时，无论头部、主题、导航等模块都使用div来表示，但是html5的规范，需要使用不同的标签来表示（header、footer等）。

7. CSS3

• css3增强了原来的功能，提供了一些原来在css2中实现起来比较困难或者不能实现的功能，例如:
  1. 盒子边框
  2. 盒子和文字的阴影
  3. 渐变
  4. 转换、移动、缩放、旋转等
  5. 过渡、动画都可以使用动画。
  6. 可以使用媒体查询实现响应式网站。
• CSS3最大的缺点就是根据不同的浏览器处理兼容性，不过对应有一些处理兼容性的工具。

8. bootstrap

bootstrap是一个移动设备优先的UI框架，可以不用使用任何css、js代码就能实现比较漂亮的有交互性的页面。要写页面的话，可以使用类似于bootstrap的UI框架。

组件：

1. 模态框
2. 表单、表单项
3. 布局
4. 栅格系统