摘要:類用于寬度,占據全部視口的容器。通過行在水平方向創建一組列。通過為列設置屬性,從而創建列與列之間的間隔。
上次課內容:
什么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 : 操作一些自定義的屬性
? 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開發一個響應式的頁面出來 需求分析開發一套響應式頁面.讓他能夠在各種設備上顯示正常,提升用戶體驗
技術分析什么是BootStrap
?
BootStrap有什么作用
復制粘貼, 能夠提高開發人員的工作效率
什么是響應式頁面
適應不同的分辨率顯示不同樣式,提高用戶的體驗
?
BootStrap的中文網
http://www.bootcss.com
下載BootStrap
BootStrap結構
全局CSS
bootStrap中已經定義好了一套CSS的樣式表
組件
BootStrap定義的一套按鈕,導航條等組件
JS插件
BootStrap定義了一套JS的插件,這些插件已經默認實現了很多種效果
引入相關的頭文件
BootStrap的布局容器
.container?類用于固定寬度并支持響應式布局的容器。
...
.container-fluid?類用于 100% 寬度,占據全部視口(viewport)的容器。
...
校驗表單擴展:
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對我們的首頁進行優化
技術分析 步驟分析代碼實現新建一個HTML頁面.引入bootStrap相關的js和CSS
定義一個整體的div, 將整體的div分成8個部分
完成沒部分的內容顯示
五天前端內容總結
豆漿機
$998
豆漿機
$998
豆漿機
$998
豆漿機
$998
豆漿機
$998
豆漿機
$998
豆漿機
$998
豆漿機
$998
豆漿機
$998
最新商品
豆漿機
$998
豆漿機
$998
豆漿機
$998
豆漿機
$998
豆漿機
$998
豆漿機
$998
豆漿機
$998
豆漿機
$998
豆漿機
$998
JQ方式校驗表單(要求做出來)
json : (了解)
json對象 {}
json數組 [{},{}]
$.get(url,function(data){}) (了解)
bootstrap: Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架,用于開發響應式布局、移動設備優先的 WEB 項目。
全局CSS樣式: css樣式
柵格系統:
將屏幕劃分成12個格子,12列
class="row" 當前是行
行里面放的是列 col-屏幕分辨率-數字 (每一種分辨率后的數字總和必須是等于12,如果超過12,另起一行)
col-lg-數字: 在超寬屏幕上使用
col-md-數字: 在中等屏幕上,PC電腦
col-sm-數字: 在平板電腦上
col-xs-數字: 在手機上
組件: 導航條 , 進度條, 字體
javascript插件 : 輪播圖
復制粘貼
什么是響應式: 會根據不同的分辨率去顯示不同頁面結構,提高用戶體驗
HTML: 超文本標記語言: 設計網頁,決定了網頁的結構
CSS: 層疊樣式表 ,主要是用來美化頁面, 將美化和HTML代碼進行分離,提高代碼復用性
javascript: 腳本語言,由瀏覽器解釋執行, 弱類型語言(var i), 提供用戶交互
jquery: javascript函數庫,進一步的封裝
選擇器:
ID選擇器
類選擇器
元素選擇器
通配符選擇器
選擇器分組
層級選擇器
后代選擇器
子元素選擇器
相鄰兄弟選擇器
兄弟選擇器 : 找出所有的弟弟
屬性選擇器:
選擇器[屬性名稱="屬性的值"]
表單選擇器
:input
:text
:password
body > div > div:nth-child(7) > div:nth-child(3) > div:nth-child(8)
基本的過濾器
:first
:last
:even
:odd
:gt
:lt
:eq
表單對象屬性
:selected
:checked
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98770.html
相關文章
JavaWEB開發05_Bootstrap
摘要:類用于寬度,占據全部視口的容器。通過行在水平方向創建一組列。通過為列設置屬性,從而創建列與列之間的間隔。 上次課內容:什么JQ : write less do more 寫更少的代碼,做更多的事情 javascript函數庫 基本選擇器: ? ID選擇器: #ID名稱 ? 類選擇器: .類名 ? 元素選擇器: 元素的名稱 ? 通配符選擇器: * 找出頁面上...
JavaWEB開發05_Bootstrap
摘要:類用于寬度,占據全部視口的容器。通過行在水平方向創建一組列。通過為列設置屬性,從而創建列與列之間的間隔。 上次課內容:什么JQ : write less do more 寫更少的代碼,做更多的事情 javascript函數庫 基本選擇器: ? ID選擇器: #ID名稱 ? 類選擇器: .類名 ? 元素選擇器: 元素的名稱 ? 通配符選擇器: * 找出頁面上...
debian(Linux)搭建環境跑javaweb應用
摘要:搭建環境,配置包卸載自帶的卸載但不刪除配置卸載并且刪除相關配置將拷貝到目錄下面,這里如果沒有文件夾,則創建該文件夾命令創建文件夾把下載的文件拷貝到心創建的目錄下面解壓縮文件設置環境變量,用打開文件在文件的最后面增加 1.搭建JAVA環境,配置jdk包 1、卸載debian ubuntu 自帶的openjdk #apt-get remove openjdk* 卸載但不刪除配置 #ap...
發表評論
0條評論
閱讀 472·2023-04-25 17:26
閱讀 1495·2021-08-05 09:58
閱讀 1959·2019-08-30 13:17
閱讀 943·2019-08-28 17:52
閱讀 1061·2019-08-26 18:27
閱讀 1413·2019-08-26 14:05
閱讀 3608·2019-08-26 14:05
閱讀 1586·2019-08-26 10:45