今日任务
使用JQuery发送请求局部刷新页面
使用BootStrap制作一个响应式的页面
使用BootStrap制作网站的首页
教学目标
掌握什么是响应式及响应式的原理
掌握BootStrap的栅格系统
了解BootStrap的其他组件及JS控件
上次课内容:
什么JQ : write less do more 写更少的代码,做更多的事情 javascript函数库
基本选择器:
ID选择器: #ID名称
类选择器: .类名
元素选择器: 元素的名称
通配符选择器: * 找出页面上所有元素
选择器分组: 选择器1,选择器2 [选择器1 , 选择器2]
层级选择器:
后代选择器: 选择器1 选择器2 找出来的选择器1 下面的所有选择器2 子孙
子元素选择器: 选择器1 > 选择器2 找出来的是所有的子节点 儿子
相邻兄弟选择器: 选择器1+选择器2 找出来的紧挨着自己的弟弟
兄弟选择器: 选择器1~选择器2 找出所有的弟弟
(找出所有兄弟: $("div").siblings() )
属性选择器:
选择器 div
选择器[title]
选择器[title='test']
选择器[title='test'][style]
基本的过滤器: 选择器:过滤器 $(“div:first”)
:first : 找出第一个元素
:last 找出最后一个元素
:even 找出偶数索引
:odd 找出奇数
:gt(index) greater-than大于
:lt(index) 小于
:eq(index) 等于
表单选择器:
:input 找出所有的输入项, textarea select button
:password
:text
:radio
表单对象属性的过滤器
:selected
:checked
常用函数:
属性prop() properties
如果传入一个参数 就是获取
prop("src","../img/1.jpg");
设置图片路径
attr : 操作一些自定义的属性 <img abc='123' />
prop: 通常是用来操作元素固有属性的 ,建议大家使用prop来操作属性
css() ; 修改css样式
addClass() : 添加一个class样式
removeClass() : 移除
blur : 绑定失去焦点
focus: 绑定获得焦点事件
click:
dblclick
change
append : 给自己添加儿子
appendTo : 把自己添加到别人家
prepend : 在自己子节点最前面添加子节点
after : 在自己后面添加一个兄弟
before: 在自己前面添加一个兄弟
$("数组对象").each(function(index,data))
$.each(arr,function(index,data))
表单校验案例
技术分析
- trigger : 触发事件,但是会执行类似浏览将光标移到输入框内的这种浏览器默认行为
- triggerHandler : 仅仅只会触发事件所对应的函数
- is()
步骤分析
- 首先给必填项,添加尾部添加一个小红点
- 获取用户输入的信息,做相应的校验
- 事件: 获得焦点, 失去焦点, 按键抬起
- 表单提交的事件
使用JQuery发送请求局部刷新页面
数据交换格式:
json
xml
- 什么是JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C、C++、C#、Java、JavaScript、Perl、Python等)。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)。 - JSON格式
JSON对象
{ key1:value}
{“username”:”zhangsan”,”password”:”123”}
JSON数组
[{ key1:value},{ key1:value},{ key1:value}]
使用BootStrap开发一个响应式的页面出来
需求分析
开发一套响应式页面.让他能够在各种设备上显示正常,提升用户体验
技术分析
BootStap概述
什么是BootStrap
BootStrap有什么作用
- 复制粘贴, 能够提高开发人员的工作效率
什么是响应式页面
适应不同的分辨率显示不同样式,提高用户的体验
BootStrap的中文网
- 下载BootStrap
- BootStrap结构
- 全局CSS
- bootStrap中已经定义好了一套CSS的样式表
- 组件
- BootStrap定义的一套按钮,导航条等组件
- JS插件
- BootStrap定义了一套JS的插件,这些插件已经默认实现了很多种效果
BootStrap的入门开发
引入相关的头文件
<!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="../css/bootstrap.css" /> <!--需要引入JQuery--> <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script type="text/javascript" src="../js/bootstrap.js" ></script> <meta name="viewport" content="width=device-width, initial-scale=1">
BootStrap的布局容器
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
<div class="container-fluid">
...
</div>
校验表单扩展:
trigger : 触发浏览器默认行为
triggerHandler : 不会触发
is : 判断
find : 查找
老黄历:
什么json: 轻量级的数据交换格式
json对象: {“username”:”zhangsan”}
json数组: [ {“username”:”zhangsan”}, {“username”:”zhangsan”}, {“username”:”zhangsan”}]
ajax异步请求:
同步和异步
- row
Bootstrap 栅格系统的工作原理: - “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
- 通过“行(row)”在水平方向创建一组“列(column)”。
- 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
- 类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding
BootStrap的栅格系统
- 响应式设计: 这种设计依赖于CSS3中的媒体查询
- 栅格样式:
- 设备分辨率大于1200 使用lg样式
- 设备分辨率大于992 < 1200 使用md样式
- 设备分辨率大于768 < 992 使用sm样式