摘要：類(lèi)用于寬度，占據(jù)全部視口的容器。通過(guò)行在水平方向創(chuàng)建一組列。通過(guò)為列設(shè)置屬性，從而創(chuàng)建列與列之間的間隔。

上次課內(nèi)容:
什么JQ : write less do more 寫(xiě)更少的代碼,做更多的事情 javascript函數(shù)庫(kù)

基本選擇器:

? ID選擇器: #ID名稱(chēng)

? 類(lèi)選擇器: .類(lèi)名

? 元素選擇器: 元素的名稱(chēng)

? 通配符選擇器: * 找出頁(yè)面上所有元素

? 選擇器分組: 選擇器1,選擇器2 [選擇器1 , 選擇器2]

層級(jí)選擇器:

? 后代選擇器: 選擇器1 選擇器2 找出來(lái)的選擇器1 下面的所有選擇器2 子孫

? 子元素選擇器: 選擇器1 > 選擇器2 找出來(lái)的是所有的子節(jié)點(diǎn) 兒子

? 相鄰兄弟選擇器: 選擇器1+選擇器2 找出來(lái)的緊挨著自己的弟弟

? 兄弟選擇器: 選擇器1~選擇器2 找出所有的弟弟

? (找出所有兄弟: $("div").siblings() )

屬性選擇器:

選擇器 div
選擇器[title]
選擇器[title="test"]
選擇器[title="test"][style]

基本的過(guò)濾器: 選擇器:過(guò)濾器 $("div:first")

? :first : 找出第一個(gè)元素

? :last 找出最后一個(gè)元素

? :even 找出偶數(shù)索引

? :odd 找出奇數(shù)

? :gt(index) greater-than大于

? :lt(index) 小于

? :eq(index) 等于

表單選擇器:

? :input 找出所有的輸入項(xiàng), textarea select button

? :password

? :text

? :radio

表單對(duì)象屬性的過(guò)濾器

? :selected

? :checked

常用函數(shù):

? 屬性prop() properties

? 如果傳入一個(gè)參數(shù) 就是獲取

? prop("src","../img/1.jpg");

? 設(shè)置圖片路徑

? attr : 操作一些自定義的屬性

? prop: 通常是用來(lái)操作元素固有屬性的 ,建議大家使用prop來(lái)操作屬性

? css() ; 修改css樣式

? addClass() : 添加一個(gè)class樣式

? removeClass() : 移除

?

? blur : 綁定失去焦點(diǎn)

? focus: 綁定獲得焦點(diǎn)事件

? click:

? dblclick

? change

?

? append : 給自己添加兒子

? appendTo : 把自己添加到別人家

? prepend : 在自己子節(jié)點(diǎn)最前面添加子節(jié)點(diǎn)

? after : 在自己后面添加一個(gè)兄弟

? before: 在自己前面添加一個(gè)兄弟

?

? $("數(shù)組對(duì)象").each(function(index,data))

? $.each(arr,function(index,data))

?

trigger : 觸發(fā)事件,但是會(huì)執(zhí)行類(lèi)似瀏覽將光標(biāo)移到輸入框內(nèi)的這種瀏覽器默認(rèn)行為

triggerHandler : 僅僅只會(huì)觸發(fā)事件所對(duì)應(yīng)的函數(shù)

is()

首先給必填項(xiàng),添加尾部添加一個(gè)小紅點(diǎn)

獲取用戶(hù)輸入的信息,做相應(yīng)的校驗(yàn)

事件: 獲得焦點(diǎn), 失去焦點(diǎn), 按鍵抬起

表單提交的事件

? 數(shù)據(jù)交換格式:

? json

? xml

?

什么是JSON

