JQuery&bootstrap

2017-09-15 本文已影响40人 chcvn

内容回顾

jQuery的书写步骤
- 引入JQ的包（xxx.js）
- 书写JQ代码
```
$(function(){
    JQ代码
})
```
JS与JQ的相互转换
- 将JS转换成JQ对象
  $(js对象)
- 将JQ对象转换成JS对象
  JQ对象.get(0)/JQ对象[0]
==JQ选择器==
- ==基本选择器==
  - ID选择器 $(“#ID”)
  - CLASS选择器 $(“.class”)
  - 元素选择器 $(“元素名称”)
  - 通配符选择器 $(“*”)
  - 并列选择器 $(“selector1,selector2……”)
- ==层级选择器==
  - 兄弟选择器 $(“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
栅格流程：
1. 定义容器 .container
2. 定义行 .row
3. 定义模块（计算每一个模块占用的列数，总共12列）
4. 实现响应式布局，设置
  定义列：.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()