內(nèi)容回顧
-
jQuery的書寫步驟
- 引入JQ的包（xxx.js）
- 書寫JQ代碼
$(function(){ JQ代碼 })
-
JS與JQ的相互轉(zhuǎn)換
- 將JS轉(zhuǎn)換成JQ對象
$(js對象) - 將JQ對象轉(zhuǎn)換成JS對象
JQ對象.get(0)/JQ對象[0]
- 將JS轉(zhuǎn)換成JQ對象
-
==JQ選擇器==
- ==基本選擇器==
- ID選擇器
$(“#ID”) - CLASS選擇器
$(“.class”) - 元素選擇器
$(“元素名稱”) - 通配符選擇器
$(“*”) - 并列選擇器
$(“selector1,selector2……”)
- ID選擇器
- ==層級選擇器==
- 兄弟選擇器
$(“selector + selector”)選擇同輩的下一個元素 - 選擇同輩中往后所有的元素：
$(“selector ~ selector”) - 子元素選擇器：
$(父選擇器 > 子選擇器) - 后代選擇器：
$(父選擇器 子選擇器)
- 兄弟選擇器
- 基本過濾選擇器
-
：first選擇第一個 -
：last選擇最后一個 -
：eq(index)選擇下標(biāo)為index的元素 -
：odd/:even注意：下標(biāo)從0開始
-
- 屬性選擇器
$(“input[屬性名=’屬性值’]”) - 表單選擇器(了解)
：input
:text/:password/:radio/:checkbox……
- ==基本選擇器==
JQ對文檔的操作(DOM的crud)
JQ.append()追加元素
JQ.appendTo(父元素)將元素追加到父元素
JQ.remove()刪除元素-
元素循環(huán)遍歷
// 方式一 $.each(數(shù)組,function(i,n){ i表示下標(biāo) n表示數(shù)組元素 }); // 方式二 $(數(shù)組).each(function(i,n){ i表示下標(biāo) n表示數(shù)組元素 });
今日重點：
- Jquery查找和事件處理
- Bootstrap引入（4個文件，1個設(shè)置）
- Bootstrap的容器（.container）
- Bootstrap的柵格系統(tǒng)
01- 案例五：使用JQ完成下拉列表左右選擇：需求和頁面設(shè)計
下拉列表顯示多個選項：<select multiple="multiple">
02- 案例五：使用JQ完成下拉列表左右選擇：傳統(tǒng)方式代碼實現(xiàn)
- 綁定監(jiān)聽事件 onclick
document.getElementById("addRight").onclick = function(){} - 獲得左側(cè)選中的選項并添加到右側(cè)
for(var i = selectLeft.options.length - 1;i>=0;i--){
// 判斷該元素是否被選中
if(selectLeft.options[i].selected == true){
//添加到右側(cè)
document.getElementById("selectRight").appendChild(selectLeft.options[i]);
}
}
- 全部選中則for循環(huán)當(dāng)中不需要判斷是否選中
// 遍歷左側(cè)列表中的所有的option元素.
for(var i = selectLeft.options.length - 1;i>=0;i--){
document.getElementById("selectRight").appendChild(selectLeft.options[i]);
}
03- 案例五：使用JQ完成下拉列表左右選擇：JQ方式實現(xiàn)
- JQ中強大的選擇器
// 添加左側(cè)選中的元素到右側(cè)
$("#addRight").click(function(){
// 獲得左側(cè)被選中的option元素:
$("#selectLeft option:selected").appendTo("#selectRight");
});
- 應(yīng)用到的選擇器：
ID選擇器：#selectLeft
后代選擇器：#selectLeft option
表單對象屬性選擇器：：selected選擇被選中的標(biāo)簽 - 應(yīng)用到的文檔操作：
JQ對象.appendTo(“”)，追加到某個標(biāo)簽當(dāng)中
$("#selectRight").dblclick(function(){
//選中當(dāng)前標(biāo)簽中被選中的option標(biāo)簽
$("option:selected",this).appendTo("#selectLeft");
});
04- 案例五：使用JQ完成下拉列表左右選擇：JQ的事件切換
$(document).ready(function(){….})功能類似與$(function(){…..});
- 事件切換函數(shù)
toggle()點擊時切換函數(shù)(1.9版本 .toggle() 方法刪除)
hover()鼠標(biāo)懸停的切換
05- 案例一：使用JQ完成表單校驗：需求和JQ的查找及事件處理
- JQ查找
find();
parent(); - JQ事件處理
trigger這個函數(shù)也會導(dǎo)致瀏覽器同名的默認(rèn)行為的執(zhí)行
triggerHandler- 第一，他不會觸發(fā)瀏覽器默認(rèn)事件。
- 第二，只觸發(fā)jQuery自定義的事件處理函數(shù)。
06- 案例一：使用JQ完成表單校驗：步驟分析
- 給所有的輸入框添加blur事件
- 根據(jù)不同輸入校驗不同內(nèi)容
- 內(nèi)容錯誤不能提交
07- 案例一：使用JQ完成表單校驗：準(zhǔn)備工作
JQ函數(shù)：
find(選擇器) 查找匹配的元素
parent() 獲得父元素
is(選擇器) 判斷是否為某個元素
trigger()/triggerHandler() 事件處理
08- 案例一：使用JQ完成表單校驗：代碼實現(xiàn)
- 步驟一：為必填項添加一個 *.
$("form input.required").each(function(){} - 步驟二：獲得所有的輸入項,為輸入項添加一個blur事件.
$("form input").blur(function(){} - 確定點擊的輸入項是誰?
if($(this).is("#username")){} - 為表單添加一個submit事件.
$("form").submit(function(){
// 執(zhí)行表單中blur事件.
$("form :input").trigger("blur");
// 獲得錯誤信息的長度.
var errorLength = $(".onError").length;
if(errorLength > 0){
return false;
}
});
09- 案例二：使用BootStrap實現(xiàn)一個響應(yīng)式頁面：需求及BootStrap的概述
- 什么是BootStrap
前端框架，基于HTML,CSS,JavaScript實現(xiàn) - BootStrap作用
設(shè)計一套頁面能夠通用在不同的設(shè)備上,在手機,pad上,電腦上都可以瀏覽這個網(wǎng)頁,而不影響正常顯示.（響應(yīng)式頁面） - 什么是響應(yīng)式？
設(shè)計一個頁面，能夠適應(yīng)在不同的尺寸的設(shè)備上還能夠顯示
10- 案例二：使用BootStrap實現(xiàn)一個響應(yīng)式頁面：BootStrap的準(zhǔn)備工作
- 導(dǎo)入BootStrap目錄（3個）
CSS目錄
fonts目錄
js目錄 - HTML中引入BootStrap的樣式與JS代碼（4個文件，1個設(shè)置）
<!—應(yīng)用于移動的：根據(jù)設(shè)備寬度，調(diào)整顯示縮放比例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實現(xiàn)一個響應(yīng)式頁面：BootStrap的全局CSS的容器和柵格
- 布局容器
class="container"
class="container-fluid" - 柵格系統(tǒng)
Bootstrap 提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)
總共分為12列
使用.row樣式定義柵格的行.
定義列：.col-lg-n.col-md-n.col-sm-n.col-xs-n - 柵格流程：
- 定義容器
.container - 定義行
.row - 定義模塊 （計算每一個模塊占用的列數(shù)，總共12列）
- 實現(xiàn)響應(yīng)式布局，設(shè)置
定義列：.col-lg-n超大屏幕.col-md-n中型
.col-sm-n小型屏幕（平板）.col-xs-n超小型（手機）
- 定義容器
12- 案例二：使用BootStrap實現(xiàn)一個響應(yīng)式頁面：BootStrap的柵格的案例
今日總結(jié)：
==JQ的事件切換==
JQ.hover(function1,function2)鼠標(biāo)移入移出執(zhí)行不同的操作
了解toggle(function1,function2)點擊隱藏和顯示 1.9版本后刪除==JQ的查找和事件處理==
jQuery查找
JQ.find(選擇器)選擇匹配的元素
JQ.parent()獲得元素的父元素
JQ.is(選擇器)表示判斷元素是否相等
jQuery事件處理
on("click",fun())綁定事件到j(luò)Query對象中的元素
bind("事件",fun())可綁定多個事件到j(luò)Query對象
trigger("事件",fun())綁定事件會觸發(fā)瀏覽器默認(rèn)事件
triggerHandler("事件",fun())綁定事件不會觸發(fā)瀏覽器默認(rèn)事件BootStrap 概述
是一個前端的框架，能夠?qū)崿F(xiàn)響應(yīng)式頁面設(shè)計引入BootStrap （4個文件，1個設(shè)置）
兩個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樣式
通過設(shè)置全局 CSS 樣式；基本的 HTML 元素均可以通過 class 設(shè)置樣式并得到增強效果；還有先進的柵格系統(tǒng)。- 柵格系統(tǒng)
- 排版
- 表格
- 表單
- 按鈕
- 圖片
- ...
-
實現(xiàn)柵格系統(tǒng)布局
- 定義容器
<div class=”container”> - 在容器中實現(xiàn)行
<div class=”row” > - 在每一行中劃分列 總共分為12列
col-lg-n大分辨率
col-md-n中型分辨率（PC）
col-sm-n小型分辨率（平板）
col-xs-n超小型（手機）
- 定義容器
JS與jQuery總結(jié)
-
JS與JQ程序的入口
一般JS是通過事件觸發(fā)函數(shù)/window.onload()$(function(){ })事件總結(jié):
onload頁面加載
onclick點擊
ondblclick雙擊
onsubmit表單提交 ，接受返回值
onchange下拉列表改變
onmouseover鼠標(biāo)移入
onmouseout鼠標(biāo)移出
onmousemove鼠標(biāo)移動
onfocus獲得焦點
onblur失去焦點 操作CSS樣式
JQ：JQ.css(,)/JQ.addClass(“”)/JQ.removeClass()
JS:JS.style.樣式屬性 = “”；操作標(biāo)簽的內(nèi)容
JQ:JQ.html(“”)
JS:JS.innerHTML = “”;操作標(biāo)簽的屬性
JQ：JQ.prop(“屬性名稱”，“屬性值”)；
JS：JS.屬性名 = 屬性值-
操作DOM（CRUD）
查找元素
JQ：選擇器（基本選擇器5個，層級選擇器4，屬性選擇器，內(nèi)容過濾選擇器）
JS：document.getElementById()/document.getElementsByName()/….byTagName()創(chuàng)建元素
JQ：JQ.append(“標(biāo)簽元素”)
JS：document.createElemant(“”)/document.createTextNode(“”)刪除元素
JQ：選擇器.remove()刪除選中的元素
JS：父元素.removeChild(子元素)添加元素
JQ：append()/appendTo()/insertBefore()
JS:appendChild(子元素) 事件綁定
JS：
一種在標(biāo)簽中定義事件監(jiān)聽屬性
JS.onxx = function(){}
JQ:
JQ.事件$(“div”).click(function(){});
JQ.bind(事件名稱,function(){})循環(huán)遍歷
JS：for循環(huán)
JQ：$.each(數(shù)組,function…)/$(數(shù)組).each(function…..)JS與JQ的切換
js轉(zhuǎn)換成JQ：$(JS對象)
JQ轉(zhuǎn)換成JS：$(“”).get(0)/$(“”)[0]顯示與隱藏
JS: 直接操作CSS.style.display = “none”/”block”
JQ: 使用函數(shù)show()/hide() slideDown()/sideUp() fadeIn()/fadeOut()
