内容回顾
-
jQuery的书写步骤
- 引入JQ的包（xxx.js）
- 书写JQ代码
$(function(){ JQ代码 })
-
JS与JQ的相互转换
- 将JS转换成JQ对象
$(js对象) - 将JQ对象转换成JS对象
JQ对象.get(0)/JQ对象[0]
- 将JS转换成JQ对象
-
==JQ选择器==
- ==基本选择器==
- ID选择器
$(“#ID”) - CLASS选择器
$(“.class”) - 元素选择器
$(“元素名称”) - 通配符选择器
$(“*”) - 并列选择器
$(“selector1,selector2……”)
- ID选择器
- ==层级选择器==
- 兄弟选择器
$(“selector + selector”)选择同辈的下一个元素 - 选择同辈中往后所有的元素：
$(“selector ~ selector”) - 子元素选择器：
$(父选择器 > 子选择器) - 后代选择器：
$(父选择器 子选择器)
- 兄弟选择器
- 基本过滤选择器
-
：first选择第一个 -
：last选择最后一个 -
：eq(index)选择下标为index的元素 -
：odd/:even注意：下标从0开始
-
- 属性选择器
$(“input[属性名=’属性值’]”) - 表单选择器(了解)
：input
:text/:password/:radio/:checkbox……
- ==基本选择器==
JQ对文档的操作(DOM的crud)
JQ.append()追加元素
JQ.appendTo(父元素)将元素追加到父元素
JQ.remove()删除元素-
元素循环遍历
// 方式一 $.each(数组,function(i,n){ i表示下标 n表示数组元素 }); // 方式二 $(数组).each(function(i,n){ i表示下标 n表示数组元素 });
今日重点：
- Jquery查找和事件处理
- Bootstrap引入（4个文件，1个设置）
- Bootstrap的容器（.container）
- Bootstrap的栅格系统
01- 案例五：使用JQ完成下拉列表左右选择：需求和页面设计
下拉列表显示多个选项：<select multiple="multiple">
02- 案例五：使用JQ完成下拉列表左右选择：传统方式代码实现
- 绑定监听事件 onclick
document.getElementById("addRight").onclick = function(){} - 获得左侧选中的选项并添加到右侧
for(var i = selectLeft.options.length - 1;i>=0;i--){
// 判断该元素是否被选中
if(selectLeft.options[i].selected == true){
//添加到右侧
document.getElementById("selectRight").appendChild(selectLeft.options[i]);
}
}
- 全部选中则for循环当中不需要判断是否选中
// 遍历左侧列表中的所有的option元素.
for(var i = selectLeft.options.length - 1;i>=0;i--){
document.getElementById("selectRight").appendChild(selectLeft.options[i]);
}
03- 案例五：使用JQ完成下拉列表左右选择：JQ方式实现
- JQ中强大的选择器
// 添加左侧选中的元素到右侧
$("#addRight").click(function(){
// 获得左侧被选中的option元素:
$("#selectLeft option:selected").appendTo("#selectRight");
});
- 应用到的选择器：
ID选择器：#selectLeft
后代选择器：#selectLeft option
表单对象属性选择器：：selected选择被选中的标签 - 应用到的文档操作：
JQ对象.appendTo(“”)，追加到某个标签当中
$("#selectRight").dblclick(function(){
//选中当前标签中被选中的option标签
$("option:selected",this).appendTo("#selectLeft");
});
04- 案例五：使用JQ完成下拉列表左右选择：JQ的事件切换
$(document).ready(function(){….})功能类似与$(function(){…..});
- 事件切换函数
toggle()点击时切换函数(1.9版本 .toggle() 方法删除)
hover()鼠标悬停的切换
05- 案例一：使用JQ完成表单校验：需求和JQ的查找及事件处理
- JQ查找
find();
parent(); - JQ事件处理
trigger这个函数也会导致浏览器同名的默认行为的执行
triggerHandler- 第一，他不会触发浏览器默认事件。
- 第二，只触发jQuery自定义的事件处理函数。
06- 案例一：使用JQ完成表单校验：步骤分析
- 给所有的输入框添加blur事件
- 根据不同输入校验不同内容
- 内容错误不能提交
07- 案例一：使用JQ完成表单校验：准备工作
JQ函数：
find(选择器) 查找匹配的元素
parent() 获得父元素
is(选择器) 判断是否为某个元素
trigger()/triggerHandler() 事件处理
08- 案例一：使用JQ完成表单校验：代码实现
- 步骤一：为必填项添加一个 *.
$("form input.required").each(function(){} - 步骤二：获得所有的输入项,为输入项添加一个blur事件.
$("form input").blur(function(){} - 确定点击的输入项是谁?
if($(this).is("#username")){} - 为表单添加一个submit事件.
$("form").submit(function(){
// 执行表单中blur事件.
$("form :input").trigger("blur");
// 获得错误信息的长度.
var errorLength = $(".onError").length;
if(errorLength > 0){
return false;
}
});
09- 案例二：使用BootStrap实现一个响应式页面：需求及BootStrap的概述
- 什么是BootStrap
前端框架，基于HTML,CSS,JavaScript实现 - BootStrap作用
设计一套页面能够通用在不同的设备上,在手机,pad上,电脑上都可以浏览这个网页,而不影响正常显示.（响应式页面） - 什么是响应式？
设计一个页面，能够适应在不同的尺寸的设备上还能够显示
10- 案例二：使用BootStrap实现一个响应式页面：BootStrap的准备工作
- 导入BootStrap目录（3个）
CSS目录
fonts目录
js目录 - HTML中引入BootStrap的样式与JS代码（4个文件，1个设置）
<!—应用于移动的：根据设备宽度，调整显示缩放比例initial-scale取值1-5 --> <meta name="viewport" content="width=device-width, initial-scale=1"> 视口 <!-- 引入BootStrap的CSS --> <link rel="stylesheet" href="../css/bootstrap.min.css" /> <link rel="stylesheet" href="../css/bootstrap-theme.min.css" /> <!-- 引入JS--> <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script> <script type="text/javascript" src="../js/bootstrap.min.js" ></script>
11- 案例二：使用BootStrap实现一个响应式页面：BootStrap的全局CSS的容器和栅格
- 布局容器
class="container"
class="container-fluid" - 栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统
总共分为12列
使用.row样式定义栅格的行.
定义列：.col-lg-n.col-md-n.col-sm-n.col-xs-n - 栅格流程：
- 定义容器
.container - 定义行
.row - 定义模块 （计算每一个模块占用的列数，总共12列）
- 实现响应式布局，设置
定义列：.col-lg-n超大屏幕.col-md-n中型
.col-sm-n小型屏幕（平板）.col-xs-n超小型（手机）
- 定义容器
12- 案例二：使用BootStrap实现一个响应式页面：BootStrap的栅格的案例
今日总结：
==JQ的事件切换==
JQ.hover(function1,function2)鼠标移入移出执行不同的操作
了解toggle(function1,function2)点击隐藏和显示 1.9版本后删除==JQ的查找和事件处理==
jQuery查找
JQ.find(选择器)选择匹配的元素
JQ.parent()获得元素的父元素
JQ.is(选择器)表示判断元素是否相等
jQuery事件处理
on("click",fun())绑定事件到jQuery对象中的元素
bind("事件",fun())可绑定多个事件到jQuery对象
trigger("事件",fun())绑定事件会触发浏览器默认事件
triggerHandler("事件",fun())绑定事件不会触发浏览器默认事件BootStrap 概述
是一个前端的框架，能够实现响应式页面设计引入BootStrap （4个文件，1个设置）
两个CSS，两个JS
<meta name="viewport" content="width=device-width, initial-scale=1">
bootstrap.min.css
bootstrap-theme.min.css
jquery-1.11.3.min.js
bootstrap.min.js-
全局CSS样式
通过设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。- 栅格系统
- 排版
- 表格
- 表单
- 按钮
- 图片
- ...
-
实现栅格系统布局
- 定义容器
<div class=”container”> - 在容器中实现行
<div class=”row” > - 在每一行中划分列 总共分为12列
col-lg-n大分辨率
col-md-n中型分辨率（PC）
col-sm-n小型分辨率（平板）
col-xs-n超小型（手机）
- 定义容器
JS与jQuery总结
-
JS与JQ程序的入口
一般JS是通过事件触发函数/window.onload()$(function(){ })事件总结:
onload页面加载
onclick点击
ondblclick双击
onsubmit表单提交 ，接受返回值
onchange下拉列表改变
onmouseover鼠标移入
onmouseout鼠标移出
onmousemove鼠标移动
onfocus获得焦点
onblur失去焦点 操作CSS样式
JQ：JQ.css(,)/JQ.addClass(“”)/JQ.removeClass()
JS:JS.style.样式属性 = “”；操作标签的内容
JQ:JQ.html(“”)
JS:JS.innerHTML = “”;操作标签的属性
JQ：JQ.prop(“属性名称”，“属性值”)；
JS：JS.属性名 = 属性值-
操作DOM（CRUD）
查找元素
JQ：选择器（基本选择器5个，层级选择器4，属性选择器，内容过滤选择器）
JS：document.getElementById()/document.getElementsByName()/….byTagName()创建元素
JQ：JQ.append(“标签元素”)
JS：document.createElemant(“”)/document.createTextNode(“”)删除元素
JQ：选择器.remove()删除选中的元素
JS：父元素.removeChild(子元素)添加元素
JQ：append()/appendTo()/insertBefore()
JS:appendChild(子元素) 事件绑定
JS：
一种在标签中定义事件监听属性
JS.onxx = function(){}
JQ:
JQ.事件$(“div”).click(function(){});
JQ.bind(事件名称,function(){})循环遍历
JS：for循环
JQ：$.each(数组,function…)/$(数组).each(function…..)JS与JQ的切换
js转换成JQ：$(JS对象)
JQ转换成JS：$(“”).get(0)/$(“”)[0]显示与隐藏
JS: 直接操作CSS.style.display = “none”/”block”
JQ: 使用函数show()/hide() slideDown()/sideUp() fadeIn()/fadeOut()
