51 ajax详讲和bootstrap

今日内容大纲

js 10%

jquery %40

jquery ui 里面有ui的一些特效

插件 插件库里面找

https://www.css88.com/jquery-ui-api/ 中文文档

jquery 图标库

jquery tree

 

bootstrap 中文网 http://www.bootcss.com/ 推特公司发明 50%

 

前端框架
Vue(中国人发明)  React（知乎前端框架 后台框架python） Angular6.0(谷歌)
掘金社区   

sass  和 less  预处理脚本
​

 

学会使用bootstrap 可以复制但是要知道他在哪 熟练使用

bootstrap提供了栅格
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
​

thumnull 组件 缩略图 怼路飞界面

50天 作业 天气 jquery 音乐 扒一个jquery插件库的插件

51天核心内容就是使用bootstrap

bootstrap可视化布局

用流程控制图列bootstrap的所有东西（慢慢列 慢慢记）

全局CSS样式比较重要的

 

!important 被用来明确 CSS 样式的优先级 表示优先级是最高的

内容回顾

表单事件

• change()

• selected()

• submit()

事件对象

• e.target

• e.keyCode

• e.stoppropagation()

• e.preventDefault()

事件代理

• 给多个元素添加相同的事件

• 给未来的元素添加事件

on('事件名','子元素的选择器',fn)

ajax技术 (XHR === XMLHttpRequest)

作用:与后端交互,局部作用域刷新页面

 

原生jsXHR对象

1.创建对象 var xhr = new XMLHttpRequest();

2.连接 xhr.open('GET',url,true)

3.发送数据 xhr.send()

4.回调 xhr.onreadystatechange = fn

xhr.readyState

。0-为初始化：对象已经建立，单位初始化，open方法还未调用；

。1-初始化：对象已经建立，但还未调用send方法发送请求；

。2-发送数据：send方法已调用，但HTTP头未知；

。3-数据传输中：已经接受部分数据，但响应不完全；

。4-完成：数据接受完成，此时才可以获取完整的返回数据

 

$.ajax({
    url:"",
    type:'GET',
    success:function(data){
        console.log(data);
    },
    error:function(err){
        
    }
})

$.ajax({
    url:'',
    type:'POST',
    data:{
        key:value
    },
    success:functoon(data){
    
    }
})

今日内容

form表单的事件和阻止默认事件

submit()
e.preventDeault()
​
<a href='javascript:void(0);'>
    
return false;//即阻止了默认事件,又阻止了冒泡
相当于
 e.stopPropagation();
 e.preventDefault();

 

jQueryUI 和jQuery插件

Bootstrap