今日任務 使用JQuery發送請求局部刷新頁面 使用BootStrap製作一個響應式的頁面 使用BootStrap製作網站的首頁 教學目標 掌握什麼是響應式及響應式的原理 掌握BootStrap的柵格系統 瞭解BootStrap的其他組件及JS控制項 上次課內容: 什麼JQ : write less ...
今日任務
使用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() )
屬性選擇器:
```html
選擇器 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()
步驟分析
1. 首先給必填項,添加尾部添加一個小紅點
2. 獲取用戶輸入的信息,做相應的校驗
3. 事件: 獲得焦點, 失去焦點, 按鍵抬起
4. 表單提交的事件
代碼實現
使用JQuery發送請求局部刷新頁面
數據交換格式:
json
xml
- 什麼是JSON
[JSON](http://baike.baidu.com/view/136475.htm)([JavaScript](http://baike.baidu.com/view/16168.htm) Object Notation) 是一種輕量級的數據交換格式。它基於[ECMAScript](http://baike.baidu.com/view/810176.htm)的一個子集。 JSON採用完全獨立於語言的文本格式，但是也使用了類似於C語言家族的習慣（包括[C](http://baike.baidu.com/subview/10075/6770152.htm)、C++、[C#](http://baike.baidu.com/view/6590.htm)、[Java](http://baike.baidu.com/subview/29/12654100.htm)、JavaScript、[Perl](http://baike.baidu.com/view/46614.htm)、[Python](http://baike.baidu.com/view/21087.htm)等）。這些特性使JSON成為理想的數據交換語言。 易於人閱讀和編寫，同時也易於機器解析和生成(一般用於提升網路傳輸速率)。
- JSON格式
JSON對象
```json
{ key1:value}
{"username":"zhangsan","password":"123"}
```
JSON數組
```json
[{ key1:value},{ key1:value},{ key1:value}]
```
使用BootStrap開發一個響應式的頁面出來
需求分析
開發一套響應式頁面.讓他能夠在各種設備上顯示正常,提升用戶體驗
技術分析
BootStap概述
- 什麼是BootStrap
- BootStrap有什麼作用
- 複製粘貼, 能夠提高開發人員的工作效率
- 什麼是響應式頁面
- 適應不同的解析度顯示不同樣式,提高用戶的體驗
- BootStrap的中文網
- http://www.bootcss.com
- 下載BootStrap
- BootStrap結構
- 全局CSS
- bootStrap中已經定義好了一套CSS的樣式表
- 組件
- BootStrap定義的一套按鈕,導航條等組件
- JS插件
- BootStrap定義了一套JS的插件,這些插件已經預設實現了很多種效果
BootStrap的入門開發
- 引入相關的頭文件
```html
<!-- 最新版本的 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樣式
- 設備解析度小於768使用xs樣式
- BootStrap的全局CSS
- 定義了一套CSS
- 對頁面中的元素進行定義
- 列表元素,表單,按鈕,圖片...
步驟分析
代碼實現
使用BootStrap佈局網站首頁
需求分析
請使用BootStrap對我們的首頁進行優化
技術分析
步驟分析
> 1. 新建一個HTML頁面.引入bootStrap相關的js和CSS
> 2. 定義一個整體的div, 將整體的div分成8個部分
> 3. 完成沒部分的內容顯示
代碼實現
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
準備工作:
<meta name='viewport'>
1.導入bootstrap css文件
2.導入JQuery
3.bootstrap.js
4.寫一個div class = container 支持響應式的佈局容器
-->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
jQuery文件。務必在bootstrap.min.js 之前引入
-->
<script src="../js/jquery-1.11.0.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="../img/logo2.png" />
</div>
<div class="col-md-4 hidden-xs">
<img src="../img/header.png" />
</div>
<div class="col-md-4">
<a href="#">登錄</a>
<a href="#">註冊</a>
<a href="#">購物車</a>
</div>
</div>
<!--菜單-->
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首頁</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">手機數位</a>
</li>
<li>
<a href="#">鞋靴箱包</a>
</li>
<li>
<a href="#">電腦辦公</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">所有分類 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">手機數位</a>
</li>
<li>
<a href="#">鞋靴箱包</a>
</li>
<li>
<a href="#">電腦辦公</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Separated link</a>
</li>
<li class="divider"></li>
<li>
<a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="請輸入要搜索的商品">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
<div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../img/1.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="../img/2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="../img/3.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!--最新商品這裡-->
<div class="row">
<div class="col-md-12">
<h3>最新商品<img src="../images/title2.jpg"/></h3>
</div>
</div>
<!--商品部分 -->
<div class="row">
<!--左邊div-->
<div class="col-md-2 hidden-sm hidden-xs">
<img src="../products/hao/big01.jpg" width="100%" height="100%" />
</div>
<!--右邊div-->
<div class="col-md-10">
<!--上面部分-->
<div class="row">
<!--中等廣告圖-->
<div class="col-md-6">
<img src="../products/hao/middle01.jpg" width="100%" />
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
</div>
<!--下麵部分-->
<div class="row">
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="../products/hao/ad.jpg" width="100%" />
</div>
</div>
<!--最新商品這裡-->
<div class="row">
<div class="col-md-12">
<h3>最新商品<img src="../images/title2.jpg"/></h3>
</div>
</div>
<!--商品部分 -->
<div class="row">
<!--左邊div-->
<div class="col-md-2 hidden-sm hidden-xs">
<img src="../products/hao/big01.jpg" width="100%" height="100%" />
</div>
<!--右邊div-->
<div class="col-md-10">
<!--上面部分-->
<div class="row">
<!--中等廣告圖-->
<div class="col-md-6">
<img src="../products/hao/middle01.jpg" width="100%" />
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
</div>
<!--下麵部分-->
<div class="row">
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
</div>
</div>
</div>
<!--頁腳廣告-->
<div>
<img src="../image/footer.jpg" width="100%" />
</div>
&nbs