JSON(JavaScript?Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式。它基于ECMAScript的一個(gè)子集。 JSON采用完全獨(dú)立于語(yǔ)言的文本格式，但是也使用了類(lèi)似于C語(yǔ)言家族的習(xí)慣（包括C、C++、C#、Java、JavaScript、Perl、Python等）。這些特性使JSON成為理想的數(shù)據(jù)交換語(yǔ)言。 易于人閱讀和編寫(xiě)，同時(shí)也易于機(jī)器解析和生成(一般用于提升網(wǎng)絡(luò)傳輸速率)。

JSON格式

? JSON對(duì)象

{ key1:value}   
{"username":"zhangsan","password":"123"}

? JSON數(shù)組

[{ key1:value},{ key1:value},{ key1:value}]

?

開(kāi)發(fā)一套響應(yīng)式頁(yè)面.讓他能夠在各種設(shè)備上顯示正常,提升用戶(hù)體驗(yàn)

BootStap概述

什么是BootStrap

?

BootStrap有什么作用

復(fù)制粘貼, 能夠提高開(kāi)發(fā)人員的工作效率

什么是響應(yīng)式頁(yè)面

適應(yīng)不同的分辨率顯示不同樣式,提高用戶(hù)的體驗(yàn)

?

BootStrap的中文網(wǎng)

http://www.bootcss.com

下載BootStrap

BootStrap結(jié)構(gòu)

全局CSS

bootStrap中已經(jīng)定義好了一套CSS的樣式表

組件

BootStrap定義的一套按鈕,導(dǎo)航條等組件

JS插件

BootStrap定義了一套JS的插件,這些插件已經(jīng)默認(rèn)實(shí)現(xiàn)了很多種效果

BootStrap的入門(mén)開(kāi)發(fā)

引入相關(guān)的頭文件

BootStrap的布局容器

.container?類(lèi)用于固定寬度并支持響應(yīng)式布局的容器。

  ...

.container-fluid?類(lèi)用于 100% 寬度，占據(jù)全部視口（viewport）的容器。

  ...

校驗(yàn)表單擴(kuò)展:

trigger : 觸發(fā)瀏覽器默認(rèn)行為

triggerHandler : 不會(huì)觸發(fā)

is : 判斷

find : 查找

老黃歷:

什么json: 輕量級(jí)的數(shù)據(jù)交換格式

json對(duì)象: {"username":"zhangsan"}

json數(shù)組: [ {"username":"zhangsan"}, {"username":"zhangsan"}, {"username":"zhangsan"}]

ajax異步請(qǐng)求:

? 同步和異步

row

?Bootstrap 柵格系統(tǒng)的工作原理：

“行（row）”必須包含在?.container?（固定寬度）或?.container-fluid?（100% 寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding）。

通過(guò)“行（row）”在水平方向創(chuàng)建一組“列（column）”。

你的內(nèi)容應(yīng)當(dāng)放置于“列（column）”內(nèi)，并且，只有“列（column）”可以作為行（row）”的直接子元素。

類(lèi)似?.row?和?.col-xs-4?這種預(yù)定義的類(lèi)，可以用來(lái)快速創(chuàng)建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來(lái)創(chuàng)建語(yǔ)義化的布局。

通過(guò)為“列（column）”設(shè)置?padding?屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過(guò)為?.row?元素設(shè)置負(fù)值?margin?從而抵消掉為?.container?元素設(shè)置的?padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding

?

BootStrap的柵格系統(tǒng)

響應(yīng)式設(shè)計(jì): 這種設(shè)計(jì)依賴(lài)于CSS3中的媒體查詢(xún)

柵格樣式:

設(shè)備分辨率大于1200 使用lg樣式

設(shè)備分辨率大于992 < 1200 使用md樣式

設(shè)備分辨率大于768 < 992 使用sm樣式

設(shè)備分辨率小于768使用xs樣式

BootStrap的全局CSS

定義了一套CSS

對(duì)頁(yè)面中的元素進(jìn)行定義

列表元素,表單,按鈕,圖片...

請(qǐng)使用BootStrap對(duì)我們的首頁(yè)進(jìn)行優(yōu)化

新建一個(gè)HTML頁(yè)面.引入bootStrap相關(guān)的js和CSS
定義一個(gè)整體的div, 將整體的div分成8個(gè)部分
完成沒(méi)部分的內(nèi)容顯示

    
        
        
        
        

        

        
        

        
        

    

    
        


            

                

                    
                
                

                    
                
                

                    登錄
                    注冊(cè)
                    購(gòu)物車(chē)
                
            

            
            

                

                    
                
            

            

                

  
  

    

    

    

  

  
  

    

      
                
            
            
            
            

                
                

                    
                
                    
                

                    
                    

                        
                        

                            
                        
                        
                        
                        

                            
                            
豆?jié){機(jī)
                            
$998
                        
                        
                        

                            
                            
豆?jié){機(jī)
                            
$998
                        
                        
                        

                            
                            
豆?jié){機(jī)
                            
$998
                        
                    
                    
                    

                        
                        

                            
                            
豆?jié){機(jī)
                            
$998
                        
                        
                        

                            
                            
豆?jié){機(jī)
                            
$998
                        
                        
                        

                            
                            
豆?jié){機(jī)
                            
$998
                        
                        
                        

                            
                            
豆?jié){機(jī)
                            
$998
                        
                        
                        

                            
                            
豆?jié){機(jī)
                            
$998
                        
                        
                        

                            
                            
豆?jié){機(jī)
                            
$998
                        
                        
                    
                
            
            
            

                

                    
                
            
            
            
            
            
            
            

                

                    
最新商品
                
            
            
            
            

                
                

                    
                
                    
                

                    
                    

                        
                        

                            
                        
                        
                        
                        

                            
                            
豆?jié){機(jī)
                            
$998
                        
                        
                        

                            
                            
豆?jié){機(jī)
                            
$998
                        
                        
                        

                            
                            
豆?jié){機(jī)
                            
$998
                        
                    
                    
                    

                        
                        

                            
                            
豆?jié){機(jī)
                            
$998
                        
                        
                        

                            
                            
豆?jié){機(jī)
                            
$998
                        
                        
                        

                            
                            
豆?jié){機(jī)
                            
$998
                        
                        
                        

                            
                            
豆?jié){機(jī)
                            
$998
                        
                        
                        

                            
                            
豆?jié){機(jī)
                            
$998
                        
                        
                        

                            
                            
豆?jié){機(jī)
                            
$998
                        
                        
                    
                
            
            
            
            
            

                
            
            
            

                關(guān)于我們    
                    聯(lián)系我們    
                    招賢納士    
                    法律聲明    
                    友情鏈接    
                    支付方式    
                    配送方式    
                    服務(wù)聲明    
                    廣告聲明    
                    

                    Copyright ? 2005-2016 傳智商城 版權(quán)所有
            

        
    

JQ方式校驗(yàn)表單(要求做出來(lái))

json : (了解)

json對(duì)象 {}

json數(shù)組 [{},{}]

$.get(url,function(data){}) (了解)

bootstrap: Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開(kāi)發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。

全局CSS樣式: css樣式

柵格系統(tǒng):

將屏幕劃分成12個(gè)格子,12列

class="row" 當(dāng)前是行

行里面放的是列 col-屏幕分辨率-數(shù)字 (每一種分辨率后的數(shù)字總和必須是等于12,如果超過(guò)12,另起一行)

col-lg-數(shù)字: 在超寬屏幕上使用

col-md-數(shù)字: 在中等屏幕上,PC電腦

col-sm-數(shù)字: 在平板電腦上

col-xs-數(shù)字: 在手機(jī)上

組件: 導(dǎo)航條 , 進(jìn)度條, 字體

javascript插件 : 輪播圖

復(fù)制粘貼

什么是響應(yīng)式: 會(huì)根據(jù)不同的分辨率去顯示不同頁(yè)面結(jié)構(gòu),提高用戶(hù)體驗(yàn)

HTML: 超文本標(biāo)記語(yǔ)言: 設(shè)計(jì)網(wǎng)頁(yè),決定了網(wǎng)頁(yè)的結(jié)構(gòu)

CSS: 層疊樣式表 ,主要是用來(lái)美化頁(yè)面, 將美化和HTML代碼進(jìn)行分離,提高代碼復(fù)用性

javascript: 腳本語(yǔ)言,由瀏覽器解釋執(zhí)行, 弱類(lèi)型語(yǔ)言(var i), 提供用戶(hù)交互

jquery: javascript函數(shù)庫(kù),進(jìn)一步的封裝

選擇器:

ID選擇器

類(lèi)選擇器

元素選擇器

通配符選擇器

選擇器分組

層級(jí)選擇器

后代選擇器

子元素選擇器

相鄰兄弟選擇器

兄弟選擇器 : 找出所有的弟弟

屬性選擇器:

選擇器[屬性名稱(chēng)="屬性的值"]

表單選擇器

:input

:text

:password

body > div > div:nth-child(7) > div:nth-child(3) > div:nth-child(8)

基本的過(guò)濾器

:first

:last

:even

:odd

:gt

:lt

:eq

表單對(duì)象屬性

:selected

:checked